@extends('layouts.master')
@section('css')
<!--Internal  Font Awesome -->
<link href="{{URL::asset('assets/plugins/fontawesome-free/css/all.min.css')}}" rel="stylesheet">
<!--Internal  treeview -->
<link href="{{URL::asset('assets/plugins/treeview/treeview-rtl.css')}}" rel="stylesheet" type="text/css" />
@section('title')
تعديل الدور - {{ $role->display_name ?? $role->name }}
@stop
@endsection
@section('page-header')
<!-- breadcrumb -->
<div class="breadcrumb-header justify-content-between">
    <div class="my-auto">
        <div class="d-flex">
            <h4 class="content-title mb-0 my-auto">الأدوار</h4>
            <span class="text-muted mt-1 tx-13 mr-2 mb-0">/ تعديل {{ $role->display_name ?? $role->name }}</span>
        </div>
    </div>
</div>
<!-- breadcrumb -->
@endsection
@section('content')

@if (count($errors) > 0)
<div class="alert alert-danger">
    <button aria-label="Close" class="close" data-dismiss="alert" type="button">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>خطأ</strong>
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

<form action="{{ route('admin.roles.update', $role->id) }}" method="POST">
    @csrf
    @method('PATCH')
<!-- row -->
<div class="row">
    <div class="col-md-12">
        <div class="card mg-b-20">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <span class="badge badge-primary">{{ $guardLabels[$role->guard_name] ?? $role->guard_name }}</span>
                        تعديل الدور
                    </h5>
                    <a class="btn btn-secondary btn-sm" href="{{ route('admin.roles.index', ['guard' => $role->guard_name]) }}">
                        <i class="fe fe-arrow-right ml-1"></i> رجوع
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="row mg-b-20">
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <div class="form-group">
                            <label>الاسم المعروض :</label>
                            <input type="text" name="display_name" class="form-control" placeholder="الاسم المعروض" value="{{ old('display_name', $role->display_name) }}">
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6">
                        <div class="form-group">
                            <label>الاسم البرمجي : <span class="tx-danger">*</span></label>
                            <input type="text" name="name" class="form-control" placeholder="Name" value="{{ old('name', $role->name) }}" required>
                            <small class="text-muted">يُستخدم داخلياً للتحقق من الصلاحيات</small>
                        </div>
                    </div>
                </div>

                <hr>
                <h6 class="mg-b-15">الصلاحيات المتاحة لنطاق <span class="badge badge-primary">{{ $guardLabels[$role->guard_name] ?? $role->guard_name }}</span></h6>

                <div class="row">
                    <div class="col-lg-12">
                        @if($permission->count() > 0)
                            <div class="row">
                                <div class="col-12 mg-b-10">
                                    <label class="ckbox">
                                        <input type="checkbox" id="select-all-perms">
                                        <span><strong>تحديد الكل</strong></span>
                                    </label>
                                </div>
                            </div>
                            <div class="row">
                                @php
                                    $grouped = $permission->groupBy(function($p) {
                                        $parts = explode('-', $p->name);
                                        return $parts[0] ?? 'عام';
                                    });
                                @endphp
                                @foreach($grouped as $group => $perms)
                                    <div class="col-md-4 col-lg-3 mg-b-10">
                                        <div class="card border">
                                            <div class="card-header py-2 bg-light">
                                                <strong class="tx-12">{{ ucfirst($group) }}</strong>
                                            </div>
                                            <div class="card-body py-2">
                                                @foreach($perms as $value)
                                                    <label class="ckbox mg-b-5" style="font-size: 13px;">
                                                        <input type="checkbox" name="permission[]"
                                                               value="{{ $value->id }}"
                                                               class="perm-checkbox"
                                                               {{ in_array($value->id, $rolePermissions) ? 'checked' : '' }}>
                                                        <span>{{ $value->display_name ?? $value->name }}</span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <div class="alert alert-warning">
                                لا توجد صلاحيات مسجلة لهذا النطاق بعد.
                            </div>
                        @endif
                    </div>
                </div>

                <div class="col-xs-12 col-sm-12 col-md-12 text-center mg-t-20">
                    <button type="submit" class="btn btn-main-primary pd-x-30">
                        <i class="fe fe-check ml-1"></i> تحديث
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- row closed -->
</div>
<!-- Container closed -->
</div>
<!-- main-content closed -->
</form>
@endsection
@section('js')
<!-- Internal Treeview js -->
<script src="{{URL::asset('assets/plugins/treeview/treeview.js')}}"></script>
<script>
    document.getElementById('select-all-perms').addEventListener('change', function() {
        var checkboxes = document.querySelectorAll('.perm-checkbox');
        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = this.checked;
        }
    });
</script>
@endsection