@extends('staff.layout')

@section('content')

    <!-- Header -->
    <div class="d-flex align-items-center justify-content-between mb-4">

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

            <a href="{{ route('staff_loan') }}" class="btn btn-icon btn-label-primary">
                <i class="ti ti-arrow-left"></i>
            </a>

            <div>
                <h5 class="mb-0 fw-bold" style="color: var(--gold-soft);">
                    New GA Entry
                </h5>
            </div>

        </div>

    </div>


    <!-- =========================================
                                 STEP INDICATOR
                            ========================================= -->
<div class="card mb-4"> <div class="card-body py-3">
    <div class="step-scroll">

        <div class="step-content">

            <!-- Circles + Connecting Lines -->
            <div class="d-flex align-items-center w-100">

                <!-- Step 1: Completed -->
                <div class="step-circle-custom completed">
                    <i class="ti ti-check"></i>
                </div>

                <div class="step-connector done"></div>

                <!-- Step 2: Completed -->
                <div class="step-circle-custom completed">
                    <i class="ti ti-check"></i>
                </div>

                <div class="step-connector done"></div>

                <!-- Step 3: Completed -->
                <div class="step-circle-custom completed">
                    <i class="ti ti-check"></i>
                </div>

                <div class="step-connector done"></div>

                <!-- Step 4: Active -->
                <div class="step-circle-custom completed">
                    <span>4</span>
                </div>

                <div class="step-connector"></div>

                <!-- Step 5: Pending -->
                <div class="step-circle-custom">
                    <span>5</span>
                </div>

            </div>

            <!-- Labels Row -->
            <div class="d-flex align-items-start w-100 mt-2">

                <!-- Step 1 -->
                <div class="step-label-custom active">
                    <small>Personal Details</small>
                </div>

                <div class="step-label-spacer"></div>

                <!-- Step 2 -->
                <div class="step-label-custom active">
                    <small>Gold</small>
                </div>

                <div class="step-label-spacer"></div>

                <!-- Step 3 -->
                <div class="step-label-custom active">
                    <small>Docs</small>
                </div>

                <div class="step-label-spacer"></div>

                <!-- Step 4 -->
                <div class="step-label-custom active">
                    <small>Loan</small>
                </div>

                <div class="step-label-spacer"></div>

                <!-- Step 5 -->
                <div class="step-label-custom">
                    <small>Review</small>
                </div>

            </div>

        </div>

    </div>

</div>
</div>
    <div class="mb-3">
        <form action="{{ route('staff_store_ga_documents') }}" method="POST" enctype="multipart/form-data" id="documentsForm">
            @csrf

            <div class="card">

                <!-- NAV PILLS -->
                <div class="d-flex w-100 overflow-hidden mb-3 p-2 gap-2">

                    <a href="#" class="btn flex-fill rounded fw-semibold py-3"
                        style="background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#1a1206; border: none;">
                        Customer Docs
                    </a>

                    <a href="{{ route('staff_gold_agreement') }}" class="btn flex-fill rounded fw-semibold py-3"
                        style="background: transparent; color: var(--ink-dim); border: 1px solid var(--glass-border);">
                        Gold & Agreement
                    </a>

                </div>


                <!-- =========================================
                                             CUSTOMER DOCS
                                        ========================================== -->
                <div class="row row-cols-2 row-cols-md-3 g-2 p-md-3 p-2 mb-3" id="customerDocsContainer">


                    <!-- LIVE PHOTO -->
                    <div class="col">
                        <div class="document-upload-item" data-section="customer" data-title="Live Photo">

                            <label class="upload-box ratio ratio-4x3 rounded
                                              d-flex align-items-center justify-content-center" style="border: 1px dashed var(--glass-border-strong);
                                           color: var(--gold-soft);
                                           cursor: pointer;
                                           overflow: hidden;">

                                @if(!empty($gaCustomer['live_photo']))

                                    <img src="{{ asset('storage/' . $gaCustomer['live_photo']) }}"
                                        class="document-preview img-fluid object-fit-cover w-100 h-100" alt="Live Photo">

                                @else

                                    <span class="upload-content d-flex flex-column
                                                                             align-items-center justify-content-center">

                                        <i class="ti ti-upload fs-3"></i>

                                        <small class="fw-semibold">
                                            Upload
                                        </small>

                                    </span>

                                @endif

                            </label>

                            <div class="d-flex align-items-center justify-content-center gap-1 mt-1">

                                <small style="color: var(--ink-dim);">
                                    Live Photo
                                </small>

                                <i class="ti ti-circle-check-filled" style="color: var(--success);
                                               font-size: .85rem;
                                               opacity: 1;">
                                </i>

                            </div>

                        </div>
                    </div>


                    <!-- AADHAAR -->
                    <div class="col">
                        <div class="document-upload-item" data-section="customer" data-title="Aadhaar">

                            <label class="upload-box ratio ratio-4x3 rounded
                    d-flex align-items-center justify-content-center" style="border: 1px dashed var(--glass-border-strong);
                    color: var(--gold-soft);
                    cursor: pointer;
                    overflow: hidden;">

                                @if(!empty($gaProofs['aadhaar']))

                                    <img src="{{ asset('storage/' . $gaProofs['aadhaar']) }}"
                                        class="document-preview img-fluid object-fit-cover w-100 h-100" alt="Aadhaar">

                                @else

                                    <span class="upload-content d-flex flex-column
                                            align-items-center justify-content-center">

                                        <i class="ti ti-upload fs-3"></i>

                                        <small class="fw-semibold">
                                            Upload
                                        </small>

                                    </span>

                                    <img class="document-preview d-none img-fluid object-fit-cover" alt="Aadhaar">

                                @endif

                                <input type="file" name="aadhaar" class="document-file d-none"
                                    accept="image/jpeg,image/png,image/jpg" capture="environment">

                            </label>

                            <div class="d-flex align-items-center justify-content-center gap-1 mt-1">

                                <small style="color: var(--ink-dim);">
                                    Aadhaar Front
                                </small>

                                <i class="ti ti-circle-check-filled document-status-icon" style="color: {{ !empty($gaProofs['aadhaar']) ? 'var(--success)' : 'var(--ink-faint)' }};
                        font-size: .85rem;
                        opacity: {{ !empty($gaProofs['aadhaar']) ? '1' : '.4' }};">
                                </i>

                            </div>

                        </div>
                    </div>


                    <!-- CUSTOMER SIGN -->
                    <div class="col">
                        <div class="document-upload-item" data-section="customer" data-title="Customer Sign">

                            <label class="upload-box ratio ratio-4x3 rounded
                                                                  d-flex align-items-center justify-content-center"
                                style="border: 1px dashed var(--glass-border-strong); color: var(--gold-soft); cursor: pointer;">

                                <span class="upload-content d-flex flex-column
                                                                     align-items-center justify-content-center">

                                    <i class="ti ti-upload fs-3"></i>

                                    <small class="fw-semibold">
                                        Upload
                                    </small>

                                </span>

                                <img class="document-preview d-none img-fluid object-fit-cover" alt="Customer Sign">

                                <input type="file" name="customer_sign" class="document-file d-none"
                                    accept="image/jpeg,image/png,image/jpg" capture="environment">

                            </label>

                            <div class="d-flex align-items-center justify-content-center gap-1 mt-1">

                                <small style="color: var(--ink-dim);">
                                    Aadhar Back
                                </small>

                                <i class="ti ti-circle-check-filled document-status-icon"
                                    style="color: var(--ink-faint); font-size: .85rem; opacity: .4;"></i>

                            </div>

                        </div>
                    </div>


                    <!-- PAN -->
                    <div class="col">
                        <div class="document-upload-item" data-section="customer" data-title="PAN">

                            <label class="upload-box ratio ratio-4x3 rounded
                                                                  d-flex align-items-center justify-content-center"
                                style="border: 1px dashed var(--glass-border-strong); color: var(--gold-soft); cursor: pointer;">

                                <span class="upload-content d-flex flex-column
                                                                     align-items-center justify-content-center">

                                    <i class="ti ti-upload fs-3"></i>

                                    <small class="fw-semibold">
                                        Upload
                                    </small>

                                </span>

                                <img class="document-preview d-none img-fluid object-fit-cover" alt="PAN">

                                <input type="file" name="pan" class="document-file d-none"
                                    accept="image/jpeg,image/png,image/jpg" capture="environment">

                            </label>

                            <div class="d-flex align-items-center justify-content-center gap-1 mt-1">

                                <small style="color: var(--ink-dim);">
                                    PAN
                                </small>

                                <i class="ti ti-circle-check-filled document-status-icon"
                                    style="color: var(--ink-faint); font-size: .85rem; opacity: .4;"></i>

                            </div>

                        </div>
                    </div>


                    <!-- ADDRESS PROOF -->
                    <div class="col">
                        <div class="document-upload-item" data-section="customer" data-title="Address Proof">

                            <label class="upload-box ratio ratio-4x3 rounded
                                                                  d-flex align-items-center justify-content-center"
                                style="border: 1px dashed var(--glass-border-strong); color: var(--gold-soft); cursor: pointer;">

                                <span class="upload-content d-flex flex-column
                                                                     align-items-center justify-content-center">

                                    <i class="ti ti-upload fs-3"></i>

                                    <small class="fw-semibold">
                                        Upload
                                    </small>

                                </span>

                                <img class="document-preview d-none img-fluid object-fit-cover" alt="Address Proof">

                                <input type="file" name="address_proof" class="document-file d-none"
                                    accept="image/jpeg,image/png,image/jpg" capture="environment">

                            </label>

                            <div class="d-flex align-items-center justify-content-center gap-1 mt-1">

                                <small style="color: var(--ink-dim);">
                                    Address Proof
                                </small>

                                <i class="ti ti-circle-check-filled document-status-icon"
                                    style="color: var(--ink-faint); font-size: .85rem; opacity: .4;"></i>

                            </div>

                        </div>
                    </div>


                    <!-- BANK PASSBOOK -->
                    <div class="col">
                        <div class="document-upload-item" data-section="customer" data-title="Bank Passbook">

                            <label class="upload-box ratio ratio-4x3 rounded
                                                                  d-flex align-items-center justify-content-center"
                                style="border: 1px dashed var(--glass-border-strong); color: var(--gold-soft); cursor: pointer;">

                                <span class="upload-content d-flex flex-column
                                                                     align-items-center justify-content-center">

                                    <i class="ti ti-upload fs-3"></i>

                                    <small class="fw-semibold">
                                        Upload
                                    </small>

                                </span>

                                <img class="document-preview d-none img-fluid object-fit-cover" alt="Bank Passbook">

                                <input type="file" name="bank_passbook" class="document-file d-none"
                                    accept="image/jpeg,image/png,image/jpg" capture="environment">

                            </label>

                            <div class="d-flex align-items-center justify-content-center gap-1 mt-1">

                                <small style="color: var(--ink-dim);">
                                    Bank Passbook
                                </small>

                                <i class="ti ti-circle-check-filled document-status-icon"
                                    style="color: var(--ink-faint); font-size: .85rem; opacity: .4;"></i>

                            </div>

                        </div>
                    </div>



                </div>

                <!-- NEXT BUTTON -->
                <div class="card-footer border-top mt-3 pt-3">

                    <div class="d-grid d-md-flex gap-2 justify-content-md-end">
                        <a href="{{ route('staff_gold') }}" class="btn btn-primary">
                            Back
                            <i class="ti ti-arrow-left ms-1"></i>
                        </a>
                        <button type="submit" class="btn btn-primary" id="documentsNextBtn">

                            <span id="documentsNextBtnText">
                                Next
                                <i class="ti ti-arrow-right ms-1"></i>
                            </span>

                            <span id="documentsNextBtnLoading" class="d-none">
                                <span class="spinner-border spinner-border-sm me-1"></span>
                                Processing...
                            </span>

                        </button>

                    </div>

                </div>

            </div>


        </form>
    </div>


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

            document.querySelectorAll('.document-upload-item').forEach(function (item) {

                const fileInput = item.querySelector('.document-file');
                const uploadBox = item.querySelector('.upload-box');
                const uploadContent = item.querySelector('.upload-content');
                const preview = item.querySelector('.document-preview');
                const statusIcon = item.querySelector('.document-status-icon');

                if (!fileInput) {
                    return;
                }

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

                    const file = this.files[0];

                    if (!file) {
                        return;
                    }

                    // Validate image
                    if (!file.type.startsWith('image/')) {
                        alert('Please select a valid image file.');
                        this.value = '';
                        return;
                    }

                    const reader = new FileReader();

                    reader.onload = function (e) {

                        // Set preview image
                        preview.src = e.target.result;

                        // Hide upload content
                        if (uploadContent) {
                            uploadContent.classList.add('d-none');
                        }

                        // Show preview
                        if (preview) {
                            preview.classList.remove('d-none');
                        }

                        // Change border
                        uploadBox.style.border = '1px solid var(--success)';

                        // Change status icon
                        if (statusIcon) {
                            statusIcon.style.color = 'var(--success)';
                            statusIcon.style.opacity = '1';
                        }
                    };

                    reader.readAsDataURL(file);
                });

            });


            // =========================================
            // ADDITIONAL DISBURSEMENT FILE
            // =========================================

            const additionalFile = document.querySelector('.additional-file');

            if (additionalFile) {

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

                    const file = this.files[0];

                    if (!file) {
                        return;
                    }

                    if (!file.type.startsWith('image/')) {
                        alert('Please select a valid image file.');
                        this.value = '';
                        return;
                    }

                    const label = this.closest('label');

                    const uploadContent = label.querySelector('span');

                    const reader = new FileReader();

                    reader.onload = function (e) {

                        // Remove upload content
                        uploadContent.classList.add('d-none');

                        // Create preview
                        const img = document.createElement('img');

                        img.src = e.target.result;

                        img.className =
                            'img-fluid object-fit-cover position-absolute top-0 start-0 w-100 h-100';

                        img.alt = 'Additional Proof';

                        label.appendChild(img);

                        // Mark box as complete
                        label.style.border = '1px solid var(--success)';

                    };

                    reader.readAsDataURL(file);

                });

            }

        });
    </script>



@endsection