@extends('app')
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="grid simple">
                <div class="grid-body no-border"> <br>

                    @if ($errors->any())
                        <div class="row">
                            <div class="alert alert-danger col-md-6 col-sm-12 col-md-offset-3">
                                <button data-dismiss="alert" class="close"></button>
                                @foreach ($errors->all() as $error)
                                    <p>{{ $error }}</p>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    <form action="{{ $role ? route('roles.update', $role->id) : route('roles.store') }}" method="POST"
                        id="form_roles" novalidate>
                        @csrf
                        @if ($role)
                            @method('PUT')
                        @endif

                        <div class="form-group row">
                            <div class="col-md-6 col-md-offset-3 col-sm-12">
                                <input type="text" name="name" value="{{ old('name', $role->name ?? '') }}"
                                    class="form-control" required>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="name" class="control-label label-b">إسم الدور</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6 col-md-offset-3 col-sm-12">
                                <input type="text" name="display_name"
                                    value="{{ old('display_name', $role->display_name ?? '') }}" class="form-control">
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="display_name" class="control-label label-b">إسم الدور العام</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6 col-md-offset-3 col-sm-12">
                                <textarea name="description" class="form-control" rows="3">{{ old('description', $role->description ?? '') }}</textarea>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label for="description" class="control-label label-b">وصف الدور</label>
                            </div>
                        </div>

                        <div class="form-group row">
                            <div class="col-md-6 col-md-offset-3 col-sm-12">
                                <label class="check">
                                    <input name="check_all" type="checkbox" id="check_all_permitions" /> جميع الصلاحيات
                                </label>
                            </div>
                            <div class="col-md-3 col-sm-12 text-left">
                                <label class="control-label label-b">إختيار المهام</label>
                            </div>
                        </div>

                        @foreach ($permissions_array as $resource => $actions)
                            <div class="form-group row">
                                <div class="col-md-7 col-md-offset-2 col-xs-12">
                                    @foreach ($actions as $key => $value)
                                        <div class="col-md-3 pull-left">
                                            <label class="check">
                                                <input type="checkbox" class="role_check"
                                                    name="permissions[{{ $key }}]"
                                                    {{ array_key_exists($key, $role_permissions) ? 'checked' : '' }} />
                                                {{ $value }}
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                <label class="col-md-3 col-xs-12 text-left control-label label-b">
                                    {{ $readable[$resource] ?? $resource }}
                                </label>
                            </div>
                        @endforeach

                        <div class="form-actions"
                            style="margin-left: -13px !important; margin-right: -13px !important; padding-bottom: 13px !important">
                            <div class="pull-right">
                                <button type="submit" class="btn btn-primary btn-cons" id="btn-submit">
                                    {{ $role ? 'تحديث' : 'حفظ' }}
                                </button>
                            </div>
                            <a href="{{ route('roles.index') }}" class="btn btn-info btn-cons">إلغاء</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page_script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const checkAll = document.getElementById('check_all_permitions');
            if (checkAll) {
                checkAll.addEventListener('change', function() {
                    document.querySelectorAll('.role_check').forEach(cb => cb.checked = this.checked);
                });
            }

            const form = document.getElementById('form_roles');
            if (form) {
                form.addEventListener('submit', function(e) {
                    document.getElementById('btn-submit').disabled = true;
                    e.preventDefault();
                    setTimeout(() => form.submit(), 500);
                });
            }
        });
    </script>
@endsection