@extends('staff.layout')

@section('content')

<style>
    /* =========================================================
       GT COMPLETE
       Screenshot-style information cards
    ========================================================= */

    .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;
    }

    /* =========================================================
       GT CARD
    ========================================================= */

    .gt-complete-card {
        position: relative;
        display: block;
        width: 100%;

        background: rgba(4, 20, 42, .82);

        border: 2px solid rgba(255, 255, 255, .14);
        border-radius: 15px;

        padding: 20px 20px 18px 20px;

        text-decoration: none;
        overflow: hidden;

        transition: all .18s ease;
    }

    /* Green left line */

    .gt-complete-card::before {
        content: "";
        position: absolute;

        left: -2px;
        top: 0;
        bottom: 0;

        width: 3px;

        background: #35e58a;

        border-radius: 15px 0 0 15px;
    }

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

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

    .gt-card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 15px;
        margin-bottom: 8px;
    }

    .gt-number {
        color: #4da3ff;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
    }

    .gt-type {
        color: var(--ink);
        font-size: 11px;
        font-weight: 700;
        white-space: nowrap;
        padding-top: 2px;
    }

    /* ================= CUSTOMER ================= */

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

    /* ================= DETAILS ================= */

    .gt-details {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .gt-detail-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        min-height: 22px;
    }

    .gt-detail-label {
        color: #aebbd0;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.2;
    }

    .gt-detail-value {
        color: var(--ink);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
        text-align: right;
        white-space: nowrap;
    }

    /* ================= VALUE COLORS ================= */

    .gt-weight {
        color: #f2f5fa;
    }

    .gt-per-gram {
        color: #ffc400;
    }

    .gt-loan-type {
        color: #3fa9ff;
    }

    .gt-loan-amount {
        color: #38e58a;
    }

    .gt-interest {
        color: #22aaff;
    }

    /* ================= 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: 575px) {

        .gt-complete-card {
            padding: 16px 15px 15px 15px;
            border-radius: 13px;
        }

        .gt-card-header {
            margin-bottom: 7px;
        }

        .gt-number {
            font-size: 14px;
        }

        .gt-type {
            font-size: 10px;
        }

        .gt-customer-name {
            font-size: 16px;
            margin-bottom: 12px;
        }

        .gt-detail-row {
            gap: 10px;
        }

        .gt-detail-label,
        .gt-detail-value {
            font-size: 13px;
        }

        .gt-detail-value {
            white-space: normal;
            text-align: right;
        }
    }
</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
                        ?? '';

                    $gtNumber = $gt->id ?? '-';

                    $chequeNumber = $completion->cheque_no ?? '-';

                    $netWeight = (float) (
                        $gt->net_weight
                        ?? $gt->weight
                        ?? $gt->gold_weight
                        ?? 0
                    );

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

                    $loanType = $gt->loan_type
                        ?? $gt->type
                        ?? '-';

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

                    $interestRate = $gt->interest_rate
                        ?? $gt->interest
                        ?? null;

                    $searchData = strtolower(
                        $gtNumber . ' ' .
                        $chequeNumber . ' ' .
                        $customerName . ' ' .
                        $phone . ' ' .
                        $type . ' ' .
                        $loanType
                    );

                @endphp


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

                    <a href="{{ route('viewgt_page_staff', ['id' => $gt->id, 'from' => 'complete']) }}"
                        class="gt-complete-card">

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

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

                            <div class="gt-number">
                                GT{{ str_pad($gtNumber, 4, '0', STR_PAD_LEFT) }}
                            </div>

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

                        </div>


                        {{-- ================= CUSTOMER ================= --}}

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


                        {{-- ================= DETAILS ================= --}}

                        <div class="gt-details">

                            {{-- NET WEIGHT --}}

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

                                <span class="gt-detail-label">
                                    Net Weight:
                                </span>

                                <span class="gt-detail-value gt-weight">
                                    {{ number_format($netWeight, 3) }} g
                                </span>

                            </div>


                            {{-- PURITY AMOUNT PER GRAM --}}

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

                                <span class="gt-detail-label">
                                    Purity Amount Per Gram:
                                </span>

                                <span class="gt-detail-value gt-per-gram">
                                    ₹ {{ number_format($perGram, 2) }}
                                </span>

                            </div>


                            {{-- LOAN TYPE --}}

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

                                <span class="gt-detail-label">
                                    Loan Type:
                                </span>

                                <span class="gt-detail-value gt-loan-type">

                                    @if($loanType && $loanType !== '-')
                                        {{ $loanType }}
                                    @else
                                        –
                                    @endif

                                </span>

                            </div>


                            {{-- LOAN AMOUNT --}}

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

                                <span class="gt-detail-label">
                                    Loan Amount:
                                </span>

                                <span class="gt-detail-value gt-loan-amount">
                                    ₹ {{ number_format($loanAmount, 2) }}
                                </span>

                            </div>


                            {{-- INTEREST RATE --}}

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

                                <span class="gt-detail-label">
                                    Interest Rate:
                                </span>

                                <span class="gt-detail-value gt-interest">

                                    @if($interestRate !== null && $interestRate !== '')
                                        {{ number_format((float) $interestRate, 3) }}%
                                    @else
                                        –
                                    @endif

                                </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