@extends('Admin.layout')

@section('content')

<div class="page-view w-100">

    <!-- PAGE HEADER -->
    <div class="d-flex align-items-center gap-2 mb-4">
        <a href="{{ route('requested_gt') }}"
           class="btn btn-icon btn-outline-primary flex-shrink-0">
            <i class="ti ti-arrow-left"></i>
        </a>

        <h5 class="mb-0 fw-bold" style="color: var(--gold-soft);">
            Rejected Gold Transfer
        </h5>
    </div>

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

        <!-- FILTERS -->
        <div class="row g-3 align-items-center mb-4">

            <div class="col-12 col-md-6">
                <h6 class="text-white fw-semibold mb-0">
                    Rejected Transfer History
                </h6>
            </div>

            <div class="col-12 col-md-6">
                <div class="d-flex flex-column flex-sm-row justify-content-md-end gap-2">

                    <!-- PAGE LENGTH -->
                    <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>
                    </select>

                    <!-- SEARCH -->
                    <input type="search"
                           id="bankSearch"
                           class="form-control form-control-sm"
                           placeholder="Search..."
                           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>SNO</th>
                        <th>TRANSFER TYPE</th>
                        <th>DISBURSEMENT TYPE</th>
                        <th>GROSS GRAM</th>
                        <th>REDUCED GRAM</th>
                        <th>NET GRAM</th>
                        <th>AMOUNT</th>
                        <th>VIEW</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 {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        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;
    }

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

        .page-view h5 {
            font-size: 1rem;
        }
    }
</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 goldTransferTable = $('#table').DataTable({
        processing: true,
        serverSide: true,

        ajax: {
            url: "{{ route('rejectedgt_data') }}",
            type: "GET",
            error: function (xhr) {
                console.error('Rejected Gold Transfer Error:', xhr.responseText);
            }
        },

        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: 'transfer_type',
                name: 'transfer_type',
                defaultContent: '-'
            },
            {
                data: 'disbursement_mode',
                name: 'disbursement_mode',
                defaultContent: '-'
            },
            {
                data: 'gross_gram',
                name: 'gross_gram',
                orderable: false,
                searchable: false,
                defaultContent: '-'
            },
            {
                data: 'reduced_gram',
                name: 'reduced_gram',
                orderable: false,
                searchable: false,
                defaultContent: '-'
            },
            {
                data: 'net_gram',
                name: 'net_gram',
                orderable: false,
                searchable: false,
                defaultContent: '-'
            },
            {
                data: 'amount',
                name: 'amount',
                orderable: false,
                searchable: false,
                defaultContent: '-'
            },
            {
                data: 'view',
                name: 'view',
                orderable: false,
                searchable: false,
                defaultContent: '-'
            }
        ],

        language: {
            processing: 'Loading...',
            emptyTable: 'No rejected gold transfers found',
            zeroRecords: 'No matching records found'
        },

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

    // SEARCH
    $('#bankSearch').on('input search', function () {
        goldTransferTable.search(this.value).draw();
    });

    // PAGE LENGTH
    $('#pageLength').on('change', function () {
        goldTransferTable.page.len(parseInt(this.value, 10)).draw();
    });

});
</script>

@endsection