@extends('Admin.layout')

@section('content')

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

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

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

        <!-- FILTER -->
        <div class="row g-2 align-items-center mb-4">
            <div class="col-5 col-sm-3 col-md-1">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
            </div>

            <div class="col-7 col-sm-6 col-md-4 ms-md-auto">
                <input type="search"
                       id="bankSearch"
                       class="form-control"
                       placeholder="Search">
            </div>
        </div>

        <!-- RESPONSIVE TABLE -->
        <div class="table-responsive w-100">
            <table id="table" class="table mb-0 text-nowrap 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>

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

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

    <style>
        /* Keep the card within the available page width */
        .bank-card {
            min-width: 0;
            max-width: 100%;
        }

        /* Bootstrap horizontal table scrolling */
        .bank-card .table-responsive {
            width: 100%;
            max-width: 100%;
            overflow-x: auto;
            overflow-y: hidden;
            -webkit-overflow-scrolling: touch;
        }

        /* Keep table content readable */
        #table th,
        #table td {
            white-space: nowrap;
            vertical-align: middle;
        }

        /* Prevent DataTables from expanding the page */
        #table_wrapper {
            width: 100%;
            max-width: 100%;
            min-width: 0;
        }
    </style>

    <script>
        $(document).ready(function () {

            // DATATABLE
            window.goldTransferTable = $('#table').DataTable({
                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('approvedgt_data') }}",
                    type: "GET"
                },

                pageLength: 10,
                lengthChange: false,
                searching: true,
                ordering: true,
                info: true,
                autoWidth: false,
                dom: 'rtip',

                columns: [
                    {
                        data: 'DT_RowIndex',
                        name: 'DT_RowIndex',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'transfer_type',
                        name: 'transfer_type'
                    },
                    {
                        data: 'disbursement_mode',
                        name: 'disbursement_mode'
                    },
                    {
                        data: 'gross_gram',
                        name: 'gross_gram',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'reduced_gram',
                        name: 'reduced_gram',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'net_gram',
                        name: 'net_gram',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'view',
                        name: 'view',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

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

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

@endsection