@extends('admin.layout')

@section('content')
    <style>
        .bg-lite {
            background-color: #f8f9fa !important;
        }

        .file-preview-box {
            width: 70px;
            height: 70px;
            object-fit: cover;
            border-radius: 8px;
            border: 1px solid #ddd;
            padding: 3px;
            background: #fff;
            cursor: pointer;
            display: block;
        }

        .pdf-preview-box {
            width: 70px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f8f8f8;
            cursor: pointer;
        }

        .file-preview-wrapper {
            margin-top: 8px;
            min-height: 0;
            height: auto;
        }

        .file-name-preview {
            font-size: 11px;
            color: #666;
            margin-top: 4px;
            max-width: 180px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>

    <div>

        <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('admin.stock_list') }}">

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

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

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

                            </svg>

                        </a>

                    </button>

                    Customer Details

                </h5>

            </div>

        </div>


        {{-- Main Card --}}
        <div class="card shadow-sm">

            <div class="card-body">

                <form id="customerForm" action="{{ route('admin.store_customer') }}" method="POST"
                    enctype="multipart/form-data" data-has-errors="{{ $errors->any() ? '1' : '0' }}">

                    @csrf

                    <input type="hidden" name="vehicle_id" value="{{ $vehicle->id }}">


                    {{-- CUSTOMER DETAILS --}}
                    <div class="row">

                        <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 @error('name') is-invalid @enderror" value="{{ old('name') }}"
                                        placeholder="Enter Name">

                                    @error('name')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                </div>


                                {{-- Father Name --}}
                                <div class="col-md-6 mb-3">

                                    <label class="form-label fw-semibold">
                                        Father Name <span class="text-danger">*</span>
                                    </label>

                                    <input type="text" name="father_name"
                                        class="form-control @error('father_name') is-invalid @enderror"
                                        value="{{ old('father_name') }}" placeholder="Enter Father Name">

                                    @error('father_name')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                </div>


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

                                    <label class="form-label fw-semibold">
                                        Mobile Number <span class="text-danger">*</span>
                                    </label>

                                    <input type="tel" name="mobile"
                                        class="form-control @error('mobile') is-invalid @enderror"
                                        value="{{ old('mobile') }}" placeholder="Enter Mobile Number" inputmode="numeric"
                                        pattern="[0-9]{10}" maxlength="10"
                                        oninput="this.value = this.value.replace(/[^0-9]/g, '')">

                                    @error('mobile')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                </div>


                                {{-- Customer Image --}}
                                <div class="col-md-4 mb-3">

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

                                    <input type="file" name="customer_image" id="customerImage"
                                        class="form-control @error('customer_image') is-invalid @enderror"
                                        accept="image/*,.pdf">

                                    @error('customer_image')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                    <div class="file-preview-wrapper">

                                        <a href="#" id="customerImageLink" data-bs-toggle="modal"
                                            data-bs-target="#filePreviewModal" style="display:none;">

                                            <img id="customerImagePreview" src="" alt="Customer Image"
                                                class="file-preview-box">

                                        </a>

                                        <div id="customerImagePdf" style="display:none;">
                                        </div>

                                        <div id="customerImageName" class="file-name-preview">
                                        </div>

                                    </div>

                                </div>


                                {{-- Customer ID Proof --}}
                                <div class="col-md-4 mb-3">

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

                                    <input type="file" name="aadhar_card" id="customerAadhar"
                                        class="form-control @error('aadhar_card') is-invalid @enderror"
                                        accept="image/*,.pdf">

                                    @error('aadhar_card')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                    <div class="file-preview-wrapper">

                                        <a href="#" id="customerAadharLink" data-bs-toggle="modal"
                                            data-bs-target="#filePreviewModal" style="display:none;">

                                            <img id="customerAadharPreview" src="" alt="ID Proof"
                                                class="file-preview-box">

                                        </a>

                                        <div id="customerAadharPdf" style="display:none;">
                                        </div>

                                        <div id="customerAadharName" class="file-name-preview">
                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>


                        {{-- Customer Address --}}
                        <div class="col-md-4 mb-3">

                            <label class="form-label fw-semibold">
                                Address <span class="text-danger">*</span>
                            </label>

                            <textarea name="address" rows="4" class="form-control @error('address') is-invalid @enderror"
                                placeholder="Enter Address">{{ old('address') }}</textarea>

                            @error('address')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>

                    </div>


                    <hr class="my-5">


                    {{-- GUARANTOR DETAILS --}}
                    <h5>Guarantor Details</h5>

                    <div class="row">

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

                            <div class="row">

                                {{-- Guarantor Name --}}
                                <div class="col-md-6 mb-3">

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

                                    <input type="text" name="guarantor_name"
                                        class="form-control @error('guarantor_name') is-invalid @enderror"
                                        value="{{ old('guarantor_name') }}" placeholder="Enter Guarantor Name">

                                    @error('guarantor_name')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                </div>


                                {{-- Guarantor Father Name --}}
                                <div class="col-md-6 mb-3">

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

                                    <input type="text" name="guarantor_father_name"
                                        class="form-control @error('guarantor_father_name') is-invalid @enderror"
                                        value="{{ old('guarantor_father_name') }}"
                                        placeholder="Enter Guarantor Father Name">

                                    @error('guarantor_father_name')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                </div>


                                {{-- Guarantor Mobile --}}
                                <div class="col-md-4 mb-3">

                                    <label class="form-label fw-semibold">
                                        Mobile Number
                                    </label>

                                    <input type="text" name="guarantor_mobile"
                                        class="form-control @error('guarantor_mobile') is-invalid @enderror"
                                        value="{{ old('guarantor_mobile') }}"
                                        placeholder="Enter Guarantor Mobile Number">

                                    @error('guarantor_mobile')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                </div>


                                {{-- Guarantor Image --}}
                                <div class="col-md-4 mb-3">

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

                                    <input type="file" name="guarantor_image" id="guarantorImage"
                                        class="form-control @error('guarantor_image') is-invalid @enderror"
                                        accept="image/*,.pdf">

                                    @error('guarantor_image')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                    <div class="file-preview-wrapper">

                                        <a href="#" id="guarantorImageLink" data-bs-toggle="modal"
                                            data-bs-target="#filePreviewModal" style="display:none;">

                                            <img id="guarantorImagePreview" src="" alt="Guarantor Image"
                                                class="file-preview-box">

                                        </a>

                                        <div id="guarantorImagePdf" style="display:none;">
                                        </div>

                                        <div id="guarantorImageName" class="file-name-preview">
                                        </div>

                                    </div>

                                </div>


                                {{-- Guarantor ID Proof --}}
                                <div class="col-md-4 mb-3">

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

                                    <input type="file" name="guarantor_aadhar_card" id="guarantorAadhar"
                                        class="form-control @error('guarantor_aadhar_card') is-invalid @enderror"
                                        accept="image/*,.pdf">

                                    @error('guarantor_aadhar_card')
                                        <small class="text-danger backend-error">
                                            {{ $message }}
                                        </small>
                                    @enderror

                                    <div class="file-preview-wrapper">

                                        <a href="#" id="guarantorAadharLink" data-bs-toggle="modal"
                                            data-bs-target="#filePreviewModal" style="display:none;">

                                            <img id="guarantorAadharPreview" src="" alt="Guarantor ID Proof"
                                                class="file-preview-box">

                                        </a>

                                        <div id="guarantorAadharPdf" style="display:none;">
                                        </div>

                                        <div id="guarantorAadharName" class="file-name-preview">
                                        </div>

                                    </div>

                                </div>

                            </div>

                        </div>


                        {{-- Guarantor Address --}}
                        <div class="col-md-4 mb-3">

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

                            <textarea rows="4" name="guarantor_address"
                                class="form-control @error('guarantor_address') is-invalid @enderror" placeholder="Enter Guarantor Address">{{ old('guarantor_address') }}</textarea>

                            @error('guarantor_address')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>

                    </div>


                    <hr class="my-5">


                    {{-- VEHICLE DETAILS --}}
                    <h5>Vehicle Details</h5>

                    <div class="row mb-4">

                        {{-- Vehicle Number --}}
                        <div class="col-md-4 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 bg-lite"
                                value="{{ $vehicle->vehicle_no }}" readonly>

                        </div>


                        {{-- Vehicle Model --}}
                        <div class="col-md-4 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 bg-lite"
                                value="{{ $vehicle->vehicle_model }}" readonly>

                        </div>


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

                            <label class="form-label fw-semibold">
                                Rate (₹) <span class="text-danger">*</span>
                            </label>

                            <input type="number" name="rate"
                                class="form-control @error('rate') is-invalid @enderror" value="{{ old('rate') }}"
                                placeholder="Enter Rate" step="0.01">

                            @error('rate')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>

                    </div>


                    <hr class="my-5">


                    {{-- PAYMENT DETAILS --}}
                    <h5>Payment Details</h5>

                    <div class="row mb-4">

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

                            <label class="form-label fw-semibold">
                                Payment Mode <span class="text-danger">*</span>
                            </label>

                            <div class="d-flex gap-4 mt-2">

                                {{-- Ready Cash --}}
                                <div class="form-check">

                                    <input class="form-check-input" type="radio" name="payment_mode" id="readyCash"
                                        value="Ready Cash"
                                        {{ old('payment_mode', 'Ready Cash') == 'Ready Cash' ? 'checked' : '' }}>

                                    <label class="form-check-label" for="readyCash">

                                        Ready Cash

                                    </label>

                                </div>


                                {{-- Due --}}
                                <div class="form-check">

                                    <input class="form-check-input" type="radio" name="payment_mode" id="duePayment"
                                        value="Due" {{ old('payment_mode') == 'Due' ? 'checked' : '' }}>

                                    <label class="form-check-label" for="duePayment">

                                        Due

                                    </label>

                                </div>

                            </div>

                            @error('payment_mode')
                                <small class="text-danger backend-error">
                                    {{ $message }}
                                </small>
                            @enderror

                        </div>

                    </div>


                    {{-- READY CASH OPTIONS --}}
                    <div class="col-md-4" id="readyCashOptions" style="display:none;">

                        <label class="form-label fw-semibold">
                            Payment Method <span class="text-danger">*</span>
                        </label>

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

                            <option value="">
                                -- Select Payment Method --
                            </option>

                            <option value="Hand Cash" {{ old('ready_cash_type') == 'Hand Cash' ? 'selected' : '' }}>
                                Hand Cash
                            </option>

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

                            <option value="Bank Transfer"
                                {{ old('ready_cash_type') == 'Bank Transfer' ? 'selected' : '' }}>
                                Bank Transfer
                            </option>

                        </select>

                        @error('ready_cash_type')
                            <small class="text-danger backend-error">
                                {{ $message }}
                            </small>
                        @enderror

                    </div>


                    {{-- DUE PAYMENT DETAILS --}}
                    <div id="paymentDetails" style="display:none;">

                        <div class="row">

                            {{-- By Hand --}}
                            <div class="col-md-2 mb-3">

                                <label class="form-label fw-semibold">
                                    By Hand <span class="text-danger">*</span>
                                </label>

                                <input type="number" name="by_hand" id="by_hand"
                                    class="form-control @error('by_hand') is-invalid @enderror"
                                    value="{{ old('by_hand', 0) }}" placeholder="Enter amount" step="0.01">

                                @error('by_hand')
                                    <small class="text-danger backend-error">
                                        {{ $message }}
                                    </small>
                                @enderror

                            </div>


                            {{-- Finance Amount --}}
                            <div class="col-md-3 mb-3">

                                <label class="form-label fw-semibold">
                                    Finance Amount <span class="text-danger">*</span>
                                </label>

                                <input type="number" name="finance_amount" id="finance_amount"
                                    class="form-control @error('finance_amount') is-invalid @enderror"
                                    value="{{ old('finance_amount') }}" placeholder="Enter finance amount"
                                    step="0.01">

                                @error('finance_amount')
                                    <small class="text-danger backend-error">
                                        {{ $message }}
                                    </small>
                                @enderror

                            </div>


                            {{-- Months --}}
                            <div class="col-md-2 mb-3">

                                <label class="form-label fw-semibold">
                                    Months <span class="text-danger">*</span>
                                </label>

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

                                @error('months')
                                    <small class="text-danger backend-error">
                                        {{ $message }}
                                    </small>
                                @enderror

                            </div>


                            {{-- Monthly Due --}}
                            <div class="col-md-2 mb-3">

                                <label class="form-label fw-semibold">
                                    Monthly Due <span class="text-danger">*</span>
                                </label>

                                <input type="number" name="monthly_due" id="monthly_due"
                                    class="form-control @error('monthly_due') is-invalid @enderror"
                                    value="{{ old('monthly_due') }}" placeholder="Auto calculated" step="0.01"
                                    readonly>

                                @error('monthly_due')
                                    <small class="text-danger backend-error">
                                        {{ $message }}
                                    </small>
                                @enderror

                            </div>


                            {{-- Due Date --}}
                            <div class="col-md-3 mb-3">

                                <label class="form-label fw-semibold">
                                    Due Date <span class="text-danger">*</span>
                                </label>

                                <input type="date" name="due_date" id="due_date"
                                    class="form-control @error('due_date') is-invalid @enderror"
                                    value="{{ old('due_date') }}">

                                @error('due_date')
                                    <small class="text-danger backend-error">
                                        {{ $message }}
                                    </small>
                                @enderror

                            </div>

                        </div>

                    </div>


                    {{-- Buttons --}}
                    {{-- Buttons --}}
                    <div class="d-flex justify-content-center align-items-center gap-2 mt-4 mb-5">

                        <button type="reset" id="resetBtn" class="btn btn-secondary" style="width: 130px;">
                            Reset
                        </button>

                        <button type="submit" id="submitBtn" class="btn btn-primary" style="width: 220px;">
                            <i class="ti tabler-device-floppy me-1"></i>
                            Save 
                        </button>

                    </div>

                </form>

            </div>

        </div>

    </div>


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

            /*
            |--------------------------------------------------------------------------
            | PAYMENT DETAILS
            |--------------------------------------------------------------------------
            */

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

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

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

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


            function togglePaymentDetails() {

                if (
                    readyCash &&
                    readyCash.checked
                ) {

                    if (window.jQuery) {

                        $(readyCashOptions)
                            .stop(true, true)
                            .slideDown(300);

                        $(paymentDetails)
                            .stop(true, true)
                            .slideUp(300);

                    } else {

                        readyCashOptions.style.display =
                            'block';

                        paymentDetails.style.display =
                            'none';

                    }

                } else if (
                    duePayment &&
                    duePayment.checked
                ) {

                    if (window.jQuery) {

                        $(readyCashOptions)
                            .stop(true, true)
                            .slideUp(300);

                        $(paymentDetails)
                            .stop(true, true)
                            .slideDown(300);

                    } else {

                        readyCashOptions.style.display =
                            'none';

                        paymentDetails.style.display =
                            'block';

                    }

                }

            }


            if (readyCash) {

                readyCash.addEventListener(
                    'change',
                    togglePaymentDetails
                );

            }


            if (duePayment) {

                duePayment.addEventListener(
                    'change',
                    togglePaymentDetails
                );

            }


            togglePaymentDetails();


            /*
            |--------------------------------------------------------------------------
            | MONTHLY DUE CALCULATION
            |--------------------------------------------------------------------------
            */

            const financeAmount =
                document.getElementById('finance_amount');

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

            const monthlyDue =
                document.getElementById('monthly_due');


            function calculateMonthlyDue() {

                if (
                    !financeAmount ||
                    !months ||
                    !monthlyDue
                ) {

                    return;

                }


                const finance =
                    parseFloat(
                        financeAmount.value
                    ) || 0;


                const monthCount =
                    parseInt(
                        months.value
                    ) || 0;


                if (
                    finance > 0 &&
                    monthCount > 0
                ) {

                    monthlyDue.value =
                        (
                            finance /
                            monthCount
                        ).toFixed(2);

                } else {

                    monthlyDue.value =
                        '';

                }

            }


            if (financeAmount) {

                financeAmount.addEventListener(
                    'input',
                    calculateMonthlyDue
                );

            }


            if (months) {

                months.addEventListener(
                    'input',
                    calculateMonthlyDue
                );

            }


            calculateMonthlyDue();


            /*
            |--------------------------------------------------------------------------
            | FILE CONFIGURATION
            |--------------------------------------------------------------------------
            */

            const fileFields = [

                {
                    inputId: 'customerImage',
                    linkId: 'customerImageLink',
                    previewId: 'customerImagePreview',
                    pdfId: 'customerImagePdf',
                    nameId: 'customerImageName',
                    storageKey: 'customer_image'
                },

                {
                    inputId: 'customerAadhar',
                    linkId: 'customerAadharLink',
                    previewId: 'customerAadharPreview',
                    pdfId: 'customerAadharPdf',
                    nameId: 'customerAadharName',
                    storageKey: 'customer_aadhar'
                },

                {
                    inputId: 'guarantorImage',
                    linkId: 'guarantorImageLink',
                    previewId: 'guarantorImagePreview',
                    pdfId: 'guarantorImagePdf',
                    nameId: 'guarantorImageName',
                    storageKey: 'guarantor_image'
                },

                {
                    inputId: 'guarantorAadhar',
                    linkId: 'guarantorAadharLink',
                    previewId: 'guarantorAadharPreview',
                    pdfId: 'guarantorAadharPdf',
                    nameId: 'guarantorAadharName',
                    storageKey: 'guarantor_aadhar'
                }

            ];


            /*
            |--------------------------------------------------------------------------
            | INDEXED DB
            |--------------------------------------------------------------------------
            */

            const DB_NAME =
                'customer_form_file_storage';

            const DB_VERSION =
                1;

            const STORE_NAME =
                'files';


            function openFileDB() {

                return new Promise(
                    function(resolve, reject) {

                        if (!window.indexedDB) {

                            reject(
                                new Error(
                                    'IndexedDB is not supported'
                                )
                            );

                            return;

                        }


                        const request =
                            indexedDB.open(
                                DB_NAME,
                                DB_VERSION
                            );


                        request.onupgradeneeded =
                            function(event) {

                                const db =
                                    event.target.result;


                                if (
                                    !db.objectStoreNames.contains(
                                        STORE_NAME
                                    )
                                ) {

                                    db.createObjectStore(
                                        STORE_NAME
                                    );

                                }

                            };


                        request.onsuccess =
                            function(event) {

                                resolve(
                                    event.target.result
                                );

                            };


                        request.onerror =
                            function() {

                                reject(
                                    request.error
                                );

                            };

                    }
                );

            }


            /*
            |--------------------------------------------------------------------------
            | SAVE FILE
            |--------------------------------------------------------------------------
            */

            function saveFileToDB(
                key,
                file
            ) {

                return new Promise(
                    async function(resolve, reject) {

                        try {

                            const db =
                                await openFileDB();


                            const transaction =
                                db.transaction(
                                    STORE_NAME,
                                    'readwrite'
                                );


                            const store =
                                transaction.objectStore(
                                    STORE_NAME
                                );


                            store.put({
                                    file: file,
                                    name: file.name,
                                    type: file.type,
                                    lastModified: file.lastModified
                                },
                                key
                            );


                            transaction.oncomplete =
                                function() {

                                    db.close();

                                    resolve(true);

                                };


                            transaction.onerror =
                                function() {

                                    db.close();

                                    reject(
                                        transaction.error
                                    );

                                };

                        } catch (error) {

                            console.log(
                                'File save error:',
                                error
                            );

                            resolve(false);

                        }

                    }
                );

            }


            /*
            |--------------------------------------------------------------------------
            | GET FILE
            |--------------------------------------------------------------------------
            */

            function getFileFromDB(key) {

                return new Promise(
                    async function(resolve, reject) {

                        try {

                            const db =
                                await openFileDB();


                            const transaction =
                                db.transaction(
                                    STORE_NAME,
                                    'readonly'
                                );


                            const store =
                                transaction.objectStore(
                                    STORE_NAME
                                );


                            const request =
                                store.get(key);


                            request.onsuccess =
                                function() {

                                    const result =
                                        request.result ||
                                        null;


                                    db.close();

                                    resolve(result);

                                };


                            request.onerror =
                                function() {

                                    db.close();

                                    reject(
                                        request.error
                                    );

                                };

                        } catch (error) {

                            console.log(
                                'File read error:',
                                error
                            );

                            resolve(null);

                        }

                    }
                );

            }


            /*
            |--------------------------------------------------------------------------
            | DELETE FILE
            |--------------------------------------------------------------------------
            */

            function deleteFileFromDB(key) {

                return new Promise(
                    async function(resolve) {

                        try {

                            const db =
                                await openFileDB();


                            const transaction =
                                db.transaction(
                                    STORE_NAME,
                                    'readwrite'
                                );


                            const store =
                                transaction.objectStore(
                                    STORE_NAME
                                );


                            store.delete(key);


                            transaction.oncomplete =
                                function() {

                                    db.close();

                                    resolve(true);

                                };


                            transaction.onerror =
                                function() {

                                    db.close();

                                    resolve(false);

                                };

                        } catch (error) {

                            console.log(
                                'File delete error:',
                                error
                            );

                            resolve(false);

                        }

                    }
                );

            }


            /*
            |--------------------------------------------------------------------------
            | CLEAR ALL FILES
            |--------------------------------------------------------------------------
            */

            async function clearAllStoredFiles() {

                for (
                    const field of fileFields
                ) {

                    await deleteFileFromDB(
                        field.storageKey
                    );

                }

            }


            /*
            |--------------------------------------------------------------------------
            | CREATE FILE FROM STORED DATA
            |--------------------------------------------------------------------------
            */

            function createFileFromStoredData(
                data
            ) {

                if (
                    !data ||
                    !data.file
                ) {

                    return null;

                }


                return new File(
                    [data.file],
                    data.name ||
                    'uploaded-file', {
                        type: data.type ||
                            data.file.type ||
                            '',

                        lastModified: data.lastModified ||
                            Date.now()
                    }
                );

            }


            /*
            |--------------------------------------------------------------------------
            | RESTORE FILE INTO INPUT
            |--------------------------------------------------------------------------
            */

            function setInputFile(
                input,
                file
            ) {

                if (
                    !input ||
                    !file
                ) {

                    return false;

                }


                try {

                    const dataTransfer =
                        new DataTransfer();


                    dataTransfer.items.add(
                        file
                    );


                    input.files =
                        dataTransfer.files;


                    return true;

                } catch (error) {

                    console.log(
                        'File restore error:',
                        error
                    );

                    return false;

                }

            }


            /*
            |--------------------------------------------------------------------------
            | SHOW FILE PREVIEW
            |--------------------------------------------------------------------------
            */

            function showFilePreview(
                config,
                file
            ) {

                const link =
                    document.getElementById(
                        config.linkId
                    );

                const preview =
                    document.getElementById(
                        config.previewId
                    );

                const pdfBox =
                    document.getElementById(
                        config.pdfId
                    );

                const fileName =
                    document.getElementById(
                        config.nameId
                    );


                if (!link) {

                    return;

                }


                link.style.display =
                    'none';


                if (pdfBox) {

                    pdfBox.style.display =
                        'none';

                    pdfBox.innerHTML =
                        '';

                }


                if (fileName) {

                    fileName.textContent =
                        '';

                }


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

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

                    const objectURL =
                        URL.createObjectURL(
                            file
                        );


                    link.innerHTML = `
                <img
                    src="${objectURL}"
                    alt="Preview"
                    class="file-preview-box">
            `;


                    link.style.display =
                        'inline-block';


                    if (fileName) {

                        fileName.textContent =
                            file.name;

                    }

                }


                /*
                |----------------------------------------------------------------------
                | PDF
                |----------------------------------------------------------------------
                */
                else if (
                    file.type ===
                    'application/pdf' ||

                    file.name
                    .toLowerCase()
                    .endsWith('.pdf')
                ) {

                    link.innerHTML = `
                <div class="pdf-preview-box">
                    <i
                        class="ti tabler-file-type-pdf text-danger"
                        style="font-size:28px;">
                    </i>
                </div>
            `;


                    link.style.display =
                        'inline-block';


                    if (fileName) {

                        fileName.textContent =
                            file.name;

                    }

                }

            }


            /*
            |--------------------------------------------------------------------------
            | HANDLE FILE CHANGE
            |--------------------------------------------------------------------------
            */

            async function handleFileChange(
                config
            ) {

                const input =
                    document.getElementById(
                        config.inputId
                    );


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

                    await deleteFileFromDB(
                        config.storageKey
                    );


                    const link =
                        document.getElementById(
                            config.linkId
                        );


                    if (link) {

                        link.style.display =
                            'none';

                    }


                    return;

                }


                const file =
                    input.files[0];


                /*
                 * Save immediately when user selects file.
                 */

                await saveFileToDB(
                    config.storageKey,
                    file
                );


                /*
                 * Show preview.
                 */

                showFilePreview(
                    config,
                    file
                );

            }


            /*
            |--------------------------------------------------------------------------
            | BIND FILE INPUTS
            |--------------------------------------------------------------------------
            */

            fileFields.forEach(
                function(config) {

                    const input =
                        document.getElementById(
                            config.inputId
                        );


                    if (!input) {

                        return;

                    }


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

                            handleFileChange(
                                config
                            );

                        }
                    );

                }
            );


            /*
            |--------------------------------------------------------------------------
            | SAVE ALL CURRENT FILES BEFORE SUBMIT
            |--------------------------------------------------------------------------
            */

            async function saveAllCurrentFiles() {

                for (
                    const config of fileFields
                ) {

                    const input =
                        document.getElementById(
                            config.inputId
                        );


                    if (
                        input &&
                        input.files &&
                        input.files.length
                    ) {

                        await saveFileToDB(
                            config.storageKey,
                            input.files[0]
                        );

                    }

                }

            }


            /*
            |--------------------------------------------------------------------------
            | RESTORE STORED FILES
            |--------------------------------------------------------------------------
            */

            async function restoreStoredFiles() {

                for (
                    const config of fileFields
                ) {

                    const stored =
                        await getFileFromDB(
                            config.storageKey
                        );


                    if (!stored) {

                        continue;

                    }


                    const file =
                        createFileFromStoredData(
                            stored
                        );


                    if (!file) {

                        continue;

                    }


                    const input =
                        document.getElementById(
                            config.inputId
                        );


                    if (!input) {

                        continue;

                    }


                    /*
                     * Restore file into actual file input.
                     */

                    setInputFile(
                        input,
                        file
                    );


                    /*
                     * Restore preview.
                     */

                    showFilePreview(
                        config,
                        file
                    );

                }

            }


            /*
            |--------------------------------------------------------------------------
            | VALIDATION ERROR CHECK - WITHOUT JSON
            |--------------------------------------------------------------------------
            */

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


            const hasBackendErrors =
                customerForm &&
                customerForm.dataset.hasErrors === '1';


            /*
            |--------------------------------------------------------------------------
            | RESTORE OR CLEAR
            |--------------------------------------------------------------------------
            */

            if (hasBackendErrors) {

                restoreStoredFiles();

            } else {

                clearAllStoredFiles();

            }


            /*
            |--------------------------------------------------------------------------
            | SUBMIT BUTTON
            |--------------------------------------------------------------------------
            */

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


            let formSubmitting =
                false;


            if (
                customerForm &&
                submitBtn
            ) {

                customerForm.addEventListener(
                    'submit',
                    async function(event) {

                        /*
                         * Second submit is allowed
                         * after files are saved.
                         */

                        if (formSubmitting) {

                            return;

                        }


                        /*
                         * Stop normal submit first.
                         */

                        event.preventDefault();


                        /*
                         * Prevent double click.
                         */

                        if (
                            submitBtn.dataset.submitted ===
                            'true'
                        ) {

                            return;

                        }


                        submitBtn.dataset.submitted =
                            'true';


                        submitBtn.disabled =
                            true;


                        submitBtn.innerHTML = `
                    <span
                        class="spinner-border spinner-border-sm me-1"
                        role="status"
                        aria-hidden="true">
                    </span>
                    Processing...
                `;


                        /*
                         * IMPORTANT:
                         * Save all selected files before
                         * browser navigates to Laravel.
                         */

                        await saveAllCurrentFiles();


                        /*
                         * Mark as actually submitting.
                         */

                        formSubmitting =
                            true;


                        /*
                         * Submit the form normally.
                         */

                        customerForm.submit();

                    }
                );

            }


            /*
            |--------------------------------------------------------------------------
            | RESET BUTTON
            |--------------------------------------------------------------------------
            */

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


            if (resetBtn) {

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

                        /*
                         * Clear IndexedDB files.
                         */

                        await clearAllStoredFiles();


                        /*
                         * Clear previews.
                         */

                        fileFields.forEach(
                            function(config) {

                                const link =
                                    document.getElementById(
                                        config.linkId
                                    );

                                const preview =
                                    document.getElementById(
                                        config.previewId
                                    );

                                const pdfBox =
                                    document.getElementById(
                                        config.pdfId
                                    );

                                const fileName =
                                    document.getElementById(
                                        config.nameId
                                    );


                                if (link) {

                                    link.style.display =
                                        'none';

                                    link.innerHTML =
                                        '';

                                }


                                if (preview) {

                                    preview.src =
                                        '';

                                    preview.style.display =
                                        'none';

                                }


                                if (pdfBox) {

                                    pdfBox.innerHTML =
                                        '';

                                    pdfBox.style.display =
                                        'none';

                                }


                                if (fileName) {

                                    fileName.textContent =
                                        '';

                                }

                            }
                        );


                        /*
                         * Reset submit button.
                         */

                        setTimeout(
                            function() {

                                if (submitBtn) {

                                    submitBtn.disabled =
                                        false;

                                    submitBtn.dataset.submitted =
                                        'false';

                                    submitBtn.innerHTML = `
                                <i class="ti tabler-device-floppy me-1"></i>
                                Save Customer
                            `;

                                }

                            },
                            100
                        );

                    }
                );

            }

        });
    </script>
@endsection