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

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

        <form action="{{ route('backend.template.manage-users.roles.update', $role->id) }}" 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', $role->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', $role->status) === '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', $role->status) === 'inactive' ? 'checked' : '' }}>
                                <label class="form-label-modal mb-0" for="statusInactive">Inactive</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-12">
                        <div class=" permissions d-flex  justify-content-between mb-2">
                            <h4 class="table-text mb-0">Permissions</h4>
                            <div class="d-flex permit-btn 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', $rolePermIds),
                                'readonly' => false,
                            ]
                        )
                    </div>

                </div>
            </div>

            <div class=" permit-submit my-3 d-flex justify-content-end gap-2">
                <a href="{{ route('backend.template.manage-users.roles.role-view', $role->id) }}"
                    class="button-outline-green w-button">Cancel</a>
                <button type="submit" class="button-green">Save Changes</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