@extends('Admin.layout')

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

@section('content')
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="mb-3">
        <h3>User Management</h3>
    </div>

    <div class="card p-5">
        <div class="d-flex flex-column flex-lg-row justify-content-between align-items-start align-items-lg-center mb-4">
            <!-- Page Length Select -->
            <div class="mb-3 mb-lg-0">
                <select id="pageLength" class="form-select w-auto">
                    <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>

            <!-- Search + Export Button -->
            <div class="col-lg-6 col-12 mb-3">
                <div class="d-flex flex-column flex-lg-row gap-3">
                    <div class="search-box flex-grow-1">
                        <input type="search" id="searchBox" class="form-control" placeholder="Search">
                    </div>
                    <button type="button" class="btn btn-primary border flex-shrink-0" id="exportBtn">
                        <i class="ti tabler-download me-2"></i>
                        Export
                    </button>
                </div>
            </div>
        </div>

        <div class="table-responsive p-2">
            <table id="table" class="table">
                <thead class="bg-primary-subtle">
                    <tr>
                        <th>SNO</th>
                        <th>DATE</th>
                        <th>USER NAME</th>
                        <th>PHONE NUMBER</th>
                        <th>EMAIL ID</th>
                        <th>CITY</th>
                        <th>STATUS</th>
                        <th>ACTION</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Block / Unblock Modal -->
    <div class="modal fade" id="blockModal" 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="modalTextMessage">Do you want to block this user?</p>

                <input type="hidden" id="modal_user_id">

                <div class="d-flex justify-content-center align-items-center gap-3 mt-4">
                    <button type="button" class="btn btn-outline-primary px-5 fw-semibold me-3" data-bs-dismiss="modal">
                        Cancel
                    </button>
                    <button type="button" id="confirmBlockBtn" class="btn btn-danger px-5 fw-semibold">
                        Yes, Sure
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- DataTables & HTML5 Export Dependencies -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.1/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.1/js/buttons.html5.min.js"></script>

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

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            const table = $('#table').DataTable({
                processing: true,
                serverSide: true,
                ajax: "{{ route('user_management_data') }}",
                pageLength: 10,
                searching: true,
                lengthChange: false,
                ordering: true,
                buttons: [{
                    extend: 'excelHtml5',
                    title: 'User_Report',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    },
                    action: function(e, dt, node, config) {
                        const exportBtn = $('#exportBtn');
                        const originalHtml = exportBtn.html();

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

                        $.fn.dataTable.ext.buttons.excelHtml5.action.call(this, e, dt, node, config);

                        setTimeout(function() {
                            exportBtn.prop('disabled', false).html(originalHtml);
                        }, 1000);
                    }
                }],
                columnDefs: [{
                    targets: '_all',
                    className: 'text-nowrap text-center'
                }],
                createdRow: function(row, data, dataIndex) {
                    if (dataIndex % 2 !== 0) {
                        $(row).addClass('bg-primary-subtle');
                    }
                },
                columns: [
                    { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                    { data: 'created_at', name: 'created_at' },
                    { data: 'user_name', name: 'first_name' },
                    { data: 'phno', name: 'phno' },
                    { data: 'email', name: 'email' },
                    { data: 'city', name: 'address' },
                    { data: 'status', name: 'is_active' },
                    { data: 'action', name: 'action', orderable: false, searchable: false }
                ]
            });

            // Handle Excel Export Trigger
            $('#exportBtn').on('click', function() {
                table.button('.buttons-excel').trigger();
            });

            // Handle Search Box Input
            $('#searchBox').on('keyup', function() {
                table.search(this.value).draw();
            });

            // Handle Dynamic Page Length Change
            $('#pageLength').on('change', function() {
                const length = parseInt($(this).val(), 10);
                table.page.len(length).draw();
            });

            // Open Block / Unblock Modal
            $(document).on('click', '.open-block-modal', function() {
                const userId = $(this).data('id');
                const isBlocked = $(this).data('blocked');

                $('#modal_user_id').val(userId);

                if (isBlocked === 1 || isBlocked === '1') {
                    $('#modalTextMessage').text('Do you want to unblock this user?');
                    $('#confirmBlockBtn').removeClass('btn-danger').addClass('btn-success').text('Yes, Unblock');
                } else {
                    $('#modalTextMessage').text('Do you want to block this user?');
                    $('#confirmBlockBtn').removeClass('btn-success').addClass('btn-danger').text('Yes, Block');
                }

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

            // Handle AJAX Request for Block/Unblock
            $('#confirmBlockBtn').on('click', function() {
                const userId = $('#modal_user_id').val();
                const btn = $(this);

                if (!userId) {
                    if (typeof showToast === 'function') {
                        showToast('Invalid User selected.', 'error');
                    }
                    return;
                }

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

                $.ajax({
                    url: "{{ route('user_management_block') }}",
                    type: "POST",
                    data: { id: userId },
                    success: function(response) {
                        if (response.status) {
                            $('#blockModal').modal('hide');

                            if (typeof showToast === 'function') {
                                showToast(response.message, 'success');
                            }

                            table.ajax.reload(null, false);
                        } else {
                            if (typeof showToast === 'function') {
                                showToast(response.message || 'Action failed.', 'error');
                            }
                        }
                    },
                    error: function(xhr) {
                        const errorMsg = xhr.responseJSON?.message || 'An error occurred while performing action.';
                        if (typeof showToast === 'function') {
                            showToast(errorMsg, 'error');
                        }
                    },
                    complete: function() {
                        btn.prop('disabled', false).text('Yes, Sure');
                    }
                });
            });

        });
    </script>
@endsection