@extends('layout.admin.master-layout')
@section('additional-css')
    <link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.css" type='text/css'
          rel="stylesheet">
    <style>
        fieldset.scheduler-border {
            border: 1px groove #ddd !important;
            padding: 1.4em !important;
            margin: 0 0 1.5em 0 !important;
            -webkit-box-shadow: 0px 0px 0px 0px #000;
            box-shadow: 0px 0px 0px 0px #000;
        }

        legend.scheduler-border {
            font-size: 1.2em !important;
            font-weight: bold !important;
            text-align: left !important;
            width: auto;
            padding: 0 10px;
            border-bottom: none;
        }

        .menu-list-img-col {
            position: relative;
            aspect-ratio: 1;
            width: 100%;
            overflow: hidden;
        }


        .menu-list-img-col a.anchor-col i {
            color: #fff;
            font-size: 14px;
        }


        .menu-list-img-col .modal-dialog p {
            color: #c5161d;
            font-size: 0.875rem;
            text-transform: uppercase;
            margin-bottom: 30px;
        }

        .menu-list-img-col a figure img {
            width: 100%;
        }

        /* rm old */
        /*new */

        .delete-mass {
            opacity: 0;
            pointer-events: none;
        }

        .hidden-btn {
            display: flex;
            opacity: 1;
            pointer-events: auto;
        }

        .menu-list-img-col {
            background-color: var(--c-lvl-1);
            margin-botto: 1rem;
            border: 1px solid var(--c-lvl-3);
        }

        .menu-list-img-col a {
            height: 100%;
            width: 100%;
            display: block;
        }

        .menu-list-img-col img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border: 1px solid #efefef;
        }

        .aside-dv {
            position: relative;
        }

        .top-right {
            position: absolute;
            top: 0;
            right: 0;
            width: fit-content !important;
            padding: 0 !important;
        }

        .top-right .check--mark {
            background-color: white;
            border: 1px solid var(--accent-color);
            width: 1.5rem;
        }

        fieldset.scheduler-border {
            border-color: transparent !important;
            border-radius: var(--main-border-radius);
            background-color: var(--c-lvl-1);
        }
        .select-image{
            height: 20px;
            width: 20px;
        }
    </style>
@endsection
@section('main-content')
    <main>
        <div class="pc-container">
            @include('layout.admin.include.loader')
            <div class="pc-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
                                    <li class="breadcrumb-item" aria-current="page">Image gallery of {{ @$galleryImage->title }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <form action="{{ route('admin.storeProjectGallery',$galleryImage->id) }}"
                                      method="post" class="dropzone form-group" id="myDropzone"
                                      enctype="multipart/form-data">
                                    @csrf
                                    <input type="hidden" name="project_id" value="{{ $galleryImage->id }}"/>
                                    <div class="fallback">
                                        <input type="file" name="gallery_image" multiple/>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="card-footer text-end btn-page">
                            <a href="{{ route('admin.ourProject') }}" class="btn btn-outline-secondary">Cancel</a>
                            <button type="button" class="btn btn-primary" id="start-upload">Save</button>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                @if(count($galleryImage->projectGallery) > 0)

                                    <div class="aside-dv fl-row gap-1 al-center jc-start py-sm">
                                        <div class="form-group">
                                            <label for="check2" class="check--label">
                                                <input type="checkbox" class="check--control select-all">
                                                <span class="check--mark"></span>
                                                Select All
                                            </label>
                                        </div>

                                        <button type="button" data-bs-toggle="modal" class="btn btn-outline-danger delete-mass get-remove-id" data-bs-target="#confirmationModal">Delete</button>
                                    </div>
                                @endif
                                <fieldset class="scheduler-border">
                                    <div class="row" style="row-gap:1rem;" id="app">
                                        @foreach($galleryImage->projectGallery as $photo)
                                            <div class="col-lg-2 col-sm-3 col-xs-6">
                                                <div class="menu-list-img-col ">
                                                    <a href="{{ asset('assets/uploads/gallery_image/'.$photo->gallery_image) }}"
                                                       data-fancybox="{{ $photo->project_id  }}">
                                                        <img class="thumbnail"
                                                             src="{{ asset('assets/uploads/gallery_image/'.$photo->gallery_image) }}">
                                                    </a>
                                                    <div class="form-group top-right">
                                                        <label for="check2" class="check--label">
                                                            <input type="checkbox" class="check--control select-image"
                                                                   value="{{ encrypt($photo->id)  }}"
                                                                   name="id[]">
                                                            <span class="check--mark"></span>

                                                            <input type="hidden" class="check-abs"
                                                                   value="{{ $photo->project_id  }}"
                                                                   name="project_id">
                                                        </label>
                                                    </div>

                                                    <!-- Modal -->
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="mb-0">Delete</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" >
                    Are you sure you want to delete this?
                </div>
                <div class="modal-footer">
                    <button type="button"  class="btn btn-link-danger btn-pc-default" data-bs-dismiss="modal">Cancel</button>
                    <button type="button"  class="btn btn-primary delete-btn">Delete</button>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('additional-js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/min/dropzone.min.js"></script>

    <script>
        $(".select-all").on("change", function () {
            const isChecked = $(this).is(":checked");
            $(".select-image").prop("checked", isChecked);
            toggleDeleteButton();
        });

        $(document).on("change", ".select-image", function () {
            toggleDeleteButton();
        });

        function toggleDeleteButton() {
            const hasChecked = $(".select-image:checked").length > 0;
            if (hasChecked) {
                $(".delete-mass").addClass("hidden-btn");
            } else {
                $(".delete-mass").removeClass("hidden-btn");
            }
        }

        // Dropzone config
        Dropzone.options.myDropzone = {
            autoProcessQueue: false,
            uploadMultiple: true,
            parallelUploads: 10,
            maxFiles: 10,
            addRemoveLinks: true,
            timeout: 600000,
            maxFileSize: 50, // MB
            acceptedFiles: ".jpeg,.jpg,.png,.gif",

            init: function () {
                let myDropzone = this;
                let submitButton = document.querySelector("#start-upload");

                submitButton.addEventListener("click", function () {
                    if (myDropzone.files.length > 0) {
                        $('.modal-spinner').show();
                        myDropzone.processQueue();
                    }
                });

                myDropzone.on('queuecomplete', function () {
                    $('.modal-spinner').hide();
                });

                myDropzone.on('successmultiple', function (files, response) {
                    if (response.status) {
                        window.location.href = response.redirectUrl;
                    } else {
                        $('.modal-spinner').hide();
                        alert("Upload failed. Please try again.");
                    }
                });

                myDropzone.on('error', function (file, errorMessage) {
                    console.error("Upload failed for file: " + file.name, errorMessage);
                    $('.modal-spinner').hide(); // Hide spinner on error
                });

                myDropzone.on('progressmultiple', function (progress) {
                    // Optionally update progress bar here if you have one
                    console.log("Progress: " + progress);
                });
            }
        };

        // Delete gallery images
        let selectedImage = [];
        $(document).on("click", ".get-remove-id", function () {
            $(".select-image:checked").each(function () {
                selectedImage.push($(this).val());
            });
        });


        $('.delete-btn').on('click', function () {
            if (selectedImage.length === 0) return;
            $('.modal-spinner').show();
            $.ajax({
                url: basePath + 'admin/project-gallerys/delete',
                type: 'POST',
                _token: '{{ csrf_token() }}',
                data: {
                    table_id: selectedImage
                },
                success: function (data) {
                    if (data.status) {
                        $('#confirmationModal').modal('hide');
                        setTimeout(function (){
                            $('.modal-spinner').hide();
                            location.reload()
                        }, 1000)
                    } else {
                    }
                },
                error: function () {
                    $('.modal-spinner').hide();
                }
            });
        });
    </script>
@endsection