@extends('Admin.layout')

@section('content')

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

        {{-- PAGE HEADER --}}
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-3 mb-4">

            <div class="d-flex align-items-center gap-3">

                {{-- BACK BUTTON --}}
                <a href="{{ route('product') }}" class="back-btn" title="Back to Product">

                    <i class="fas fa-chevron-left"></i>

                </a>

                <div>

                    <h4 class="fw-bold mb-1">
                        Edit Product
                    </h4>

                </div>

            </div>

        </div>


        {{-- PRODUCT CARD --}}
        <div class="card">

            <div class="card-body">

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

                    @csrf

                    <input type="hidden" name="product_id" value="{{ $product->product_id }}">


                    <div class="row g-4">


                        {{-- =========================================================
                        PRODUCT IMAGES
                        ========================================================== --}}

                        <div class="col-md-6">

                            <label class="form-label">
                                Product Images
                            </label>


                            {{-- =====================================================
                            MOBILE ONLY
                            ====================================================== --}}

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


                                {{-- CAPTURE PHOTO --}}
                                <button type="button" id="capturePhotoBtn" class="btn btn-primary">

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

                                    Capture Photo

                                </button>


                                {{-- CHOOSE FROM GALLERY --}}
                                <label for="galleryInput" 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="galleryInput" accept="image/jpeg,image/png,image/webp" multiple
                                    hidden>

                            </div>


                            {{-- =====================================================
                            DESKTOP ONLY
                            ====================================================== --}}

                            <div class="d-none d-md-block">

                                <input type="file" name="image[]" id="productImage"
                                    class="form-control @error('image') is-invalid @enderror"
                                    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>


                            @error('image')
                                <div class="text-danger small mt-1">

                                    {{ $message }}

                                </div>
                            @enderror


                            @error('image.*')
                                <div class="text-danger small mt-1">

                                    {{ $message }}

                                </div>
                            @enderror


                            {{-- =====================================================
                            IMAGE PREVIEW AREA
                            EXISTING + NEW IMAGES
                            ====================================================== --}}

                            <div id="imagePreviewWrapper" class="mt-3 d-flex flex-wrap gap-2">


                                {{-- EXISTING IMAGES --}}

                                @if ($product->image && is_array($product->image) && count($product->image) > 0)
                                    @foreach ($product->image as $image)
                                        <div class="position-relative existing-image-box" style="width:140px;height:140px;">

                                            <img src="{{ url(Storage::url($image)) }}" alt="{{ $product->name }}"
                                                class="rounded border"
                                                style="
                                                    width:140px;
                                                    height:140px;
                                                    object-fit:cover;
                                                 ">


                                            <button type="button"
                                                class="btn btn-danger btn-sm position-absolute top-0 end-0 rounded-circle remove-existing-image"
                                                data-image="{{ $image }}"
                                                style="
                                                        width:32px;
                                                        height:32px;
                                                        padding:0;
                                                        z-index:5;
                                                    ">

                                                &times;

                                            </button>

                                        </div>
                                    @endforeach
                                @else
                                    <span class="text-muted" id="noExistingImageText">

                                        No image available

                                    </span>
                                @endif

                            </div>


                            {{-- REMOVED EXISTING IMAGES --}}
                            <div id="removedImages"></div>

                        </div>


                        {{-- =========================================================
PRODUCT SERIAL NUMBER
========================================================== --}}

                        <div class="col-md-3">

                            <label for="serial_no" class="form-label">
                                Serial Number
                            </label>

                            <input type="text" name="serial_no" id="serial_no"
                                class="form-control @error('serial_no') is-invalid @enderror"
                                value="{{ old('serial_no', $product->serial_no) }}" placeholder="Enter serial number">

                            @error('serial_no')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- =========================================================
PRODUCT CATEGORY
========================================================== --}}

                        <div class="col-md-3">

                            <label for="category_id" class="form-label">
                                Category
                            </label>

                            <select name="category_id" id="category_id"
                                class="form-select @error('category_id') is-invalid @enderror" required>

                                <option value="">
                                    Select Category
                                </option>

                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}"
                                        {{ old('category_id', $product->category_id) == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach

                            </select>

                            @error('category_id')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- =========================================================
PRODUCT NAME
========================================================== --}}

                        <div class="col-md-4">

                            <label for="name" class="form-label">
                                Product Name
                            </label>

                            <input type="text" name="name" id="name"
                                class="form-control @error('name') is-invalid @enderror"
                                value="{{ old('name', $product->name) }}" placeholder="Enter product name">

                            @error('name')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>


                        {{-- =========================================================
QUANTITY
========================================================== --}}

                        <div class="col-md-4">

                            <label for="quantity" class="form-label">
                                Quantity
                            </label>

                            <div class="input-group">

                                <button type="button" class="btn btn-outline-danger" id="reduceQuantity">
                                    <i class="ti tabler-minus"></i>
                                </button>

                                <input type="number" name="quantity" id="quantity"
                                    class="form-control text-center @error('quantity') is-invalid @enderror"
                                    value="{{ old('quantity', $product->quantity) }}" min="0">

                                <button type="button" class="btn btn-outline-success" id="addQuantity">
                                    <i class="ti tabler-plus"></i>
                                </button>

                            </div>

                            @error('quantity')
                                <div class="text-danger small mt-1">
                                    {{ $message }}
                                </div>
                            @enderror

                        </div>

                        {{-- =========================================================
                        LOW STOCK LIMIT
                        ========================================================== --}}

                        <div class="col-md-4">

                            <label for="low_stock_limit" class="form-label">

                                Low Stock Limit

                            </label>


                            <input type="number" name="low_stock_limit" id="low_stock_limit"
                                class="form-control @error('low_stock_limit') is-invalid @enderror"
                                placeholder="Enter low stock limit"
                                value="{{ old('low_stock_limit', $product->low_stock_limit) }}" min="3">


                            <small class="text-muted">

                                Product is low stock when quantity reaches this limit.

                            </small>


                            @error('low_stock_limit')
                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>
                            @enderror

                        </div>


                        {{-- =========================================================
                        STATUS
                        ========================================================== --}}

                        <div class="col-md-4">

                            <label for="status" class="form-label">

                                Status

                            </label>


                            <select name="status" id="status"
                                class="form-select @error('status') is-invalid @enderror">

                                <option value="Active"
                                    {{ old('status', $product->status) == 'Active' ? 'selected' : '' }}>

                                    Active

                                </option>


                                <option value="Inactive"
                                    {{ old('status', $product->status) == 'Inactive' ? 'selected' : '' }}>

                                    Inactive

                                </option>

                            </select>


                            @error('status')
                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>
                            @enderror

                        </div>


                        {{-- =========================================================
                        BUYING PRICE
                        ========================================================== --}}

                        <div class="col-md-4">

                            <label for="buying_price" class="form-label">

                                Buying Price

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">
                                    ₹
                                </span>


                                <input type="number" name="buying_price" id="buying_price"
                                    class="form-control @error('buying_price') is-invalid @enderror"
                                    value="{{ old('buying_price', $product->buying_price) }}" min="0"
                                    step="0.01">

                            </div>


                            @error('buying_price')
                                <div class="text-danger small mt-1">

                                    {{ $message }}

                                </div>
                            @enderror

                        </div>


                        {{-- =========================================================
                        SELLING PRICE
                        ========================================================== --}}

                        <div class="col-md-4">

                            <label for="selling_price" class="form-label">

                                Selling Price

                            </label>


                            <div class="input-group">

                                <span class="input-group-text">
                                    ₹
                                </span>


                                <input type="number" name="selling_price" id="selling_price"
                                    class="form-control @error('selling_price') is-invalid @enderror"
                                    value="{{ old('selling_price', $product->selling_price) }}" min="0"
                                    step="0.01">

                            </div>


                            @error('selling_price')
                                <div class="text-danger small mt-1">

                                    {{ $message }}

                                </div>
                            @enderror

                        </div>


                        {{-- =========================================================
                        DESCRIPTION
                        ========================================================== --}}

                        <div class="col-12">

                            <label for="description" class="form-label">

                                Description

                            </label>


                            <textarea name="description" id="description" rows="4"
                                class="form-control @error('description') is-invalid @enderror" placeholder="Enter product description">{{ old('description', $product->description) }}</textarea>


                            @error('description')
                                <div class="invalid-feedback">

                                    {{ $message }}

                                </div>
                            @enderror

                        </div>


                        {{-- =========================================================
                        BUTTONS
                        ========================================================== --}}

                        <div class="col-12">

                            <div class="d-flex justify-content-center gap-2">

                                <a href="{{ route('product') }}" class="btn btn-outline-primary">

                                    Cancel

                                </a>


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

                                    <span class="updateProductText">

                                        Update Product

                                    </span>


                                    <span class="updateProductLoader d-none">

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

                                        Updating...

                                    </span>

                                </button>

                            </div>

                        </div>

                    </div>

                </form>

            </div>

        </div>

    </div>



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

    <div id="fullScreenCameraOverlay"
        style="
            display:none;
            position:fixed;
            top:0;
            left:0;
            width:100vw;
            height:100vh;
            background-color:#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="fsCloseBtn"
                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="fsSwitchCamBtn"
                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>



        {{-- =========================================================
        VIEWFINDER
        ========================================================== --}}

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

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


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


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


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


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

        </div>



        {{-- =========================================================
        BOTTOM CAMERA 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
                );
             ">


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

                <button type="button" id="fsShutterBtn" 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="fsReviewControls" class="justify-content-around align-items-center w-100 px-4"
                style="display:none;">

                <button type="button" id="fsRetakeBtn"
                    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>


                <button type="button" id="fsAcceptBtn"
                    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() {


            /*
            |--------------------------------------------------------------------------
            | ELEMENTS
            |--------------------------------------------------------------------------
            */

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

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

            const previewWrapper =
                document.getElementById('imagePreviewWrapper');

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


            // Camera elements
            const cameraOverlay =
                document.getElementById('fullScreenCameraOverlay');

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

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

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

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

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

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

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

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

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

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

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

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


            /*
            |--------------------------------------------------------------------------
            | FILE STORAGE
            |--------------------------------------------------------------------------
            */

            let selectedFiles = [];

            let activeStream = null;

            let currentFacingMode = 'environment';

            let tempCapturedFile = null;



            /*
            |--------------------------------------------------------------------------
            | START CAMERA
            |--------------------------------------------------------------------------
            */

            async function startCamera() {

                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('Camera error:', err);

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

                    fsErrorBox.style.display = 'block';

                }

            }



            /*
            |--------------------------------------------------------------------------
            | STOP CAMERA
            |--------------------------------------------------------------------------
            */

            function stopCamera() {

                if (activeStream) {

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

                        track.stop();

                    });

                    activeStream = null;

                }


                fsVideo.srcObject = null;

                cameraOverlay.style.display = 'none';

            }



            /*
            |--------------------------------------------------------------------------
            | OPEN CAMERA
            |--------------------------------------------------------------------------
            */

            if (capturePhotoBtn) {

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

                    cameraOverlay.style.display = 'flex';

                    startCamera();

                });

            }



            /*
            |--------------------------------------------------------------------------
            | CLOSE CAMERA
            |--------------------------------------------------------------------------
            */

            if (fsCloseBtn) {

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

                    stopCamera();

                });

            }



            /*
            |--------------------------------------------------------------------------
            | SWITCH CAMERA
            |--------------------------------------------------------------------------
            */

            if (fsSwitchCamBtn) {

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

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


                    startCamera();

                });

            }



            /*
            |--------------------------------------------------------------------------
            | 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 =
                            'product_' + Date.now() + '.jpg';


                        tempCapturedFile =
                            new File(
                                [blob],
                                fileName, {
                                    type: 'image/jpeg',
                                    lastModified: Date.now()
                                }
                            );


                        fsPhotoPreview.src =
                            URL.createObjectURL(blob);


                        fsPhotoPreview.style.display =
                            'block';


                        fsVideo.style.display =
                            'none';


                        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) {

                        if (addImage(tempCapturedFile)) {

                            renderNewImagePreview();

                            updateInputFiles();

                        }

                        tempCapturedFile = null;

                    }


                    stopCamera();

                });

            }



            /*
            |--------------------------------------------------------------------------
            | DESKTOP FILE INPUT
            |--------------------------------------------------------------------------
            */

            if (productImage) {

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

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


                    this.value = '';


                    files.forEach(function(file) {

                        addImage(file);

                    });


                    renderNewImagePreview();

                    updateInputFiles();

                });

            }



            /*
            |--------------------------------------------------------------------------
            | MOBILE GALLERY
            |--------------------------------------------------------------------------
            */

            if (galleryInput) {

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

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


                    this.value = '';


                    files.forEach(function(file) {

                        addImage(file);

                    });


                    renderNewImagePreview();

                    updateInputFiles();

                });

            }



            /*
            |--------------------------------------------------------------------------
            | ADD IMAGE
            |--------------------------------------------------------------------------
            */

            function addImage(file) {

                const allowedTypes = [
                    'image/jpeg',
                    'image/png',
                    'image/webp'
                ];


                /*
                | FILE TYPE
                */

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

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

                    return false;

                }


                /*
                | FILE SIZE
                */

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

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

                    return false;

                }


                /*
                | DUPLICATE CHECK
                */

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

                        return (
                            existingFile.name === file.name &&
                            existingFile.size === file.size &&
                            existingFile.lastModified === file.lastModified
                        );

                    });


                if (duplicate) {

                    return false;

                }


                /*
                | ADD FILE
                */

                selectedFiles.push(file);

                return true;

            }



            /*
            |--------------------------------------------------------------------------
            | RENDER NEW IMAGES
            |--------------------------------------------------------------------------
            */

            function renderNewImagePreview() {

                /*
                |--------------------------------------------------------------------------
                | Remove only NEW image previews
                |--------------------------------------------------------------------------
                */

                previewWrapper
                    .querySelectorAll('.new-image-preview')
                    .forEach(function(element) {

                        element.remove();

                    });


                /*
                |--------------------------------------------------------------------------
                | Render selected new files
                |--------------------------------------------------------------------------
                */

                selectedFiles.forEach(function(file, index) {

                    const reader =
                        new FileReader();


                    reader.onload =
                        function(event) {


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


                            imageBox.className =
                                'position-relative new-image-preview';


                            imageBox.style.width =
                                '140px';


                            imageBox.style.height =
                                '140px';


                            /*
                            |--------------------------------------------------------------------------
                            | IMAGE
                            |--------------------------------------------------------------------------
                            */

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


                            image.src =
                                event.target.result;


                            image.alt =
                                'New Product Image';


                            image.className =
                                'rounded border';


                            image.style.width =
                                '140px';


                            image.style.height =
                                '140px';


                            image.style.objectFit =
                                'cover';



                            /*
                            |--------------------------------------------------------------------------
                            | REMOVE BUTTON
                            |--------------------------------------------------------------------------
                            */

                            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;';



                            /*
                            |--------------------------------------------------------------------------
                            | REMOVE NEW IMAGE
                            |--------------------------------------------------------------------------
                            */

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

                                    selectedFiles.splice(index, 1);

                                    renderNewImagePreview();

                                    updateInputFiles();

                                }
                            );


                            imageBox.appendChild(image);

                            imageBox.appendChild(removeButton);

                            previewWrapper.appendChild(imageBox);

                        };


                    reader.readAsDataURL(file);

                });

            }



            /*
            |--------------------------------------------------------------------------
            | UPDATE ACTUAL FILE INPUT
            |--------------------------------------------------------------------------
            */

            function updateInputFiles() {

                if (!productImage) {

                    return;

                }


                const dataTransfer =
                    new DataTransfer();


                selectedFiles.forEach(function(file) {

                    dataTransfer.items.add(file);

                });


                productImage.files =
                    dataTransfer.files;

            }



            /*
            |--------------------------------------------------------------------------
            | REMOVE EXISTING IMAGE
            |--------------------------------------------------------------------------
            */

            $(document).on(
                'click',
                '.remove-existing-image',
                function(e) {

                    e.preventDefault();


                    const imagePath =
                        $(this).attr('data-image');


                    if (!imagePath) {

                        alert('Image path not found.');

                        return;

                    }


                    /*
                    | Remove image from screen
                    */

                    $(this)
                        .closest('.existing-image-box')
                        .remove();


                    /*
                    | Add hidden input
                    */

                    $('#removedImages').append(`

                <input type="hidden"
                       name="remove_images[]"
                       value="${imagePath}">

            `);

                }
            );



            /*
            |--------------------------------------------------------------------------
            | QUANTITY ADD
            |--------------------------------------------------------------------------
            */

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

                let quantity =
                    parseInt($('#quantity').val()) || 0;


                $('#quantity').val(
                    quantity + 1
                );

            });



            /*
            |--------------------------------------------------------------------------
            | QUANTITY REDUCE
            |--------------------------------------------------------------------------
            */

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

                let quantity =
                    parseInt($('#quantity').val()) || 0;


                if (quantity > 0) {

                    $('#quantity').val(
                        quantity - 1
                    );

                }

            });



            /*
            |--------------------------------------------------------------------------
            | PREVENT NEGATIVE QUANTITY
            |--------------------------------------------------------------------------
            */

            $('#quantity').on('input', function() {

                if ($(this).val() < 0) {

                    $(this).val(0);

                }

            });



            /*
            |--------------------------------------------------------------------------
            | PREVENT DOUBLE SUBMISSION
            |--------------------------------------------------------------------------
            */

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

                const submitButton =
                    $('#submit_btn');


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

                    e.preventDefault();

                    return false;

                }


                submitButton.prop(
                    'disabled',
                    true
                );


                submitButton
                    .find('.updateProductText')
                    .addClass('d-none');


                submitButton
                    .find('.updateProductLoader')
                    .removeClass('d-none');

            });


        });
    </script>
@endsection