@extends('Admin.layout')

@section('content')

    <!-- PAGE HEADER -->
    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-sm-center mb-3 gap-3">
        <h3 class="mb-0">Requested Gold Transfer</h3>

        <!-- BUTTONS -->
        <div class="d-flex flex-wrap gap-2">
            <a href="{{ route('approvedgt') }}" class="btn btn-success text-white text-nowrap">
                Approved
            </a>

            <a href="{{ route('rejectedgt') }}" class="btn btn-danger text-white text-nowrap">
                Rejected
            </a>
        </div>
    </div>

    <!-- GOLD TRANSFER CARD -->
    <div class="card gt-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-2">
                <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="gtSearch"
                       class="form-control"
                       placeholder="Search">
            </div>
        </div>

        <!-- RESPONSIVE TABLE -->
        <div class="table-responsive w-100">
            <table id="gtTable" 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>
                        <th>STATUS</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    <!-- STATUS UPDATE FORM -->
    <form id="statusUpdateForm" method="POST" action="">
        @csrf
        <input type="hidden" name="status" id="statusInput">
    </form>

    <!-- APPROVE / REJECT CONFIRMATION MODAL -->
    <div class="modal fade" id="approveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content"
                 style="background:#19212c;
                        border:1px solid rgba(218,184,91,.45);
                        border-radius:15px;">

                <div class="modal-header border-0">
                    <h5 class="modal-title" style="color:#f0d37b;">
                        Approve Gold Transfer
                    </h5>

                    <button type="button"
                            class="btn-close btn-close-white"
                            data-bs-dismiss="modal"
                            aria-label="Close">
                    </button>
                </div>

                <div class="modal-body text-white">
                    <p class="mb-0" id="statusModalMessage">
                        Are you sure you want to approve this gold transfer?
                    </p>
                </div>

                <div class="modal-footer border-0">
                    <button type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="button"
                            class="btn btn-success"
                            id="confirmStatus">
                        Approve
                    </button>
                </div>
            </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>

    <style>
        /* Keep the card inside the available content width */
        .gt-card {
            min-width: 0;
            max-width: 100%;
        }

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

        /* Keep columns readable without wrapping */
        #gtTable {
            width: 100% !important;
        }

        #gtTable th,
        #gtTable td {
            white-space: nowrap;
            vertical-align: middle;
        }

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

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

            // =========================
            // DATATABLE
            // =========================

            window.gtTable = $('#gtTable').DataTable({
                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('requested_gt_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'
                    },
                    {
                        data: 'reduced_gram',
                        name: 'reduced_gram'
                    },
                    {
                        data: 'net_gram',
                        name: 'net_gram'
                    },
                    {
                        data: 'amount',
                        name: 'amount',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'view',
                        name: 'view',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'status',
                        name: 'status',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // =========================
            // SEARCH
            // =========================

            $('#gtSearch').on('input', function () {
                window.gtTable.search(this.value).draw();
            });

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

            $('#pageLength').on('change', function () {
                window.gtTable.page.len(parseInt(this.value, 10)).draw();
            });

            // =========================
            // STATUS VARIABLES
            // =========================

            let selectedId = null;
            let selectedDropdown = null;
            let selectedStatus = null;

            // =========================
            // STATUS DROPDOWN CHANGE
            // =========================

            $(document).on('change', '.status-dropdown', function () {
                const dropdown = $(this);
                const id = dropdown.data('id');
                const status = dropdown.val();

                selectedId = id;
                selectedDropdown = dropdown;
                selectedStatus = status;

                if (status === 'Approved' || status === 'Rejected') {

                    // Keep dropdown as Pending until confirmation
                    dropdown.val('Pending');

                    if (status === 'Approved') {
                        $('#approveModal .modal-title')
                            .text('Approve Gold Transfer');

                        $('#statusModalMessage')
                            .text('Are you sure you want to approve this gold transfer?');

                        $('#confirmStatus')
                            .text('Approve')
                            .removeClass('btn-danger')
                            .addClass('btn-success');
                    } else {
                        $('#approveModal .modal-title')
                            .text('Reject Gold Transfer');

                        $('#statusModalMessage')
                            .text('Are you sure you want to reject this gold transfer?');

                        $('#confirmStatus')
                            .text('Reject')
                            .removeClass('btn-success')
                            .addClass('btn-danger');
                    }

                    bootstrap.Modal.getOrCreateInstance(
                        document.getElementById('approveModal')
                    ).show();
                }
            });

            // =========================
            // CANCEL MODAL
            // =========================

            $('#approveModal').on('hidden.bs.modal', function () {

                if (selectedDropdown) {
                    selectedDropdown.val('Pending');
                }

                selectedId = null;
                selectedDropdown = null;
                selectedStatus = null;

                $('#confirmStatus')
                    .prop('disabled', false)
                    .text('Approve')
                    .removeClass('btn-danger')
                    .addClass('btn-success');
            });

            // =========================
            // CONFIRM STATUS
            // =========================

            $('#confirmStatus').on('click', function () {

                if (!selectedId || !selectedStatus) {
                    return;
                }

                const button = $(this);

                button.prop('disabled', true).text('Processing...');

                $('#statusInput').val(selectedStatus);

                const actionUrl = "{{ route('updateStatus_gt', ['id' => '__ID__']) }}"
                    .replace('__ID__', selectedId);

                $('#statusUpdateForm')
                    .attr('action', actionUrl)
                    .trigger('submit');
            });
        });
    </script>

@endsection