@extends('layouts.admin')

@section('content')
<style>
    input[type="checkbox"] {

        accent-color: #256d51;
}




</style>
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @include('elements.alert-error')
                    <div class="col-lg-12 margin-tb">
                        <div class="pull-right">
                            <a class="btn btn-primary btn-sm mb-2" href="{{ route('admin.roles.index') }}">
                                <i class="fa fa-arrow-left"></i> Back
                            </a>
                        </div>
                    </div>

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

                        <div class="row">
                            <div class="row mb-3">
                                <label class="col-3 col-form-label" for="name">Role Name</label>
                                <div class="col-9">
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Name"
                                           value="{{ $role ? $role->name : '' }}" required>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label><h4>Permissions:</h4></label>
                                    @foreach ($permissions as $group => $groupPermissions)
                                        <div class="mb-3">
                                            <div class="row">
                                                <div class="col-md-5">
                                                    <label>
                                                        <input type="checkbox" class="group-checkbox" data-group="{{ $group }}">
                                                        <strong>{{ ucfirst($group) }}</strong>
                                                    </label>
                                                </div>
                                                <div class="col-md-7">

                                                        @foreach ($groupPermissions as $permission)
                                                            <div class="col-md-4">
                                                                <label>
                                                                    <input type="checkbox" name="permissions[]" value="{{ $permission->name }}"
                                                                           class="permission-checkbox" data-group="{{ $group }}"
                                                                           {{ $role && in_array($permission->id, $rolePermissions) ? 'checked' : '' }}>
                                                                    {{ $permission->name }}
                                                                </label>
                                                            </div>
                                                        @endforeach

                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            <div class="col-md-12 text-center">
                                <button type="submit" class="btn btn-primary">
                                    {{ $role ? 'Update Role' : 'Create Role' }}
                                </button>
                            </div>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')

    <script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>

    <script>
        $(document).ready(function() {

            $("#role_form").validate({
                rules: {
                    name: {
                        required: true,
                    },
                },
                messages: {
                    name: {
                        required: "Please enter a role name",
                    },
                },
                errorClass: "invalid-feedback",
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('text-danger');
                    error.insertAfter(element);

                    // Display the box alert with error messages
                    let errorMessages = [];
                    $('#course_form').find('.invalid-feedback').each(function() {
                        errorMessages.push($(this).text());
                    });
                    if (errorMessages.length > 0) {
                        $('#error_messages').html(errorMessages.join('<br>')).show();
                    }
                },
                highlight: function(element, errorClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass) {
                    $(element).removeClass('is-invalid');
                },
                submitHandler: function(form) {
                    $('#error_messages').hide();
                    form.submit();
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-valid').removeClass('is-invalid');
                }
            });

        });
    </script>

    <!-- JavaScript to handle checkbox behavior -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Handle group checkbox toggle
            const groupCheckboxes = document.querySelectorAll('.group-checkbox');
            groupCheckboxes.forEach(groupCheckbox => {
                groupCheckbox.addEventListener('change', function () {
                    const group = this.dataset.group;
                    const permissions = document.querySelectorAll(`.permission-checkbox[data-group="${group}"]`);
                    permissions.forEach(permission => {
                        permission.checked = this.checked;
                    });
                });
            });

            // Handle individual permission toggle to update group checkbox
            const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');
            permissionCheckboxes.forEach(permissionCheckbox => {
                permissionCheckbox.addEventListener('change', function () {
                    const group = this.dataset.group;
                    const groupCheckbox = document.querySelector(`.group-checkbox[data-group="${group}"]`);
                    const permissions = document.querySelectorAll(`.permission-checkbox[data-group="${group}"]`);
                    const allChecked = Array.from(permissions).every(permission => permission.checked);
                    groupCheckbox.checked = allChecked;
                });
            });

            // On page load, set group checkbox state based on permission checkboxes
            groupCheckboxes.forEach(groupCheckbox => {
                const group = groupCheckbox.dataset.group;
                const permissions = document.querySelectorAll(`.permission-checkbox[data-group="${group}"]`);
                const allChecked = Array.from(permissions).every(permission => permission.checked);
                groupCheckbox.checked = allChecked;
            });
        });
    </script>

@endsection