@extends('admin.layout')
@section('content')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet">
    <style>
        .select2-container {
            width: 100% !important;
        }

        .select2-container .select2-selection--single {
            height: 38px !important;
            padding: 5px 10px;
            border: 1px solid #dee2e6;
            border-radius: 6px;
            background-color: #fff;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 26px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }

        .select2-container--default.select2-container--focus .select2-selection--single {
            border-color: #7367f0;
            box-shadow: 0 0 0 0.2rem rgba(115, 103, 240, 0.15);
        }

        .select2-container--default .select2-selection--single.is-invalid {
            border-color: #dc3545 !important;
        }

        .select2-dropdown {
            z-index: 9999;
        }

        .vehicle-preview-card {
            height: 80px;
            border: 1px dashed #dee2e6;
            background-color: #f8f9fa;
            position: relative;
        }

        .vehicle-preview-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .remove-image-btn {
            width: 22px;
            height: 22px;
            line-height: 12px;
            font-size: 14px;
            z-index: 10;
            top: -6px;
            right: -6px;
        }
    </style>
    <div>
        <div class="row align-items-center justify-content-between mb-3 mt-3">
            <div class="col-auto">
                <h5 class="mb-0">
                    <a href="{{ route('admin.stock_list') }}"
                        class="btn btn-icon bg-white me-2 d-inline-flex align-items-center justify-content-center"
                        style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                    Add Vehicle
                </h5>
            </div>
            <div class="col-auto">
                <a href="{{ route('admin.vehicle_brand') }}" class="btn btn-primary">
                    <i class="ti tabler-plus me-1"></i>
                    Add Brand Name
                </a>
            </div>
        </div>
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <div class="card shadow-sm">
            <div class="card-body">
                <form id="vehicleForm" action="{{ route('admin.store_stock') }}" method="POST"
                    enctype="multipart/form-data" data-has-errors="{{ $errors->any() ? '1' : '0' }}">
                    @csrf

                    {{-- ROW 1: 4 FIELDS --}}
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Brand Name <span class="text-danger">*</span>
                            </label>
                            <select name="brand_name" class="form-select" required>

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

                                @foreach ($brands as $brand)
                                    <option value="{{ $brand->id }}">
                                        {{ $brand->brand_name }}
                                    </option>
                                @endforeach

                            </select>
                            @error('brand_name')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Purchase Date <span class="text-danger">*</span>
                            </label>
                            <input type="date" name="purchase_date"
                                class="form-control @error('purchase_date') is-invalid @enderror"
                                value="{{ old('purchase_date') }}" max="{{ date('Y-m-d') }}">
                            @error('purchase_date')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Vehicle Number <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="vehicle_no"
                                class="form-control @error('vehicle_no') is-invalid @enderror" placeholder="TN 01 AB 1234"
                                value="{{ old('vehicle_no') }}">
                            @error('vehicle_no')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Vehicle Model <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="vehicle_model"
                                class="form-control @error('vehicle_model') is-invalid @enderror" placeholder="Honda Shine"
                                value="{{ old('vehicle_model') }}">
                            @error('vehicle_model')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                    {{-- ROW 2: 4 FIELDS --}}
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Vehicle Year <span class="text-danger">*</span>
                            </label>
                            <input type="number" name="vehicle_year"
                                class="form-control @error('vehicle_year') is-invalid @enderror" placeholder="2024"
                                min="1900" max="{{ date('Y') }}" value="{{ old('vehicle_year') }}">
                            @error('vehicle_year')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Kilometers <span class="text-danger"></span>
                            </label>
                            <input type="number" name="kilometers"
                                class="form-control @error('kilometers') is-invalid @enderror" placeholder="25000"
                                min="0" value="{{ old('kilometers') }}">
                            @error('kilometers')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Fuel Type <span class="text-danger">*</span>
                            </label>
                            <select name="fuel_type" class="form-select @error('fuel_type') is-invalid @enderror">
                                <option value="">Select Fuel</option>
                                @foreach (['Petrol', 'Diesel', 'Electric', 'CNG'] as $fuel)
                                    <option value="{{ $fuel }}"
                                        {{ old('fuel_type') == $fuel ? 'selected' : '' }}>
                                        {{ $fuel }}
                                    </option>
                                @endforeach
                            </select>
                            @error('fuel_type')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Name <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror"
                                placeholder="Enter Name" value="{{ old('name') }}">
                            @error('name')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                    {{-- ROW 3: 3 FIELDS --}}
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">
                                Mobile Number <span class="text-danger">*</span>
                            </label>
                            <input type="text" name="mobile" id="mobile"
                                class="form-control @error('mobile') is-invalid @enderror" maxlength="10"
                                inputmode="numeric" placeholder="Enter Mobile Number" value="{{ old('mobile') }}">
                            @error('mobile')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">
                                Purchase Price <span class="text-danger">*</span>
                            </label>
                            <input type="number" name="purchase_price"
                                class="form-control @error('purchase_price') is-invalid @enderror"
                                placeholder="Enter Purchase Price" min="0" step="0.01"
                                value="{{ old('purchase_price') }}">
                            @error('purchase_price')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label fw-semibold">
                                Selling Price <span class="text-danger">*</span>
                            </label>
                            <input type="number" name="selling_price"
                                class="form-control @error('selling_price') is-invalid @enderror"
                                placeholder="Enter Selling Price" min="0" step="0.01"
                                value="{{ old('selling_price') }}">
                            @error('selling_price')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>
                    {{-- ROW 4: 2 FIELDS --}}
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Website Display <span class="text-danger">*</span>
                            </label>
                            <select name="website_display"
                                class="form-select @error('website_display') is-invalid @enderror">
                                <option value="">Select Display Status</option>
                                <option value="1" {{ old('website_display') === '1' ? 'selected' : '' }}>Display
                                </option>
                                <option value="0" {{ old('website_display') === '0' ? 'selected' : '' }}>Hide
                                </option>
                            </select>
                            @error('website_display')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>

                        <div class="col-md-3 mb-3">
                            <label class="form-label fw-semibold">
                                Vehicle From
                            </label>

                            <select name="vehicle_from" class="form-select">
                                <option value="">Select Vehicle From</option>

                                <option value="In" {{ old('vehicle_from') === 'In' ? 'selected' : '' }}>
                                    In
                                </option>

                                <option value="Out" {{ old('vehicle_from') === 'Out' ? 'selected' : '' }}>
                                    Out
                                </option>
                            </select>

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

                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-semibold">
                                Address <span class="text-danger">*</span>
                            </label>
                            <textarea name="address" rows="1" class="form-control @error('address') is-invalid @enderror"
                                placeholder="Enter your address">{{ old('address') }}</textarea>
                            @error('address')
                                <small class="text-danger d-block mt-1">{{ $message }}</small>
                            @enderror
                        </div>
                    </div>

                    {{-- VEHICLE IMAGES --}}
                    <div class="col-md-4">

                        <label class="form-label fw-semibold">
                            Vehicle Images (Max 4)
                            <span class="text-danger">*</span>
                        </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="ti tabler-camera me-1"></i>
                                Capture Photo
                            </button>

                            {{-- CHOOSE FROM GALLERY --}}
                            <label for="galleryInput" class="btn btn-outline-primary mb-0">
                                <i class="ti tabler-photo me-1"></i>
                                Choose from Gallery
                            </label>

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

                        </div>


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

                            <input type="file" id="vehicleImages" class="form-control"
                                accept="image/jpeg,image/png,image/jpg,image/webp" multiple>

                        </div>


                        {{-- ACTUAL INPUTS SENT TO LARAVEL --}}
                        <input type="file" name="vehicle_images[]" id="imageInput0" class="d-none"
                            accept="image/jpeg,image/png,image/jpg,image/webp">

                        <input type="file" name="vehicle_images[]" id="imageInput1" class="d-none"
                            accept="image/jpeg,image/png,image/jpg,image/webp">

                        <input type="file" name="vehicle_images[]" id="imageInput2" class="d-none"
                            accept="image/jpeg,image/png,image/jpg,image/webp">

                        <input type="file" name="vehicle_images[]" id="imageInput3" class="d-none"
                            accept="image/jpeg,image/png,image/jpg,image/webp">


                        <small class="text-muted d-block mt-1">
                            JPG, PNG, WEBP | Maximum 5MB per image
                        </small>


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

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

                    </div>


                    {{-- ================= VEHICLE IMAGE PREVIEWS ================= --}}
                    <div class="col-md-8 mt-3 mt-md-0">

                        <div class="row g-2">

                            {{-- FRONT --}}
                            <div class="col-3">
                                <div id="preview-box-0"
                                    class="border rounded position-relative d-flex align-items-center justify-content-center"
                                    style="height:75px; overflow:visible;">

                                    <span class="text-muted small">Front</span>

                                </div>
                            </div>

                            {{-- BACK --}}
                            <div class="col-3">
                                <div id="preview-box-1"
                                    class="border rounded position-relative d-flex align-items-center justify-content-center"
                                    style="height:75px; overflow:visible;">

                                    <span class="text-muted small">Back</span>

                                </div>
                            </div>

                            {{-- LEFT --}}
                            <div class="col-3">
                                <div id="preview-box-2"
                                    class="border rounded position-relative d-flex align-items-center justify-content-center"
                                    style="height:75px; overflow:visible;">

                                    <span class="text-muted small">Left</span>

                                </div>
                            </div>

                            {{-- RIGHT --}}
                            <div class="col-3">
                                <div id="preview-box-3"
                                    class="border rounded position-relative d-flex align-items-center justify-content-center"
                                    style="height:75px; overflow:visible;">

                                    <span class="text-muted small">Right</span>

                                </div>
                            </div>

                        </div>
                        <div class="text-center mt-4">
                            <button type="reset" id="resetBtn" class="btn btn-secondary px-5 ms-2">Reset</button>
                            <button type="submit" id="submitBtn" class="btn btn-primary px-5">
                                <i class="ti tabler-device-floppy me-1"></i> Save Vehicle
                            </button>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

    {{-- ================= FULL SCREEN MOBILE CAMERA ================= --}}
    <div id="fullScreenCameraOverlay"
        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 BAR --}}
        <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>


        {{-- CAMERA VIEW --}}
        <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>


            {{-- CAPTURED PHOTO --}}
            <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>


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

    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('#brand_name').select2({
                placeholder: 'Search / Select Brand',
                allowClear: true,
                width: '100%'
            });
            const mobileInput = document.getElementById('mobile');
            if (mobileInput) {
                mobileInput.addEventListener('input', function() {
                    this.value = this.value.replace(/\D/g, '').slice(0, 10);
                });
            }
            const vehicleForm = document.getElementById('vehicleForm');
            if (vehicleForm) {
                vehicleForm.addEventListener('reset', function() {
                    setTimeout(function() {
                        $('#brand_name').val(null).trigger('change');
                        selectedFiles = [];
                        syncFiles();
                        renderPreviews();
                    }, 50);
                });
            }
        });
    </script>
    <script>
        $(document).ready(function() {

            $('#resetBtn').on('click', function(e) {

                e.preventDefault();

                // Reset all input fields
                $('#yourForm')[0].reset();

                // Clear validation errors
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').hide();

            });

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

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

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

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

            const inputIds = [
                'imageInput0',
                'imageInput1',
                'imageInput2',
                'imageInput3'
            ];

            const previewBoxes = [
                document.getElementById('preview-box-0'),
                document.getElementById('preview-box-1'),
                document.getElementById('preview-box-2'),
                document.getElementById('preview-box-3')
            ];

            const labels = [
                'Front',
                'Back',
                'Left',
                'Right'
            ];


            /* ============================================================
               SELECTED FILES
            ============================================================ */

            const selectedFiles = [
                null,
                null,
                null,
                null
            ];


            /* ============================================================
               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');


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

            let activeStream = null;

            let currentFacingMode = 'environment';

            let tempCapturedFile = null;


            /* ============================================================
               FIND FIRST EMPTY SLOT
            ============================================================ */

            function getNextAvailableSlot() {

                for (let i = 0; i < 4; i++) {

                    if (selectedFiles[i] === null) {
                        return i;
                    }

                }

                return -1;
            }


            /* ============================================================
               SET FILE TO REAL LARAVEL INPUT
            ============================================================ */

            function setFileToInput(index, file) {

                const input =
                    document.getElementById(inputIds[index]);

                const dataTransfer =
                    new DataTransfer();

                if (file) {
                    dataTransfer.items.add(file);
                }

                input.files =
                    dataTransfer.files;
            }


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

            function addImage(file) {

                if (!file) {
                    return false;
                }


                /* FILE TYPE */

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

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


                /* MAX 4 */

                const slot =
                    getNextAvailableSlot();

                if (slot === -1) {

                    alert(
                        'You can only upload a maximum of 4 images.'
                    );

                    return false;
                }


                /* DUPLICATE */

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

                        if (!existingFile) {
                            return false;
                        }

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

                    });


                if (duplicate) {
                    return false;
                }


                /* ADD */

                selectedFiles[slot] = file;

                setFileToInput(slot, file);

                return true;
            }


            /* ============================================================
               REMOVE IMAGE
            ============================================================ */

            function removeImage(index) {

                selectedFiles[index] = null;

                document.getElementById(
                    inputIds[index]
                ).value = '';

                renderPreviews();
            }


            /* ============================================================
               RENDER PREVIEWS
            ============================================================ */

            function renderPreviews() {

                for (let i = 0; i < 4; i++) {

                    const box =
                        previewBoxes[i];

                    if (!box) {
                        continue;
                    }

                    box.innerHTML = '';


                    if (selectedFiles[i]) {

                        const imageUrl =
                            URL.createObjectURL(
                                selectedFiles[i]
                            );


                        box.innerHTML = `

                    <img
                        src="${imageUrl}"
                        class="w-100 h-100 rounded"
                        style="
                            object-fit:cover;
                            display:block;
                        "
                    >

                    <button
                        type="button"
                        class="remove-vehicle-image btn btn-danger rounded-circle"
                        data-index="${i}"
                        style="
                            position:absolute;
                            width:22px;
                            height:22px;
                            padding:0;
                            top:-8px;
                            right:-8px;
                            z-index:100;
                            font-size:16px;
                            line-height:18px;
                            border:2px solid #fff;
                        ">
                        &times;
                    </button>

                `;


                        const removeBtn =
                            box.querySelector(
                                '.remove-vehicle-image'
                            );


                        removeBtn.addEventListener(
                            'click',
                            function(e) {

                                e.preventDefault();
                                e.stopPropagation();

                                removeImage(
                                    parseInt(
                                        this.dataset.index
                                    )
                                );

                            }
                        );

                    } else {

                        box.innerHTML = `
                    <span class="text-muted small">
                        ${labels[i]}
                    </span>
                `;

                    }

                }

            }


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

            if (desktopInput) {

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

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

                        this.value = '';

                        files.forEach(function(file) {

                            addImage(file);

                        });

                        renderPreviews();

                    }
                );

            }


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

            if (galleryInput) {

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

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

                        this.value = '';

                        files.forEach(function(file) {

                            addImage(file);

                        });

                        renderPreviews();

                    }
                );

            }


            /* ============================================================
               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() {

                        if (getNextAvailableSlot() === -1) {

                            alert(
                                'You can only upload a maximum of 4 images.'
                            );

                            return;
                        }


                        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 =
                                    'vehicle_' +
                                    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) {

                            addImage(
                                tempCapturedFile
                            );

                            renderPreviews();

                            tempCapturedFile =
                                null;
                        }


                        stopCamera();

                    }
                );

            }


            /* ============================================================
               INITIAL PREVIEW
            ============================================================ */

            renderPreviews();

        });
        document.getElementById('submitBtn').addEventListener('click', function(e) {
            e.preventDefault(); // ✅ prevent double submit
            let btn = this;
            btn.disabled = true;
            btn.innerText = 'Processing...';
            document.getElementById('vehicleForm').submit();
        });
    </script>
@endsection