@extends('admin.layout')

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

    <style>
        /* ==========================================================
                                                                       GENERAL
                                                                    ========================================================== */

        .dt-search {
            display: none !important;
        }

        .card {
            border: none;
            border-radius: 12px;
            box-shadow: 0 2px 14px rgba(30, 41, 59, 0.04);
        }

        .form-control,
        .form-select {
            border-radius: 8px;
        }


        /* ==========================================================
                                                                       BRAND BUTTON
                                                                    ========================================================== */

        .btn-brand-primary {
            background-color: #D34821 !important;
            color: #fff !important;
            border: none;
            border-radius: 8px;
        }

        .btn-brand-primary:hover {
            background-color: #b83d1b !important;
            color: #fff !important;
        }


        /* ==========================================================
                                                                       ADD IMAGE FORM
                                                                    ========================================================== */

        .add-gallery-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .add-gallery-card {
            width: 100%;
            max-width: 750px;
            border-radius: 14px;
            padding: 32px !important;
            box-shadow: 0 4px 20px rgba(30, 41, 59, 0.08);
        }

        .add-gallery-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 25px !important;
        }

        .add-gallery-card .form-label {
            margin-bottom: 10px;
            font-size: 14px;
        }

        .add-gallery-card .form-control {
            /* min-height: 50px; */
            font-size: 14px;
            border-radius: 8px;
        }

        .add-gallery-button {
            min-width: 170px;
            padding: 11px 30px;
            font-size: 14px;
            border-radius: 8px;
        }


        /* ==========================================================
                                                                       SELECTED IMAGE PREVIEW
                                                                    ========================================================== */

        .upload-preview-wrapper {
            display: none;
            margin-top: 15px;
            text-align: center;
        }

        .upload-preview-image {
            width: 90px;
            height: 90px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #ddd;
            padding: 3px;
            background: #fff;
        }


        /* ==========================================================
                                                                       TABLE
                                                                    ========================================================== */

        #galleryTable th,
        #galleryTable td {
            vertical-align: middle;
        }

        #galleryTable th {
            white-space: nowrap;
        }


        /* ==========================================================
                                                                       GALLERY IMAGE
                                                                    ========================================================== */

        .gallery-image {
            width: 55px;
            height: 55px;
            object-fit: cover;
            border-radius: 7px;
            cursor: pointer;
            border: 1px solid #e5e7eb;
            padding: 2px;
            background: #fff;
            transition: 0.2s ease;
        }

        .gallery-image:hover {
            transform: scale(1.05);
        }


        /* ==========================================================
                                                                       IMAGE PREVIEW MODAL
                                                                    ========================================================== */

        .image-preview {
            max-width: 100%;
            max-height: 500px;
            object-fit: contain;
            border-radius: 10px;
        }


        /* ==========================================================
                                                                       DELETE BUTTON
                                                                    ========================================================== */

        .delete-gallery-btn {
            border: none;
            width: 34px;
            height: 34px;
            border-radius: 7px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }


        /* ==========================================================
                                                                       MOBILE
                                                                    ========================================================== */

        @media (max-width: 767px) {

            .add-gallery-card {
                max-width: 100%;
                padding: 22px !important;
            }

            .add-gallery-button {
                width: 100%;
            }

        }

        /* ==========================================================
                                                       MOBILE CAMERA
                                                    ========================================================== */

        #galleryCameraOverlay {
            overflow: hidden;
        }

        #galleryCameraVideo {
            background: #000;
        }

        #galleryCameraSwitch {
            border: none;
        }

        @media (min-width: 768px) {

            #galleryCameraOverlay {
                display: none !important;
            }

        }
    </style>

    @include('admin.layout.toast')


    {{-- ==========================================================
    PAGE HEADER
    =========================================================== --}}

    <div class="row align-items-center justify-content-between mb-3 mt-3">

        <div class="col-auto">

            <h5>

                <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">

                    <a href="{{ route('gallery_list') }}">

                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">

                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />

                            <path d="M15 6l-6 6l6 6" />

                        </svg>

                    </a>

                </button>

                Gallery

            </h5>

        </div>

    </div>


    {{-- ==========================================================
    ADD IMAGE FORM
    =========================================================== --}}

    <div class="add-gallery-wrapper">

        <div class="card add-gallery-card mb-4">

            <h6 class="add-gallery-title text-center">
                Add New Image
            </h6>


            <form action="{{ route('gallery_store') }}" method="POST" enctype="multipart/form-data" id="addGalleryForm">

                @csrf


                {{-- IMAGE --}}

                {{-- MOBILE ONLY --}}
                <div class="d-grid gap-2 d-md-none">

                    <button type="button" id="captureGalleryBtn" class="btn btn-brand-primary">
                        <i class="fas fa-camera me-1"></i>
                        Capture Photo
                    </button>

                    <label for="galleryImageInput" class="btn btn-outline-secondary mb-0">
                        <i class="fas fa-images me-1"></i>
                        Choose from Gallery
                    </label>

                    <input type="file" id="galleryImageInput" accept="image/jpeg,image/png,image/jpg,image/webp" hidden>

                </div>


                {{-- DESKTOP ONLY --}}
                <div class="d-none d-md-block">

                    <input type="file" name="image" id="image" class="form-control" accept=".jpg,.jpeg,.png,.webp">

                </div>

                {{-- ==========================================================
SELECTED IMAGE PREVIEW
========================================================== --}}

                <div id="uploadImagePreviewWrapper" class="upload-preview-wrapper">

                    <img id="uploadImagePreview" src="" alt="Selected Image" class="upload-preview-image">

                </div>

                {{-- ADD BUTTON --}}

                <div class="text-center mt-2">

                    <button type="submit" class="btn btn-brand-primary add-gallery-button" id="saveGalleryBtn">

                        Add Image

                    </button>

                </div>

            </form>

        </div>

    </div>

    {{-- ==========================================================
FULL-SCREEN IN-APP CAMERA
========================================================== --}}

    <div id="fullScreenGalleryCamera"
        style="
        display:none;
        position:fixed;
        top:0;
        left:0;
        width:100vw;
        height:100vh;
        background:#000;
        z-index:999999;
        flex-direction:column;
        justify-content:space-between;
        touch-action:none;
    ">

        {{-- TOP HEADER --}}
        <div class="d-flex justify-content-between align-items-center px-3 py-3"
            style="
            position:absolute;
            top:0;
            left:0;
            right:0;
            z-index:100;
            background:linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
        ">

            {{-- CLOSE --}}
            <button type="button" id="galleryFsCloseBtn"
                class="btn btn-dark rounded-circle p-0 d-flex align-items-center justify-content-center"
                style="
                width:44px;
                height:44px;
                background:rgba(0,0,0,.5);
                border:1px solid rgba(255,255,255,.3);
                color:#fff;
            ">

                <i class="fas fa-times"></i>

            </button>


            {{-- TITLE --}}
            <span class="text-white fw-bold small" style="letter-spacing:1px;">

                CAMERA

            </span>


            {{-- SWITCH CAMERA --}}
            <button type="button" id="galleryFsSwitchCamBtn"
                class="btn btn-dark rounded-circle p-0 d-flex align-items-center justify-content-center"
                style="
                width:44px;
                height:44px;
                background:rgba(0,0,0,.5);
                border:1px solid rgba(255,255,255,.3);
                color:#fff;
            ">

                <i class="fas fa-sync-alt"></i>

            </button>

        </div>


        {{-- VIEWFINDER --}}
        <div
            style="
        width:100%;
        height:100%;
        position:relative;
        overflow:hidden;
        display:flex;
        align-items:center;
        justify-content:center;
        background:#000;
    ">

            {{-- LIVE CAMERA --}}
            <video id="galleryFsVideo" autoplay playsinline muted
                style="
                width:100%;
                height:100%;
                object-fit:cover;
            ">
            </video>


            {{-- CANVAS --}}
            <canvas id="galleryFsCanvas" style="display:none;">
            </canvas>


            {{-- CAPTURED PHOTO --}}
            <img id="galleryFsPhotoPreview" alt="Captured Photo"
                style="
                display:none;
                width:100%;
                height:100%;
                object-fit:cover;
                position:absolute;
                inset:0;
                z-index:50;
            ">


            {{-- FLASH --}}
            <div id="galleryFsFlashEffect"
                style="
                display:none;
                position:absolute;
                inset:0;
                background:#fff;
                z-index:60;
                opacity:.8;
            ">
            </div>


            {{-- ERROR --}}
            <div id="galleryFsErrorBox" class="alert alert-danger position-absolute m-3 text-center"
                style="
                display:none;
                z-index:90;
                max-width:90%;
            ">
            </div>

        </div>


        {{-- BOTTOM CONTROLS --}}
        <div class="d-flex justify-content-center align-items-center pb-5 pt-3"
            style="
            position:absolute;
            bottom:0;
            left:0;
            right:0;
            z-index:100;
            background:linear-gradient(to top, rgba(0,0,0,.8), transparent);
        ">


            {{-- LIVE SHUTTER --}}
            <div id="galleryFsLiveControls" class="d-flex align-items-center justify-content-center w-100">

                <button type="button" id="galleryFsShutterBtn" class="btn p-0"
                    style="
                    width:76px;
                    height:76px;
                    border-radius:50%;
                    border:4px solid #fff;
                    background:transparent;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    box-shadow:0 0 15px rgba(0,0,0,.5);
                ">

                    <span
                        style="
                    width:60px;
                    height:60px;
                    background:#fff;
                    border-radius:50%;
                    display:block;
                ">
                    </span>

                </button>

            </div>


            {{-- REVIEW CONTROLS --}}
            <div id="galleryFsReviewControls" class="justify-content-around align-items-center w-100 px-4"
                style="display:none;">

                <button type="button" id="galleryFsRetakeBtn"
                    class="btn btn-outline-light rounded-pill px-4 py-2 d-flex align-items-center gap-1 shadow">

                    <i class="fas fa-redo"></i>

                    Retake

                </button>


                <button type="button" id="galleryFsAcceptBtn"
                    class="btn btn-success rounded-pill px-4 py-2 d-flex align-items-center gap-1 shadow">

                    <i class="fas fa-check"></i>

                    Use Photo

                </button>

            </div>

        </div>

    </div>

    {{-- ==========================================================
    IMAGE PREVIEW MODAL
    =========================================================== --}}

    <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-hidden="true">

        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content rounded-4">

                <div class="modal-header">

                    <h5 class="modal-title">
                        Image Preview
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal">
                    </button>

                </div>


                <div class="modal-body text-center">

                    <img id="previewImage" src="" alt="Gallery Image" class="image-preview">

                </div>

            </div>

        </div>

    </div>


    {{-- ==========================================================
    DELETE MODAL
    =========================================================== --}}

    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">

        <div class="modal-dialog modal-sm modal-dialog-centered">

            <div class="modal-content rounded-4 text-center p-4 py-5">

                <h5 class="fw-bold mb-2">
                    Are you sure?
                </h5>

                <p class="text-muted mb-0">
                    Do you want to delete this image?
                </p>


                <input type="hidden" id="targetGalleryId">


                <div class="d-flex justify-content-center gap-3 mt-4">

                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">

                        Cancel

                    </button>


                    <button type="button" id="confirmDeleteBtn" class="btn btn-danger">

                        Yes, Delete

                    </button>

                </div>

            </div>

        </div>

    </div>


    {{-- ==========================================================
    SCRIPTS
    =========================================================== --}}

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>


    <script>
        $(document).ready(function() {

            /* ==========================================================
               CSRF
            ========================================================== */

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });


            /* ==========================================================
               DATATABLE
            ========================================================== */

            let table = $('#galleryTable').DataTable({

                processing: true,

                serverSide: true,

                lengthChange: false,

                searching: true,

                responsive: true,

                ajax: {

                    url: "{{ route('gallery_list_data') }}",

                    type: "GET",

                    error: function(xhr) {

                        console.error(
                            'Gallery DataTable Error:',
                            xhr.responseText
                        );

                    }

                },

                columns: [

                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'image',
                        name: 'image',
                        orderable: false,
                        searchable: false
                    },

                    {
                        data: 'action',
                        name: 'action',
                        orderable: false,
                        searchable: false,
                        className: 'text-center'
                    }

                ],

                pageLength: 10,

                order: [
                    [0, 'asc']
                ]

            });


            /* ==========================================================
               CUSTOM SEARCH
            ========================================================== */

            $('#customSearch').on('keyup', function() {

                table
                    .search($(this).val())
                    .draw();

            });


            /* ==========================================================
               PAGE LENGTH
            ========================================================== */

            $('#pageLength').on('change', function() {

                let value = $(this).val();

                table
                    .page
                    .len(
                        value === 'All' ?
                        -1 :
                        parseInt(value)
                    )
                    .draw();

            });


            /* ==========================================================
               IMAGE INPUT
            ========================================================== */

            const galleryImageInput =
                document.getElementById('image');


            /* ==========================================================
               SELECTED IMAGE PREVIEW
            ========================================================== */

            $('#image').on('change', function() {

                let file = this.files[0];


                /* No file */

                if (!file) {

                    $('#uploadImagePreviewWrapper')
                        .hide();

                    $('#uploadImagePreview')
                        .attr('src', '');

                    return;

                }


                /* Allowed image types */

                let allowedTypes = [

                    'image/jpeg',
                    'image/png',
                    'image/webp'

                ];


                /* Invalid image */

                if (!allowedTypes.includes(file.type)) {

                    showAjaxToast(
                        'Please select a valid JPG, JPEG, PNG or WEBP image.',
                        'error'
                    );

                    $(this).val('');

                    $('#uploadImagePreviewWrapper')
                        .hide();

                    $('#uploadImagePreview')
                        .attr('src', '');

                    return;

                }


                /* Create preview */

                let imageUrl =
                    URL.createObjectURL(file);

                $('#uploadImagePreview')
                    .attr('src', imageUrl);

                $('#uploadImagePreviewWrapper')
                    .show();

            });


            /* ==========================================================
               MOBILE CAMERA ELEMENTS
            ========================================================== */

            const captureGalleryBtn =
                document.getElementById('captureGalleryBtn');

            const galleryMobileInput =
                document.getElementById('galleryImageInput');


            /* Camera overlay */

            const galleryCameraOverlay =
                document.getElementById(
                    'fullScreenGalleryCamera'
                );


            /* Camera video */

            const galleryCameraVideo =
                document.getElementById(
                    'galleryFsVideo'
                );


            /* Canvas */

            const galleryCameraCanvas =
                document.getElementById(
                    'galleryFsCanvas'
                );


            /* Captured preview */

            const galleryCameraPreview =
                document.getElementById(
                    'galleryFsPhotoPreview'
                );


            /* Flash */

            const galleryCameraFlash =
                document.getElementById(
                    'galleryFsFlashEffect'
                );


            /* Error */

            const galleryCameraError =
                document.getElementById(
                    'galleryFsErrorBox'
                );


            /* Controls */

            const galleryLiveControls =
                document.getElementById(
                    'galleryFsLiveControls'
                );

            const galleryReviewControls =
                document.getElementById(
                    'galleryFsReviewControls'
                );


            /* Buttons */

            const galleryShutterBtn =
                document.getElementById(
                    'galleryFsShutterBtn'
                );

            const galleryRetakeBtn =
                document.getElementById(
                    'galleryFsRetakeBtn'
                );

            const galleryAcceptBtn =
                document.getElementById(
                    'galleryFsAcceptBtn'
                );

            const galleryCloseBtn =
                document.getElementById(
                    'galleryFsCloseBtn'
                );

            const gallerySwitchCamBtn =
                document.getElementById(
                    'galleryFsSwitchCamBtn'
                );


            /* ==========================================================
               CAMERA VARIABLES
            ========================================================== */

            let galleryCameraStream = null;

            let galleryFacingMode = 'environment';

            let galleryCapturedFile = null;


            /* ==========================================================
               SHOW IMAGE PREVIEW
            ========================================================== */

            function showGalleryImagePreview(file) {

                if (!file) {

                    $('#uploadImagePreviewWrapper')
                        .hide();

                    $('#uploadImagePreview')
                        .attr('src', '');

                    return;

                }


                let imageUrl =
                    URL.createObjectURL(file);


                $('#uploadImagePreview')
                    .attr('src', imageUrl);


                $('#uploadImagePreviewWrapper')
                    .show();

            }


            /* ==========================================================
               SET CAPTURED FILE INTO REAL INPUT
            ========================================================== */

            function setGalleryInputFile(file) {

                if (!galleryImageInput || !file) {
                    return;
                }


                try {

                    const dataTransfer =
                        new DataTransfer();


                    dataTransfer.items.add(file);


                    galleryImageInput.files =
                        dataTransfer.files;


                } catch (error) {

                    console.error(
                        'Unable to set gallery image:',
                        error
                    );

                }

            }


            /* ==========================================================
               START CAMERA
            ========================================================== */

            async function startGalleryCamera() {

                /* Stop previous stream */

                stopGalleryCamera();


                /* Reset error */

                if (galleryCameraError) {

                    galleryCameraError.style.display =
                        'none';

                    galleryCameraError.textContent =
                        '';

                }


                /* Reset preview */

                if (galleryCameraPreview) {

                    galleryCameraPreview.style.display =
                        'none';

                    galleryCameraPreview.src = '';

                }


                /* Show video */

                if (galleryCameraVideo) {

                    galleryCameraVideo.style.display =
                        'block';

                }


                /* Show live controls */

                if (galleryLiveControls) {

                    galleryLiveControls.style.display =
                        'flex';

                }


                /* Hide review controls */

                if (galleryReviewControls) {

                    galleryReviewControls.style
                        .setProperty(
                            'display',
                            'none',
                            'important'
                        );

                }


                /* Browser support check */

                if (
                    !navigator.mediaDevices ||
                    !navigator.mediaDevices.getUserMedia
                ) {

                    if (galleryCameraError) {

                        galleryCameraError.textContent =
                            'Camera is not supported on this browser or requires HTTPS.';

                        galleryCameraError.style.display =
                            'block';

                    }

                    return;

                }


                try {

                    galleryCameraStream =
                        await navigator.mediaDevices
                        .getUserMedia({

                            video: {

                                facingMode: {
                                    ideal: galleryFacingMode
                                },

                                width: {
                                    ideal: 1920
                                },

                                height: {
                                    ideal: 1080
                                }

                            },

                            audio: false

                        });


                    galleryCameraVideo.srcObject =
                        galleryCameraStream;


                    await galleryCameraVideo.play();


                } catch (error) {

                    console.error(
                        'Gallery camera error:',
                        error
                    );


                    if (galleryCameraError) {

                        galleryCameraError.textContent =
                            'Unable to access camera. Please allow camera permission.';

                        galleryCameraError.style.display =
                            'block';

                    }

                }

            }


            /* ==========================================================
               STOP CAMERA
            ========================================================== */

            function stopGalleryCamera() {

                if (galleryCameraStream) {

                    galleryCameraStream
                        .getTracks()
                        .forEach(function(track) {

                            track.stop();

                        });


                    galleryCameraStream = null;

                }


                if (galleryCameraVideo) {

                    galleryCameraVideo.srcObject =
                        null;

                }

            }


            /* ==========================================================
               OPEN CAMERA
            ========================================================== */

            async function openGalleryCamera() {

                if (!galleryCameraOverlay) {
                    return;
                }


                galleryCapturedFile = null;


                /* Show camera */

                galleryCameraOverlay.style.display =
                    'flex';


                /* Start camera */

                await startGalleryCamera();

            }


            /* ==========================================================
               CLOSE CAMERA
            ========================================================== */

            function closeGalleryCamera() {

                stopGalleryCamera();


                galleryCapturedFile = null;


                if (galleryCameraPreview) {

                    galleryCameraPreview.style.display =
                        'none';

                    galleryCameraPreview.src = '';

                }


                if (galleryCameraVideo) {

                    galleryCameraVideo.style.display =
                        'block';

                }


                if (galleryLiveControls) {

                    galleryLiveControls.style.display =
                        'flex';

                }


                if (galleryReviewControls) {

                    galleryReviewControls.style
                        .setProperty(
                            'display',
                            'none',
                            'important'
                        );

                }


                if (galleryCameraOverlay) {

                    galleryCameraOverlay.style.display =
                        'none';

                }

            }


            /* ==========================================================
               OPEN CAMERA BUTTON
            ========================================================== */

            if (captureGalleryBtn) {

                captureGalleryBtn.addEventListener(
                    'click',
                    function() {

                        openGalleryCamera();

                    }
                );

            }


            /* ==========================================================
               CLOSE CAMERA BUTTON
            ========================================================== */

            if (galleryCloseBtn) {

                galleryCloseBtn.addEventListener(
                    'click',
                    function() {

                        closeGalleryCamera();

                    }
                );

            }


            /* ==========================================================
               SWITCH CAMERA
            ========================================================== */

            if (gallerySwitchCamBtn) {

                gallerySwitchCamBtn.addEventListener(
                    'click',
                    async function() {

                        galleryFacingMode =
                            galleryFacingMode === 'environment' ?
                            'user' :
                            'environment';


                        await startGalleryCamera();

                    }
                );

            }


            /* ==========================================================
               CAPTURE PHOTO
            ========================================================== */

            if (galleryShutterBtn) {

                galleryShutterBtn.addEventListener(
                    'click',
                    function() {

                        /* Camera ready check */

                        if (
                            !galleryCameraStream ||
                            !galleryCameraVideo.videoWidth ||
                            !galleryCameraVideo.videoHeight
                        ) {

                            showAjaxToast(
                                'Camera is not ready yet.',
                                'error'
                            );

                            return;

                        }


                        const width =
                            galleryCameraVideo.videoWidth;

                        const height =
                            galleryCameraVideo.videoHeight;


                        /* Set canvas size */

                        galleryCameraCanvas.width =
                            width;

                        galleryCameraCanvas.height =
                            height;


                        const context =
                            galleryCameraCanvas
                            .getContext('2d');


                        /* Clear canvas */

                        context.clearRect(
                            0,
                            0,
                            width,
                            height
                        );


                        /* Mirror front camera */

                        if (
                            galleryFacingMode === 'user'
                        ) {

                            context.translate(
                                width,
                                0
                            );

                            context.scale(
                                -1,
                                1
                            );

                        }


                        /* Draw camera frame */

                        context.drawImage(
                            galleryCameraVideo,
                            0,
                            0,
                            width,
                            height
                        );


                        /* Flash effect */

                        if (galleryCameraFlash) {

                            galleryCameraFlash.style.display =
                                'block';


                            setTimeout(
                                function() {

                                    galleryCameraFlash.style.display =
                                        'none';

                                },
                                100
                            );

                        }


                        /* Convert canvas to file */

                        galleryCameraCanvas.toBlob(
                            function(blob) {

                                if (!blob) {

                                    showAjaxToast(
                                        'Unable to capture photo.',
                                        'error'
                                    );

                                    return;

                                }


                                galleryCapturedFile =
                                    new File(

                                        [blob],

                                        'gallery_' +
                                        Date.now() +
                                        '.jpg',

                                        {
                                            type: 'image/jpeg',

                                            lastModified: Date.now()
                                        }

                                    );


                                /* Preview */

                                const previewUrl =
                                    URL.createObjectURL(
                                        galleryCapturedFile
                                    );


                                galleryCameraPreview.src =
                                    previewUrl;


                                galleryCameraPreview.style.display =
                                    'block';


                                /* Hide video */

                                galleryCameraVideo.style.display =
                                    'none';


                                /* Hide shutter */

                                galleryLiveControls.style.display =
                                    'none';


                                /* Show review */

                                galleryReviewControls.style
                                    .setProperty(
                                        'display',
                                        'flex',
                                        'important'
                                    );


                                /* Stop camera */

                                stopGalleryCamera();

                            },

                            'image/jpeg',

                            0.92

                        );

                    }
                );

            }


            /* ==========================================================
               RETAKE PHOTO
            ========================================================== */

            if (galleryRetakeBtn) {

                galleryRetakeBtn.addEventListener(
                    'click',
                    async function() {

                        galleryCapturedFile = null;


                        if (galleryCameraPreview) {

                            galleryCameraPreview.style.display =
                                'none';

                            galleryCameraPreview.src =
                                '';

                        }


                        if (galleryCameraVideo) {

                            galleryCameraVideo.style.display =
                                'block';

                        }


                        if (galleryLiveControls) {

                            galleryLiveControls.style.display =
                                'flex';

                        }


                        if (galleryReviewControls) {

                            galleryReviewControls.style
                                .setProperty(
                                    'display',
                                    'none',
                                    'important'
                                );

                        }


                        await startGalleryCamera();

                    }
                );

            }


            /* ==========================================================
               USE PHOTO
            ========================================================== */

            if (galleryAcceptBtn) {

                galleryAcceptBtn.addEventListener(
                    'click',
                    function() {

                        if (!galleryCapturedFile) {

                            showAjaxToast(
                                'Please capture a photo first.',
                                'error'
                            );

                            return;

                        }


                        /* Put file into actual Laravel input */

                        setGalleryInputFile(
                            galleryCapturedFile
                        );


                        /* Show normal upload preview */

                        showGalleryImagePreview(
                            galleryCapturedFile
                        );


                        /* Close camera */

                        closeGalleryCamera();

                    }
                );

            }


            /* ==========================================================
               MOBILE GALLERY / CHOOSE FROM GALLERY
            ========================================================== */

            if (galleryMobileInput) {

                $(galleryMobileInput).on(
                    'change',
                    function() {

                        let file =
                            this.files[0];


                        if (!file) {
                            return;
                        }


                        let allowedTypes = [

                            'image/jpeg',
                            'image/png',
                            'image/webp'

                        ];


                        if (
                            !allowedTypes.includes(
                                file.type
                            )
                        ) {

                            showAjaxToast(
                                'Please select a valid JPG, JPEG, PNG or WEBP image.',
                                'error'
                            );


                            $(this).val('');


                            $('#uploadImagePreviewWrapper')
                                .hide();


                            $('#uploadImagePreview')
                                .attr('src', '');


                            return;

                        }


                        /* Copy to actual Laravel input */

                        setGalleryInputFile(file);


                        /* Show preview */

                        showGalleryImagePreview(file);

                    }
                );

            }


            /* ==========================================================
               IMAGE PREVIEW MODAL
            ========================================================== */

            $(document).on(
                'click',
                '.gallery-image',
                function() {

                    let imageUrl =
                        $(this).attr('src');


                    $('#previewImage')
                        .attr(
                            'src',
                            imageUrl
                        );


                    let modalElement =
                        document.getElementById(
                            'imagePreviewModal'
                        );


                    let modal =
                        bootstrap.Modal
                        .getOrCreateInstance(
                            modalElement
                        );


                    modal.show();

                }
            );


            /* ==========================================================
               DELETE MODAL
            ========================================================== */

            $(document).on(
                'click',
                '.delete-gallery-btn',
                function() {

                    let id =
                        $(this).data('id');


                    $('#targetGalleryId')
                        .val(id);


                    let modalElement =
                        document.getElementById(
                            'deleteConfirmModal'
                        );


                    let modal =
                        bootstrap.Modal
                        .getOrCreateInstance(
                            modalElement
                        );


                    modal.show();

                }
            );


            /* ==========================================================
               DELETE IMAGE
            ========================================================== */

            $('#confirmDeleteBtn').on(
                'click',
                function() {

                    let button =
                        $(this);


                    let id =
                        $('#targetGalleryId')
                        .val();


                    /* ID validation */

                    if (!id) {

                        showAjaxToast(
                            'Gallery ID not found.',
                            'error'
                        );

                        return;

                    }


                    /* Loading */

                    button
                        .prop('disabled', true)
                        .html(
                            '<span class="spinner-border spinner-border-sm me-1"></span> Deleting...'
                        );


                    /* AJAX */

                    $.ajax({

                        url: "{{ route('gallery_delete') }}",

                        type: "POST",

                        data: {
                            id: id
                        },


                        success: function(response) {

                            if (
                                response.success
                            ) {

                                /* Hide modal */

                                let modalElement =
                                    document.getElementById(
                                        'deleteConfirmModal'
                                    );


                                let modal =
                                    bootstrap.Modal
                                    .getInstance(
                                        modalElement
                                    );


                                if (modal) {

                                    modal.hide();

                                }


                                /* Clear ID */

                                $('#targetGalleryId')
                                    .val('');


                                /* Reload table */

                                table.ajax.reload(
                                    null,
                                    false
                                );


                                /* Success */

                                showAjaxToast(

                                    response.message ||
                                    'Image deleted successfully.',

                                    'success'

                                );

                            } else {

                                showAjaxToast(

                                    response.message ||
                                    'Unable to delete image.',

                                    'error'

                                );

                            }

                        },


                        error: function(xhr) {

                            let message =
                                'Unable to delete image.';


                            if (
                                xhr.responseJSON &&
                                xhr.responseJSON.message
                            ) {

                                message =
                                    xhr.responseJSON.message;

                            }


                            showAjaxToast(
                                message,
                                'error'
                            );

                        },


                        complete: function() {

                            button
                                .prop(
                                    'disabled',
                                    false
                                )
                                .html(
                                    'Yes, Delete'
                                );

                        }

                    });

                }
            );


            /* ==========================================================
               ADD IMAGE FORM
            ========================================================== */

            $('#addGalleryForm').on(
                'submit',
                function(e) {

                    e.preventDefault();


                    let form =
                        $(this);


                    let button =
                        $('#saveGalleryBtn');


                    let imageInput =
                        $('#image')[0];


                    /* ==================================================
                       IMAGE VALIDATION
                    ================================================== */

                    if (
                        !imageInput ||
                        !imageInput.files ||
                        !imageInput.files.length
                    ) {

                        showAjaxToast(
                            'Please select an image.',
                            'error'
                        );

                        return false;

                    }


                    /* ==================================================
                       FILE TYPE VALIDATION
                    ================================================== */

                    let file =
                        imageInput.files[0];


                    let allowedTypes = [

                        'image/jpeg',
                        'image/png',
                        'image/webp'

                    ];


                    if (
                        !allowedTypes.includes(
                            file.type
                        )
                    ) {

                        showAjaxToast(
                            'Please select a valid JPG, JPEG, PNG or WEBP image.',
                            'error'
                        );

                        return false;

                    }


                    /* ==================================================
                       BUTTON LOADING
                    ================================================== */

                    button
                        .prop(
                            'disabled',
                            true
                        )
                        .html(
                            '<span class="spinner-border spinner-border-sm me-1"></span> Processing...'
                        );


                    /* ==================================================
                       FORM DATA
                    ================================================== */

                    let formData =
                        new FormData(this);


                    /* ==================================================
                       AJAX UPLOAD
                    ================================================== */

                    $.ajax({

                        url: form.attr('action'),

                        type: 'POST',

                        data: formData,

                        processData: false,

                        contentType: false,


                        success: function(response) {

                            if (
                                response.success
                            ) {

                                /* Reset form */

                                form[0].reset();


                                /* Hide preview */

                                $('#uploadImagePreviewWrapper')
                                    .hide();


                                $('#uploadImagePreview')
                                    .attr(
                                        'src',
                                        ''
                                    );


                                /* Reload table */

                                if (
                                    $.fn.DataTable
                                    .isDataTable(
                                        '#galleryTable'
                                    )
                                ) {

                                    table.ajax.reload(
                                        null,
                                        false
                                    );

                                }


                                /* Success toast */

                                showAjaxToast(

                                    response.message ||
                                    'Image uploaded successfully.',

                                    'success'

                                );

                            } else {

                                showAjaxToast(

                                    response.message ||
                                    'Unable to upload image.',

                                    'error'

                                );

                            }

                        },


                        error: function(xhr) {

                            let message =
                                'Unable to upload image.';


                            /* Validation errors */

                            if (
                                xhr.status === 422 &&
                                xhr.responseJSON &&
                                xhr.responseJSON.errors
                            ) {

                                let errors =
                                    xhr.responseJSON.errors;


                                let firstError =
                                    '';


                                $.each(
                                    errors,
                                    function(
                                        field,
                                        messages
                                    ) {

                                        if (
                                            messages &&
                                            messages.length &&
                                            !firstError
                                        ) {

                                            firstError =
                                                messages[0];

                                        }

                                    }
                                );


                                if (firstError) {

                                    message =
                                        firstError;

                                }

                            }


                            /* Normal error */
                            else if (
                                xhr.responseJSON &&
                                xhr.responseJSON.message
                            ) {

                                message =
                                    xhr.responseJSON.message;

                            }


                            showAjaxToast(
                                message,
                                'error'
                            );

                        },


                        complete: function() {

                            button
                                .prop(
                                    'disabled',
                                    false
                                )
                                .html(
                                    'Add Image'
                                );

                        }

                    });

                }
            );


            /* ==========================================================
               EXPORT
            ========================================================== */

            $('#exportBtn').on(
                'click',
                function() {

                    let exportButton =
                        $(this);


                    /* Disable button */

                    exportButton
                        .prop(
                            'disabled',
                            true
                        )
                        .html(
                            '<span class="spinner-border spinner-border-sm me-1"></span> Exporting...'
                        );


                    setTimeout(
                        function() {

                            let data = [

                                [
                                    'S.No',
                                    'Image'
                                ]

                            ];


                            /* Get filtered rows */

                            table
                                .rows({
                                    search: 'applied'
                                })
                                .every(
                                    function() {

                                        let row =
                                            this.data();


                                        let imageName =
                                            '';


                                        if (row.image) {

                                            let temp =
                                                $('<div>')
                                                .html(
                                                    row.image
                                                );


                                            imageName =
                                                temp
                                                .find('img')
                                                .attr('alt') ||
                                                'Gallery Image';

                                        }


                                        data.push([

                                            row.DT_RowIndex ??
                                            '',

                                            imageName

                                        ]);

                                    }
                                );


                            /* No data */

                            if (
                                data.length <= 1
                            ) {

                                showAjaxToast(
                                    'No gallery images available for export.',
                                    'error'
                                );


                                exportButton
                                    .prop(
                                        'disabled',
                                        false
                                    )
                                    .html(
                                        '<i class="fas fa-download me-1"></i> Export'
                                    );


                                return;

                            }


                            /* ==================================================
                               CREATE CSV
                            ================================================== */

                            let csvContent =

                                data
                                .map(
                                    function(row) {

                                        return row
                                            .map(
                                                function(value) {

                                                    return '"' +
                                                        String(
                                                            value
                                                        )
                                                        .replace(
                                                            /"/g,
                                                            '""'
                                                        ) +
                                                        '"';

                                                }
                                            )
                                            .join(',');

                                    }
                                )
                                .join('\n');


                            /* ==================================================
                               CREATE BLOB
                            ================================================== */

                            let blob =
                                new Blob(
                                    [
                                        '\ufeff' +
                                        csvContent
                                    ], {
                                        type: 'text/csv;charset=utf-8;'
                                    }
                                );


                            /* ==================================================
                               DOWNLOAD
                            ================================================== */

                            let url =
                                URL.createObjectURL(
                                    blob
                                );


                            let link =
                                document.createElement(
                                    'a'
                                );


                            link.href =
                                url;


                            link.download =
                                'gallery_' +
                                new Date()
                                .toISOString()
                                .slice(0, 10) +
                                '.csv';


                            document
                                .body
                                .appendChild(
                                    link
                                );


                            link.click();


                            document
                                .body
                                .removeChild(
                                    link
                                );


                            URL.revokeObjectURL(
                                url
                            );


                            /* Restore button */

                            exportButton
                                .prop(
                                    'disabled',
                                    false
                                )
                                .html(
                                    '<i class="fas fa-download me-1"></i> Export'
                                );


                        },
                        300
                    );

                }
            );

        });
    </script>
@endsection