@extends('staff.layout')

@section('content')
<div class="page-view w-100">

    <!-- PAGE HEADER -->
    <div class="d-flex align-items-center gap-2 mb-3">
        <a href="{{ route('complete_gt_staff') }}"
           class="btn btn-icon btn-outline-primary flex-shrink-0">
            <i class="ti ti-arrow-left"></i>
        </a>
        <h3 class="mb-0 text-white fw-bold">Closed GT Cases</h3>
    </div>

    <!-- TABLE CARD -->
    <div class="card bank-card p-3 p-md-4 w-100">

        <!-- FILTER CONTROLS -->
        <div class="row g-3 align-items-center mb-3">
            <div class="col-12 col-md-6">
                <h5 class="text-white mb-0">Closed GT Cases</h5>
            </div>

            <div class="col-12 col-md-6">
                <div class="d-flex flex-column flex-sm-row justify-content-md-end gap-2">
                    <select id="pageLength"
                            class="form-select form-select-sm"
                            style="width: 100%; max-width: 100px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="all">All</option>
                    </select>

                    <input type="search"
                           id="principalSearch"
                           class="form-control form-control-sm"
                           placeholder="Search GT cases..."
                           style="width: 100%; max-width: 300px;">
                </div>
            </div>
        </div>

        <!-- TABLE -->
        <div class="table-responsive bank-table-wrapper w-100">
            <table id="table"
                   class="table align-middle text-nowrap mb-0 w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>CREATED DATE</th>
                        <th>NAME</th>
                        <th>GT ID</th>
                        <th>NET WEIGHT</th>
                        <th>AMOUNT</th>
                        <th>PER GRAM</th>
                        <th>CLOSED DATE</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($closedGTs as $index => $gt)
                        @php
                            $customerName = $gt->customer_name ?? $gt->bank_name ?? '-';
                            $amount = (float) ($gt->total_principal ?: $gt->amount ?? 0);
                        @endphp
                        <tr>
                            <td>{{ $index + 1 }}</td>
                            <td>{{ $gt->created_at ? $gt->created_at->format('Y-m-d') : '-' }}</td>
                            <td>{{ $customerName }}</td>
                            <td>GT#{{ $gt->id }}</td>
                            <td>{{ number_format((float) ($gt->net_gram ?? 0), 3) }} g</td>
                            <td>₹ {{ number_format($amount, 2) }}</td>
                            <td>₹ {{ number_format((float) ($gt->per_gram ?? 0), 2) }}</td>
                            <td>{{ $gt->updated_at ? $gt->updated_at->format('Y-m-d') : '-' }}</td>
                            <td>
                                <a href="{{ route('viewgt_page_staff', ['id' => $gt->id, 'from' => 'closed']) }}"
                                   class="btn btn-sm btn-outline-primary view-details-btn">
                                    <i class="ti ti-eye"></i> View Details
                                </a>
                            </td>
                        </tr>
                    @empty
                        {{-- DataTables empty state will handle if table is initialized empty --}}
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- DATATABLE CSS -->
<link rel="stylesheet"
      href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">

<style>
    .page-view {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .bank-card {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .bank-table-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    #table {
        width: 100% !important;
    }

    #table th,
    #table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    .dataTables_wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .view-details-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
    }

    @media (max-width: 575.98px) {
        .bank-card {
            padding: 12px !important;
        }

        .page-view h3 {
            font-size: 1.1rem;
        }

        .bank-table-wrapper {
            margin-bottom: 4px;
        }
    }
</style>

<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- DATATABLE JS -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(document).ready(function () {
    const table = $('#table').DataTable({
        processing: false,
        serverSide: false,
        pageLength: 10,
        lengthChange: false,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        responsive: false,
        scrollX: false,
        dom: 'rtip',

        order: [[1, 'desc']],

        language: {
            emptyTable: 'No closed GT cases available',
            zeroRecords: 'No matching records found'
        },

        drawCallback: function () {
            $('#table').css('width', '100%');
        }
    });

    // LIVE SEARCH
    $('#principalSearch').on('input search', function () {
        table.search(this.value).draw();
    });

    // DYNAMIC PAGE LENGTH
    $('#pageLength').on('change', function () {
        const value = this.value === 'all' ? -1 : parseInt(this.value, 10);
        table.page.len(value).draw();
    });
});
</script>
@endsection