@extends('Admin.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') }}"
           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 GA 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>GA ID</th>
                        <th>NET WEIGHT</th>
                        <th>LOAN AMOUNT</th>
                        <th>INTEREST POLICY &amp; %</th>
                        <th>PURITY PERGRAM</th>
                        <th>CLOSED DATE</th>
                        <th>VIEW DETAILS</th>
                    </tr>
                </thead>
                <tbody></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 () {

    // FRONT-END SAMPLE DATA
    const data = [
        {
            created_date: '2026-09-01',
            name: 'Arun Kumar',
            ga_id: 'GA1001',
            net_weight: '25.500 g',
            loan_amount: '₹50,000',
            interest_policy: 'Monthly - 2%',
            purity_pergram: '₹5,800',
            closed_date: '2026-09-20',
            view_details: '{{ route("closed_ga") }}'
        },
        {
            created_date: '2026-09-03',
            name: 'Priya Devi',
            ga_id: 'GA1002',
            net_weight: '18.250 g',
            loan_amount: '₹35,000',
            interest_policy: 'Monthly - 1.5%',
            purity_pergram: '₹5,750',
            closed_date: '2026-09-22',
            view_details: '{{ route("closed_ga") }}'
        },
        {
            created_date: '2026-09-05',
            name: 'Suresh',
            ga_id: 'GA1003',
            net_weight: '30.000 g',
            loan_amount: '₹75,000',
            interest_policy: 'Daily - 0.1%',
            purity_pergram: '₹5,900',
            closed_date: '2026-09-25',
            view_details: '{{ route("closed_ga") }}'
        },
        {
            created_date: '2026-09-07',
            name: 'Lakshmi',
            ga_id: 'GA1004',
            net_weight: '12.750 g',
            loan_amount: '₹25,000',
            interest_policy: 'Monthly - 2%',
            purity_pergram: '₹5,850',
            closed_date: '2026-09-27',
            view_details: '{{ route("closed_ga") }}'
        },
        {
            created_date: '2026-09-10',
            name: 'Ramesh',
            ga_id: 'GA1005',
            net_weight: '22.000 g',
            loan_amount: '₹45,000',
            interest_policy: 'Monthly - 1.5%',
            purity_pergram: '₹5,800',
            closed_date: '2026-09-29',
            view_details: '{{ route("closed_ga") }}'
        }
    ];

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

        columns: [
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            {
                data: 'created_date',
                name: 'created_date'
            },
            {
                data: 'name',
                name: 'name'
            },
            {
                data: 'ga_id',
                name: 'ga_id'
            },
            {
                data: 'net_weight',
                name: 'net_weight'
            },
            {
                data: 'loan_amount',
                name: 'loan_amount'
            },
            {
                data: 'interest_policy',
                name: 'interest_policy'
            },
            {
                data: 'purity_pergram',
                name: 'purity_pergram'
            },
            {
                data: 'closed_date',
                name: 'closed_date'
            },
            {
                data: 'view_details',
                name: 'view_details',
                orderable: false,
                searchable: false,
                render: function (url, type, row) {
                    return `
                        <a href="${url}"
                           class="btn btn-sm btn-outline-primary view-details-btn">
                            <i class="ti ti-eye"></i>
                            View Details
                        </a>
                    `;
                }
            }
        ],

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

        language: {
            emptyTable: 'No closed GA 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