@extends('staff.layout')

@section('content')

    {{-- ── Page Header ── --}}
    <div class="d-flex align-items-center gap-2 mb-4">
       <a href="javascript:history.back()" class="btn btn-icon btn-label-primary">
    <i class="ti ti-arrow-left text-white"></i>
</a>
        <h5 class="mb-0 fw-bold text-primary"> Loan & Review Details </h5>
    </div>

    {{-- ── Main Card ── --}}
    <div class="card p-3 p-md-4">

        <div class="section-divider mb-4">
            <h6 class="text-primary fw-bold">
                <i class="ti ti-file-text me-1" style="font-size:.9rem"></i>
                Loan & Review Details
            </h6>
        </div>

        <form action="javascript:void(0);" method="POST">

            {{-- =========================================================
                CUSTOMER & LOAN DETAILS
            ========================================================== --}}
            <div class="row g-3">

                <div class="col-12 col-md-6">
                    <label class="form-label">Customer Name</label>
                    <input type="text" class="form-control" value="{{ $gaCustomer->customer_name ?? '-' }}" readonly>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Mobile</label>
                    <input type="text" class="form-control" value="{{ $gaCustomer->mobile ?? '-' }}" readonly>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Net Weight</label>
                    <div class="input-group">
                        <input type="text" class="form-control" value="{{ $gaCustomer->eligible_net_weight ?? '0.000' }}" readonly>
                        <span class="input-group-text">g</span>
                    </div>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Eligible Loan Amount</label>
                    <div class="input-group">
                        <span class="input-group-text">₹</span>
                        <input type="text" class="form-control" value="{{ number_format((float)($gaCustomer->eligible_loan_amount ?? 0), 2) }}" readonly>
                    </div>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Customer 22K Amount</label>
                    <div class="input-group">
                        <span class="input-group-text">₹</span>
                        <input type="text" class="form-control" value="{{ number_format((float)($gaCustomer->gold_22k_amount ?? 0), 2) }}" readonly>
                    </div>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Final Loan Amount</label>
                    <div class="input-group">
                        <span class="input-group-text">₹</span>
                        <input type="text" class="form-control" value="{{ number_format((float)($gaCustomer->final_loan_amount ?? ($gaCustomer->loan_amount ?? 0)), 2) }}" readonly>
                    </div>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Interest Policy</label>
                    <select class="form-select" disabled>
                        @foreach ($policies as $policy)
                            <option value="{{ $policy->id }}" {{ ($gaCustomer->policy_id ?? '') == $policy->id ? 'selected' : '' }}>
                                {{ $policy->policy_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label">Disbursement Date</label>
                    <input type="text" class="form-control" value="{{ $gaCustomer->disbursement_date ? \Carbon\Carbon::parse($gaCustomer->disbursement_date)->format('d/m/Y') : '-' }}" readonly>
                </div>

                <div class="col-12 col-md-6">
                    <label class="form-label d-block">Disbursement Mode</label>
                    @php
                        $disbursementMode = strtolower($gaCustomer->disbursement_mode ?? 'bank');
                        $isCash = in_array($disbursementMode, ['cash', 'by hand', 'by_hand']);
                    @endphp
                    <div class="d-flex align-items-center gap-4 mt-2">
                        <div class="form-check me-3">
                            <input class="form-check-input" type="radio" disabled {{ !$isCash ? 'checked' : '' }}>
                            <label class="form-check-label">Bank</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" disabled {{ $isCash ? 'checked' : '' }}>
                            <label class="form-check-label">Cash (By Hand)</label>
                        </div>
                    </div>
                </div>

            </div>

            {{-- =========================================================
                BANK DETAILS
            ========================================================== --}}
            @if (!$isCash)
                <div class="bank-section p-3 mt-4 border rounded" id="bankDetailsSection">
                    <div class="section-divider mb-3">
                        <h6 class="text-primary fw-bold mb-0">
                            <i class="ti ti-building-bank me-1" style="font-size:.9rem"></i>
                            Bank Details
                        </h6>
                    </div>
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label">Bank Name</label>
                            <input type="text" class="form-control" value="{{ $gaCustomer->bank->bank_name ?? '-' }}" readonly>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">Branch Name</label>
                            <input type="text" class="form-control" value="{{ $gaCustomer->branch_name ?? '-' }}" readonly>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">Account Number</label>
                            <input type="text" class="form-control" value="{{ $gaCustomer->account_number ?? '-' }}" readonly>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">IFSC Code</label>
                            <input type="text" class="form-control" value="{{ $gaCustomer->ifsc ?? '-' }}" readonly>
                        </div>
                    </div>
                </div>
            @endif

            {{-- =========================================================
                GOLD ITEMS TABLE
            ========================================================== --}}
            <div class="card mt-4 px-2">
                <div class="table-responsive pt-0 pb-2">
                    <table id="goldTable" class="table table-hover">
                        <thead>
                            <tr>
                                <th>SNO</th>
                                <th>ITEM</th>
                                <th>GROSS (g)</th>
                                <th>PURITY</th>
                                <th>STONE / DED. (g)</th>
                                <th>NET (g)</th>
                                <th>AMOUNT</th>
                                <th>REMARKS</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($gaGoldItems ?? [] as $index => $item)
                                @php
                                    $purityLabel = '-';
                                    foreach ($goldCarats as $carat) {
                                        if ($carat->id == $item->purity_id) {
                                            $purityLabel = number_format($carat->purity, 0) . 'K';
                                            break;
                                        }
                                    }
                                @endphp
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td><input type="text" class="form-control form-control-sm" value="{{ $item->item ?? '' }}" readonly></td>
                                    <td><input type="text" class="form-control form-control-sm" value="{{ $item->gross ?? '' }}" readonly></td>
                                    <td><input type="text" class="form-control form-control-sm" value="{{ $purityLabel }}" readonly></td>
                                    <td><input type="text" class="form-control form-control-sm" value="{{ $item->stone ?? '0.000' }}" readonly></td>
                                    <td><input type="text" class="form-control form-control-sm" value="{{ $item->net ?? '0.000' }}" readonly></td>
                                    <td><input type="text" class="form-control form-control-sm" value="{{ number_format((float)($item->amount ?? 0), 2) }}" readonly></td>
                                    <td><input type="text" class="form-control form-control-sm" value="{{ $item->remarks ?? '' }}" readonly></td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted">No gold items found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>

            {{-- =========================================================
                DOCUMENT TABS
            ========================================================== --}}
            <div class="card mt-4 p-3">
                <div class="d-flex w-100 mb-3 gap-2">
                    <button type="button" id="customerDocsTabBtn" onclick="switchDocTab('customerDocs')" class="btn flex-fill rounded fw-semibold py-3" style="background: linear-gradient(135deg, var(--gold-soft), var(--gold)); color:#1a1206;">
                        Customer Docs
                    </button>
                    <button type="button" id="goldAgreementTabBtn" onclick="switchDocTab('goldAgreement')" class="btn flex-fill rounded fw-semibold py-3" style="background: transparent; color: var(--ink-dim); border: 1px solid var(--glass-border);">
                        Gold & Agreement
                    </button>
                </div>

                {{-- Customer Documents --}}
                <div id="customerDocsTabSection">
                    <div class="row row-cols-2 row-cols-md-3 g-3">
                        @if(!empty($gaCustomer->live_photo))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaCustomer->live_photo) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Live Photo</small></div>
                            </div>
                        @endif

                        @if(!empty($gaProofs->aadhaar))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->aadhaar) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Aadhaar Front</small></div>
                            </div>
                        @endif

                        @if(!empty($gaProofs->customer_sign))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->customer_sign) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Aadhaar Back / Sign</small></div>
                            </div>
                        @endif

                        @if(!empty($gaProofs->pan))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->pan) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">PAN Card</small></div>
                            </div>
                        @endif

                        @if(!empty($gaProofs->address_proof))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->address_proof) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Address Proof</small></div>
                            </div>
                        @endif

                        @if(!empty($gaProofs->bank_passbook))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->bank_passbook) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Bank Passbook</small></div>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- Gold & Agreement Documents --}}
                <div id="goldAgreementTabSection" class="d-none">
                    <div class="row row-cols-2 row-cols-md-3 g-3">
                        @if(!empty($gaProofs->gold_photo))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->gold_photo) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Gold Photo</small></div>
                            </div>
                        @endif

                        @if(!empty($gaProofs->entry_form))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->entry_form) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Entry Form</small></div>
                            </div>
                        @endif

                        @if(!empty($gaProofs->bank_slip))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->bank_slip) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Bank Slip</small></div>
                            </div>
                        @endif

                        @if(!empty($gaProofs->additional_slip))
                            <div class="col">
                                <div class="upload-box ratio ratio-4x3 rounded border overflow-hidden">
                                    <img src="{{ asset('storage/' . $gaProofs->additional_slip) }}" class="w-100 h-100 object-fit-cover">
                                </div>
                                <div class="text-center mt-1"><small class="fw-semibold">Additional Slip</small></div>
                            </div>
                        @endif
                    </div>
                </div>

            </div>

        </form>

    </div>

    {{-- Script for Document Tabs --}}
    <script>
        function switchDocTab(tabName) {
            const customerTab = document.getElementById('customerDocsTabSection');
            const goldTab = document.getElementById('goldAgreementTabSection');
            const customerBtn = document.getElementById('customerDocsTabBtn');
            const goldBtn = document.getElementById('goldAgreementTabBtn');

            if (tabName === 'customerDocs') {
                customerTab.classList.remove('d-none');
                goldTab.classList.add('d-none');

                customerBtn.style.background = 'linear-gradient(135deg, var(--gold-soft), var(--gold))';
                customerBtn.style.color = '#1a1206';
                customerBtn.style.border = 'none';

                goldBtn.style.background = 'transparent';
                goldBtn.style.color = 'var(--ink-dim)';
                goldBtn.style.border = '1px solid var(--glass-border)';
            } else {
                goldTab.classList.remove('d-none');
                customerTab.classList.add('d-none');

                goldBtn.style.background = 'linear-gradient(135deg, var(--gold-soft), var(--gold))';
                goldBtn.style.color = '#1a1206';
                goldBtn.style.border = 'none';

                customerBtn.style.background = 'transparent';
                customerBtn.style.color = 'var(--ink-dim)';
                customerBtn.style.border = '1px solid var(--glass-border)';
            }
        }
    </script>

@endsection