@extends('staff.layout')

@section('content')
    <div class="container-fluid px-0">

        {{-- PAGE HEADER --}}
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3">
            <h3 class="mb-0">Approved GA Cases</h3>
        </div>

        {{-- BANK 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-2 gap-sm-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"
                        aria-label="Search approved GA cases">
                </div>
            </div>

            {{-- TABLE --}}
            <div class="table-responsive bank-table-wrapper">
                <table id="table" class="table table-hover align-middle text-nowrap mb-0 w-100">
                    <thead>
                        <tr>
                            <th>SNO</th>
                            <th>GA ID</th>
                            <th>Name</th>
                            <th>Total Gross</th>
                            <th>Total Net</th>
                            <th>Rate / g</th>
                            <th>Eligible Loan Amount</th>
                            <th>View</th>
                            <th>Upload</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>

        </div>
    </div>

    {{-- UPLOAD CHEQUE MODAL --}}
    <div class="modal fade" id="uploadGaModal" tabindex="-1"
        aria-labelledby="uploadGaModalTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title" id="uploadGaModalTitle">
                        Complete GA
                    </h5>
                    <button type="button" class="btn-close"
                        data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <form id="uploadGaForm" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="modal-body">
                        <input type="hidden" name="id" id="upload_ga_id">

                        <div class="mb-3">
                            <label for="chequeNumber" class="form-label">
                                Cheque Number <span class="text-danger">*</span>
                            </label>
                            <input type="text"
                                name="cheque_number"
                                id="chequeNumber"
                                class="form-control @error('cheque_number') is-invalid @enderror"
                                placeholder="Enter cheque number"
                                value="{{ old('cheque_number') }}">

                            @error('cheque_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="chequeImage" class="form-label">
                                Cheque Image
                            </label>
                            <input type="file"
                                name="cheque_image"
                                id="chequeImage"
                                class="form-control @error('cheque_image') is-invalid @enderror"
                                accept="image/jpeg,image/png,image/jpg">

                            @error('cheque_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror

                            {{-- IMAGE PREVIEW --}}
                            <div id="chequeImagePreviewWrapper"
                                class="mt-3 text-center"
                                style="display: none;">
                                <img id="chequeImagePreview"
                                    src=""
                                    alt="Cheque Preview"
                                    class="img-fluid rounded border"
                                    style="max-height: 250px; width: auto;">
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer d-flex flex-column flex-sm-row">
                        <button type="button"
                            class="btn btn-secondary w-100 w-sm-auto"
                            data-bs-dismiss="modal">
                            Cancel
                        </button>

                        <button type="submit"
                            class="btn btn-primary w-100 w-sm-auto"
                            id="submitGaUpload">
                            Complete GA
                        </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 STYLES --}}
    <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) {
            #bankSearch {
                width: 100%;
                min-width: 0;
            }

            .bank-card {
                padding: 1rem !important;
            }

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

    <script>
        $(document).ready(function () {
            window.bankTable = $('#table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('staff_approved_ga_cases_data') }}",
                    type: "GET"
                },
                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: 'ga_id',
                        name: 'user_id'
                    },
                    {
                        data: 'name',
                        name: 'customer_name'
                    },
                    {
                        data: 'total_gross',
                        name: 'total_gross',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'total_net',
                        name: 'total_net',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'rate_per_gram',
                        name: 'rate_per_gram',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'eligible_loan_amount',
                        name: 'eligible_loan_amount',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'view',
                        name: 'view',
                        orderable: false,
                        searchable: false
                    },
                    {
                        data: 'upload',
                        name: 'upload',
                        orderable: false,
                        searchable: false
                    }
                ],
                drawCallback: function () {
                    $('#table').wrapIfNeeded;
                }
            });

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

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

            // OPEN UPLOAD MODAL
            $(document).on('click', '.upload-ga-btn', function () {
                const id = $(this).data('id');

                $('#uploadGaForm')[0].reset();

                $('#uploadGaForm').attr(
                    'action',
                    "{{ route('staff_approved_ga_cases_upload') }}"
                );

                $('#upload_ga_id').val(id);
                $('#chequeImagePreview').attr('src', '');
                $('#chequeImagePreviewWrapper').hide();

                $('#uploadGaModal').modal('show');
            });

            // CHEQUE IMAGE PREVIEW
            $('#chequeImage').on('change', function () {
                const file = this.files[0];

                if (file && file.type.startsWith('image/')) {
                    const reader = new FileReader();

                    reader.onload = function (e) {
                        $('#chequeImagePreview').attr('src', e.target.result);
                        $('#chequeImagePreviewWrapper').show();
                    };

                    reader.readAsDataURL(file);
                } else {
                    $('#chequeImagePreview').attr('src', '');
                    $('#chequeImagePreviewWrapper').hide();
                }
            });

            // SUBMIT BUTTON LOADING
            $('#uploadGaForm').on('submit', function () {
                const button = $('#submitGaUpload');

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

            // RESTORE BUTTON WHEN MODAL CLOSES
            $('#uploadGaModal').on('hidden.bs.modal', function () {
                $('#submitGaUpload')
                    .prop('disabled', false)
                    .text('Complete GA');
            });
        });
    </script>
@endsection