{{-- resources/views/users/index.blade.php --}}
@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="d-flex justify-content-end mb-3">
        <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createUserModal">
            <i class="material-icons md-add"></i> Add User
        </button>
    </div>

    <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>Work Station</th>
                    <th>Status</th>
                    <th>Created At</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===================== CREATE USER MODAL ===================== --}}
<div class="modal fade" id="createUserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="createUserForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <i class="material-icons me-2">person_add</i> Add 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-md-4">
                            <label class="form-label">Full Name</label>
                            <input type="text" class="form-control" name="name" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" name="email" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Phone</label>
                            <input type="text" class="form-control" name="phone_number" placeholder="e.g. 2557XXXXXXXX">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Work Station</label>
                            <select name="work_station_id" class="form-select" required>
                                <option value="">-- Select Work Station --</option>
                                @foreach($workStations as $station)
                                    <option value="{{ $station->id }}">
                                        {{ $station->name }} @if($station->location) - {{ $station->location }} @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Role</label>
                            <select name="role_id" class="form-select" required>
                                <option value="">-- Select Role --</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->display_name ?? $role->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Password</label>
                            <input type="password" class="form-control" name="password" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Confirm Password</label>
                            <input type="password" class="form-control" name="password_confirmation" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Status</label>
                            <select class="form-select" name="is_active">
                                <option value="1" selected>Active</option>
                                <option value="0">Inactive</option>
                            </select>
                        </div>

                    </div>

                    <div class="alert alert-danger d-none mt-3" id="createUserErrors"></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">Save User</button>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- ===================== VIEW USER MODAL ===================== --}}
<div class="modal fade" id="viewUserModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header text-white">
                <h5 class="modal-title">
                    <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">Work Station</label>
                        <input type="text" class="form-control" id="view_work_station" 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 type="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-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="editUserForm" method="POST">
            @csrf
            @method('PUT')

            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <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="row g-3">

                        <div class="col-md-6">
                            <label class="form-label">Name</label>
                            <input type="text" class="form-control" name="name" id="edit_name" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Email</label>
                            <input type="email" class="form-control" name="email" id="edit_email" required>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Phone</label>
                            <input type="text" class="form-control" name="phone_number" id="edit_phone">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Work Station</label>
                            <select class="form-select" name="work_station_id" id="edit_work_station_id" required>
                                <option value="">-- Select Work Station --</option>
                                @foreach($workStations as $station)
                                    <option value="{{ $station->id }}">
                                        {{ $station->name }} @if($station->location) - {{ $station->location }} @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Role</label>
                            <select class="form-select" name="role_id" id="edit_role_id" required>
                                <option value="">-- Select Role --</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}">{{ $role->display_name ?? $role->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6">
                            <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="col-md-6">
                            <label class="form-label">New Password (optional)</label>
                            <input type="password" class="form-control" name="password" id="edit_password">
                        </div>

                        <div class="col-md-6">
                            <label class="form-label">Confirm New Password</label>
                            <input type="password" class="form-control" name="password_confirmation" id="edit_password_confirmation">
                        </div>

                    </div>

                    <div class="alert alert-danger d-none mt-3" 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-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">
                        <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>
/**
 * ✅ Bootstrap Modal helper (works with BS 5.0/5.1/5.2+ and BS4 fallback)
 * - avoids getOrCreateInstance() error
 */
function showModal(id) {
    const el = document.getElementById(id);
    if (!el) return;

    // Bootstrap 5
    if (window.bootstrap && bootstrap.Modal) {
        const instance = bootstrap.Modal.getInstance(el) || new bootstrap.Modal(el);
        instance.show();
        return;
    }

    // Bootstrap 4 fallback
    if (window.jQuery && typeof $(el).modal === 'function') {
        $(el).modal('show');
    }
}

function hideModal(id) {
    const el = document.getElementById(id);
    if (!el) return;

    // Bootstrap 5
    if (window.bootstrap && bootstrap.Modal) {
        const instance = bootstrap.Modal.getInstance(el);
        if (instance) instance.hide();
        return;
    }

    // Bootstrap 4 fallback
    if (window.jQuery && typeof $(el).modal === 'function') {
        $(el).modal('hide');
    }
}

$(function () {

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

    // ================= CREATE (AJAX) =================
    $('#createUserForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);
        $.ajax({
            url: '{{ route("users.store") }}',
            method: 'POST',
            data: form.serialize(),
            success: function () {
                hideModal('createUserModal');

                form[0].reset();
                $('#createUserErrors').addClass('d-none').html('');
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#createUserErrors').removeClass('d-none');
                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    let html = '<ul class="mb-0">';
                    Object.values(xhr.responseJSON.errors).forEach(arr => arr.forEach(m => html += `<li>${m}</li>`));
                    html += '</ul>';
                    box.html(html);
                } else {
                    box.html('Something went wrong. Please try again.');
                }
            }
        });
    });

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

        // ✅ Your button uses data-status_text not data-status-text
        $('#view_status').val($(this).data('status_text') ?? '—');

        /**
         * ✅ Work Station:
         * If you want it filled, your actions button MUST provide:
         * data-work-station="Station Name"
         * For now we keep fallback.
         */
        $('#view_work_station').val($(this).data('work-station') ?? '—');

        showModal('viewUserModal');
    });

    // ================= EDIT =================
    $(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_work_station_id').val($(this).data('work-station-id') ?? '');
        $('#edit_role_id').val($(this).data('role-id') ?? '');
        $('#edit_status').val($(this).data('status') ?? 1);

        // clear passwords each time
        $('#edit_password').val('');
        $('#edit_password_confirmation').val('');

        $('#editUserErrors').addClass('d-none').html('');
        $('#editUserForm').attr('action', `/users/${id}`);

        showModal('editUserModal');
    });

    $('#editUserForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);

        $.ajax({
            url: form.attr('action'),
            method: 'POST', // spoof PUT via _method
            data: form.serialize(),
            success: function () {
                hideModal('editUserModal');
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#editUserErrors').removeClass('d-none');
                if (xhr.status === 422 && xhr.responseJSON?.errors) {
                    let html = '<ul class="mb-0">';
                    Object.values(xhr.responseJSON.errors).forEach(arr => arr.forEach(m => html += `<li>${m}</li>`));
                    html += '</ul>';
                    box.html(html);
                } else {
                    box.html('Something went wrong. Please try again.');
                }
            }
        });
    });

    // ================= DELETE =================
    $(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}`);

        showModal('deleteUserModal');
    });

    $('#deleteUserForm').on('submit', function (e) {
        e.preventDefault();

        const form = $(this);

        $.ajax({
            url: form.attr('action'),
            method: 'POST', // spoof DELETE via _method
            data: form.serialize(),
            success: function () {
                hideModal('deleteUserModal');
                table.ajax.reload(null, false);
            },
            error: function () {
                alert('Failed to delete user. Please try again.');
            }
        });
    });

});
</script>
@endpush