@extends('admin.layout')

@section('content')

    <div>

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

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

            <div class="col-auto">

                <h5>

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

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

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

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

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

                            </svg>

                        </a>

                    </button>

                    Edit Customer Details

                </h5>

            </div>

        </div>


        {{-- =========================================================
        CARD
    ========================================================== --}}

        <div class="card shadow-sm">

            <div class="card-body">

                <form action="{{ route('admin.update_customer', $customer->id) }}" method="POST"
                    enctype="multipart/form-data" id="detailsForm">

                    @csrf


                    <div class="row">

                        {{-- =================================================
                        LEFT SIDE
                    ================================================= --}}

                        <div class="col-lg-8">

                            <div class="row">


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

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

                                    <label class="form-label fw-semibold">

                                        Name

                                        <span class="text-danger">*</span>

                                    </label>

                                    <input type="text" name="name" class="form-control"
                                        value="{{ old('name', $customer->name) }}" placeholder="Enter Name">

                                </div>


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

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

                                    <label class="form-label fw-semibold">

                                        Mobile Number

                                    </label>

                                    <input type="text" name="mobile" class="form-control" maxlength="10"
                                        value="{{ old('mobile', $customer->mobile) }}" placeholder="Enter Mobile Number">

                                </div>

                                {{-- =================================================
    CUSTOMER IMAGE
================================================= --}}
                                <div class="col-md-6 mb-3">

                                    <label class="form-label fw-semibold">
                                        Customer Image
                                    </label>

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

                                        <button type="button" id="captureCustomerBtn" class="btn btn-primary">

                                            <i class="ti tabler-camera me-1"></i>
                                            Capture Photo

                                        </button>

                                        <label for="customerGalleryInput" class="btn btn-outline-primary mb-0">

                                            <i class="ti tabler-photo me-1"></i>
                                            Choose from Gallery

                                        </label>

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

                                    </div>


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

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

                                    </div>


                                    {{-- EXISTING / NEW PREVIEW --}}
                                    <div id="customerImagePreviewContainer" class="mt-2"
                                        @if (!$customer->customer_image) style="display:none;" @endif>

                                        @if ($customer->customer_image)
                                            <img id="customerImagePreview"
                                                src="{{ asset('uploads/customer/' . $customer->customer_image) }}"
                                                alt="Customer Image"
                                                style="
                    width:70px;
                    height:70px;
                    object-fit:cover;
                    border-radius:8px;
                    border:1px solid #ddd;
                    padding:2px;
                    cursor:pointer;
                "
                                                class="preview-file"
                                                data-file="{{ asset('uploads/customer/' . $customer->customer_image) }}">
                                        @else
                                            <img id="customerImagePreview" src="" alt="Customer Image"
                                                style="
                    width:70px;
                    height:70px;
                    object-fit:cover;
                    border-radius:8px;
                    border:1px solid #ddd;
                    padding:2px;
                    cursor:pointer;
                    display:none;
                "
                                                class="preview-file">
                                        @endif

                                    </div>

                                </div>


                                {{-- =================================================
                                ID PROOF UPLOAD
                                IMPORTANT:
                                Controller uses aadhar_card
                            ================================================= --}}

                                {{-- =================================================
    ID PROOF UPLOAD
================================================= --}}
                                <div class="col-md-6 mb-3">

                                    <label class="form-label fw-semibold">
                                        ID Proof Upload
                                    </label>


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

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

                                            <i class="ti tabler-camera me-1"></i>
                                            Capture ID Proof

                                        </button>


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

                                            <i class="ti tabler-photo me-1"></i>
                                            Choose File

                                        </label>

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

                                    </div>


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

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

                                    </div>


                                    {{-- EXISTING / NEW PREVIEW --}}
                                    <div id="aadharImagePreviewContainer" class="mt-2"
                                        @if (!$customer->aadhar_card) style="display:none;" @endif>

                                        @if ($customer->aadhar_card)
                                            @php

                                                $aadharPath = asset('uploads/customer/' . $customer->aadhar_card);

                                                $aadharExtension = strtolower(
                                                    pathinfo($customer->aadhar_card, PATHINFO_EXTENSION),
                                                );

                                            @endphp


                                            {{-- IMAGE --}}
                                            @if (in_array($aadharExtension, ['jpg', 'jpeg', 'png', 'webp']))
                                                <img id="aadharImagePreview" src="{{ $aadharPath }}" alt="ID Proof"
                                                    style="
                        width:70px;
                        height:70px;
                        object-fit:cover;
                        border-radius:8px;
                        border:1px solid #ddd;
                        padding:2px;
                        cursor:pointer;
                    "
                                                    class="preview-file" data-file="{{ $aadharPath }}">


                                                {{-- PDF --}}
                                            @elseif($aadharExtension === 'pdf')
                                                <div id="aadharPdfPreview" class="preview-file"
                                                    data-file="{{ $aadharPath }}"
                                                    style="
                        width:70px;
                        height:70px;
                        border:1px solid #ddd;
                        border-radius:8px;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                        cursor:pointer;
                        background:#f8f9fa;
                    ">

                                                    <i class="ti tabler-file-type-pdf text-danger"
                                                        style="font-size:32px;">
                                                    </i>

                                                </div>
                                            @endif
                                        @endif

                                    </div>

                                </div>

                            </div>

                        </div>


                        {{-- =================================================
                        ADDRESS
                    ================================================= --}}

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

                            <label class="form-label fw-semibold">

                                Address

                                <span class="text-danger">*</span>

                            </label>

                            <textarea rows="4" class="form-control" name="address" placeholder="Enter Address">{{ old('address', $customer->address) }}</textarea>

                        </div>

                    </div>


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

                    <div class="text-center my-5">

                        <button type="reset" class="btn btn-secondary px-5">

                            Reset

                        </button>


                        <button type="submit" id="saveBtn" class="btn btn-primary px-5 me-4">

                            <i id="saveIcon" class="ti tabler-device-floppy me-1"></i>

                            <span id="saveBtnText">

                                Save Details

                            </span>

                        </button>

                    </div>


                </form>

            </div>

        </div>

    </div>



    {{-- =========================================================
    FILE PREVIEW MODAL
========================================================= --}}

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

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

            <div class="modal-content">


                {{-- HEADER --}}

                <div class="modal-header">

                    <h5 class="modal-title">

                        File Preview

                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">

                    </button>

                </div>


                {{-- BODY --}}

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


                    {{-- IMAGE PREVIEW --}}

                    <img id="previewImage" src="" alt="Preview" class="img-fluid rounded"
                        style="
                        max-height:500px;
                        object-fit:contain;
                        display:none;
                    ">


                    {{-- PDF PREVIEW --}}

                    <iframe id="previewPdf" src=""
                        style="
                        width:100%;
                        height:500px;
                        border:none;
                        display:none;
                    ">
                    </iframe>


                </div>

            </div>

        </div>

    </div>

    {{-- Camera --}}

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


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

                CAMERA

            </span>


            {{-- SWITCH --}}
            <button type="button" id="customerCameraSwitch"
                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="customerCameraVideo" autoplay playsinline muted
                style="
                width:100%;
                height:100%;
                object-fit:cover;
            ">
            </video>


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


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


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


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

        </div>


        {{-- BOTTOM --}}
        <div
            style="
            position:absolute;
            bottom:0;
            left:0;
            right:0;
            z-index:100;
            padding-bottom:45px;
            padding-top:20px;
            background:linear-gradient(
                to top,
                rgba(0,0,0,0.8),
                transparent
            );
        ">


            {{-- SHUTTER --}}
            <div id="customerLiveControls" class="d-flex justify-content-center">

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

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

                </button>

            </div>


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

                <button type="button" id="customerRetakeBtn" class="btn btn-outline-light rounded-pill px-4 py-2">

                    <i class="ti tabler-arrow-back-up me-1"></i>
                    Retake

                </button>


                <button type="button" id="customerAcceptBtn" class="btn btn-success rounded-pill px-4 py-2">

                    <i class="ti tabler-check me-1"></i>
                    Use Photo

                </button>

            </div>

        </div>

    </div>

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


            /* =========================================================
               FORM SUBMIT
            ========================================================== */

            const form = document.getElementById('detailsForm');

            const btn = document.getElementById('saveBtn');

            const btnText = document.getElementById('saveBtnText');

            const icon = document.getElementById('saveIcon');


            if (form && btn) {

                form.addEventListener('submit', function() {

                    btn.disabled = true;


                    if (btnText) {

                        btnText.textContent = 'Processing...';

                    }


                    if (icon) {

                        icon.classList.remove(
                            'tabler-device-floppy'
                        );

                        icon.classList.add(
                            'tabler-loader-2',
                            'ti-spin'
                        );

                    }

                });

            }



            /* =========================================================
               CUSTOMER IMAGE PREVIEW
            ========================================================== */

            const customerImageInput =
                document.getElementById('customerImage');


            const customerImageContainer =
                document.getElementById(
                    'customerImagePreviewContainer'
                );


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


            if (customerImageInput) {

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


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

                            return;

                        }


                        const file = this.files[0];


                        if (!file.type.startsWith('image/')) {

                            return;

                        }


                        const url =
                            URL.createObjectURL(file);


                        customerImagePreview.src = url;


                        customerImagePreview.style.display =
                            'block';


                        customerImageContainer.style.display =
                            'block';


                        customerImagePreview.setAttribute(
                            'data-file',
                            url
                        );

                    }
                );

            }



            /* =========================================================
               ID PROOF PREVIEW
               Controller field = aadhar_card
            ========================================================== */

            const aadharInput =
                document.getElementById('aadharImage');


            const aadharContainer =
                document.getElementById(
                    'aadharImagePreviewContainer'
                );


            if (aadharInput) {

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


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

                            return;

                        }


                        const file = this.files[0];


                        const url =
                            URL.createObjectURL(file);


                        aadharContainer.style.display =
                            'block';



                        /* =================================================
                           IMAGE ID PROOF
                        ================================================= */

                        if (file.type.startsWith('image/')) {

                            aadharContainer.innerHTML = `

                        <img
                            id="aadharImagePreview"
                            src="${url}"
                            alt="ID Proof"
                            class="preview-file"
                            data-file="${url}"
                            style="
                                width:70px;
                                height:70px;
                                object-fit:cover;
                                border-radius:8px;
                                border:1px solid #ddd;
                                padding:2px;
                                cursor:pointer;
                            "
                        >

                    `;

                        }


                        /* =================================================
                           PDF ID PROOF
                        ================================================= */
                        else if (
                            file.type === 'application/pdf'
                        ) {

                            aadharContainer.innerHTML = `

                        <div
                            id="aadharPdfPreview"
                            class="preview-file"
                            data-file="${url}"
                            style="
                                width:70px;
                                height:70px;
                                border:1px solid #ddd;
                                border-radius:8px;
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                cursor:pointer;
                                background:#f8f9fa;
                            "
                        >

                            <i
                                class="ti tabler-file-type-pdf text-danger"
                                style="font-size:32px;">
                            </i>

                        </div>

                    `;

                        }

                    }
                );

            }



            /* =========================================================
               PREVIEW FILE CLICK
            ========================================================== */

            $(document).on(
                'click',
                '.preview-file',
                function() {


                    const file =
                        $(this).data('file');


                    if (!file) {

                        return;

                    }


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


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


                    /* Reset */

                    previewImage.style.display =
                        'none';

                    previewPdf.style.display =
                        'none';


                    previewImage.src = '';

                    previewPdf.src = '';



                    /* =================================================
                       CHECK PDF
                    ================================================= */

                    const cleanFile =
                        file
                        .toLowerCase()
                        .split('?')[0];


                    const isPdf =
                        cleanFile.endsWith('.pdf');



                    /* =================================================
                       PDF
                    ================================================= */

                    if (isPdf) {

                        previewPdf.src = file;

                        previewPdf.style.display =
                            'block';

                    }


                    /* =================================================
                       IMAGE
                    ================================================= */
                    else {

                        previewImage.src = file;

                        previewImage.style.display =
                            'block';

                    }



                    /* =================================================
                       BOOTSTRAP MODAL
                    ================================================= */

                    const modalElement =
                        document.getElementById(
                            'filePreviewModal'
                        );


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


                    modal.show();

                }
            );


        });
    </script>

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

            /* =========================================================
               INPUTS
            ========================================================= */

            const customerInput =
                document.getElementById('customerImage');

            const customerGallery =
                document.getElementById('customerGalleryInput');

            const aadharInput =
                document.getElementById('aadharImage');

            const aadharGallery =
                document.getElementById('aadharGalleryInput');


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

            const customerContainer =
                document.getElementById(
                    'customerImagePreviewContainer'
                );

            const customerPreview =
                document.getElementById(
                    'customerImagePreview'
                );


            const aadharContainer =
                document.getElementById(
                    'aadharImagePreviewContainer'
                );


            /* =========================================================
               CAMERA BUTTONS
            ========================================================= */

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

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


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

            const overlay =
                document.getElementById(
                    'customerCameraOverlay'
                );

            const video =
                document.getElementById(
                    'customerCameraVideo'
                );

            const canvas =
                document.getElementById(
                    'customerCameraCanvas'
                );

            const photoPreview =
                document.getElementById(
                    'customerCapturedPreview'
                );

            const flash =
                document.getElementById(
                    'customerCameraFlash'
                );

            const errorBox =
                document.getElementById(
                    'customerCameraError'
                );

            const shutterBtn =
                document.getElementById(
                    'customerShutterBtn'
                );

            const liveControls =
                document.getElementById(
                    'customerLiveControls'
                );

            const reviewControls =
                document.getElementById(
                    'customerReviewControls'
                );

            const retakeBtn =
                document.getElementById(
                    'customerRetakeBtn'
                );

            const acceptBtn =
                document.getElementById(
                    'customerAcceptBtn'
                );

            const closeBtn =
                document.getElementById(
                    'customerCameraClose'
                );

            const switchBtn =
                document.getElementById(
                    'customerCameraSwitch'
                );

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


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

            let activeStream = null;

            let currentFacingMode =
                'environment';

            let currentCameraType =
                null;

            let tempCapturedFile =
                null;


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

            async function openCamera(type) {

                currentCameraType = type;

                if (type === 'customer') {

                    cameraTitle.textContent =
                        'CUSTOMER PHOTO';

                } else {

                    cameraTitle.textContent =
                        'ID PROOF';

                }


                overlay.style.display =
                    'flex';

                await startCamera();

            }


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

            async function startCamera() {

                errorBox.style.display =
                    'none';

                photoPreview.style.display =
                    'none';

                video.style.display =
                    'block';

                liveControls.style.display =
                    'flex';

                reviewControls.style.display =
                    'none';


                if (activeStream) {

                    activeStream
                        .getTracks()
                        .forEach(function(track) {
                            track.stop();
                        });

                    activeStream = null;

                }


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

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

                    errorBox.style.display =
                        'block';

                    return;
                }


                try {

                    activeStream =
                        await navigator.mediaDevices.getUserMedia({

                            video: {

                                facingMode: {
                                    ideal: currentFacingMode
                                },

                                width: {
                                    ideal: 1920
                                },

                                height: {
                                    ideal: 1080
                                }

                            },

                            audio: false

                        });


                    video.srcObject =
                        activeStream;

                    await video.play();


                } catch (error) {

                    console.error(
                        'Camera error:',
                        error
                    );

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

                    errorBox.style.display =
                        'block';

                }

            }


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

            function stopCamera() {

                if (activeStream) {

                    activeStream
                        .getTracks()
                        .forEach(function(track) {
                            track.stop();
                        });

                    activeStream = null;

                }


                video.srcObject =
                    null;

                overlay.style.display =
                    'none';

                tempCapturedFile =
                    null;

            }


            /* =========================================================
               CUSTOMER CAMERA
            ========================================================= */

            if (captureCustomerBtn) {

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

                        openCamera(
                            'customer'
                        );

                    }
                );

            }


            /* =========================================================
               AADHAR CAMERA
            ========================================================= */

            if (captureAadharBtn) {

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

                        openCamera(
                            'aadhar'
                        );

                    }
                );

            }


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

            if (closeBtn) {

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

                        stopCamera();

                    }
                );

            }


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

            if (switchBtn) {

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

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

                        startCamera();

                    }
                );

            }


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

            if (shutterBtn) {

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

                        if (
                            !activeStream ||
                            !video.videoWidth
                        ) {
                            return;
                        }


                        /* FLASH */

                        flash.style.display =
                            'block';

                        setTimeout(function() {

                            flash.style.display =
                                'none';

                        }, 100);


                        const width =
                            video.videoWidth;

                        const height =
                            video.videoHeight;


                        canvas.width =
                            width;

                        canvas.height =
                            height;


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


                        /* FRONT CAMERA MIRROR */

                        if (
                            currentFacingMode ===
                            'user'
                        ) {

                            ctx.translate(
                                width,
                                0
                            );

                            ctx.scale(
                                -1,
                                1
                            );

                        }


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


                        canvas.toBlob(
                            function(blob) {

                                if (!blob) {
                                    return;
                                }


                                const prefix =
                                    currentCameraType ===
                                    'customer' ?
                                    'customer_' :
                                    'aadhar_';


                                tempCapturedFile =
                                    new File(
                                        [blob],
                                        prefix +
                                        Date.now() +
                                        '.jpg', {
                                            type: 'image/jpeg',

                                            lastModified: Date.now()
                                        }
                                    );


                                photoPreview.src =
                                    URL.createObjectURL(
                                        blob
                                    );


                                photoPreview.style.display =
                                    'block';

                                video.style.display =
                                    'none';


                                liveControls.style.display =
                                    'none';

                                reviewControls.style.display =
                                    'flex';

                            },
                            'image/jpeg',
                            0.92
                        );

                    }
                );

            }


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

            if (retakeBtn) {

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

                        tempCapturedFile =
                            null;

                        photoPreview.style.display =
                            'none';

                        video.style.display =
                            'block';

                        liveControls.style.display =
                            'flex';

                        reviewControls.style.display =
                            'none';

                    }
                );

            }


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

            if (acceptBtn) {

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

                        if (!tempCapturedFile) {
                            return;
                        }


                        if (
                            currentCameraType ===
                            'customer'
                        ) {

                            setInputFile(
                                customerInput,
                                tempCapturedFile
                            );

                            showCustomerPreview(
                                tempCapturedFile
                            );

                        } else {

                            setInputFile(
                                aadharInput,
                                tempCapturedFile
                            );

                            showAadharPreview(
                                tempCapturedFile
                            );

                        }


                        stopCamera();

                    }
                );

            }


            /* =========================================================
               PUT FILE INTO INPUT
            ========================================================= */

            function setInputFile(
                input,
                file
            ) {

                if (!input) {
                    return;
                }


                const dataTransfer =
                    new DataTransfer();

                dataTransfer.items.add(
                    file
                );

                input.files =
                    dataTransfer.files;

            }


            /* =========================================================
               CUSTOMER PREVIEW
            ========================================================= */

            function showCustomerPreview(
                file
            ) {

                const url =
                    URL.createObjectURL(
                        file
                    );


                customerPreview.src =
                    url;

                customerPreview.style.display =
                    'block';

                customerPreview.setAttribute(
                    'data-file',
                    url
                );

                customerContainer.style.display =
                    'block';

            }


            /* =========================================================
               AADHAR PREVIEW
            ========================================================= */

            function showAadharPreview(
                file
            ) {

                const url =
                    URL.createObjectURL(
                        file
                    );


                aadharContainer.style.display =
                    'block';


                aadharContainer.innerHTML = `

            <img
                id="aadharImagePreview"
                src="${url}"
                alt="ID Proof"
                class="preview-file"
                data-file="${url}"
                style="
                    width:70px;
                    height:70px;
                    object-fit:cover;
                    border-radius:8px;
                    border:1px solid #ddd;
                    padding:2px;
                    cursor:pointer;
                "
            >

        `;

            }


            /* =========================================================
               CUSTOMER GALLERY
            ========================================================= */

            if (customerGallery) {

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

                        if (!this.files.length) {
                            return;
                        }


                        const file =
                            this.files[0];


                        if (!file.type.startsWith('image/')) {

                            alert(
                                'Please select a valid image.'
                            );

                            this.value = '';

                            return;
                        }


                        setInputFile(
                            customerInput,
                            file
                        );

                        showCustomerPreview(
                            file
                        );

                        this.value = '';

                    }
                );

            }


            /* =========================================================
               AADHAR GALLERY
            ========================================================= */

            if (aadharGallery) {

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

                        if (!this.files.length) {
                            return;
                        }


                        const file =
                            this.files[0];


                        setInputFile(
                            aadharInput,
                            file
                        );


                        if (file.type.startsWith('image/')) {

                            showAadharPreview(
                                file
                            );

                        } else if (
                            file.type ===
                            'application/pdf'
                        ) {

                            const url =
                                URL.createObjectURL(
                                    file
                                );


                            aadharContainer.style.display =
                                'block';


                            aadharContainer.innerHTML = `

                        <div
                            id="aadharPdfPreview"
                            class="preview-file"
                            data-file="${url}"
                            style="
                                width:70px;
                                height:70px;
                                border:1px solid #ddd;
                                border-radius:8px;
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                cursor:pointer;
                                background:#f8f9fa;
                            "
                        >

                            <i
                                class="ti tabler-file-type-pdf text-danger"
                                style="font-size:32px;">
                            </i>

                        </div>

                    `;

                        }


                        this.value = '';

                    }
                );

            }


        });
    </script>

@endsection