@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-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">

            <!-- 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_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('staff_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('staff_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('staff_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