{{-- resources/views/roles/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 action buttons compact */
    #roles-table td .btn-group .btn{
        width: auto !important;
        flex: 0 0 auto !important;
        white-space: nowrap;
    }

    /* ===== Permissions grid (scoped) ===== */
    .permissions-box label{ display:flex !important; align-items:center !important; }
    .permissions-box .permission-item{
        cursor:pointer;
        padding: 6px 0;
        gap: 10px !important;
        margin: 0 !important;
        white-space: nowrap;
    }
    .permissions-box .form-check-input{
        width: 16px !important;
        height: 16px !important;
        flex: 0 0 auto !important;
        margin-top: 0 !important;
    }
    .permissions-box input[type="checkbox"]{ width: 16px !important; }
</style>
@endpush

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

    <div class="d-flex justify-content-end mb-3">
        <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createRoleModal">
            <i class="material-icons md-add"></i> Add Role
        </button>
    </div>

    <div class="card">
        <div class="card-body">
            <table id="roles-table" class="table table-bordered table-striped w-100">
                <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Display Name</th>
                    <th>Description</th>
                    <th>Created At</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

{{-- ===================== CREATE ROLE MODAL ===================== --}}
<div class="modal fade" id="createRoleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="createRoleForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header text-white">
                    <h5 class="modal-title">
                        <i class="material-icons me-2">add</i> Add Role
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    {{-- Role fields --}}
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Role Name (system)</label>
                            <input type="text" class="form-control" name="name" placeholder="e.g. admin" required>
                            <small class="text-muted">Use lowercase (admin, staff_manager)</small>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Display Name</label>
                            <input type="text" class="form-control" name="display_name" placeholder="Administrator">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Description</label>
                            <input type="text" class="form-control" name="description" placeholder="Short description...">
                        </div>
                    </div>

                    {{-- Permissions Grid like screenshot --}}
                    <div class="card mt-3">
                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="mb-0">Permissions</h5>

                                <div class="form-check form-switch m-0 d-flex align-items-center gap-2">
                                    <input class="form-check-input js-toggle-all" type="checkbox" id="create_toggle_all">
                                    <label class="form-check-label" for="create_toggle_all">Select All</label>
                                </div>
                            </div>

                            <div class="border rounded p-3 permissions-box" style="background:#fff;">
                                <div class="row g-3">
                                    @foreach($modules as $module)
                                        <div class="col-12 mt-2">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="fw-semibold text-uppercase small text-muted">
                                                    {{ $module->name }}
                                                </div>

                                                <div class="form-check form-switch m-0 d-flex align-items-center gap-2">
                                                    <input class="form-check-input js-module-toggle"
                                                           type="checkbox"
                                                           data-module="{{ $module->id }}"
                                                           id="create_module_toggle_{{ $module->id }}">
                                                    <label class="form-check-label small" for="create_module_toggle_{{ $module->id }}">
                                                        Select module
                                                    </label>
                                                </div>
                                            </div>
                                            <hr class="my-2">
                                        </div>

                                        @foreach($module->permissions as $perm)
                                            <div class="col-12 col-md-4">
                                                <label class="permission-item">
                                                    <input type="checkbox"
                                                           class="form-check-input js-perm-switch js-module-perm-{{ $module->id }}"
                                                           name="permissions[]"
                                                           value="{{ $perm->id }}">
                                                    <span class="fw-semibold">
                                                        {{ $perm->display_name ?? \Illuminate\Support\Str::headline($perm->name) }}
                                                    </span>
                                                </label>
                                            </div>
                                        @endforeach
                                    @endforeach
                                </div>
                            </div>

                        </div>
                    </div>

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

{{-- ===================== VIEW ROLE MODAL ===================== --}}
<div class="modal fade" id="viewRoleModal" 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 Role
                </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_role_name" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Display Name</label>
                        <input type="text" class="form-control" id="view_role_display_name" readonly>
                    </div>
                    <div class="col-12">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="view_role_description" rows="2" readonly></textarea>
                    </div>

                    <div class="col-12">
                        <label class="form-label">Permissions</label>
                        <textarea class="form-control" id="view_role_permissions" rows="6" readonly></textarea>
                        <small class="text-muted">Shown as permission names</small>
                    </div>
                </div>
            </div>

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

{{-- ===================== EDIT ROLE MODAL ===================== --}}
<div class="modal fade" id="editRoleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <form id="editRoleForm" 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 Role
                    </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_role_id">

                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Role Name (system)</label>
                            <input type="text" class="form-control" name="name" id="edit_role_name" required>
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Display Name</label>
                            <input type="text" class="form-control" name="display_name" id="edit_role_display_name">
                        </div>

                        <div class="col-md-4">
                            <label class="form-label">Description</label>
                            <input type="text" class="form-control" name="description" id="edit_role_description">
                        </div>
                    </div>

                    {{-- SAME Permissions Grid in Edit --}}
                    <div class="card mt-3">
                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="mb-0">Permissions</h5>

                                <div class="form-check form-switch m-0 d-flex align-items-center gap-2">
                                    <input class="form-check-input js-toggle-all" type="checkbox" id="edit_toggle_all">
                                    <label class="form-check-label" for="edit_toggle_all">Select All</label>
                                </div>
                            </div>

                            <div class="border rounded p-3 permissions-box" style="background:#fff;">
                                <div class="row g-3">
                                    @foreach($modules as $module)
                                        <div class="col-12 mt-2">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="fw-semibold text-uppercase small text-muted">
                                                    {{ $module->name }}
                                                </div>

                                                <div class="form-check form-switch m-0 d-flex align-items-center gap-2">
                                                    <input class="form-check-input js-module-toggle"
                                                           type="checkbox"
                                                           data-module="{{ $module->id }}"
                                                           id="edit_module_toggle_{{ $module->id }}">
                                                    <label class="form-check-label small" for="edit_module_toggle_{{ $module->id }}">
                                                        Select module
                                                    </label>
                                                </div>
                                            </div>
                                            <hr class="my-2">
                                        </div>

                                        @foreach($module->permissions as $perm)
                                            <div class="col-12 col-md-4">
                                                <label class="permission-item">
                                                    <input type="checkbox"
                                                           class="form-check-input js-perm-switch js-module-perm-{{ $module->id }}"
                                                           name="permissions[]"
                                                           value="{{ $perm->id }}">
                                                    <span class="fw-semibold">
                                                        {{ $perm->display_name ?? \Illuminate\Support\Str::headline($perm->name) }}
                                                    </span>
                                                </label>
                                            </div>
                                        @endforeach
                                    @endforeach
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="alert alert-danger d-none mt-3" id="editRoleErrors"></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 ROLE MODAL ===================== --}}
<div class="modal fade" id="deleteRoleModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <form id="deleteRoleForm" 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 role <strong id="delete_role_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 = $('#roles-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ route("roles.index") }}',
        autoWidth: false,
        responsive: false,
        columns: [
            { data: 'DT_RowIndex', orderable:false, searchable:false },
            { data: 'name' },
            { data: 'display_name' },
            { data: 'description' },
            { data: 'created_at' },
            { data: 'action', orderable:false, searchable:false }
        ]
    });

    // ===== Helpers (per modal scope) =====
    function syncModuleToggles($modal, prefix) {
        $modal.find('.js-module-toggle').each(function () {
            const moduleId = $(this).data('module');
            const perms = $modal.find('.js-module-perm-' + moduleId);
            if (!perms.length) return;
            $(this).prop('checked', perms.toArray().every(x => x.checked));
        });
    }

    function syncGlobalToggle($modal) {
        const perms = $modal.find('.js-perm-switch');
        if (!perms.length) return;
        $modal.find('.js-toggle-all').prop('checked', perms.toArray().every(x => x.checked));
    }

    function clearPermissions($modal) {
        $modal.find('.js-perm-switch').prop('checked', false);
        $modal.find('.js-module-toggle').prop('checked', false);
        $modal.find('.js-toggle-all').prop('checked', false);
        syncModuleToggles($modal);
        syncGlobalToggle($modal);
    }

    function setCheckedPermissions($modal, ids) {
        $modal.find('.js-perm-switch').prop('checked', false);
        (ids || []).forEach(id => $modal.find('.js-perm-switch[value="'+id+'"]').prop('checked', true));
        syncModuleToggles($modal);
        syncGlobalToggle($modal);
    }

    function initPermissionUI($modal) {

        // Global select all inside this modal only
        $modal.find('.js-toggle-all').off('change').on('change', function () {
            $modal.find('.js-perm-switch').prop('checked', $(this).is(':checked'));
            syncModuleToggles($modal);
        });

        // Module select
        $modal.find('.js-module-toggle').off('change').on('change', function () {
            const moduleId = $(this).data('module');
            $modal.find('.js-module-perm-' + moduleId).prop('checked', $(this).is(':checked'));
            syncGlobalToggle($modal);
        });

        // Individual perm
        $modal.find('.js-perm-switch').off('change').on('change', function () {
            syncModuleToggles($modal);
            syncGlobalToggle($modal);
        });

        syncModuleToggles($modal);
        syncGlobalToggle($modal);
    }

    // ================= CREATE =================
    $('#createRoleModal').on('shown.bs.modal', function () {
        const $m = $(this);
        initPermissionUI($m);
        clearPermissions($m);
        $('#createRoleErrors').addClass('d-none').html('');
    });

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

        const form = $(this);
        $.ajax({
            url: '{{ route("roles.store") }}',
            method: 'POST',
            data: form.serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('createRoleModal')).hide();
                form[0].reset();
                clearPermissions($('#createRoleModal'));
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#createRoleErrors').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', '.viewRoleBtn', function () {
        $('#view_role_name').val($(this).data('name') ?? '—');
        $('#view_role_display_name').val($(this).data('display_name') ?? '—');
        $('#view_role_description').val($(this).data('description') ?? '—');
        $('#view_role_permissions').val($(this).data('permissions') ?? '');
        new bootstrap.Modal(document.getElementById('viewRoleModal')).show();
    });

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

        $('#edit_role_id').val(id);
        $('#edit_role_name').val($(this).data('name') ?? '');
        $('#edit_role_display_name').val($(this).data('display_name') ?? '');
        $('#edit_role_description').val($(this).data('description') ?? '');

        $('#editRoleErrors').addClass('d-none').html('');
        $('#editRoleForm').attr('action', `/roles/${id}`);

        const $m = $('#editRoleModal');
        initPermissionUI($m);
        clearPermissions($m);

        // expects endpoint that returns { success:true, data:[permissionIds...] }
        $.get(`/roles/${id}/permissions`, function(res){
            if(res && res.success){
                setCheckedPermissions($m, res.data);
            }
        });

        new bootstrap.Modal(document.getElementById('editRoleModal')).show();
    });

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

        const form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: 'POST', // spoof PUT
            data: form.serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('editRoleModal')).hide();
                table.ajax.reload(null, false);
            },
            error: function (xhr) {
                const box = $('#editRoleErrors').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', '.deleteRoleBtn', function () {
        const id = $(this).data('id');
        const name = $(this).data('name') ?? 'this role';
        $('#delete_role_name').text(name);
        $('#deleteRoleForm').attr('action', `/roles/${id}`);
        new bootstrap.Modal(document.getElementById('deleteRoleModal')).show();
    });

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

        const form = $(this);
        $.ajax({
            url: form.attr('action'),
            method: 'POST', // spoof DELETE
            data: form.serialize(),
            success: function () {
                bootstrap.Modal.getInstance(document.getElementById('deleteRoleModal')).hide();
                table.ajax.reload(null, false);
            },
            error: function () {
                alert('Failed to delete role. Please try again.');
            }
        });
    });

});
</script>
@endpush