@extends('Admin.layout')

@section('title', 'Categories')

@section('content')

    <div class="container-xxl flex-grow-1 container-p-y">

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

        <div class="d-flex align-items-center mb-4">

            {{-- <a href="{{ url()->previous() }}" class="btn btn-light me-3 d-flex align-items-center justify-content-center"
                style="width:48px;height:48px;">

                <i class="ti tabler-arrow-left fs-4"></i>

            </a> --}}

            <h4 class="fw-bold mb-0">
                Category Management
            </h4>

        </div>


        {{-- ========================================================= --}}
        {{-- ADD CATEGORY --}}
        {{-- ========================================================= --}}

        <div class="card mb-4">

            <div class="card-body">

                <h5 class="fw-bold mb-4">
                    Add New Category
                </h5>


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

                    @csrf


                    <div class="row g-3 align-items-end">


                        {{-- CATEGORY NAME --}}
                        <div class="col-md-6">

                            <label class="form-label fw-semibold">
                                Category Name
                            </label>

                            <input type="text" name="name" class="form-control" placeholder="Enter category name"
                                maxlength="255" value="{{ old('name') }}" required>

                        </div>


                        {{-- CATEGORY IMAGE --}}
                        <div class="col-md-4">

                            <label class="form-label fw-semibold">
                                Category Images
                                <small class="text-muted fw-normal" style="font-size: 11px;">
                                    (JPG, PNG, WEBP | Maximum 5MB per image)
                                </small>
                            </label>


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

                                {{-- CAMERA --}}
                                <button type="button" id="captureCategoryPhotoBtn" class="btn btn-primary">

                                    <i class="icon-base ti tabler-camera me-1"></i>

                                    Capture Photo

                                </button>


                                {{-- GALLERY --}}
                                <label for="categoryGalleryInput" class="btn btn-outline-primary mb-0">

                                    <i class="icon-base ti tabler-photo me-1"></i>

                                    Choose from Gallery

                                </label>

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

                            </div>


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

                                <input type="file" name="image[]" id="categoryImageDesktop" class="form-control"
                                    accept="image/jpeg,image/png,image/webp" multiple>

                            </div>





                            {{-- PREVIEW --}}
                            <div id="selectedCategoryImages" class=" d-flex flex-wrap ">
                            </div>

                        </div>


                        {{-- ADD BUTTON --}}
                        <div class="col-md-2">

                            <button type="submit" class="btn btn-primary w-100" id="saveCategoryBtn">

                                <span id="saveCategoryText">
                                    Add Category
                                </span>

                                <span id="saveCategoryLoader" class="d-none">

                                    <span class="spinner-border spinner-border-sm me-1"></span>

                                    Saving...

                                </span>

                            </button>

                        </div>

                    </div>

                </form>

            </div>

        </div>


        {{-- ========================================================= --}}
        {{-- CATEGORY TABLE --}}
        {{-- ========================================================= --}}

        <div class="card">

            <div class="card-body">

                <div class="table-responsive">

                    <table id="categoriesTable" class="table table-hover align-middle">

                        <thead>

                            <tr>

                                <th>S.NO</th>

                                <th>CATEGORY ID</th>

                                <th>DATE</th>

                                <th>IMAGE</th>

                                <th>CATEGORY NAME</th>

                                <th>ACTION</th>

                            </tr>

                        </thead>

                        <tbody></tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- EDIT CATEGORY MODAL --}}
    {{-- ========================================================= --}}

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

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

            <div class="modal-content">


                <div class="modal-header">

                    <h5 class="modal-title">
                        Edit Category
                    </h5>

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

                </div>


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

                    @csrf


                    <input type="hidden" name="category_id" id="edit_category_id">


                    <div class="modal-body">


                        {{-- NAME --}}
                        <div class="mb-3">

                            <label class="form-label fw-semibold">
                                Category Name
                            </label>

                            <input type="text" name="name" id="edit_category_name" class="form-control"
                                maxlength="255" required>

                        </div>


                        {{-- EXISTING IMAGES --}}
                        <div class="mb-3">

                            <label class="form-label fw-semibold">
                                Existing Images
                            </label>

                            <div id="existingCategoryImages" class="d-flex flex-wrap gap-2">
                            </div>

                        </div>


                        {{-- NEW IMAGE --}}
                        <div class="mb-3">

                            <label class="form-label fw-semibold">
                                Add New Images
                            </label>


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

                                {{-- CAMERA --}}
                                <button type="button" id="captureEditCategoryPhotoBtn" class="btn btn-primary">

                                    <i class="icon-base ti tabler-camera me-1"></i>

                                    Capture Photo

                                </button>


                                {{-- GALLERY --}}
                                <label for="editCategoryGalleryInput" class="btn btn-outline-primary mb-0">

                                    <i class="icon-base ti tabler-photo me-1"></i>

                                    Choose from Gallery

                                </label>

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

                            </div>


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

                                <input type="file" name="image[]" id="editCategoryImageDesktop" class="form-control"
                                    accept="image/jpeg,image/png,image/webp" multiple>

                            </div>


                            <small class="text-muted d-block mt-1">

                                JPG, PNG, WEBP | Maximum 5MB per image

                            </small>


                            {{-- NEW IMAGE PREVIEW --}}
                            <div id="editSelectedCategoryImages" class="mt-3 d-flex flex-wrap gap-2">
                            </div>

                        </div>

                    </div>


                    <div class="modal-footer">

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

                            Cancel

                        </button>


                        <button type="submit" class="btn btn-primary" id="updateCategoryBtn">

                            <span id="updateCategoryText">
                                Update
                            </span>

                            <span id="updateCategoryLoader" class="d-none">

                                <span class="spinner-border spinner-border-sm me-1"></span>

                                Updating...

                            </span>

                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>


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

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

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

            <div class="modal-content">


                <div class="modal-header">

                    <h5 class="modal-title">
                        Delete Category
                    </h5>

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

                </div>


                <div class="modal-body">

                    Are you sure you want to delete this category?

                </div>


                <div class="modal-footer">

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

                        Cancel

                    </button>


                    <form action="{{ route('delete_category') }}" method="POST" id="deleteCategoryForm">

                        @csrf

                        <input type="hidden" name="category_id" id="delete_category_id">


                        <button type="submit" class="btn btn-danger" id="deleteCategoryBtn">

                            <span id="deleteCategoryText">
                                Delete
                            </span>

                            <span id="deleteCategoryLoader" class="d-none">

                                <span class="spinner-border spinner-border-sm me-1"></span>

                                Deleting...

                            </span>

                        </button>

                    </form>

                </div>

            </div>

        </div>

    </div>


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

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

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

            <div class="modal-content">


                <div class="modal-header">

                    <h5 class="modal-title" id="imagePreviewTitle">

                        Category Image

                    </h5>

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

                </div>


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

                    <img id="previewCategoryImage" src="" class="img-fluid rounded"
                        style="
                            max-height:600px;
                            object-fit:contain;
                        ">

                </div>

            </div>

        </div>

    </div>


    {{-- ========================================================= --}}
    {{-- FULL SCREEN CAMERA --}}
    {{-- ========================================================= --}}

    <div id="fullScreenCategoryCameraOverlay"
        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,0.7),
                    transparent
                );
            ">


            {{-- CLOSE --}}
            <button type="button" id="categoryFsCloseBtn"
                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,0.5);
                    border:1px solid rgba(255,255,255,0.3);
                    color:#fff;
                ">

                <i class="ti tabler-x fs-3"></i>

            </button>


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

                CAMERA

            </span>


            {{-- SWITCH CAMERA --}}
            <button type="button" id="categoryFsSwitchCamBtn"
                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,0.5);
                    border:1px solid rgba(255,255,255,0.3);
                    color:#fff;
                ">

                <i class="ti tabler-refresh fs-3"></i>

            </button>

        </div>


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


            <video id="categoryFsVideo" autoplay playsinline muted
                style="
                    width:100%;
                    height:100%;
                    object-fit:cover;
                ">
            </video>


            <canvas id="categoryFsCanvas" style="display:none;">
            </canvas>


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


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


            {{-- ERROR --}}
            <div id="categoryFsErrorBox" 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,0.8),
                    transparent
                );
            ">


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


                <button type="button" id="categoryFsShutterBtn" 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,0.5);
                    ">

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

                </button>

            </div>


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


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

                    <i class="ti tabler-arrow-back-up fs-5"></i>

                    Retake

                </button>


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

                    <i class="ti tabler-check fs-5"></i>

                    Use Photo

                </button>

            </div>

        </div>

    </div>

@endsection


@section('scripts')

    <script>
        document.addEventListener('DOMContentLoaded', function() {


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

            $('#categoriesTable').DataTable({

                processing: true,

                serverSide: false,

                responsive: false,

                pageLength: 10,

                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],

                ajax: {

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

                    type: "GET",

                    error: function(xhr) {

                        console.error(
                            'Category Data Error:',
                            xhr.responseText
                        );

                    }

                },

                order: [
                    [1, 'desc']
                ],

                columnDefs: [

                    {
                        targets: '_all',
                        className: 'text-nowrap'
                    }

                ],

                columns: [

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

                    {
                        data: 'id',
                        name: 'id'
                    },

                    {
                        data: 'created_at',
                        name: 'created_at',
                        className: 'text-nowrap'
                    },

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

                    {
                        data: 'name',
                        name: 'name'
                    },

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

                ],

                language: {

                    lengthMenu: "_MENU_",

                    search: "",

                    searchPlaceholder: "Search category...",

                    emptyTable: "No categories found"

                }

            });


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

            $(document).on(
                'click',
                '.viewCategoryImage',
                function(e) {

                    e.preventDefault();

                    let imageUrl =
                        $(this).data('image');

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

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

                    $('#imagePreviewTitle')
                        .text(title);

                    bootstrap.Modal
                        .getOrCreateInstance(
                            document.getElementById(
                                'imagePreviewModal'
                            )
                        )
                        .show();

                }
            );


            /* =========================================================
               ADD CATEGORY FILE STATE
            ========================================================= */

            let addSelectedFiles = [];


            /* =========================================================
               EDIT CATEGORY FILE STATE
            ========================================================= */

            let editSelectedFiles = [];


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

            function validateImage(file) {

                const allowedTypes = [

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

                ];


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

                    alert(
                        'Only JPG, PNG and WEBP images are allowed.'
                    );

                    return false;

                }


                if (file.size > 5 * 1024 * 1024) {

                    alert(
                        'Each image must be less than 5MB.'
                    );

                    return false;

                }


                return true;

            }


            /* =========================================================
               ADD IMAGE TO ARRAY
            ========================================================= */

            function addFileToArray(
                file,
                array
            ) {

                if (!validateImage(file)) {

                    return false;

                }


                const duplicate =
                    array.some(
                        function(existingFile) {

                            return (

                                existingFile.name === file.name &&

                                existingFile.size === file.size &&

                                existingFile.lastModified ===
                                file.lastModified

                            );

                        }
                    );


                if (duplicate) {

                    return false;

                }


                array.push(file);

                return true;

            }


            /* =========================================================
               RENDER IMAGE PREVIEW
            ========================================================= */

            function renderFilePreview(
                files,
                container,
                removeCallback
            ) {

                container.innerHTML = '';


                files.forEach(
                    function(file, index) {

                        const reader =
                            new FileReader();


                        reader.onload =
                            function(event) {


                                const imageBox =
                                    document.createElement(
                                        'div'
                                    );


                                imageBox.className =
                                    'position-relative';


                                imageBox.style.width =
                                    '140px';

                                imageBox.style.height =
                                    '140px';


                                const image =
                                    document.createElement(
                                        'img'
                                    );


                                image.src =
                                    event.target.result;


                                image.alt =
                                    'Category Image';


                                image.className =
                                    'rounded border';


                                image.style.width =
                                    '140px';

                                image.style.height =
                                    '140px';

                                image.style.objectFit =
                                    'cover';


                                const removeButton =
                                    document.createElement(
                                        'button'
                                    );


                                removeButton.type =
                                    'button';


                                removeButton.className =
                                    'btn btn-danger btn-sm position-absolute top-0 end-0 rounded-circle';


                                removeButton.style.width =
                                    '32px';

                                removeButton.style.height =
                                    '32px';

                                removeButton.style.padding =
                                    '0';

                                removeButton.style.zIndex =
                                    '5';


                                removeButton.innerHTML =
                                    '&times;';


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

                                        removeCallback(
                                            index
                                        );

                                    }
                                );


                                imageBox.appendChild(
                                    image
                                );

                                imageBox.appendChild(
                                    removeButton
                                );

                                container.appendChild(
                                    imageBox
                                );

                            };


                        reader.readAsDataURL(file);

                    }
                );

            }


            /* =========================================================
               UPDATE INPUT FILES
            ========================================================= */

            function updateFileInput(
                files,
                input
            ) {

                if (!input) {

                    return;

                }


                const dataTransfer =
                    new DataTransfer();


                files.forEach(
                    function(file) {

                        dataTransfer.items.add(
                            file
                        );

                    }
                );


                input.files =
                    dataTransfer.files;

            }


            /* =========================================================
               RENDER ADD PREVIEW
            ========================================================= */

            function renderAddPreview() {

                renderFilePreview(

                    addSelectedFiles,

                    document.getElementById(
                        'selectedCategoryImages'
                    ),

                    function(index) {

                        addSelectedFiles.splice(
                            index,
                            1
                        );

                        renderAddPreview();

                        updateFileInput(
                            addSelectedFiles,
                            document.getElementById(
                                'categoryImageDesktop'
                            )
                        );

                    }

                );

            }


            /* =========================================================
               RENDER EDIT PREVIEW
            ========================================================= */

            function renderEditPreview() {

                renderFilePreview(

                    editSelectedFiles,

                    document.getElementById(
                        'editSelectedCategoryImages'
                    ),

                    function(index) {

                        editSelectedFiles.splice(
                            index,
                            1
                        );

                        renderEditPreview();

                        updateFileInput(
                            editSelectedFiles,
                            document.getElementById(
                                'editCategoryImageDesktop'
                            )
                        );

                    }

                );

            }


            /* =========================================================
               ADD DESKTOP FILE INPUT
            ========================================================= */

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


            if (categoryImageDesktop) {

                categoryImageDesktop.addEventListener(
                    'change',
                    function() {


                        const files =
                            Array.from(
                                this.files
                            );


                        this.value = '';


                        files.forEach(
                            function(file) {

                                addFileToArray(
                                    file,
                                    addSelectedFiles
                                );

                            }
                        );


                        renderAddPreview();


                        updateFileInput(
                            addSelectedFiles,
                            categoryImageDesktop
                        );

                    }
                );

            }


            /* =========================================================
               ADD GALLERY INPUT
            ========================================================= */

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


            if (categoryGalleryInput) {

                categoryGalleryInput.addEventListener(
                    'change',
                    function() {


                        const files =
                            Array.from(
                                this.files
                            );


                        this.value = '';


                        files.forEach(
                            function(file) {

                                addFileToArray(
                                    file,
                                    addSelectedFiles
                                );

                            }
                        );


                        renderAddPreview();


                        updateFileInput(
                            addSelectedFiles,
                            categoryImageDesktop
                        );

                    }
                );

            }


            /* =========================================================
               EDIT DESKTOP FILE INPUT
            ========================================================= */

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


            if (editCategoryImageDesktop) {

                editCategoryImageDesktop.addEventListener(
                    'change',
                    function() {


                        const files =
                            Array.from(
                                this.files
                            );


                        this.value = '';


                        files.forEach(
                            function(file) {

                                addFileToArray(
                                    file,
                                    editSelectedFiles
                                );

                            }
                        );


                        renderEditPreview();


                        updateFileInput(
                            editSelectedFiles,
                            editCategoryImageDesktop
                        );

                    }
                );

            }


            /* =========================================================
               EDIT GALLERY INPUT
            ========================================================= */

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


            if (editCategoryGalleryInput) {

                editCategoryGalleryInput.addEventListener(
                    'change',
                    function() {


                        const files =
                            Array.from(
                                this.files
                            );


                        this.value = '';


                        files.forEach(
                            function(file) {

                                addFileToArray(
                                    file,
                                    editSelectedFiles
                                );

                            }
                        );


                        renderEditPreview();


                        updateFileInput(
                            editSelectedFiles,
                            editCategoryImageDesktop
                        );

                    }
                );

            }


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

            const cameraOverlay =
                document.getElementById(
                    'fullScreenCategoryCameraOverlay'
                );

            const fsVideo =
                document.getElementById(
                    'categoryFsVideo'
                );

            const fsCanvas =
                document.getElementById(
                    'categoryFsCanvas'
                );

            const fsPhotoPreview =
                document.getElementById(
                    'categoryFsPhotoPreview'
                );

            const fsFlashEffect =
                document.getElementById(
                    'categoryFsFlashEffect'
                );

            const fsErrorBox =
                document.getElementById(
                    'categoryFsErrorBox'
                );

            const fsShutterBtn =
                document.getElementById(
                    'categoryFsShutterBtn'
                );

            const fsLiveControls =
                document.getElementById(
                    'categoryFsLiveControls'
                );

            const fsReviewControls =
                document.getElementById(
                    'categoryFsReviewControls'
                );

            const fsRetakeBtn =
                document.getElementById(
                    'categoryFsRetakeBtn'
                );

            const fsAcceptBtn =
                document.getElementById(
                    'categoryFsAcceptBtn'
                );

            const fsCloseBtn =
                document.getElementById(
                    'categoryFsCloseBtn'
                );

            const fsSwitchCamBtn =
                document.getElementById(
                    'categoryFsSwitchCamBtn'
                );


            /* =========================================================
               CAMERA STATE
            ========================================================= */

            let activeStream = null;

            let currentFacingMode =
                'environment';

            let tempCapturedFile = null;

            let cameraTarget =
                'add';


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

            async function startCategoryCamera() {


                fsErrorBox.style.display =
                    'none';


                fsPhotoPreview.style.display =
                    'none';


                fsVideo.style.display =
                    'block';


                fsLiveControls.style.display =
                    'flex';


                fsReviewControls.style.display =
                    'none';


                if (activeStream) {

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

                                track.stop();

                            }
                        );


                    activeStream = null;

                }


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

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


                    fsErrorBox.style.display =
                        'block';


                    return;

                }


                try {


                    const constraints = {

                        video: {

                            facingMode: {

                                ideal: currentFacingMode

                            },

                            width: {

                                ideal: 1920

                            },

                            height: {

                                ideal: 1080

                            }

                        },

                        audio: false

                    };


                    activeStream =
                        await navigator.mediaDevices
                        .getUserMedia(
                            constraints
                        );


                    fsVideo.srcObject =
                        activeStream;


                    await fsVideo.play();


                } catch (err) {


                    console.error(
                        'Category camera error:',
                        err
                    );


                    fsErrorBox.textContent =
                        'Unable to access camera. Please allow camera permissions.';


                    fsErrorBox.style.display =
                        'block';

                }

            }


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

            function stopCategoryCamera() {


                if (activeStream) {

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

                                track.stop();

                            }
                        );


                    activeStream = null;

                }


                fsVideo.srcObject =
                    null;


                cameraOverlay.style.display =
                    'none';


                tempCapturedFile =
                    null;

            }


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

            function openCategoryCamera(
                target
            ) {

                cameraTarget =
                    target;


                tempCapturedFile =
                    null;


                cameraOverlay.style.display =
                    'flex';


                startCategoryCamera();

            }


            /* =========================================================
               ADD CAMERA BUTTON
            ========================================================= */

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


            if (captureCategoryPhotoBtn) {

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

                        openCategoryCamera(
                            'add'
                        );

                    }
                );

            }


            /* =========================================================
               EDIT CAMERA BUTTON
            ========================================================= */

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


            if (captureEditCategoryPhotoBtn) {

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

                        openCategoryCamera(
                            'edit'
                        );

                    }
                );

            }


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

            if (fsCloseBtn) {

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

                        stopCategoryCamera();

                    }
                );

            }


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

            if (fsSwitchCamBtn) {

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


                        currentFacingMode =
                            currentFacingMode ===
                            'environment' ?
                            'user' :
                            'environment';


                        startCategoryCamera();

                    }
                );

            }


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

            if (fsShutterBtn) {

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


                        if (
                            !activeStream ||
                            !fsVideo.videoWidth
                        ) {

                            return;

                        }


                        /* FLASH */

                        fsFlashEffect.style.display =
                            'block';


                        setTimeout(
                            function() {

                                fsFlashEffect.style.display =
                                    'none';

                            },
                            100
                        );


                        const width =
                            fsVideo.videoWidth;


                        const height =
                            fsVideo.videoHeight;


                        fsCanvas.width =
                            width;


                        fsCanvas.height =
                            height;


                        const ctx =
                            fsCanvas.getContext(
                                '2d'
                            );


                        /* MIRROR FRONT CAMERA */

                        if (
                            currentFacingMode ===
                            'user'
                        ) {

                            ctx.translate(
                                width,
                                0
                            );

                            ctx.scale(
                                -1,
                                1
                            );

                        }


                        ctx.drawImage(
                            fsVideo,
                            0,
                            0,
                            width,
                            height
                        );


                        fsCanvas.toBlob(
                            function(blob) {


                                if (!blob) {

                                    return;

                                }


                                const fileName =
                                    'category_' +
                                    Date.now() +
                                    '.jpg';


                                tempCapturedFile =
                                    new File(
                                        [blob],
                                        fileName, {
                                            type: 'image/jpeg',

                                            lastModified: Date.now()
                                        }
                                    );


                                /* SHOW PHOTO */

                                fsPhotoPreview.src =
                                    URL.createObjectURL(
                                        blob
                                    );


                                fsPhotoPreview.style.display =
                                    'block';


                                fsVideo.style.display =
                                    'none';


                                /* REVIEW CONTROLS */

                                fsLiveControls.style.display =
                                    'none';


                                fsReviewControls.style.display =
                                    'flex';


                            },
                            'image/jpeg',
                            0.92
                        );

                    }
                );

            }


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

            if (fsRetakeBtn) {

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


                        tempCapturedFile =
                            null;


                        fsPhotoPreview.style.display =
                            'none';


                        fsVideo.style.display =
                            'block';


                        fsLiveControls.style.display =
                            'flex';


                        fsReviewControls.style.display =
                            'none';

                    }
                );

            }


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

            if (fsAcceptBtn) {

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


                        if (!tempCapturedFile) {

                            return;

                        }


                        if (
                            cameraTarget ===
                            'add'
                        ) {


                            addFileToArray(
                                tempCapturedFile,
                                addSelectedFiles
                            );


                            renderAddPreview();


                            updateFileInput(
                                addSelectedFiles,
                                categoryImageDesktop
                            );


                        } else {


                            addFileToArray(
                                tempCapturedFile,
                                editSelectedFiles
                            );


                            renderEditPreview();


                            updateFileInput(
                                editSelectedFiles,
                                editCategoryImageDesktop
                            );

                        }


                        tempCapturedFile =
                            null;


                        stopCategoryCamera();

                    }
                );

            }


            /* =========================================================
               EDIT CATEGORY
            ========================================================= */

            $(document).on(
                'click',
                '.editCategoryBtn',
                function() {


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


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


                    let images =
                        $(this).attr(
                            'data-images'
                        );


                    try {

                        images =
                            JSON.parse(
                                images
                            );

                    } catch (e) {

                        images = [];

                    }


                    /* SET ID */

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


                    /* SET NAME */

                    $('#edit_category_name')
                        .val(name);


                    /* CLEAR EXISTING */

                    $('#existingCategoryImages')
                        .empty();


                    /* CLEAR NEW FILES */

                    editSelectedFiles = [];


                    $('#editSelectedCategoryImages')
                        .empty();


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


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


                    /* EXISTING IMAGES */

                    images.forEach(
                        function(image) {


                            let imageUrl =
                                "{{ url('storage') }}/" +
                                image;


                            let wrapper =
                                $('<div>')
                                .css({

                                    position: 'relative'

                                });


                            let img =
                                $('<img>')
                                .attr(
                                    'src',
                                    imageUrl
                                )
                                .css({

                                    width: '90px',

                                    height: '70px',

                                    objectFit: 'cover',

                                    borderRadius: '8px',

                                    border: '1px solid #ddd'

                                });


                            let remove =
                                $('<label>')
                                .css({

                                    position: 'absolute',

                                    top: '2px',

                                    right: '2px',

                                    background: '#dc3545',

                                    color: '#fff',

                                    width: '22px',

                                    height: '22px',

                                    borderRadius: '50%',

                                    cursor: 'pointer',

                                    textAlign: 'center',

                                    lineHeight: '22px'

                                })
                                .html(
                                    '&times;'
                                );


                            let checkbox =
                                $('<input>')
                                .attr({

                                    type: 'checkbox',

                                    name: 'remove_images[]',

                                    value: image

                                })
                                .css({

                                    display: 'none'

                                });


                            remove.on(
                                'click',
                                function() {


                                    checkbox.prop(
                                        'checked',
                                        !checkbox.prop(
                                            'checked'
                                        )
                                    );


                                    if (
                                        checkbox.prop(
                                            'checked'
                                        )
                                    ) {

                                        wrapper.css(
                                            'opacity',
                                            '0.4'
                                        );

                                    } else {

                                        wrapper.css(
                                            'opacity',
                                            '1'
                                        );

                                    }

                                }
                            );


                            wrapper.append(
                                img
                            );


                            wrapper.append(
                                remove
                            );


                            wrapper.append(
                                checkbox
                            );


                            $('#existingCategoryImages')
                                .append(
                                    wrapper
                                );

                        }
                    );


                    /* SHOW MODAL */

                    bootstrap.Modal
                        .getOrCreateInstance(
                            document.getElementById(
                                'editCategoryModal'
                            )
                        )
                        .show();

                }
            );


            /* =========================================================
               ADD FORM DOUBLE SUBMIT
            ========================================================= */

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


                    let btn =
                        $('#saveCategoryBtn');


                    if (
                        btn.prop('disabled')
                    ) {

                        e.preventDefault();

                        return false;

                    }


                    btn.prop(
                        'disabled',
                        true
                    );


                    $('#saveCategoryText')
                        .addClass(
                            'd-none'
                        );


                    $('#saveCategoryLoader')
                        .removeClass(
                            'd-none'
                        );

                }
            );


            /* =========================================================
               EDIT FORM DOUBLE SUBMIT
            ========================================================= */

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


                    let btn =
                        $('#updateCategoryBtn');


                    if (
                        btn.prop('disabled')
                    ) {

                        e.preventDefault();

                        return false;

                    }


                    btn.prop(
                        'disabled',
                        true
                    );


                    $('#updateCategoryText')
                        .addClass(
                            'd-none'
                        );


                    $('#updateCategoryLoader')
                        .removeClass(
                            'd-none'
                        );

                }
            );


            /* =========================================================
               DELETE DOUBLE SUBMIT
            ========================================================= */

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


                    let btn =
                        $('#deleteCategoryBtn');


                    if (
                        btn.prop('disabled')
                    ) {

                        e.preventDefault();

                        return false;

                    }


                    btn.prop(
                        'disabled',
                        true
                    );


                    $('#deleteCategoryText')
                        .addClass(
                            'd-none'
                        );


                    $('#deleteCategoryLoader')
                        .removeClass(
                            'd-none'
                        );

                }
            );


        });


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

        function openDeleteModal(categoryId) {

            $('#delete_category_id')
                .val(categoryId);


            bootstrap.Modal
                .getOrCreateInstance(
                    document.getElementById(
                        'deleteModal'
                    )
                )
                .show();

        }
    </script>

@endsection