@extends('backend.template.layouts.template-base')
@section('title', 'Create Role')

@section('content')
<section>
    <div class="page-head-title mb-3">
        <a href="{{ route('backend.template.manage-users.roles.roles-and-permissions') }}" class="d-inline-block">
            <h2 class="text-title fw-semibold mb-0">
                <i class="ri-arrow-left-s-line"></i> Create New Role
            </h2>
        </a>
    </div>

    <form action="{{ route('backend.template.manage-users.roles.store') }}" method="POST">
        @csrf

        <div class="card-border p-3">
            <div class="row g-3">

                <div class="col-md-4">
                    <label class="form-label-modal">Role Name <span class="color-red">*</span></label>
                    <input type="text" name="name" value="{{ old('name') }}"
                           class="form-control @error('name') is-invalid @enderror"
                           placeholder="Enter role name">
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>

                <div class="col-md-4">
                    <label class="form-label-modal d-block">Role Status</label>
                    <div class="d-flex align-items-center gap-4 mt-3">
                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                            <input class="form-check-input" type="radio" name="status" value="active"
                                   id="statusActive" {{ old('status', 'active') === 'active' ? 'checked' : '' }}>
                            <label class="form-label-modal mb-0" for="statusActive">Active</label>
                        </div>
                        <div class="form-check d-flex align-items-center gap-2 mb-0">
                            <input class="form-check-input" type="radio" name="status" value="inactive"
                                   id="statusInactive" {{ old('status') === 'inactive' ? 'checked' : '' }}>
                            <label class="form-label-modal mb-0" for="statusInactive">Inactive</label>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <h4 class="table-text mb-0">Permissions</h4>
                        <div class="d-flex gap-2">
                            <button type="button" class="button-outline-green p-2 px-3" onclick="allowAll('create')">Allow Create</button>
                            <button type="button" class="button-outline-green p-2 px-3" onclick="allowAll('read')">Allow Read</button>
                            <button type="button" class="button-outline-green p-2 px-3" onclick="allowAll('update')">Allow Update</button>
                            <button type="button" class="button-outline-green p-2 px-3" onclick="allowAll('delete')">Allow Delete</button>
                        </div>
                    </div>

                    @include('backend.template.manage-users.roles-and-permissions.partials.permission-table', [
                        'permissionsByPage' => $permissionsByPage,
                        'modulePages'       => $modulePages,
                        'rolePermIds'       => old('permissions', []),
                        'readonly'          => false,
                    ])
                </div>

            </div>
        </div>

        <div class="my-3 d-flex justify-content-end gap-2">
            <a href="{{ route('backend.template.manage-users.roles.roles-and-permissions') }}"
               class="button-outline-green w-button">Cancel</a>
            <button type="submit" class="button-green">Create Role</button>
        </div>

    </form>
</section>
@endsection

@section('scripts')
<script>
document.querySelectorAll('.toggle-arrow').forEach(function (arrow) {
    arrow.addEventListener('click', function () {
        var id = this.closest('tr').getAttribute('data-id');
        document.querySelectorAll('.child-' + id).forEach(function (row) { row.classList.toggle('d-none'); });
        this.classList.toggle('rotate');
    });
});
function allowAll(action) {
    document.querySelectorAll('input.perm-' + action).forEach(function (cb) { cb.checked = true; });
}
</script>
@endsection