@extends('backend.dashboard.layout.master')
@section('content')



<div class="col-md-12">
    <style>
        .card {
            background: linear-gradient(135deg, #1f4037, #99f2c8);
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            color: white;
            padding: 20px;
        }

        .card-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
        }

        .form-control {
            border-radius: 10px;
        }

        .category-title {
            background: rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 10px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        .btn-primary,
        .btn-light {
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover {
            background: #0a8754;
            transform: scale(1.05);
        }

        .btn-light:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: scale(1.05);
        }

        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .checkbox-group div {
            background: rgba(255, 255, 255, 0.1);
            padding: 10px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

    </style>

    <div class="card">
        <div class="card-body">
            <h6 class="card-title">
                {{ isset($method) && $method == 'PUT' ? translate('Edit Roles') : translate('Create Roles') }}
            </h6>
            <form action="{{ $action }}" method="POST" autocomplete="off" enctype="multipart/form-data">
                @csrf
                @isset($method)
                @method('PUT')
                @endisset
                <div class="row">
                    <div class="col-sm-4">
                        <div class="mb-3">
                            <label class="form-label">{{ translate('Role Name') }}</label>
                            <input required name="name" value="{{ old('name', $Role->name) }}" type="text" class="form-control" placeholder="Enter Role Name">
                            @error('name')
                            <div class="mt-1 text-danger" style="font-size: 12px;">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="mb-4 text-center">
                            <button type="button" class="btn btn-primary btn-sm checkall">{{ translate('Check all') }}</button>
                            <button type="button" class="btn btn-light btn-sm uncheckall">{{ translate('Uncheck all') }}</button>
                        </div>
                        <div class="row">
                            @foreach ($permissions as $category => $groupedPermissions)
                            <div class="col-md-12 mb-3">
                                <h5 class="category-title">{{ ucfirst($category) }}</h5>
                                <div class="checkbox-group">
                                    @foreach ($groupedPermissions as $permission)
                                    <div>
                                        <input type="checkbox" name="permissions[]" value="{{ $permission->name }}" {{ isset($Role) && $Role->hasPermissionTo($permission->name, 'web') ? 'checked' : '' }} id="permission{{ $permission->id }}">

                                        <label for="permission{{ $permission->id }}">{{ $permission->name }}</label>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                            @endforeach

                            @error('permissions')
                            <div class="mt-1 text-danger" style="font-size: 12px;">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-sm-4 mt-3">
                        <a href="{{ route('Roles.index') }}" class="btn btn-light">{{ translate('Back') }}</a>
                        <button type="submit" class="btn btn-primary">{{ translate('Save') }}</button>
                    </div>
                </div>
            </form>



        </div>
    </div>


    <br>
</div>
@endsection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        $(".checkall").click(function(e) {
            e.preventDefault();
            $("input[type='checkbox']").prop('checked', true);
        });

        $(".uncheckall").click(function(e) {
            e.preventDefault();
            $("input[type='checkbox']").prop('checked', false);
        });
    });

</script>