@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('staff_ga_cases') }}"
           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 GA 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 GA 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 () {
    const table = $('#table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "{{ route('staff_closed_ga') }}",
            type: "GET"
        },
        pageLength: 10,
        lengthChange: false,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        responsive: false,
        scrollX: false,
        dom: 'rtip',

        columns: [
            {
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            },
            {
                data: 'created_date',
                name: 'created_at'
            },
            {
                data: 'name',
                name: 'customer_name'
            },
            {
                data: 'ga_id',
                name: 'id'
            },
            {
                data: 'net_weight',
                name: 'eligible_net_weight'
            },
            {
                data: 'loan_amount',
                name: 'final_loan_amount'
            },
            {
                data: 'interest_policy',
                name: 'policy.name',
                orderable: false
            },
            {
                data: 'purity_pergram',
                name: 'gold_item.rate_per_gram',
                orderable: false
            },
            {
                data: 'closed_date',
                name: 'closed_date',
                orderable: false,
                searchable: false
            },
            {
                data: 'view_details',
                name: 'view_details',
                orderable: false,
                searchable: false,
                render: function (url) {
                    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