@extends('admin.layouts.masterlayout')

@section('title', 'Add Role')
@section('head_title', "Role Management")

@section('content')
<div class="dashboard-body-content">
    <div class="dashboard-breadcrumb-section">
        <h2>Add Admin Role</h2>
        <p> <a href="{{ route('admin.role-management',['tab' => 'role']) }}"> Role Management </a>/ Add Admin Role</p>
    </div>
    @if ($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
    <form id="store_role_form" action="{{route('admin.storeRole')}}" method="post">
        @csrf
        <div class="row">
            <div class="col-xxl-7 col-lg-12 mb-lg-0 ">
                <div class="ct-admin-container mb-4">
                    <div class="card">
                        <div class="card-title">
                            <h2>Admin Role Detail</h2>
                        </div>
                        <div class="card-body ">
                            <div class="mb-4">
                                <label for="role">Role Name<span class="required-star">*</span></label>
                                <div class="auth-input-position">
                                    <input type="text" id="role" name="role" placeholder="Enter Name" class="form-control" value="{{ old('role') }}">
                                    <div class="auth-input-icon">
                                        <img src="{{ asset('assets/img/role-icon.png') }}" alt="">
                                    </div>
                                </div>

                            </div>
                            <div class="mb-4">
                                <label for="notes">Add Extra Notes (Optional)</label>
                                <textarea class="form-control text-area" id="notes" name="notes"
                                    placeholder="Enter your extra notes...">{{ old('notes') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ct-admin-container">
                    <div class="card">
                        <div class="card-title">
                            <h2>Permissions</h2>
                        </div>
                        <div class="card-body pt-1">
                            <div class="permission-table-container">
                                @foreach ($modules as $module)
                                <div class="inventory-mgt-flex">
                                    <h2>{{ ucfirst($module->name) }}</h2>
                                    <div class="invertory-child-flex">
                                        @foreach (json_decode($module->permissions, true) as $permission)
                                        <div>
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox"
                                                    name="permissions[]"
                                                    value="{{ $module->key . '.' . $permission }}"
                                                    id="{{ $module->key . '-' . $permission }}">
                                                <label class="form-check-label" for="{{ $module->key . '-' . $permission }}">
                                                    {{ ucfirst(str_replace('_', ' ', $permission)) }}
                                                </label>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                </div>
                                @endforeach

                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex gap-3 submit-container">
                    <a href="{{ route('admin.role-management',['tab' => 'role']) }}" class="ct-outline-btn text-center">Cancel</a>
                    <button type="submit" class="ct-btn add_role_btn"> <span>Save</span> </button>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function() {
        // Custom method to validate at least one permission is checked
        $.validator.addMethod("requirePermission", function(value, element) {
            return $('input[name="permissions[]"]:checked').length > 0;
        }, "Please select at least one permission.");

        // Apply validation rules to the form
        $("#store_role_form").validate({
            rules: {
                role: {
                    required: true,
                    minlength: 3
                },
                notes: {
                    maxlength: 500
                },
                'permissions[]': {
                    requirePermission: true
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("name") === "permissions[]") {
                    // Remove any existing error to prevent duplication
                    $(".permission-table-container").next('.permission-error').remove();
                    error.addClass('permission-error');
                    error.insertAfter(".permission-table-container");
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // Perform the form submission if valid
                 $('.add_role_btn').attr('disabled', true);
                $('.add_role_btn').addClass('loader-active');
                form.submit();
            }
        });
    });
</script>
@endsection