@extends('backend.layouts.app')
@section('title', $title)
@section('content')
@foreach ($packages as $key => $packag)
<x-danger-modal :id="$packag->slug" header="Danger" message="Are you sure deleted it?!" link="{{ route('admin.packages.destroy', $packag->slug) }}" />
@endforeach


@include('backend.packages.partials.upload-images-modal')

<div class="row">
    <div class="col">
        <div class="card overflow-scroll">
            <form action="{{ route('admin.packages.bulk-delete') }}" method="get" id="bulkForm">
                <div class="card-body">
                    <div class="pb-4">
                        <div class="card-widgets">
                            <a href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="animated-preview"><i class="ri-more-2-fill fs-3"></i></a>
                            <div class="dropdown btn-group">
                                <div class="dropdown-menu dropdown-menu-animated">
                                    <a class="dropdown-item" href="#" onclick="document.querySelector('#bulkForm').submit();">
                                        <i class="ri-delete-bin-line text-danger"></i>
                                        <span class="text-danger">Bulk Delete</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <h5 class="header-title mb-0">
                            {{ $title }}
                        </h5>
                    </div>
                    <div id="yearly-sales-collapse" class="collapse show">
                        <div class="">
                            <table class="table table-nowrap table-hover mb-0" id="packages-table">
                                <thead>
                                    <tr>
                                        <th>
                                            <div class="d-flex align-items-center gap-2 form-checkbox-success">
                                                <input type="checkbox" class="form-check-input check-all" id="productIds">
                                                <label class="form-check-label" for="productIds">ID</label>
                                            </div>
                                        </th>
                                        <th>Prices</th>
                                        <th>Quantity</th>
                                        <th>Published</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </form>
        </div> <!-- end card-->
    </div>
</div>
@endsection


@section('script')
<script type="text/javascript">
    $(function() {

        var table = $('#packages-table').DataTable({
            processing: true
            , serverSide: true
            , ajax: "{{ route('admin.packages.index') }}"
            , columns: [{
                    data: 'id'
                    , name: 'id'
                    , orderable: false
                }
                , {
                    data: 'prices'
                    , name: 'prices'
                }
                , {
                    data: 'quantity'
                    , name: 'quantity'
                }
                , {
                    data: 'published'
                    , name: 'published'
                    , searcheable: false
                }
                , {
                    data: 'action'
                    , name: 'action'
                    , orderable: false
                    , searcheable: false
                }
            , ]
            , order: []
        });

    });

</script>



<script>
    function changePackagePublished(package) {
    $.get(`{{ url()->to('/') }}/admin/packages/change-published/${package.slug}`, )
        .done(function(response) {
            successNotification(`${response.message}`)
            console.log(response);
        })
        .fail(function(xhr, status, error) {
            errorNotification(error);
        });
}


</script>


<script>
    function openUploadImages(package) {
        // var form = document.getElementById("uploadImagesForVariationForm");
        // form.setAttribute("action", `{{ url()->to('/') }}/admin/variations/upload-images/${variation.id}`);
        $("#packageUploadImagesModal").modal('show');
        getPackageMedia(package);
        const inputElement = document.querySelector('#image');

        const pond = FilePond.create(inputElement, {
            name: 'image'
            , labelIdle: `Drag & Drop Pictures of this package or <span class="filepond--label-action">Browse</span>`
            , imagePreviewHeight: 170
            , imageCropAspectRatio: '1:1'
            , required: true
            , allowMultiple: true
            , allowReplace: true
            , checkValidity: true
        , });



        FilePond.setOptions({
            server: {
                process: `{{ url()->to('/') }}/admin/packages/upload-images/${package.slug}`
                , revert: `{{ url()->to('/') }}/admin/packages/revert-image/${package.slug}`
                , headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                , }
            , }
        , });
    }


    function getPackageMedia(package) {
        $.get(`{{ url()->to('/') }}/admin/packages/get-media/${package.slug}`)
            .done(function(response) {
                $("#media-content").html(response.html_content)
            })
            .fail(function(xhr, error) {
                errorNotification(error);
            });
    }

    // after close modal re add loading
    var myModalEl = document.getElementById('packageUploadImagesModal')
    myModalEl.addEventListener('hidden.bs.modal', function(event) {
        $("#media-content").html("<div class='spinner-grow text-success m-2' role='status'></div>")
    });

    function removeMediaFromPackage(element, mediaId) {
        if (confirm('Are you sure remove this picture?!')) {
            element.disabled = true;
            $.ajax({
                url: "{{ route('admin.packages.remove-media') }}"
                , type: 'DELETE'
                , headers: {
                    'X-CSRF-TOKEN': "{{ csrf_token() }}"
                }
                , data: {
                    'media_id': mediaId,
                }
                , success: function(response) {
                    element.parentNode.remove();
                    successNotification(response.message);
                }
                , error: function(xhr, error) {
                    errorNotification(xhr);
                }
            });
        }
    }

</script>
@endsection