@extends('admin.layout')

<style>
    .dt-search {
        display: none;
    }
</style>

@section('content')
<div>
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h5 class="fw-bold mb-0">
            Staff List
        </h5>
        <div class="d-flex gap-2">
    <a href="{{ route('admin.add_staff') }}"
       class="btn btn-primary px-3 py-2">
        <i class="ti tabler-plus me-1"></i>
        Add Staff
    </a>

    <a href="{{ route('staff.login') }}"
       class="btn btn-primary px-3 py-2">
        <i class="ti tabler-login icon-14px me-1"></i>
        Staff Login
    </a>
</div>
    </div>

    <div class="card p-2">


        {{-- Search / Filter / Actions --}}
        <div class="row align-items-end mb-3">
            <div class="col-auto mb-3">
                <select id="pageLength" class="form-select">
                    <option value="10">10</option>
                    <option value="25">25</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                    <option value="All">All</option>
                </select>
            </div>
            <div class="col-lg-6 col-md-5 col-12 mb-3">
                <input type="text" id="sheetSearch" placeholder="Search staff..." class="form-control w-100">
            </div>
            <div class="col-lg-1 col-md-2 col-12 mb-3">
                <button class="btn btn-secondary w-100" id="resetBtn" type="button">Reset</button>
            </div>
            
            <div class="col-lg-1 col-12 mb-3">
                <button id="exportBtn" class="btn btn-label-secondary w-100">
                    Export
                </button>
            </div>
        </div>

        {{-- Staff Table --}}
        <div class="table-responsive pt-0 pb-2">
            <table class="table table-bordered" id="staffTable">
                <thead>
                    <tr>
                        <th>S.No</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Mobile Number</th>
                        <th>Gender</th>
                        <th>DOB</th>
                        <th>Address</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

{{-- Dynamic Action Confirmation Modal --}}
<div class="modal fade" id="actionModal" 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="modalDescription">Are you confirm to process this action?</p>
            <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" id="confirmActionBtn" class="btn btn-danger">Yes, Sure</button>
            </div>
        </div>
    </div>
</div>

{{-- jQuery & DataTables --}}
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.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/2.4.2/js/buttons.html5.min.js"></script>

<script>
    $(document).ready(function() {
        // =========================================================
        // DATATABLE
        // =========================================================
        let staffTable = $('#staffTable').DataTable({
            processing: true,
            serverSide: true,
            lengthChange: false,
            searching: true,
            ordering: false,
            pageLength: 10,
            ajax: {
                url: "{{ route('staff_list_data') }}",
                type: "GET"
            },
            searching: true,
            lengthChange: false,
            info: true,
            buttons: [{
                extend: 'excelHtml5',
                title: 'Staff_List',
                text: 'Export',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6]
                }
            }],
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    searchable: false,
                    orderable: false
                },
                {
                    data: 'name',
                    name: 'name'
                },
                {
                    data: 'email',
                    name: 'email'
                },
                {
                    data: 'mobile_number',
                    name: 'mobile_number'
                },
                {
                    data: 'gender',
                    name: 'gender'
                },
                {
                    data: 'dob',
                    name: 'dob'
                },
                {
                    data: 'address',
                    name: 'address'
                },
                {
                    data: 'action',
                    name: 'action',
                    searchable: false,
                    orderable: false
                }
            ]
        });

        $('#exportBtn').click(function() {
            staffTable.button('.buttons-excel').trigger();
        });

        // =========================================================
        // CUSTOM SEARCH
        // =========================================================
        $('#sheetSearch').on('keyup', function() {
            staffTable.search($(this).val()).draw();
        });

        // =========================================================
        // PAGE LENGTH
        // =========================================================
        $('#pageLength').on('change', function() {
            let value = $(this).val();
            if (value === 'All') {
                staffTable.page.len(-1).draw();
            } else {
                staffTable.page.len(parseInt(value)).draw();
            }
        });

        // =========================================================
        // RESET
        // =========================================================
        $('#resetBtn').on('click', function() {
            $('#sheetSearch').val('');
            $('#pageLength').val('10');
            staffTable.search('').page.len(10).draw();
        });

        // =========================================================
        // VARIABLES
        // =========================================================
        let currentStaffId = null;
        let actionType = null;
        let currentStatus = null;

        // =========================================================
        // BOOTSTRAP MODAL
        // =========================================================
        const actionModalElement = document.getElementById('actionModal');
        const actionModal = new bootstrap.Modal(actionModalElement);

        // =========================================================
        // DELETE STAFF - OPEN MODAL
        // =========================================================
        $(document).on('click', '.deleteStaff', function(e) {
            e.preventDefault();
            e.stopPropagation();
            currentStaffId = $(this).data('id');
            actionType = 'delete';
            currentStatus = null;

            $('#modalDescription').text('Are you sure you want to delete this staff?');
            $('#confirmActionBtn')
                .removeClass('btn-warning btn-success')
                .addClass('btn-danger')
                .text('Yes, Delete');

            actionModal.show();
        });

        // =========================================================
        // BLOCK / ACTIVATE STAFF - OPEN MODAL
        // =========================================================
        $(document).on('click', '.blockStaff', function(e) {
            e.preventDefault();
            e.stopPropagation();
            currentStaffId = $(this).data('id');
            currentStatus = Number($(this).attr('data-status'));
            actionType = 'toggle_block';

            if (currentStatus === 1) {
                $('#modalDescription').text('Are you sure you want to block this staff member?');
                $('#confirmActionBtn')
                    .removeClass('btn-danger btn-success')
                    .addClass('btn-primary')
                    .text('Yes, Block');
            } else {
                $('#modalDescription').text('Are you sure you want to activate this staff member?');
                $('#confirmActionBtn')
                    .removeClass('btn-danger btn-primary')
                    .addClass('btn-success')
                    .text('Yes, Activate');
            }

            actionModal.show();
        });

        // =========================================================
        // CONFIRM ACTION HANDLER
        // =========================================================
        $('#confirmActionBtn').on('click', function() {
            if (!currentStaffId || !actionType) return;

            let $btn = $(this);
            $btn.prop('disabled', true);
            $btn.html('<span class="spinner-border spinner-border-sm me-1"></span> Processing...');

            let ajaxUrl = "";
            let payload = {
                _token: "{{ csrf_token() }}"
            };

            if (actionType === 'delete') {
                ajaxUrl = "{{ route('delete_staff', ':id') }}".replace(':id', currentStaffId);
                payload._method = 'DELETE';
            } else if (actionType === 'toggle_block') {
                ajaxUrl = "{{ route('staff.block', ':id') }}".replace(':id', currentStaffId);
                payload.is_active = currentStatus === 1 ? 0 : 1;
            }

            $.ajax({
                url: ajaxUrl,
                type: "POST",
                data: payload,
                success: function(response) {
                    if (response.success) {
                        actionModal.hide();

                        // Show custom layout toast
                        showAjaxToast(
                            response.message || 'Operation completed successfully.',
                            'success'
                        );

                        staffTable.ajax.reload(null, false);
                    } else {
                        showAjaxToast(
                            response.message || 'Operation failed.',
                            'error'
                        );
                    }
                },
                error: function(xhr) {
                    actionModal.hide();
                    let message = 'An error occurred during processing.';

                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        message = xhr.responseJSON.message;
                    }

                    // Show custom layout toast
                    showAjaxToast(message, 'error');
                },
                complete: function() {
                    $btn.prop('disabled', false);
                    currentStaffId = null;
                    actionType = null;
                    currentStatus = null;
                    $btn.text('Yes, Sure');
                }
            });
        });

        $('#actionModal').on('hidden.bs.modal', function() {
            currentStaffId = null;
            actionType = null;
            currentStatus = null;
            $('#confirmActionBtn')
                .prop('disabled', false)
                .removeClass('btn-danger btn-warning btn-success')
                .addClass('btn-danger')
                .text('Yes, Sure');
        });
    });
</script>
<script>
    $(document).on('click', '.blockStaff', function() {
        let staffId = $(this).data('id');
        let status = $(this).data('status');
        let name = $(this).data('name');
        $('#blockStaffId').val(staffId);
        $('#blockStaffName').text(name);
        $('#staffStatus').val(status);
        updateBlockIcon(status);
        $('#staffBlockModal').modal('show');
    });
    $('#staffStatus').on('change', function() {
        let status = $(this).val();
        updateBlockIcon(status);
    });

    function updateBlockIcon(status) {
        let icon = $('#blockStatusIcon');
        if (status == 0) {
            // Block - Red
            icon.removeClass('text-secondary')
                .addClass('text-danger');
        } else {
            // Active - Grey
            icon.removeClass('text-danger')
                .addClass('text-secondary');
        }
    }
    $('#saveStaffStatus').on('click', function() {
        let staffId = $('#blockStaffId').val();
        let status = $('#staffStatus').val();
        $.ajax({
            url: "{{ url('/admin/staff/block') }}/" + staffId,
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                is_active: status
            },
            success: function(response) {
                if (response.success) {
                    $('#staffBlockModal').modal('hide');
                    $('#staffTable').DataTable().ajax.reload(null, false);
                }
                alert(response.message);
            },
            error: function() {
                alert('Something went wrong.');
            }
        });
    });
</script>
@endsection