@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-outline-primary">
            <i class="ti ti-arrow-left"></i>
        </a>

        <div>
            <h5 class="mb-0 fw-bold text-primary">
                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_gold_agreement') }}" method="POST" enctype="multipart/form-data"
        id="documentsForm">
        @csrf

        <div class="card">

            <div class="card-body">

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

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

                    <a href="{{ route('gold_agreement') }}" class="btn flex-fill rounded fw-semibold py-3"
                        style="background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#1a1206; border: none;">
                        Gold & Agreement
                    </a>

                </div>
                <!-- =========================================
                                                         GOLD & AGREEMENT
                                                    ========================================== -->

                <div class="mb-3">

                    <h6 class="doc-section-title mb-3">
                        Gold &amp; Agreement
                    </h6>

                    <div class="row row-cols-2 row-cols-md-3 g-2" id="goldAgreementContainer">

                        <!-- GOLD PHOTOS -->
                        <div class="col">
                            <div class="document-upload-item" data-section="gold" data-title="Gold Photos">

                                <label
                                    class="upload-box ratio ratio-4x3 d-flex align-items-center justify-content-center"
                                    style="overflow: hidden; cursor: pointer;">

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

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

                                    @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" alt="Gold Photos">

                                    @endif

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

                                </label>

                                <div class="doc-tile-caption">
                                    <small>All Gold Photos</small>
                                </div>

                            </div>
                        </div>

                    </div>

                </div>


                <!-- =========================================
                                                         DISBURSEMENT PROOF
                                                    ========================================== -->

                <div class="mb-3">
                    <h6 class="doc-section-title mb-3">
                        Disbursement Proof
                    </h6>

                    <div class="row row-cols-2 row-cols-md-3 g-2" id="disbursementContainer">


                        <!-- BANK TRANSFER SLIP -->
                        <div class="col">
                            <div class="document-upload-item" data-section="disbursement"
                                data-title="Bank Transfer Slip">

                                <label
                                    class="upload-box ratio ratio-4x3 d-flex align-items-center justify-content-center"
                                    style="overflow: hidden; cursor: pointer;">

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

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

                                    @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" alt="Bank Transfer Slip">

                                    @endif

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

                                </label>

                                <div class="doc-tile-caption">
                                    <small>Bank Transfer Slip</small>
                                </div>

                            </div>
                        </div>


                        <!-- ENTRY FORM -->
                        <div class="col">
                            <div class="document-upload-item" data-section="disbursement" data-title="Entry Form">

                                <label
                                    class="upload-box ratio ratio-4x3 d-flex align-items-center justify-content-center"
                                    style="overflow: hidden; cursor: pointer;">

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

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

                                    @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" alt="Entry Form">

                                    @endif

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

                                </label>

                                <div class="doc-tile-caption">
                                    <small>Entry Form</small>
                                </div>

                            </div>
                        </div>



                        <!-- ADDITIONAL FILE -->
                        <div class="col">

                            <label class="upload-box ratio ratio-4x3 d-flex align-items-center justify-content-center"
                                style="overflow: hidden; cursor: pointer;">

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

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

                                @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">Add File</small>
                                </span>

                                @endif

                                <input type="file" name="additional_slip" class="additional-file d-none"
                                    accept="image/jpeg,image/png,image/jpg">

                            </label>

                            <div class="doc-tile-caption">
                                <small>Additional Proof</small>
                            </div>

                        </div>


                    </div>

                </div>

                <!-- NEXT -->

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

                </div>

            </div>

        </div>

    </form>
</div>

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

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

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

            uploadBox.addEventListener('click', function() {
                fileInput.click();
            });

            fileInput.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 reader = new FileReader();

                reader.onload = function(e) {

                    preview.src = e.target.result;

                    uploadContent.classList.add('d-none');
                    preview.classList.remove('d-none');
                    uploadBox.classList.add('has-file');

                };

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

                    uploadContent.classList.add('d-none');

                    const img = document.createElement('img');
                    img.src = e.target.result;
                    img.className = 'document-preview position-absolute top-0 start-0 w-100 h-100';
                    img.alt = 'Additional Proof';

                    label.appendChild(img);
                    label.classList.add('has-file');

                };

                reader.readAsDataURL(file);

            });

        }

    });
</script>

@endsection