@extends('staff.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">
            
            <div>
                <h5 class="mb-0 fw-bold" style="color: var(--gold-soft);">
                    Approved Gold Transfer
                </h5>
            </div>
        </div>
    </div>

    {{-- TABLE CARD --}}
    <div class="card bank-card p-3">

        {{-- FILTER --}}
        <div class="d-flex flex-column flex-sm-row justify-content-between
                    align-items-stretch align-items-sm-center gap-3 mb-4">

            <div class="d-flex align-items-center gap-2">
                <label for="pageLength" class="form-label mb-0 text-nowrap">
                    Show
                </label>
                <select id="pageLength" class="form-select form-select-sm"
                    style="width: 85px;">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                </select>
                <span class="text-nowrap">entries</span>
            </div>

            <div class="w-100 w-sm-auto">
                <input type="search" id="bankSearch"
                    class="form-control" placeholder="Search">
            </div>
        </div>

        {{-- TABLE --}}
        <div class="bank-table-wrapper">
            <table id="table" class="table table-hover 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>
                        <th>UPLOAD</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>

    {{-- UPLOAD MODAL --}}
    <div class="modal fade" id="uploadModal" tabindex="-1"
        aria-labelledby="uploadModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content"
                style="background:#19212c;
                       border:1px solid rgba(218,184,91,.4);
                       border-radius:15px;">

                {{-- HEADER --}}
                <div class="modal-header" style="border-bottom:1px solid #3d4245;">
                    <h5 class="modal-title" id="uploadModalTitle"
                        style="color:#f0d37b;">
                        Upload Document
                    </h5>
                    <button type="button" class="btn-close btn-close-white"
                        data-bs-dismiss="modal" aria-label="Close">
                    </button>
                </div>

                {{-- FORM --}}
                <form id="completeGTForm" method="POST"
                    action="{{ route('complete_gt_store') }}"
                    enctype="multipart/form-data">
                    @csrf

                    <input type="hidden" name="transfer_id" id="transfer_id"
                        value="{{ old('transfer_id') }}">

                    <div class="modal-body">
                        {{-- CHEQUE NUMBER --}}
                        <div class="mb-3">
                            <label for="cheque_no" class="form-label text-white">
                                Cheque Number
                            </label>
                            <input type="text" id="cheque_no" name="cheque_no"
                                class="form-control"
                                placeholder="Enter cheque number">
                            <small id="chequeError" class="text-danger d-none"></small>
                        </div>

                        {{-- FILE UPLOAD --}}
                        <div class="mb-3">
                            <label for="upload_file" class="form-label text-white">
                                Select File
                            </label>
                            <input type="file" id="upload_file" name="upload_file"
                                class="form-control"
                                accept="image/jpeg,image/png,image/jpg,.pdf">

                            <small style="color:#93a1b8;">
                                Allowed: JPG, PNG, JPEG, PDF (max 5 MB)
                            </small>
                            <small id="fileError" class="text-danger d-none"></small>
                        </div>
                    </div>

                    {{-- FOOTER --}}
                    <div class="modal-footer"
                        style="border-top:1px solid #3d4245;">
                        <button type="button" class="btn btn-secondary"
                            data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn" id="uploadSubmit"
                            style="background:#f0cc68;
                                   color:#19212c;
                                   font-weight:600;">
                            Complete GT
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

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

    {{-- RESPONSIVE CSS --}}
    <style>
        .bank-table-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        #table {
            width: 100% !important;
        }

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

        #table thead th {
            font-weight: 600;
        }

        #bankSearch {
            min-width: 220px;
        }

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

            #bankSearch {
                width: 100%;
                min-width: 0;
            }

            .modal-dialog {
                margin: .5rem;
            }

            .modal-footer {
                gap: .5rem;
            }
        }

        @media (min-width: 576px) {
            .w-sm-auto {
                width: auto !important;
            }
        }
    </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>

    {{-- TOAST HELPER --}}
    <script>
        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';
                    box.style.cssText =
                        'position:fixed;top:20px;right:20px;z-index:9999;';
                    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('approved_gt_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: 'upload',
                        name: 'upload',
                        orderable: false,
                        searchable: false
                    }
                ]
            });

            // CUSTOM 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();
            });

            // OPEN UPLOAD MODAL
            $(document).on('click', '.upload-btn', function () {
                const form = $('#completeGTForm');

                form[0].reset();

                $('#chequeError, #fileError')
                    .text('')
                    .addClass('d-none');

                $('#transfer_id').val($(this).data('id'));

                $('#uploadSubmit')
                    .prop('disabled', false)
                    .text('Complete GT');

                openUploadModal();
            });

            // FILE VALIDATION
            $('#upload_file').on('change', function () {
                const file = this.files[0];

                $('#fileError').text('').addClass('d-none');

                if (!file) return;

                const allowedTypes = [
                    'image/jpeg',
                    'image/png',
                    'application/pdf'
                ];

                if (!allowedTypes.includes(file.type)) {
                    $('#fileError')
                        .text('Please select a JPG, PNG, JPEG, or PDF file.')
                        .removeClass('d-none');

                    this.value = '';
                    return;
                }

                if (file.size > 5 * 1024 * 1024) {
                    $('#fileError')
                        .text('File size must not exceed 5 MB.')
                        .removeClass('d-none');

                    this.value = '';
                }
            });

            // PREVENT DOUBLE SUBMISSION
            $('#completeGTForm').on('submit', function () {
                const button = $('#uploadSubmit');

                button.prop('disabled', true).html(
                    '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Processing...'
                );
            });

            // RESTORE SUBMIT BUTTON WHEN MODAL CLOSES
            $('#uploadModal').on('hidden.bs.modal', function () {
                $('#uploadSubmit')
                    .prop('disabled', false)
                    .text('Complete GT');
            });
        });
    </script>

@endsection