@extends('staff.layout')

@section('content')

    {{-- =========================
         PAGE HEADER
    ========================== --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">

        {{-- LEFT SIDE --}}
        <div class="d-flex align-items-center gap-2 flex-shrink-1">

        

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

        </div>

        {{-- RIGHT SIDE --}}
        <div class="flex-shrink-0">

            <a href="{{ route('gt_transfer_staff') }}"
               class="btn btn-primary text-nowrap">
                <i class="ti ti-plus me-1"></i>
                Add GT
            </a>

        </div>

    </div>


    {{-- =========================
         TABLE CARD
    ========================== --}}
    <div class="card bank-card w-100 overflow-hidden">

        <div class="card-body p-3">

            {{-- =========================
                 FILTER
            ========================== --}}
            <div class="row g-3 align-items-center mb-4">

                {{-- PAGE LENGTH --}}
                <div class="col-12 col-lg-auto">

                    <select id="pageLength"
                            class="form-select w-100">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                    </select>

                </div>


                {{-- SEARCH --}}
                <div class="col-12 col-lg-auto ms-lg-auto">

                    <input type="search"
                           id="bankSearch"
                           class="form-control"
                           placeholder="Search">

                </div>

            </div>


            {{-- =========================
                 TABLE
            ========================== --}}
            <div class="table-responsive">

                <table id="table"
                       class="table mb-0 text-nowrap align-middle"
                       style="width: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>
                            <th>STATUS</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">


    {{-- =========================
         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>


    {{-- =========================================================
         TOAST + MODAL HELPERS
    ========================================================== --}}
    <script>

        /*
         * showToast(message, type)
         * type: success | error
         */
        if (typeof window.showToast !== 'function') {

            window.showToast = function (message, type) {

                type = type === 'error' ? 'error' : 'success';

                let box = document.getElementById('gtToastBox');

                if (!box) {

                    box = document.createElement('div');
                    box.id = 'gtToastBox';

                    document.body.appendChild(box);
                }

                const el = document.createElement('div');

                el.className = 'gt-toast ' + type;
                el.textContent = message;

                box.appendChild(el);

                setTimeout(function () {
                    el.remove();
                }, 3500);

            };

        }


        /*
         * Bootstrap 5 modal helpers
         */
        function openUploadModal() {

            const el = document.getElementById('uploadModal');

            if (window.bootstrap && bootstrap.Modal) {

                bootstrap.Modal
                    .getOrCreateInstance(el)
                    .show();

            } else {

                $(el).modal('show');

            }

        }


        function closeUploadModal() {

            const el = document.getElementById('uploadModal');

            if (window.bootstrap && bootstrap.Modal) {

                bootstrap.Modal
                    .getOrCreateInstance(el)
                    .hide();

            } else {

                $(el).modal('hide');

            }

        }

    </script>


    {{-- =========================================================
         DATATABLE
    ========================================================== --}}
    <script>

        $(document).ready(function () {

            window.goldTransferTable = $('#table').DataTable({

                processing: true,

                serverSide: true,

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

                pageLength: 10,

                lengthChange: false,

                searching: true,

                ordering: true,

                order: [],

                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
                    },

                    {
                        data: 'status',
                        name: 'status'
                    }

                ]

            });


            /* =========================
               CUSTOM SEARCH
            ========================== */

            $('#bankSearch').on('keyup', function () {

                window.goldTransferTable
                    .search(this.value)
                    .draw();

            });


            /* =========================
               PAGE LENGTH
            ========================== */

            $('#pageLength').on('change', function () {

                window.goldTransferTable
                    .page
                    .len(parseInt(this.value))
                    .draw();

            });

        });

    </script>

@endsection