@extends('Admin.layout')
<link rel="stylesheet" href="https://cdn.datatables.net/2.3.4/css/dataTables.bootstrap5.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.5/css/buttons.bootstrap5.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
    .link {
        text-decoration: underline;
    }

    .select2-container .select2-selection--single {
        height: 38px !important;
        border: 1px solid #d9dee3;
        border-radius: 0.375rem;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
    }
</style>
@section('content')

    <div class="row align-items-center mb-3">
        <div class="col">
            <h5 class="mb-0">Active Student Management</h5>
        </div>

        <div class="col-auto">
            <button id="exportExcel" class="btn btn-success">
                <i class="fa fa-file-excel"></i> Export Excel
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-3 mt-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Staff Name</label>
                    <select id="filter_name" class="form-select">
                        <option value="">All Staff</option>
                        @foreach($staffs as $staff)
                            <option value="{{ $staff->id }}">{{ $staff->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4">
                    <label class="form-label">Role</label>
                    <select id="filter_role" class="form-select">
                        <option value="">All Roles</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->designation }}">{{ $role->designation }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-4 d-flex align-items-end">
                    <button class="btn btn-secondary" id="resetFilter">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-datatable table-responsive pt-0">
            <div class="row card-header flex-column flex-md-row border-bottom mx-0 px-3">
                <div class="justify-content-between dt-layout-table">
                    <div class=" justify-content-between align-items-center dt-layout-full table-responsive">
                        <table id="staff" class="table">
                            <thead>
                                <tr>
                                    <th>SNO</th>
                                    <th>NAME</th>
                                    <th>TASKS</th>
                                    <th class="text-nowrap">Weekly Report</th>
                                    <th>COUNT</th>
                                    <th>MOBILE</th>
                                    <th>OFFICE EMAIL</th>
                                    <th>PERSONAL EMAIL</th>
                                    <th>ROLE</th>
                                    <th>TYPE</th>
                                    <th>Bank</th>
                                    <th>TOTAL AMOUNT</th>
                                    <th>PAID AMOUNT</th>
                                    <th>PAYMENT STATUS</th>
                                    <th>UPDATE PAYMENT</th>
                                    <th>VIEW PAYMENT HISTORY</th>

                                    <th>ACTIVE STATUS</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="delete_staff" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted">Are you confirm to delete?</p>
                <form id="delete_form" method="POST" action="{{ route('delete_staff') }}">
                    @csrf
                    <input type="hidden" name="id" id="deleteId">
                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-danger p-3 ms-2 fw-semibold" id="submit_btn">
                            Yes, Sure
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- toggle status -->
    <div class="modal fade" id="toggle_status" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content rounded-4 text-center p-4 py-5">
                <h5 class="fw-bold mb-2">Are you sure!!</h5>
                <p class="text-muted" id="toggle_status_text"></p>
                <form id="ToggleForm" method="POST" action="{{ route('toggle_status') }}">
                    @csrf
                    <input type="hidden" name="id" id="toggle_staff_id">
                    <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                        <button type="button" class="btn btn-outline-primary p-3 fw-semibold  me-3" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" id="submit_toggle" class="btn btn-gray p-3 fw-semibold">
                            Yes, Sure
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="paymentModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">

                <form action="{{ route('student_payment_store') }}" method="POST" enctype="multipart/form-data">

                    @csrf

                    <input type="hidden" name="user_id" id="payment_user_id">

                    <div class="modal-header">
                        <h5 class="modal-title">Update Payment</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <div class="modal-body">

                        <div class="mb-2">
                            <label>Total Amount</label>
                            <input type="text" name="total_amount" id="total_amount" class="form-control" readonly>
                        </div>

                        <div class="mb-2">
                            <label>Paid Amount</label>

                            <input type="number" name="amount_paid" id="amount_paid" class="form-control" min="0"
                                step="0.01" required>

                        </div>

                        <div class="mb-2">
                            <label>Balance Amount</label>
                            <input type="text" id="balance_amount" class="form-control" readonly>
                        </div>
                        <div class="mb-2">
                            <label>Payment Mode</label>
                            <select name="payment_mode" class="form-control" required>
                                <option value="">Select Payment Mode</option>
                                <option value="Account">Account</option>
                                <option value="By Hand">By Hand</option>
                            </select>
                        </div>

                        <div class="mb-2">
                            <label>Payment Date</label>
                            <input type="date" name="payment_date" class="form-control" required>
                        </div>

                        <div class="mb-2">
                            <label>Receipt</label>
                            <input type="file" name="receipt" class="form-control">
                        </div>

                        <div class="mb-2">
                            <label>Remarks</label>
                            <textarea name="remarks" class="form-control"></textarea>
                        </div>

                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-primary">
                            Save
                        </button>
                    </div>

                </form>

            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>

    <script src="https://cdn.datatables.net/2.3.4/js/dataTables.bootstrap5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/3.2.5/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.5/js/buttons.bootstrap5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.2.5/js/buttons.html5.min.js"></script>

    <script>
        var jq = jQuery.noConflict();

        jq(document).ready(function () {

            // Select2 on the filter dropdowns
            jq('#filter_name, #filter_role').select2({width: '100%'});

            var table = jq('#staff').DataTable({
                processing: true,
                serverSide: true,

                ajax: {
                    url: "{{ route('student_data') }}",
                    data: function (d) {
                        d.staff_id = jq('#filter_name').val();
                        d.role = jq('#filter_role').val();
                    }
                },

                dom: 'Bfrtip',

                buttons: [{
                    extend: 'excelHtml5',
                    title: 'Student Management',
                    exportOptions: {
                        columns: [0, 1, 4, 5, 6, 7, 8, 9, 10, 11]
                    }
                }],

                columnDefs: [{targets: '_all', className: 'text-nowrap'}],

                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'name', name: 'name'},
                    {data: 'task', name: 'task', orderable: false, searchable: false},
                    {data: 'report', name: 'report', orderable: false, searchable: false},
                    {data: 'tasks_count', name: 'tasks_count', orderable: false, searchable: false},
                    {data: 'mobile', name: 'mobile'},
                    {data: 'email', name: 'email'},
                    {data: 'personal_email', name: 'personal_email'},
                    {data: 'designation', name: 'designation'},
                    {data: 'type', name: 'type'},
                    {data: 'bank', name: 'bank', orderable: false, searchable: false},
                    {data: 'total_amount', name: 'total_amount', searchable: false},
                    {data: 'paid_amount', name: 'paid_amount', searchable: false},
                    {data: 'payment_status', name: 'payment_status', orderable: false, searchable: false},
                    {data: 'update_payment', name: 'update_payment', orderable: false, searchable: false},
                    {data: 'payment_history', name: 'payment_history', orderable: false, searchable: false},
                    {data: 'is_active', name: 'is_active'},
                    {data: 'actions', name: 'actions', orderable: false, searchable: false}
                ]
            });

            table.buttons().container().hide();

            jq('#exportExcel').on('click', function () {
                table.button('.buttons-excel').trigger();
            });

            // Reload on filter change
            jq('#filter_name, #filter_role').on('change', function () {
                table.ajax.reload();
            });

            // Reset
            jq('#resetFilter').on('click', function () {
                jq('#filter_name').val('').trigger('change.select2');
                jq('#filter_role').val('').trigger('change.select2');
                table.ajax.reload();
            });
        });


        // =========================
        // DELETE
        // =========================
        function setDeleteId(button) {
            var staffId = button.getAttribute('data-id');
            document.getElementById('deleteId').value = staffId;
        }

        // =========================
        // TOGGLE STATUS
        // =========================
        function setToggleId(button) {
            const staffId = button.getAttribute('data-id');
            const isActive = button.getAttribute('data-active') === '1';

            document.getElementById('toggle_staff_id').value = staffId;

            const statusText = document.getElementById('toggle_status_text');

            if (isActive) {
                statusText.textContent = "Are you sure you want to block this staff?";
            } else {
                statusText.textContent = "Are you sure you want to unblock this staff?";
            }

            const icon = document.querySelector(`#toggle_icon_${staffId}`);
            if (icon) {
                icon.setAttribute('fill', isActive ? '#FF0000' : '#28a745');
                icon.setAttribute('fill-opacity', '1');
            }
        }

        // =========================
        // EXPORT CSV (optional old)
        // =========================
        document.getElementById("exp")?.addEventListener("click", function () {
            let table = document.getElementById("staff");
            let rows = Array.from(table.querySelectorAll("tr"));

            let csv = rows.map(row => {
                let cells = Array.from(row.querySelectorAll("th, td"));
                return cells.map(cell => `"${cell.innerText}"`).join(",");
            }).join("\n");

            let blob = new Blob([csv], {
                type: "text/csv"
            });
            let url = URL.createObjectURL(blob);

            let a = document.createElement("a");
            a.href = url;
            a.download = "modules.csv";
            a.click();

            URL.revokeObjectURL(url);
        });
    </script>


    <script>
        jq(document).on('click', '[data-bs-target="#paymentModal"]', function () {

            let userId = jq(this).data('user');
            let total = parseFloat(jq(this).data('total')) || 0;
            let paid = parseFloat(jq(this).data('paid')) || 0;

            console.log('TOTAL=', total);
            console.log('PAID=', paid);

            jq('#payment_user_id').val(userId);
            jq('#total_amount').val(total);

            jq('#balance_amount').val((total - paid).toFixed(2));

            jq('#amount_paid').off('input').on('input', function () {

                let newPaid = parseFloat(jq(this).val()) || 0;

                let balance = total - paid - newPaid;

                jq('#balance_amount').val(balance.toFixed(2));
            });

        });
    </script>
@endsection