@extends('staff.layout')
<style>
    /* accent bars */
    .accent-success {
        border-left: 3px solid var(--success) !important
    }

    .accent-warning {
        border-left: 3px solid var(--warning) !important
    }

    .accent-danger {
        border-left: 3px solid var(--danger) !important
    }

    .accent-primary {
        border-left: 3px solid var(--primary) !important
    }

    .text-success {
        color: var(--success) !important
    }

    .text-primary {
        color: var(--primary) !important
    }

    .text-info {
        color: var(--info) !important
    }

    .text-warning {
        color: var(--warning) !important
    }

    .text-danger {
        color: var(--danger) !important
    }

    /* forms */
    .form-control,
    .form-select,
    textarea.form-control {
        background-color: rgba(10, 22, 40, .4);
        color: var(--ink);
        border: 1px solid var(--glass-border);
        border-radius: 8px;
    }

    .form-control::placeholder {
        color: var(--ink-faint)
    }

    .form-control:focus,
    .form-select:focus {
        background-color: rgba(10, 22, 40, .55);
        color: var(--ink);
        border-color: var(--gold);
        box-shadow: 0 0 0 .2rem rgba(226, 182, 92, .15);
    }

    .form-select option {
        background-color: #0a1628;
        color: var(--ink)
    }

    .form-label {
        color: var(--ink-dim);
        font-size: .85rem;
        margin-bottom: 6px
    }

    .input-group-text {
        background-color: rgba(226, 182, 92, .10);
        border: 1px solid var(--glass-border);
        color: var(--gold-soft)
    }

    /* alerts */
    .alert {
        border: 1px solid var(--glass-border);
        border-radius: 10px;
        backdrop-filter: blur(8px)
    }

    .alert-success {
        background: rgba(74, 222, 128, .1);
        color: var(--success);
        border-color: rgba(74, 222, 128, .3)
    }

    /* nav pills */
    .nav-pills .nav-link {
        color: var(--ink-dim);
        border-radius: 8px;
        font-size: .88rem;
        padding: 7px 14px;
        white-space: nowrap
    }

    .nav-pills .nav-link:hover {
        background: rgba(226, 182, 92, .08);
        color: var(--ink)
    }

    .nav-pills .nav-link.active {
        background: var(--gold);
        color: #1a1206;
        font-weight: 600
    }

    /* step indicator */
    .step-circle {
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        flex-shrink: 0;
        font-weight: 600;
        font-size: .8rem;
        background: rgba(255, 255, 255, .06);
        border: 1px solid var(--glass-border);
        color: var(--ink-faint);
        transition: background .2s, color .2s, border-color .2s;
    }

    .step-circle.active,
    .step-circle.done {
        background: linear-gradient(135deg, var(--gold-soft), var(--gold));
        color: #1a1206;
        border-color: var(--gold)
    }

    .step-line {
        flex-grow: 1;
        border-top: 1px solid var(--glass-border);
        margin: 0 8px
    }

    .step-line.done {
        border-top-color: var(--gold)
    }

    .step-label {
        font-size: .78rem;
        font-weight: 600;
        color: var(--ink-faint);
        text-align: center;
        white-space: nowrap
    }

    .step-label.active {
        color: var(--gold-soft)
    }

    /* scrollbar */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px
    }

    ::-webkit-scrollbar-track {
        background: transparent
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(226, 182, 92, .3);
        border-radius: 4px
    }

    ::-webkit-scrollbar-thumb:hover {
        background: rgba(226, 182, 92, .5)
    }

    /* ── page switcher (demo only) ─── */
    .page-view {
        display: none
    }

    .page-view.active {
        display: block
    }

    /* case card link reset */
    .case-link {
        text-decoration: none;
        color: inherit;
        display: block
    }

    .case-link .card {
        transition: transform .15s, border-color .2s
    }

    .case-link:hover .card {
        transform: translateY(-2px);
        border-color: var(--glass-border-strong)
    }

    /* review key-val row */
    .kv-row {
        display: grid;
        grid-template-columns: 5fr 0fr 6fr;
        gap: 4px 6px;
        align-items: start;
        padding: 5px 0;
        border-bottom: 1px solid rgba(226, 182, 92, .06)
    }

    .kv-row:last-child {
        border-bottom: none
    }

    .kv-key {
        font-size: .88rem;
        font-weight: 600;
        color: var(--ink-dim)
    }

    .kv-sep {
        color: var(--ink-faint);
        font-size: .8rem;
        padding-top: 1px;
        user-select: none
    }

    .kv-val {
        font-size: .88rem;
        font-weight: 700;
        color: var(--ink)
    }
</style>
@section('content')
    <div class="page-view active" id="page-list">

        <div class="mb-4 d-flex justify-content-between align-items-center">
            <h5 class="mb-0 fw-bold text-primary">GA Cases</h5>
            <a href="{{ route('staff_closed_ga') }}" class="btn btn-primary">
                Closed GA Cases
            </a>
        </div>

        <!-- filter + search -->
        <div class="card mb-4">
            <div class="card-body p-2 p-lg-3">
                <div class="row g-2 align-items-center">

                    <div class="col-lg-8 col-12">
                        <ul class="nav nav-pills flex-nowrap overflow-auto gap-1 pb-1">
                            <li class="nav-item"><button type="button" class="nav-link active" data-filter="all">All <span
                                        class="ms-1 opacity-75">({{ $activeGA }})</span></button></li>
                            <li class="nav-item"><button type="button" class="nav-link" data-filter="locker">Locker <span
                                        class="ms-1 opacity-75">(0)</span></button></li>
                            <li class="nav-item"><button type="button" class="nav-link" data-filter="bp">In BP <span
                                        class="ms-1 opacity-75">(0)</span></button></li>
                            <li class="nav-item"><button type="button" class="nav-link" data-filter="overdue">Overdue <span
                                        class="ms-1 opacity-75">(0)</span></button></li>
                            <li class="nav-item"><button type="button" class="nav-link" data-filter="risk">Risk <span
                                        class="ms-1 opacity-75">(0)</span></button></li>
                        </ul>
                    </div>

                    <div class="col-lg-4 col-12">
                        <div class="input-group">
                            <span class="input-group-text"><i class="ti ti-search"></i></span>
                            <input type="text" id="gaCaseSearch" class="form-control"
                                placeholder="Customer / GA No / Mobile">
                        </div>
                    </div>

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

        <!-- case grid -->
        <div id="gaCaseList">
            <div class="row g-3">

                <div id="gaNoRecords" class="col-12 d-none">
                    <div class="card text-center py-5">
                        <i class="ti ti-search-off mx-auto mb-3" style="font-size:2.5rem;color:var(--ink-faint)"></i>

                        <h6 class="mb-1">No records found</h6>

                        <p class="text-muted mb-0" style="font-size:.85rem">
                            No GA cases match your search or selected filter.
                        </p>
                    </div>
                </div>



                @foreach ($gaCustomers as $customer)
                    <div class="col-xl-4 col-md-6 col-12 ga-case-item" data-category="locker"
                        data-search="{{ strtolower(($customer->user_id ?? '') . ' ' . ($customer->customer_name ?? '') . ' ' . ($customer->mobile ?? '')) }}">

                        <a class="case-link" href="{{ route('staff_view_ga_case', ['id' => $customer->id]) }}">

                            <div class="card p-3 accent-success">

                                <!-- Top Header Info -->
                                <div class="row align-items-center mb-2">
                                    <div class="col-7">
                                        <div class="fw-semibold text-primary" style="font-size:.82rem">
                                            {{ $customer->user_id ?? '-' }}
                                        </div>
                                        <div class="fw-semibold mt-1">
                                            {{ $customer->customer_name ?? '-' }}
                                        </div>
                                    </div>

                                    <div class="col-5 text-end">
                                        <span class="badge bg-label-success mb-1">
                                            Locker
                                        </span>
                                        <!-- <div>
                          <small class="text-danger">Due: </small>
                          <small class="text-danger fw-semibold">
                            {{ $customer->next_due_date ? \Carbon\Carbon::parse($customer->next_due_date)->format('d-m-Y') : '-' }}
                          </small>
                        </div> -->
                                    </div>
                                </div>

                                {{-- {{-- <!-- Key-Value Metadata Grid --> --}}
                                <div class="pt-2 border-top border-secondary border-opacity-10" style="font-size: .8rem;">
                                    <div class="d-flex justify-content-between mb-1">
                                        <span class="text-muted">Gross Weight:</span>
                                        <span class="fw-semibold text-white">
                                            {{ number_format($customer->gold_item->gross ?? '_') }} g
                                        </span>
                                    </div>
                                    <div class="d-flex justify-content-between mb-1">
                                        <span class="text-muted">Net Weight:</span>
                                        <span class="fw-semibold text-white">{{ $customer->eligible_net_weight ?? '0.000' }}
                                            g</span>
                                    </div>

                                    <div class="d-flex justify-content-between mb-1">
                                        <span class="text-muted">Purity Amount Per Gram:</span>
                                        <span class="fw-semibold text-warning">₹
                                            {{ number_format($customer->gold_22k_amount ?? 0, 2) }}</span>
                                    </div>

                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted">Loan Type:</span>
                                        <span class="fw-semibold text-info">{{ $customer->loan_type ?? '_' }}</span>
                                    </div>

                                    <div class="d-flex justify-content-between mb-1">
                                        <span class="text-muted">Loan Amount:</span>
                                        <span class="fw-semibold text-success">₹
                                            {{ number_format($customer->final_loan_amount ?? 0, 2) }}</span>
                                    </div>

                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted">Interest Policy:</span>
                                        <span
                                            class="fw-semibold text-info">{{ $customer->policy->policy_name ?? '0' }}</span>
                                    </div>
                                    <div class="d-flex justify-content-between">
                                        <span class="text-muted">Interest %:</span>
                                        <span
                                            class="fw-semibold text-info">{{ $customer->policy->interest ?? ($customer->interest_rate ?? '0') }}%</span>
                                    </div>



                                </div>

                            </div>

                        </a>

                    </div>
                @endforeach

            </div>
        </div><!-- /gaCaseList -->

    </div><!-- /page-list -->

    <script>
        const gaCaseTabs = document.querySelectorAll('[data-filter]');
        const gaCaseItems = document.querySelectorAll('.ga-case-item');
        const gaCaseSearch = document.getElementById('gaCaseSearch');
        const gaNoRecords = document.getElementById('gaNoRecords');
        let selectedGaFilter = 'all';

        function filterGaCases() {
            const searchTerm = gaCaseSearch.value.trim().toLowerCase();
            let visibleCaseCount = 0;

            gaCaseItems.forEach(function(caseItem) {
                const matchesFilter = selectedGaFilter === 'all' ||
                    caseItem.dataset.category === selectedGaFilter;
                const matchesSearch = caseItem.dataset.search.includes(searchTerm);
                const shouldShow = matchesFilter && matchesSearch;

                caseItem.classList.toggle('d-none', !shouldShow);
                if (shouldShow) {
                    visibleCaseCount += 1;
                }
            });

            gaNoRecords.classList.toggle('d-none', visibleCaseCount > 0);
        }

        gaCaseTabs.forEach(function(tab) {
            tab.addEventListener('click', function() {
                selectedGaFilter = tab.dataset.filter;
                gaCaseTabs.forEach(function(currentTab) {
                    currentTab.classList.toggle('active', currentTab === tab);
                });
                filterGaCases();
            });
        });

        gaCaseSearch.addEventListener('input', filterGaCases);
    </script>
@endsection