@extends('layouts.admin')

@section('title', 'User Management')
@section('page_title', 'Users Management')

@push('styles')
<style>
    .ordering-disabled thead th {
        cursor: default !important;
        pointer-events: none !important;
    }
    .ordering-disabled thead th:before,
    .ordering-disabled thead th:after,
    .ordering-disabled thead th .dt-column-order {
        display: none !important;
    }
    .tracking-wide {
        letter-spacing: 0.05em;
    }
    .extra-small {
        font-size: 0.75rem;
    }
</style>
@endpush

@section('content')
<div class="card border-0 shadow-sm rounded-4">
    <div class="card-header bg-white py-3 d-flex flex-wrap align-items-center justify-content-between gap-2 border-0">
        <h6 class="m-0 font-weight-bold text-dark"><i class="bi bi-people me-2 text-primary"></i>All Users List</h6>

        <div class="d-flex align-items-center gap-2 flex-wrap">
            <!-- Export Options Dropdown -->
            <div class="dropdown">
                <button class="btn btn-outline-secondary btn-sm rounded-3 dropdown-toggle d-flex align-items-center gap-1" type="button" data-bs-toggle="dropdown" aria-expanded="false" id="exportDropdownBtn">
                    <i class="bi bi-download"></i>
                    <span>Export</span>
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm border-0 py-2">
                    <li>
                        <a class="dropdown-item py-2 d-flex align-items-center gap-2" href="#" id="exportExcelBtn">
                            <i class="bi bi-file-earmark-excel text-success fs-6"></i>
                            <span>Export as Excel (.xlsx)</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item py-2 d-flex align-items-center gap-2" href="#" id="exportCsvBtn">
                            <i class="bi bi-file-earmark-text text-primary fs-6"></i>
                            <span>Export as CSV (.csv)</span>
                        </a>
                    </li>
                    <li>
                        <a class="dropdown-item py-2 d-flex align-items-center gap-2" href="#" id="exportPdfBtn">
                            <i class="bi bi-file-earmark-pdf text-danger fs-6"></i>
                            <span>Export as PDF (.pdf)</span>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Table Options (Searching & Ordering Toggles) -->
            <div class="dropdown">
                <button class="btn btn-outline-secondary btn-sm rounded-3 dropdown-toggle d-flex align-items-center gap-1" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" id="tableOptionsDropdownBtn">
                    <i class="bi bi-sliders"></i>
                    <span>Table Options</span>
                </button>
                <div class="dropdown-menu dropdown-menu-end shadow-sm border-0 p-3" style="min-width: 270px;">
                    <div class="small fw-bold text-uppercase text-muted mb-2 tracking-wide">Table Features</div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" role="switch" id="toggleGlobalSearch" checked>
                        <label class="form-check-label small fw-medium" for="toggleGlobalSearch">Enable Searching</label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" role="switch" id="toggleOrdering" checked>
                        <label class="form-check-label small fw-medium" for="toggleOrdering">Enable Column Ordering</label>
                    </div>
                    <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" role="switch" id="toggleColumnFilters">
                        <label class="form-check-label small fw-medium" for="toggleColumnFilters">Column Search Filters</label>
                    </div>

                    <div class="dropdown-divider my-2"></div>
                    <div class="small fw-bold text-uppercase text-muted mb-2 tracking-wide">Column Visibility</div>
                    <div class="d-flex flex-column gap-1" id="columnVisibilityList">
                        <div class="form-check">
                            <input class="form-check-input col-toggle" type="checkbox" data-col="0" id="colToggle0" checked>
                            <label class="form-check-label small" for="colToggle0">ID</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input col-toggle" type="checkbox" data-col="1" id="colToggle1" checked>
                            <label class="form-check-label small" for="colToggle1">Name</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input col-toggle" type="checkbox" data-col="2" id="colToggle2" checked>
                            <label class="form-check-label small" for="colToggle2">Username</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input col-toggle" type="checkbox" data-col="3" id="colToggle3" checked>
                            <label class="form-check-label small" for="colToggle3">Email</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input col-toggle" type="checkbox" data-col="4" id="colToggle4" checked>
                            <label class="form-check-label small" for="colToggle4">Phone</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input col-toggle" type="checkbox" data-col="5" id="colToggle5" checked>
                            <label class="form-check-label small" for="colToggle5">Role</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input col-toggle" type="checkbox" data-col="6" id="colToggle6" checked>
                            <label class="form-check-label small" for="colToggle6">Status</label>
                        </div>
                    </div>
                </div>
            </div>

            @can('add-user')
            <button type="button" class="btn btn-primary rounded-3 btn-sm d-flex align-items-center gap-1" data-bs-toggle="modal" data-bs-target="#userModal" id="createUserBtn">
                <i class="bi bi-plus-lg"></i>
                <span>Add New User</span>
            </button>
            @endcan
        </div>
    </div>
    <div class="card-body">
        <!-- Individual Column Search Filters Bar -->
        <div id="columnFiltersPanel" class="p-3 mb-3 bg-light rounded-3 border d-none">
            <div class="d-flex align-items-center justify-content-between mb-2">
                <span class="small fw-bold text-dark d-flex align-items-center gap-1.5">
                    <i class="bi bi-funnel text-primary"></i> Column Search Filters
                </span>
                <button type="button" class="btn btn-link text-decoration-none btn-sm p-0 text-muted extra-small" id="resetColumnFiltersBtn">
                    <i class="bi bi-x-circle me-1"></i>Reset Column Filters
                </button>
            </div>
            <div class="row g-2">
                <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control form-control-sm col-filter-input" data-col="1" placeholder="Search Name...">
                </div>
                <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control form-control-sm col-filter-input" data-col="2" placeholder="Search Username...">
                </div>
                <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control form-control-sm col-filter-input" data-col="3" placeholder="Search Email...">
                </div>
                <div class="col-md-2 col-sm-4">
                    <input type="text" class="form-control form-control-sm col-filter-input" data-col="4" placeholder="Search Phone...">
                </div>
                <div class="col-md-2 col-sm-4">
                    <select class="form-select form-select-sm col-filter-select" data-col="5">
                        <option value="">All Roles</option>
                        @foreach($roles as $role)
                            <option value="{{ $role->name }}">{{ $role->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-2 col-sm-4">
                    <select class="form-select form-select-sm col-filter-select" data-col="6">
                        <option value="">All Statuses</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="table-responsive">
            {!! $dataTable->table(['class' => 'table table-hover table-striped align-middle w-100', 'id' => 'users-table']) !!}
        </div>
    </div>
</div>

<!-- User Add/Edit Modal -->
<div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title fw-bold" id="userModalLabel">Create User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="userForm">
                @csrf
                <input type="hidden" id="user_id" name="id">

                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label small fw-medium">Full Name</label>
                        <input type="text" class="form-control" id="name" name="name" required>
                    </div>

                    <div class="mb-3">
                        <label for="username" class="form-label small fw-medium">Username</label>
                        <input type="text" class="form-control" id="username" name="username" required>
                    </div>

                    <div class="mb-3">
                        <label for="email" class="form-label small fw-medium">Email Address</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>

                    <div class="mb-3">
                        <label for="phone" class="form-label small fw-medium">Phone Number</label>
                        <input type="text" class="form-control" id="phone" name="phone">
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label small fw-medium">Password <span id="passwordHelp" class="text-muted extra-small">(leave blank to keep current)</span></label>
                        <input type="password" class="form-control" id="password" name="password">
                    </div>

                    <div class="mb-3">
                        <label for="status" class="form-label small fw-medium">Status</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="active">Active</option>
                            <option value="inactive">Inactive</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="role" class="form-label small fw-medium">Assign Role</label>
                        <select class="form-select" id="role" name="role">
                            <option value="">-- Select Role --</option>
                            @foreach($roles as $role)
                                <option value="{{ $role->name }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="modal-footer border-top-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="saveUserBtn">Save User</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
{!! $dataTable->scripts(attributes: ['type' => 'module']) !!}

<script type="module">
    $(document).ready(function () {
        const tableId = '#users-table';

        // --- Export Functions ---
        function triggerExport(action) {
            const dt = $(tableId).DataTable();
            const baseUrl = '{{ route("admin.users.index") }}';
            const params = new URLSearchParams();
            params.set('action', action);

            // Pass active global search value
            const globalSearch = dt.search();
            if (globalSearch) {
                params.set('search[value]', globalSearch);
            }

            window.location.href = baseUrl + '?' + params.toString();
        }

        $('#exportExcelBtn').on('click', function (e) {
            e.preventDefault();
            triggerExport('excel');
        });

        $('#exportCsvBtn').on('click', function (e) {
            e.preventDefault();
            triggerExport('csv');
        });

        $('#exportPdfBtn').on('click', function (e) {
            e.preventDefault();
            triggerExport('pdf');
        });

        // --- Table Options: Searching & Ordering Toggles ---

        // Toggle Global Search
        $('#toggleGlobalSearch').on('change', function () {
            const isEnabled = $(this).is(':checked');
            const dt = $(tableId).DataTable();
            const container = $(dt.table().container());
            const searchContainer = container.find('.dt-search, .dataTables_filter, [class*="dt-search"]');

            if (isEnabled) {
                searchContainer.removeClass('d-none');
                $('#toggleColumnFilters').prop('disabled', false);
            } else {
                searchContainer.addClass('d-none');
                searchContainer.find('input[type="search"], input.dt-input').val('');
                
                // Clear any active global search in DataTables
                if (dt.search()) {
                    dt.search('');
                }

                // If column search filters are currently open, reset and hide them
                if ($('#toggleColumnFilters').is(':checked')) {
                    $('#toggleColumnFilters').prop('checked', false);
                    $('#columnFiltersPanel').addClass('d-none');
                    $('.col-filter-input').val('');
                    $('.col-filter-select').val('');
                    dt.columns().every(function () {
                        this.search('');
                    });
                }
                $('#toggleColumnFilters').prop('disabled', true);

                dt.draw();
            }
        });

        // Toggle Column Ordering
        $('#toggleOrdering').on('change', function () {
            const isEnabled = $(this).is(':checked');
            const dt = $(tableId).DataTable();
            const tableElement = $(tableId);

            if (isEnabled) {
                tableElement.removeClass('ordering-disabled');
            } else {
                tableElement.addClass('ordering-disabled');
                dt.order([]).draw();
            }
        });

        // Toggle Column Search Filters Panel
        $('#toggleColumnFilters').on('change', function () {
            const isVisible = $(this).is(':checked');
            if (isVisible) {
                $('#columnFiltersPanel').removeClass('d-none');
            } else {
                $('#columnFiltersPanel').addClass('d-none');
                $('.col-filter-input').val('');
                $('.col-filter-select').val('');
                const dt = $(tableId).DataTable();
                dt.columns().every(function () {
                    this.search('');
                });
                dt.draw();
            }
        });

        // Column Filter input change with debounce
        let searchTimer;
        $('.col-filter-input').on('keyup change', function () {
            const input = $(this);
            const colIdx = input.data('col');
            const val = input.val();

            clearTimeout(searchTimer);
            searchTimer = setTimeout(function () {
                const dt = $(tableId).DataTable();
                dt.column(colIdx).search(val).draw();
            }, 300);
        });

        $('.col-filter-select').on('change', function () {
            const select = $(this);
            const colIdx = select.data('col');
            const val = select.val();
            const dt = $(tableId).DataTable();
            dt.column(colIdx).search(val).draw();
        });

        $('#resetColumnFiltersBtn').on('click', function () {
            $('.col-filter-input').val('');
            $('.col-filter-select').val('');
            const dt = $(tableId).DataTable();
            dt.columns().every(function () {
                this.search('');
            });
            dt.draw();
        });

        // Column Visibility Toggles
        $('.col-toggle').on('change', function () {
            const colIdx = $(this).data('col');
            const isVisible = $(this).is(':checked');
            const dt = $(tableId).DataTable();
            dt.column(colIdx).visible(isVisible);
        });

        // --- User CRUD Modals & Actions ---

        $('#createUserBtn').on('click', function () {
            $('#userForm')[0].reset();
            $('#user_id').val('');
            $('#userModalLabel').text('Create New User');
            $('#passwordHelp').hide();
            $('#password').attr('required', true);
            $('#userForm').find('.is-invalid').removeClass('is-invalid');
            $('#userForm').find('.invalid-feedback-custom').remove();
        });

        $(document).on('click', '.edit-user-btn', function () {
            const userId = $(this).data('id');
            $('#userForm')[0].reset();
            $('#userForm').find('.is-invalid').removeClass('is-invalid');
            $('#userForm').find('.invalid-feedback-custom').remove();

            $.ajax({
                url: `/admin/users/${userId}/edit`,
                method: 'GET',
                success: function (res) {
                    if (res.success) {
                        const user = res.data.user;
                        $('#user_id').val(user.id);
                        $('#name').val(user.name);
                        $('#username').val(user.username);
                        $('#email').val(user.email);
                        $('#phone').val(user.phone);
                        $('#status').val(user.status);
                        $('#role').val(res.data.role);

                        $('#userModalLabel').text('Edit User: ' + user.name);
                        $('#passwordHelp').show();
                        $('#password').removeAttr('required');

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

        $('#userForm').validate({
            rules: {
                name: { required: true },
                username: { required: true },
                email: { required: true, email: true },
                status: { required: true }
            },
            submitHandler: function (form) {
                const userId = $('#user_id').val();
                const url = userId ? `/admin/users/${userId}` : '/admin/users';
                const method = userId ? 'PUT' : 'POST';

                AdminAjax.submit({
                    form: form,
                    url: url,
                    method: method,
                    modal: '#userModal',
                    dataTable: tableId
                });
            }
        });

        $(document).on('click', '.delete-user-btn', function () {
            const userId = $(this).data('id');
            AdminAjax.confirmDelete({
                url: `/admin/users/${userId}`,
                dataTable: tableId
            });
        });

        $(document).on('click', '.restore-user-btn', function () {
            const userId = $(this).data('id');
            AdminAjax.confirmAction({
                title: 'Restore User',
                text: 'Are you sure you want to restore this soft-deleted user?',
                icon: 'question',
                url: `/admin/users/${userId}/restore`,
                confirmText: 'Yes, Restore',
                dataTable: tableId
            });
        });

        $(document).on('change', '.status-toggle', function (e) {
            const checkbox = $(this);
            const userId = checkbox.data('id');
            const isChecked = checkbox.is(':checked');
            const targetStatus = isChecked ? 'Active' : 'Inactive';

            // Temporarily revert checkbox visual state until user confirms
            checkbox.prop('checked', !isChecked);

            Swal.fire({
                title: 'Change User Status?',
                text: `Are you sure you want to set this user status to ${targetStatus}?`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3b82f6',
                cancelButtonColor: '#64748b',
                confirmButtonText: 'Yes, Change Status',
                cancelButtonText: 'Cancel'
            }).then((result) => {
                if (result.isConfirmed) {
                    checkbox.prop('checked', isChecked);

                    $.ajax({
                        url: `/admin/users/${userId}/toggle-status`,
                        method: 'POST',
                        success: function (response) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Updated!',
                                text: response.message || 'User status updated successfully.',
                                timer: 1500,
                                showConfirmButton: false
                            });
                            if ($.fn.DataTable && $.fn.DataTable.isDataTable(tableId)) {
                                $(tableId).DataTable().ajax.reload(null, false);
                            }
                        },
                        error: function (xhr) {
                            checkbox.prop('checked', !isChecked);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message || 'Failed to update user status.'
                            });
                        }
                    });
                }
            });
        });
    });
</script>
@endpush