@extends('admin.layout.dashboard-template')
@section('content')
<div class="page-wrapper">
    <div class="content">

        <div class="page-header">
            <div class="row">
                <div class="col-sm-12">
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">Home</a></li>
                        <li class="breadcrumb-item"><i class="feather-chevron-right"></i></li>
                        <li class="breadcrumb-item active">Packages</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="card card-table show-entire">
                    <div class="card-body">

                        <div class="page-table-header mb-2">
                            <div class="row align-items-center">
                                <div class="col">
                                    <div class="doctor-table-blk">
                                        <h3>Package</h3>
                                        <div class="doctor-search-blk">
                                            <div class="top-nav-search table-search-blk">
                                                <!-- <form>
                                                    <input type="text" class="typeahead form-control" id="search" placeholder="Search here">
                                                    <a class="btn"><img src="assets/img/icons/search-normal.svg" alt=""></a>
                                                </form> -->
                                            </div>
                                            <div class="add-group">
                                                <a href="{{route('admin.add-package')}}" class="btn btn-primary add-pluss ms-2"><img src="assets/img/icons/plus.svg" alt=""></a>
                                                <!-- <a href="javascript:;" class="btn btn-primary doctor-refresh ms-2"><img src="assets/img/icons/re-fresh.svg" alt=""></a> -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                @if(count($data)>0)
                <div class="card card-table show-entire">
                    <div class="card-header">
                        <h3>Packages</h3>
                    </div>
                    <div class="card-body">
                        <div class="page-table-header mb-2">
                            <div class="row align-items-center">
                                <div class="col">

                                    <div class="row">

                                        @foreach($data as $item)

                                        <div class="col-sm-6 col-md-6 col-xl-4" id="package{{$item->id}}">
                                            <div class="blog grid-blog">
                                                <div class="blog-image">
                                                    <a href="{{route('admin.view-packages', ['slug' => $item->slug])}}"><img class="img-fluid" src="{{asset('assets/uploads/package/'.$item->image)}}" alt=""></a>
                                                    <div class="blog-views">
                                                        <h5><i class="fa-solid fa-inr m-r-5"></i>{{$item->discount}}%</h5>
                                                    </div>
                                                    <ul class="nav view-blog-list blog-views">
                                                        <li> <a class="dropdown-item" href="{{route('admin.edit-packages', ['slug' => $item->slug])}}"><i class="fa-solid fa-pen-to-square m-r-5"></i>Edit</a></li>

                                                    </ul>
                                                </div>


                                                <div class="blog-content">
                                                    <div class="blog-grp-blk">
                                                        <div class="blog-img-blk">
                                                            <span><i class="feather-clock me-1"></i>{{$item->duration}}</span>
                                                        </div>

                                                        <span><i class="feather-video me-1"></i>{{$item->no_of_sessions}}</span>
                                                    </div>
                                                    <h3 class="blog-title"><a href="{{route('admin.view-packages', ['slug' => $item->slug])}}">{{$item->title}}</a></h3>

                                                    <p>
                                                        {{ Str::limit((strip_tags($item->description)), 100, '...') }}
                                                    </p>
                                                    <div class="row">
                                                        <div class=" col-12 col-md-6 col-xl-6">
                                                            <a href="{{route('admin.view-packages', ['slug' => $item->slug])}}" class="read-more d-flex"> Read more<i class="fa fa-long-arrow-right ms-2"></i></a>
                                                        </div>
                                                        <div class="col-12 col-md-6 col-xl-6 right-action">
                                                            <a href="javascript:void(0);" data-id="{{$item->id }}" id="getDeleteId" class="text-muted" data-bs-toggle="modal" data-bs-target="#delete_package" class="status-gray "><i class="fa-solid fa-trash m-r-5"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach

                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                @endif
            </div>
        </div>
    </div>

    <div id="delete_package" class="modal fade delete-modal" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center">
                    <img src="assets/img/sent.png" alt width="50" height="46">
                    <h3>Are you sure want to delete this ?</h3>
                    <div class="m-t-20"> <a href="#" class="btn btn-white" data-bs-dismiss="modal">Close</a>
                        <button type="submit" class="btn btn-danger" id="delete_item">Delete</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var deleteID;
        $('body').on('click', '#getDeleteId', function() {
            deleteID = $(this).data('id');
        })
        $(document).on('click', '#delete_item', function(e) {
            var id = deleteID;
            e.preventDefault();
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                url: "{{ route('admin.delete-package') }}",
                method: "GET",
                data: {
                    'id': id
                },
                success: function(result) {
                    $('#delete_package').modal('hide');
                    $('#package' + id).remove();
                    $(this).data('id');
                    if (result == 1) {
                        toastr.success("Package Deleted Successfully.");
                    } else {
                        toastr.error("Something went wrong.");
                    }

                }
            });

        });
    </script>
    @endsection