@extends('staff.layout')

@section('content')

<style>

/* =========================================================
   GT COMPLETE  -  same compact card design as GA Cases
========================================================= */

.gt-page { width: 100%; }

/* ================= HEADER ================= */

.gt-page-title {
    color: #4da3ff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
}

.gt-page-subtitle {
    color: var(--ink-faint);
    font-size: 11px;
}

/* ================= FILTER BAR ================= */

.gt-filter-card {
    background: rgba(4, 20, 42, .72) !important;
    border: 2px solid rgba(255,255,255,.14) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
}

.gt-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.gt-tabs::-webkit-scrollbar { display: none; }

.gt-tabs .nav-link {
    color: var(--ink-dim);
    background: transparent;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    padding: 7px 13px;
    white-space: nowrap;
    border: none;
}

.gt-tabs .nav-link:hover {
    color: var(--ink);
    background: rgba(255,255,255,.05);
}

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

/* ================= SEARCH ================= */

.gt-search-group { height: 30px; }

.gt-search-icon {
    background: rgba(226,182,92,.08) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--gold-soft) !important;
    min-width: 32px;
    justify-content: center;
    padding: 0 8px !important;
}

.gt-search-input {
    height: 30px !important;
    background: rgba(10,22,40,.55) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--ink) !important;
    font-size: 10px !important;
    border-radius: 0 6px 6px 0 !important;
}

.gt-search-input::placeholder { color: var(--ink-faint) !important; }

.gt-search-input:focus {
    box-shadow: none !important;
    border-color: rgba(226,182,92,.45) !important;
}

/* =========================================================
   CARD  (GA CASES STYLE)
========================================================= */

.gt-complete-card {
    position: relative;
    display: block;
    background: rgba(4, 20, 42, .78);
    border: 2px solid rgba(255,255,255,.14);
    border-radius: 10px;
    padding: 9px 12px;
    text-decoration: none;
    overflow: hidden;
    transition: all .18s ease;
}

/* Green left line */
.gt-complete-card::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--success);
    border-radius: 10px 0 0 10px;
}

.gt-complete-card:hover {
    border-color: rgba(226,182,92,.40);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
}

.gt-card-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 8px;
}

/* ---------- LEFT ---------- */

.gt-left { min-width: 0; }

.gt-number {
    color: #4da3ff;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 3px;
}

.gt-customer-name {
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    word-break: break-word;
}

.gt-amount {
    color: var(--ink);
    font-size: 10px;
    margin-top: 2px;
}

/* ---------- RIGHT ---------- */

.gt-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    text-align: right;
    flex-shrink: 0;
}

.gt-type {
    color: var(--ink);
    font-size: 9px;
    font-weight: 700;
}

.gt-date {
    color: var(--success);
    font-size: 9px;
    white-space: nowrap;
}

/* ================= EMPTY ================= */

.gt-no-records { display: none; }
.gt-no-records.show { display: block; }

.gt-empty-card {
    background: rgba(4,20,42,.72) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 10px !important;
}

/* ================= MOBILE ================= */

@media (max-width: 991px) {
    .gt-search-group { margin-top: 4px; }
}

@media (max-width: 575px) {
    .gt-tabs .nav-link { padding: 6px 10px; font-size: 10px; }
}

</style>


<div class="page-view active gt-page">

    {{-- ================= HEADER ================= --}}

    <div class="mb-4">
        <div class="gt-page-title">GT Complete</div>
        <div class="gt-page-subtitle">Completed Gold Transfer records</div>
    </div>


    {{-- ================= FILTER + SEARCH ================= --}}

    <div class="card gt-filter-card mb-3">

        <div class="row align-items-center g-2">

            <div class="col-lg-8 col-md-7 col-12">

                <ul class="nav nav-pills gt-tabs mb-0">

                    <li class="nav-item">
                        <button type="button" class="nav-link active" data-gt-filter="all">
                            All
                            <span class="ms-1 opacity-75">({{ $completedGTs->count() }})</span>
                        </button>
                    </li>

<li class="nav-item">
    <button type="button" class="nav-link" data-gt-filter="customer">
        Customer
        <span class="ms-1 opacity-75">
            ({{ $completedGTs->where('transfer_type', 'customer')->count() }})
        </span>
    </button>
</li>

<li class="nav-item">
    <button type="button" class="nav-link" data-gt-filter="bank">
        Bank
        <span class="ms-1 opacity-75">
            ({{ $completedGTs->where('transfer_type', 'bank')->count() }})
        </span>
    </button>
</li>

                </ul>

            </div>

            <div class="col-lg-4 col-md-5 col-12">

                <div class="input-group gt-search-group">

                    <span class="input-group-text gt-search-icon">
                        <i class="ti ti-search"></i>
                    </span>

                    <input type="text"
                           id="gtCompleteSearch"
                           class="form-control gt-search-input"
                           placeholder="Customer / Cheque No / GT No">

                </div>

            </div>

        </div>

    </div>


    {{-- ================= CARD LIST ================= --}}

    <div id="gtCompleteList">

        <div class="row g-3">


@foreach($completedGTs as $gt)

    @php

        $completion = $gt->completion;

        $type = strtolower($gt->transfer_type ?? '');

        $customerName = $gt->customer_name
            ?? $gt->bank_name
            ?? '-';

        $phone = $gt->customer_phone
            ?? $gt->bank_phone
            ?? '';

        // GoldTransfer ID
        $gtNumber = $gt->id ?? '-';

        // Completion details
        $chequeNumber = $completion->cheque_no ?? '-';

        $amount = (float)($gt->per_gram ?? 0);

        $searchData = strtolower(
            $gtNumber . ' ' .
            $chequeNumber . ' ' .
            $customerName . ' ' .
            $phone
        );
    @endphp

    <div class="col-xl-4 col-md-6 col-12 gt-complete-item"
         data-category="{{ $type }}"
         data-search="{{ $searchData }}">

        {{-- Whole card is clickable --}}
        <a href="{{ route('viewgt_page', ['id' => $gt->id, 'from' => 'complete']) }}"

           class="gt-complete-card">

            <div class="gt-card-row">

                {{-- LEFT --}}
                <div class="gt-left">

                    <div class="gt-number">
                        GT #{{ $gtNumber }}
                    </div>

                    <div class="gt-customer-name">
                        {{ $customerName }}
                    </div>

                    <div class="gt-amount">
                        ₹ {{ number_format($amount, 2) }}
                    </div>

                </div>

                {{-- RIGHT --}}
                <div class="gt-right">

                    <span class="gt-type">
                        {{ ucfirst($type ?: 'N/A') }}
                    </span>

                    <span class="gt-date">
                        {{ $gt->created_at ? $gt->created_at->format('d-m-Y') : '-' }}
                    </span>

                </div>

            </div>

        </a>

    </div>

@endforeach




            {{-- NO RECORDS --}}

            <div id="gtNoRecords" class="col-12 gt-no-records">

                <div class="card gt-empty-card text-center py-5">

                    <i class="ti ti-search-off mb-3"
                       style="font-size:35px; color:var(--ink-faint);"></i>

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

                    <p class="text-muted mb-0" style="font-size:12px;">
                        No completed GT records match your search.
                    </p>

                </div>

            </div>

        </div>

    </div>

</div>


{{-- ================= FILTER + SEARCH JS ================= --}}

<script>

document.addEventListener('DOMContentLoaded', function () {

    const tabs      = document.querySelectorAll('[data-gt-filter]');
    const items     = document.querySelectorAll('.gt-complete-item');
    const search    = document.getElementById('gtCompleteSearch');
    const noRecords = document.getElementById('gtNoRecords');

    let selectedFilter = 'all';

    function filterGT() {

        const searchTerm = search.value.trim().toLowerCase();
        let visibleCount = 0;

        items.forEach(function (item) {

            const category   = item.dataset.category || '';
            const searchData = item.dataset.search || '';

            const shouldShow =
                (selectedFilter === 'all' || category === selectedFilter) &&
                searchData.includes(searchTerm);

            item.classList.toggle('d-none', !shouldShow);

            if (shouldShow) visibleCount++;
        });

        noRecords.classList.toggle('show', visibleCount === 0);
    }

    tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {

            selectedFilter = tab.dataset.gtFilter;

            tabs.forEach(function (t) {
                t.classList.toggle('active', t === tab);
            });

            filterGT();
        });
    });

    search.addEventListener('input', filterGT);

    filterGT();
});

</script>

@endsection