@extends('layouts.app')
@section('title', 'الأدوار والصلاحيات')
@section('page_title', 'الأدوار والصلاحيات')
@section('page_subtitle', 'صلاحيات دقيقة لكل عملية وليست دورًا واحدًا')

@section('page_actions')
    @if (auth()->user()->hasPermission('roles.create'))
        <button class="btn btn-primary" id="btnAdd"><i class="bi bi-plus-lg"></i> دور جديد</button>
    @endif
@endsection

@section('content')
<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover table-striped w-100" id="rolesTable">
            <thead>
                <tr>
                    <th>#</th>
                    <th>اسم الدور</th>
                    <th>الاسم البرمجي</th>
                    <th>عدد الصلاحيات</th>
                    <th>عدد المستخدمين</th>
                    <th>النوع</th>
                    <th>إجراءات</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<div class="modal fade" id="roleModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <form id="roleForm" data-url="" data-method="POST">
                <div class="modal-header">
                    <h5 class="modal-title" id="roleModalTitle">إضافة دور</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-4">
                            <label class="form-label">اسم الدور <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">الاسم البرمجي <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" dir="ltr" placeholder="team_leader" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">الوصف</label>
                            <input type="text" name="description" class="form-control">
                        </div>
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="mb-0">الصلاحيات</h6>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="checkAll">تحديد الكل</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" id="uncheckAll">إلغاء الكل</button>
                        </div>
                    </div>

                    <div class="row g-3">
                        @foreach ($groups as $group => $permissions)
                            <div class="col-md-6">
                                <div class="card h-100">
                                    <div class="card-header py-2 d-flex justify-content-between align-items-center">
                                        <span class="small">{{ $group }}</span>
                                        <input type="checkbox" class="form-check-input group-check">
                                    </div>
                                    <div class="card-body py-2">
                                        @foreach ($permissions as $permission)
                                            <div class="form-check">
                                                <input class="form-check-input perm-check" type="checkbox" name="permissions[]"
                                                       value="{{ $permission->id }}" id="perm-{{ $permission->id }}">
                                                <label class="form-check-label small" for="perm-{{ $permission->id }}">
                                                    {{ $permission->title }}
                                                    <code class="text-muted small">{{ $permission->name }}</code>
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const table = MR.table('#rolesTable', '{{ route('roles.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'title', name: 'title' },
        { data: 'name', name: 'name' },
        { data: 'permissions_count', orderable: false, searchable: false },
        { data: 'users_count', orderable: false, searchable: false },
        { data: 'locked_badge', orderable: false, searchable: false },
        { data: 'actions', orderable: false, searchable: false }
    ], { order: [[0, 'asc']] });

    const $modal = $('#roleModal');
    const $form = $('#roleForm');

    $('#btnAdd').on('click', function () {
        $form[0].reset();
        $('.perm-check, .group-check').prop('checked', false);
        $form.data('url', '{{ route('roles.store') }}').data('method', 'POST');
        $('#roleModalTitle').text('إضافة دور');
        $modal.modal('show');
    });

    $('#rolesTable').on('click', '[data-action=edit]', function () {
        const id = $(this).data('id');
        $.getJSON('{{ url('roles') }}/' + id, function (res) {
            $form[0].reset();
            MR.fill($form, res.role);
            $('.perm-check').prop('checked', false);
            res.permissions.forEach(function (pid) { $('#perm-' + pid).prop('checked', true); });
            $form.data('url', '{{ url('roles') }}/' + id).data('method', 'PUT');
            $('#roleModalTitle').text('تعديل دور');
            $modal.modal('show');
        });
    });

    $('#rolesTable').on('click', '[data-action=delete]', function () {
        MR.remove($(this).data('url'), function () { table.ajax.reload(null, false); });
    });

    $('#checkAll').on('click', function () { $('.perm-check, .group-check').prop('checked', true); });
    $('#uncheckAll').on('click', function () { $('.perm-check, .group-check').prop('checked', false); });
    $('.group-check').on('change', function () {
        $(this).closest('.card').find('.perm-check').prop('checked', $(this).is(':checked'));
    });

    $form.on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $modal.modal('hide'); table.ajax.reload(null, false); } });
    });
});
</script>
@endpush