@extends('Admin.layout')

@section('content')

    {{-- ── Page Header ── --}}
    <div class="d-flex align-items-center gap-2 mb-4">
        <a href="{{ route('pending_ga_cases') }}"
            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">GA Details (View Only)</h5>
    </div>

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

        {{-- Card Heading --}}
        <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 Details
            </h6>
        </div>

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

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

                {{-- Customer Name --}}
                <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>

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

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

                {{-- Rate / g --}}
                <div class="col-12 col-md-6">
                    <label class="form-label">Rate / g</label>
                    <div class="input-group">
                        <span class="input-group-text">₹</span>
                        <input type="number" class="form-control" value="{{ $gaCustomer->gold_22k_amount ?? 0 }}" readonly>
                    </div>
                </div>

                {{-- Eligible Loan Amount --}}
                <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="number" class="form-control" value="{{ $gaCustomer->eligible_loan_amount ?? 0 }}" readonly>
                    </div>
                </div>

                {{-- Interest Policy --}}
                <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>

                {{-- Disbursement Mode --}}
                <div class="col-12 col-md-6">
                    <label class="form-label d-block">Disbursement Mode</label>
                    @php $disbursementMode = $gaCustomer->disbursement_mode ?? ''; @endphp
                    <div class="d-flex gap-4 mt-2">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="Bank Transfer" {{ strtolower($disbursementMode) == 'bank transfer' ? 'checked' : '' }} disabled>
                            <label class="form-check-label">Bank Transfer</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" value="By hand" {{ strtolower($disbursementMode) == 'by hand' ? 'checked' : '' }} disabled>
                            <label class="form-check-label">By Hand</label>
                        </div>
                    </div>
                </div>

                {{-- Disbursement Date --}}
                <div class="col-12 col-md-6">
                    <label class="form-label">Disbursement Date</label>
                    <input type="date" class="form-control" value="{{ $gaCustomer->disbursement_date ?? '' }}" readonly>
                </div>

            </div>


            {{-- =========================================================
                FULL BANK DETAILS (Shown ONLY if Disbursement Mode == 'Bank Transfer')
            ========================================================== --}}
            @if(strtolower($gaCustomer->disbursement_mode ?? '') === 'bank transfer')
                <div class="bank-section p-3 mt-4" 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">

                        {{-- Bank Name --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label">Bank Name</label>
                            <select class="form-select" disabled>
                                <option value="">Select Bank</option>
                                @foreach($banks as $bank)
                                    <option value="{{ $bank->id }}" {{ ($gaCustomer->bank_id ?? '') == $bank->id ? 'selected' : '' }}>
                                        {{ $bank->bank_name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

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

                        {{-- Other Bank Name --}}
                        <div class="col-12 col-md-6">
                            <label class="form-label">Other Bank Name</label>
                            <input type="text" class="form-control" value="{{ $gaCustomer->other_bank_name ?? 'N/A' }}" readonly>
                        </div>

                        {{-- Account Number --}}
                        <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>

                        {{-- IFSC Code --}}
                        <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
            ========================================================== --}}
            @php
                $hasImage = collect($gaGoldItems ?? [])->contains(function ($item) {
                    return !empty($item->image);
                });
            @endphp

            <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>
                                @if($hasImage)
                                    <th>IMAGE</th>
                                @endif
                            </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="number" 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="number" class="form-control form-control-sm" value="{{ $item->stone ?? '0.000' }}" readonly>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control form-control-sm" value="{{ $item->net ?? '0.000' }}" readonly>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control form-control-sm" value="{{ $item->amount ?? '0.00' }}" readonly>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control form-control-sm" value="{{ $item->remarks ?? '' }}" readonly>
                                    </td>
                                    @if($hasImage)
                                        <td>
                                            @if(!empty($item->image))
                                                <img src="{{ asset('storage/' . $item->image) }}" class="rounded" style="width:60px;height:60px;object-fit:cover;">
                                            @else
                                                -
                                            @endif
                                        </td>
                                    @endif
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="{{ $hasImage ? 9 : 8 }}" class="text-center text-muted">No gold items found.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>


            {{-- =========================================================
                DOCUMENTS & AGREEMENTS (Tab Switcher)
            ========================================================== --}}
            @php
                $customerDocsList = collect([
                    ['label' => 'Live Photo', 'path' => $gaCustomer->live_photo ?? null],
                    ['label' => 'Aadhaar Front', 'path' => $gaProofs->aadhaar ?? null],
                    ['label' => 'Aadhaar Back / Sign', 'path' => $gaProofs->customer_sign ?? null],
                    ['label' => 'PAN', 'path' => $gaProofs->pan ?? null],
                    ['label' => 'Address Proof', 'path' => $gaProofs->address_proof ?? null],
                    ['label' => 'Bank Passbook', 'path' => $gaProofs->bank_passbook ?? null],
                ])->filter(fn($doc) => !empty($doc['path']));

                $goldAgreementList = collect([
                    ['label' => 'Gold Photos', 'path' => $gaProofs->gold_photo ?? null],
                    ['label' => 'GA Agreement / Entry Form', 'path' => $gaProofs->entry_form ?? null],
                    ['label' => 'Bank Slip', 'path' => $gaProofs->bank_slip ?? null],
                    ['label' => 'Additional Slip', 'path' => $gaProofs->additional_slip ?? null],
                ])->filter(fn($doc) => !empty($doc['path']));
            @endphp

            <div class="card mt-4 p-3">
                
                {{-- Navigation Buttons --}}
                <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>

                {{-- TAB 1: Customer Docs --}}
                <div id="customerDocsTabSection" class="doc-tab-content">
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                        @forelse($customerDocsList as $doc)
                            <div class="col">
                                <div class="document-upload-item">
                                    <div class="upload-box ratio ratio-4x3 rounded d-flex align-items-center justify-content-center" style="border: 1px solid var(--glass-border-strong); overflow: hidden;">
                                        <img src="{{ asset('storage/' . $doc['path']) }}" class="img-fluid object-fit-cover w-100 h-100" alt="{{ $doc['label'] }}">
                                    </div>
                                    <div class="text-center mt-2"><small class="fw-semibold">{{ $doc['label'] }}</small></div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12 text-center text-muted py-4">
                                No Customer Documents Available
                            </div>
                        @endforelse
                    </div>
                </div>

                {{-- TAB 2: Gold & Agreement --}}
                <div id="goldAgreementTabSection" class="doc-tab-content d-none">
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
                        @forelse($goldAgreementList as $doc)
                            <div class="col">
                                <div class="document-upload-item">
                                    <div class="upload-box ratio ratio-4x3 rounded d-flex align-items-center justify-content-center" style="border: 1px solid var(--glass-border-strong); overflow: hidden;">
                                        <img src="{{ asset('storage/' . $doc['path']) }}" class="img-fluid object-fit-cover w-100 h-100" alt="{{ $doc['label'] }}">
                                    </div>
                                    <div class="text-center mt-2"><small class="fw-semibold">{{ $doc['label'] }}</small></div>
                                </div>
                            </div>
                        @empty
                            <div class="col-12 text-center text-muted py-4">
                                No Gold & Agreement Documents Available
                            </div>
                        @endforelse
                    </div>
                </div>

            </div>

        </form>

    </div>

    {{-- Script for Tab Switching --}}
    <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