@extends('admin.layout.index')

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

@push('head-scripts')
    <link href="https://cdn.datatables.net/1.13.7/css/dataTables.bootstrap5.min.css" rel="stylesheet">
    <style>
        .card-equal-height {
            height: 100%;
        }

        .avatar-border {
            border: 1px solid #405189;
        }
    </style>
@endpush

@section('content')
    <div class="row g-3 align-items-center mb-3">
        <div class="col-12">
            <h4 class="mb-0">User List</h4>
            <p class="text-muted mb-0">View users, basic details, and account controls.</p>
        </div>
    </div>

    <div class="row g-3 mb-4">
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Total Users</p>
                        </div>
                        {{-- <div class="flex-shrink-0">
                            <h5 class="text-primary fs-14 mb-0">
                                <i class="ri-arrow-right-up-line fs-13 align-middle"></i> +3.4%
                            </h5>
                        </div> --}}
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="totalUsers"
                                    data-target="0">0</span></h4>
                            {{-- <a href="#" class="text-decoration-underline">View users</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-primary-subtle rounded fs-3">
                                <i class="ri-user-line text-primary"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Active Users</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="activeUsers"
                                    data-target="0">0</span></h4>
                            {{-- <a href="#" class="text-decoration-underline">View active</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-success-subtle rounded fs-3">
                                <i class="ri-user-follow-line text-success"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Blocked Users</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="blockedUsers"
                                    data-target="0">0</span></h4>
                            {{-- <a href="#" class="text-decoration-underline">View blocked</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-danger-subtle rounded fs-3">
                                <i class="ri-user-unfollow-line text-danger"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6">
            <div class="card card-animate">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1 overflow-hidden">
                            <p class="text-uppercase fw-medium text-muted text-truncate mb-0">Usage Active</p>
                        </div>
                    </div>
                    <div class="d-flex align-items-end justify-content-between mt-4">
                        <div>
                            <h4 class="fs-22 fw-semibold ff-secondary mb-4"><span class="counter-value" id="usageActive"
                                    data-target="0">0</span></h4>
                            {{-- <a href="#" class="text-decoration-underline">View usage</a> --}}
                        </div>
                        <div class="avatar-sm flex-shrink-0">
                            <span class="avatar-title bg-info-subtle rounded fs-3">
                                <i class="ri-pulse-line text-info"></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mb-3">
        <div class="col-xxl-4 col-lg-4 col-sm-6">
            <div class="form-group">
                <label class="form-label">Search</label>
                <input type="text" class="form-control" id="searchInput" placeholder="Search users">
            </div>
        </div>
        <div class="col-xxl-3 col-lg-4 col-sm-6">
            <div class="form-group">
                <label class="form-label">Created Date</label>
                <input type="date" class="form-control" id="createdDateInput">
            </div>
        </div>
        <div class="col-xxl-2 col-lg-4 col-sm-6">
            <div class="form-group">
                <label class="form-label">Status</label>
                <select class="form-select" id="statusFilter">
                    <option>All</option>
                    <option>Active</option>
                    <option>Blocked</option>
                </select>
            </div>
        </div>
        <div class="col-xxl-3 col-lg-4 col-sm-6 d-flex align-items-end">
            <button class="btn btn-primary w-100" id="filterBtn">Filter</button>
        </div>
    </div>

    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table align-middle nowrap" id="usersTable">
                    <thead class="table-light">
                        <tr>
                            <th>User</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Device</th>
                            <th>Account Status</th>
                            <th>Usage Status</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Block / Unblock Modal -->
    <div class="modal fade" id="blockUserModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="blockModalTitle">Block User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="blockUserForm">
                    <div class="modal-body">
                        <input type="hidden" id="blockUserId" name="user_id">
                        <input type="hidden" id="blockAction" name="action">

                        <div class="alert alert-warning" id="userNameAlert"></div>

                        <div class="mb-3" id="reasonGroup">
                            <label class="form-label">Reason</label>
                            <select class="form-select" name="reason" id="blockReason">
                                <option value="">Select reason</option>
                                <option value="Abuse">Abuse</option>
                                <option value="Suspicious activity">Suspicious activity</option>
                                <option value="User request">User request</option>
                                <option value="Other">Other</option>
                            </select>
                        </div>
                        <div class="mb-3" id="notesGroup">
                            <label class="form-label">Notes (optional)</label>
                            <textarea class="form-control" name="notes" id="blockNotes" rows="3" placeholder="Add details"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="blockSubmitBtn">
                            <span class="btn-text">Save</span>
                            <span class="btn-spinner d-none">
                                <i class="ri-loader-2-line spin"></i> Processing...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Reset Credentials Modal -->
    <div class="modal fade" id="resetCredentialsModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Reset Credentials</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="resetPasswordForm">
                    <div class="modal-body">
                        <input type="hidden" id="resetUserId" name="user_id">

                        <div class="alert alert-info" id="resetUserInfo"></div>

                        <div class="mb-3">
                            <label class="form-label">New Password</label>
                            <input type="password" class="form-control" name="password" id="newPassword"
                                placeholder="Enter new password" required>
                            <div class="invalid-feedback" id="password-error"></div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" class="form-control" name="password_confirmation"
                                id="confirmPassword" placeholder="Confirm password" required>
                            <div class="invalid-feedback" id="password-confirmation-error"></div>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="send_email" id="sendEmail"
                                value="1">
                            <label class="form-check-label" for="sendEmail">
                                Send email to user with new credentials
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="resetSubmitBtn">
                            <span class="btn-text">Reset</span>
                            <span class="btn-spinner d-none">
                                <i class="ri-loader-2-line spin"></i> Resetting...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('custom-script')
    <script>
        $(document).ready(function() {
            const csrfToken = $('meta[name="csrf-token"]').attr('content');

            // Load stats
            loadStats();

            // Initialize DataTable
            const table = $('#usersTable').DataTable({
                processing: true,
                searching: false,
                serverSide: true,
                ajax: {
                    url: '{{ route('admin.users.data') }}',
                    type: 'GET',
                    data: function(d) {
                        d.search = $('#searchInput').val();
                        d.created_date = $('#createdDateInput').val();
                        d.status = $('#statusFilter').val();
                    }
                },
                columns: [{
                        data: 'user',
                        name: 'name'
                    },
                    {
                        data: 'email',
                        name: 'email'
                    },
                    {
                        data: 'phone',
                        name: 'phone'
                    },
                    {
                        data: 'device',
                        name: 'device'
                    },
                    {
                        data: 'account_status',
                        name: 'account_status'
                    },
                    {
                        data: 'usage_status',
                        name: 'usage_status'
                    },
                    {
                        data: 'actions',
                        name: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                order: [
                    [0, 'desc']
                ],
                pageLength: 10,
                lengthMenu: [
                    [10, 25, 50, 100],
                    [10, 25, 50, 100]
                ],
                language: {
                    processing: '<i class="ri-loader-2-line spin fs-2"></i>',
                    emptyTable: 'No users found'
                }
            });

            // Filter button
            $('#filterBtn').on('click', function() {
                table.ajax.reload();
            });

            // Load stats
            function loadStats() {
                $.ajax({
                    url: '{{ route('admin.users.stats') }}',
                    type: 'GET',
                    success: function(response) {
                        if (response.success) {
                            $('#totalUsers').attr('data-target', response.data.total_users).text(
                                response.data.total_users);
                            $('#activeUsers').attr('data-target', response.data.active_users).text(
                                response.data.active_users);
                            $('#blockedUsers').attr('data-target', response.data.blocked_users).text(
                                response.data.blocked_users);
                            $('#usageActive').attr('data-target', response.data.usage_active).text(
                                response.data.usage_active);
                        }
                    }
                });
            }

            // Block/Unblock User
            $(document).on('click', '.btn-block-user', function() {
                const userId = $(this).data('id');
                const userName = $(this).data('name');
                const status = $(this).data('status');
                const action = status === 'active' ? 'block' : 'unblock';

                $('#blockUserId').val(userId);
                $('#blockAction').val(action);
                $('#userNameAlert').text(`Are you sure you want to ${action} ${userName}?`);
                $('#blockModalTitle').text(action === 'block' ? 'Block User' : 'Unblock User');

                if (action === 'unblock') {
                    $('#reasonGroup, #notesGroup').hide();
                    $('#blockReason, #blockNotes').prop('required', false);
                } else {
                    $('#reasonGroup, #notesGroup').show();
                    $('#blockReason').prop('required', true);
                }

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

            // Block/Unblock Form Submit
            $('#blockUserForm').on('submit', async function(e) {
                e.preventDefault();

                const submitBtn = $('#blockSubmitBtn');
                const btnText = submitBtn.find('.btn-text');
                const btnSpinner = submitBtn.find('.btn-spinner');

                submitBtn.prop('disabled', true);
                btnText.addClass('d-none');
                btnSpinner.removeClass('d-none');

                try {
                    const response = await fetch('{{ route('admin.users.block') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            user_id: $('#blockUserId').val(),
                            action: $('#blockAction').val(),
                            reason: $('#blockReason').val(),
                            notes: $('#blockNotes').val()
                        })
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        $('#blockUserModal').modal('hide');
                        showToast(data.message, 'success');
                        table.ajax.reload();
                        loadStats();
                    } else {
                        showToast(data.message, 'success');
                    }
                } catch (error) {
                    showToast('An unexpected error occurred', 'success');
                } finally {
                    submitBtn.prop('disabled', false);
                    btnText.removeClass('d-none');
                    btnSpinner.addClass('d-none');
                }
            });

            // Reset Password
            $(document).on('click', '.btn-reset-password', function() {
                const userId = $(this).data('id');
                const userName = $(this).data('name');
                const userEmail = $(this).data('email');

                $('#resetUserId').val(userId);
                $('#resetUserInfo').text(`Resetting password for ${userName} (${userEmail})`);
                $('#newPassword, #confirmPassword').val('');
                $('#sendEmail').prop('checked', false);

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

            // Reset Password Form Submit
            $('#resetPasswordForm').on('submit', async function(e) {
                e.preventDefault();

                const submitBtn = $('#resetSubmitBtn');
                const btnText = submitBtn.find('.btn-text');
                const btnSpinner = submitBtn.find('.btn-spinner');

                // Clear previous errors
                $('#newPassword, #confirmPassword').removeClass('is-invalid');
                $('#password-error, #password-confirmation-error').text('');

                submitBtn.prop('disabled', true);
                btnText.addClass('d-none');
                btnSpinner.removeClass('d-none');

                try {
                    const response = await fetch('{{ route('admin.users.reset-password') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        body: JSON.stringify({
                            user_id: $('#resetUserId').val(),
                            password: $('#newPassword').val(),
                            password_confirmation: $('#confirmPassword').val(),
                            send_email: $('#sendEmail').is(':checked') ? 1 : 0
                        })
                    });

                    const data = await response.json();

                    if (response.ok && data.success) {
                        $('#resetCredentialsModal').modal('hide');
                        showToast(data.message, 'success');
                    } else {
                        if (data.errors) {
                            if (data.errors.password) {
                                $('#newPassword').addClass('is-invalid');
                                $('#password-error').text(data.errors.password[0]);
                            }
                            if (data.errors.password_confirmation) {
                                $('#confirmPassword').addClass('is-invalid');
                                $('#password-confirmation-error').text(data.errors
                                    .password_confirmation[0]);
                            }
                        }
                        showToast(data.message || 'An error occurred', 'error');
                    }
                } catch (error) {
                    showToast('An unexpected error occurred', 'error');
                } finally {
                    submitBtn.prop('disabled', false);
                    btnText.removeClass('d-none');
                    btnSpinner.addClass('d-none');
                }
            });

            // Clear validation on input
            $('#newPassword, #confirmPassword').on('input', function() {
                $(this).removeClass('is-invalid');
                $('#' + $(this).attr('name') + '-error').text('');
            });
        });
    </script>
@endpush