@extends('layouts.main')

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
<style>
    /* Keep buttons compact if your theme stretches them */
    #users-table td .btn-group .btn{
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <h1 class="h4 mb-4">Users</h1>

    <div class="card">
        <div class="card-body">
            <table id="users-table" class="table table-bordered table-striped w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Status</th>
                        <th>Created At</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===================== View User Modal ===================== --}}
<div class="modal fade" id="viewUserModal" tabindex="-1" aria-labelledby="viewUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header text-white">
                <h5 class="modal-title" id="viewUserModalLabel">
                    <i class="material-icons me-2">visibility</i> View User
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" id="view_name" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Email</label>
                        <input type="text" class="form-control" id="view_email" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Phone</label>
                        <input type="text" class="form-control" id="view_phone" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Status</label>
                        <input type="text" class="form-control" id="view_status" readonly>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{{-- ===================== Edit User Modal ===================== --}}
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <form id="editUserForm" method="POST">
            @csrf
            @method('PUT')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title" id="editUserModalLabel">
                        <i class="material-icons me-2">edit</i> Edit User
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <input type="hidden" id="edit_id">

                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input type="text" class="form-control" name="name" id="edit_name" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" id="edit_email" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Phone</label>
                        <input type="text" class="form-control" name="phone_number" id="edit_phone">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select class="form-select" name="is_active" id="edit_status">
                            <option value="1">Active</option>
                            <option value="0">Inactive</option>
                        </select>
                    </div>

                    <div class="alert alert-danger d-none" id="editUserErrors"></div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-success">Update</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ===================== Delete User Modal ===================== --}}
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <form id="deleteUserForm" method="POST">
            @csrf
            @method('DELETE')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title" id="deleteUserModalLabel">
                        <i class="material-icons me-2">delete</i> Confirm Delete
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <p class="mb-0">
                        Delete user <strong id="delete_user_name">—</strong>?
                    </p>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                    <button type="submit" class="btn btn-danger">Yes, Delete</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.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/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
$(function () {

    const table = $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("users.index") }}',
        autoWidth: false,
        responsive: false,
        columns: [
            { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name', name: 'name' },
            { data: 'email', name: 'email' },
            { data: 'phone', name: 'phone_number' },
            { data: 'status', name: 'is_active', orderable: false, searchable: false },
            { data: 'created_at', name: 'created_at' },
            { data: 'action', name: 'action', orderable: false, searchable: false }
        ]
    });

    // ---------------- VIEW MODAL ----------------
    $(document).on('click', '.viewUserBtn', function () {
        $('#view_name').val($(this).data('name') ?? '—');
        $('#view_email').val($(this).data('email') ?? '—');
        $('#view_phone').val($(this).data('phone') ?? '—');
        $('#view_status').val($(this).data('status_text') ?? '—');

        const modal = new bootstrap.Modal(document.getElementById('viewUserModal'));
        modal.show();
    });

    // ---------------- EDIT MODAL ----------------
    $(document).on('click', '.editUserBtn', function () {
        const id = $(this).data('id');

        $('#edit_id').val(id);
        $('#edit_name').val($(this).data('name') ?? '');
        $('#edit_email').val($(this).data('email') ?? '');
        $('#edit_phone').val($(this).data('phone') ?? '');
        $('#edit_status').val($(this).data('status') ?? 1);

        $('#editUserErrors').addClass('d-none').html('');

        $('#editUserForm').attr('action', `/users/${id}`);

        const modal = new bootstrap.Modal(document.getElementById('editUserModal'));
        modal.show();
    });

    // submit edit via ajax
    $('#editUserForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);
        const url = form.attr('action');
        const formData = form.serialize();

        $.ajax({
            url: url,
            method: 'POST', // Laravel spoof PUT using _method
            data: formData,
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('editUserModal')).hide();
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#editUserErrors');
                box.removeClass('d-none');

                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    let html = '<ul class="mb-0">';
                    Object.values(xhr.responseJSON.errors).forEach(errArr => {
                        errArr.forEach(msg => html += `<li>${msg}</li>`);
                    });
                    html += '</ul>';
                    box.html(html);
                } else {
                    box.html('Something went wrong. Please try again.');
                }
            }
        });
    });

    // ---------------- DELETE MODAL ----------------
    $(document).on('click', '.deleteUserBtn', function () {
        const id = $(this).data('id');
        const name = $(this).data('name') ?? 'this user';

        $('#delete_user_name').text(name);
        $('#deleteUserForm').attr('action', `/users/${id}`);

        const modal = new bootstrap.Modal(document.getElementById('deleteUserModal'));
        modal.show();
    });

    // submit delete via ajax
    $('#deleteUserForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);
        const url = form.attr('action');

        $.ajax({
            url: url,
            method: 'POST', // Laravel spoof DELETE using _method
            data: form.serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('deleteUserModal')).hide();
                table.ajax.reload(null, false);
            },
            error: function () {
                alert('Failed to delete user. Please try again.');
            }
        });
    });

});
</script>
@endpush