@extends('Admin.layout')
<style>
    .step-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.step-content {
    min-width: 600px;
}

.step-item {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-circle-custom {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border);
    color: var(--ink-dim);
    position: relative;
    z-index: 1;
}

.step-circle-custom.completed {
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    box-shadow: 0 0 12px rgba(226,182,92,.4);
    color: #1a1206;
}

.step-connector {
    position: absolute;
    top: 19px;
    left: calc(50% + 19px);
    width: calc(100% - 38px);
    border-top: 1px solid var(--glass-border);
}

.step-connector.completed {
    border-color: var(--gold);
    opacity: .6;
}

.step-label-custom {
    width: 100%;
    margin-top: 12px;
    text-align: center;
    white-space: nowrap;
    line-height: 1.4;
}

.step-label-custom small {
    color: var(--ink-dim);
}

.step-label-custom.active small {
    color: var(--gold-soft);
    font-weight: 600;
}
</style>
@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('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>


<div class="card mb-4">
    <div class="card-body py-3">
        <div class="step-scroll">
            <div class="step-content">

                <div class="d-flex w-100">
                    @foreach (range(1, 5) as $step)
                        <div class="step-item">

                            <div class="step-circle-custom {{ $step <= 3 ? 'completed' : '' }}">
                                @if ($step <= 2)
                                    <i class="ti ti-check"></i>
                                @else
                                    <small>{{ $step }}</small>
                                @endif
                            </div>

                            @if ($step < 5)
                                <div class="step-connector {{ $step < 3 ? 'completed' : '' }}"></div>
                            @endif

                            <div class="step-label-custom {{ $step <= 3 ? 'active' : '' }}">
                                <small>
                                    {{ ['Personal Details', 'Gold', 'Docs', 'Loan', 'Review'][$step - 1] }}
                                </small>
                            </div>

                        </div>
                    @endforeach
                </div>

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

<div class="mb-3">
    <form action="{{ route('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('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('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