@extends('dashboard.layouts.app')

@section('title', __('dashboard.Add Role'))

@section('page_heading', __('dashboard.Add Role'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">
        <a href="{{ route('dashboard.roles.index') }}" class="text-muted text-hover-primary">{{ __('dashboard.Roles') }}</a>
    </li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Add Role') }}</li>
@endsection

@section('content')
    <div class="row g-7">
        <div class="col-xl-12">
            <div class="card card-flush h-lg-100" id="kt_contacts_main">

                <div class="card-header pt-7">
                    <div class="card-title">
                        <h2>{{ __('dashboard.Add Role') }}</h2>
                    </div>
                </div>

                <div class="card-body pt-5">
                    <form action="{{ route('dashboard.roles.store') }}" method="POST">
                        @csrf

                        <div class="row mb-7">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name" class="form-label fw-bold">{{ __('dashboard.Name') }}</label>
                                    <input type="text" id="name" name="name"
                                           class="form-control @error('name') is-invalid @enderror"
                                           value="{{ old('name') }}" required>
                                    @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="guard_name"
                                        class="form-label fw-bold">{{ __('dashboard.Guard Name') }}</label>
                                    <input type="text" id="guard_name" name="guard_name"
                                        class="form-control @error('guard_name') is-invalid @enderror"
                                        value="{{ old('guard_name', 'web') }}" required>
                                    @error('guard_name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="permissions-section mt-7">
                            <div class="bg-light p-3 rounded mb-4">
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="select-all-permissions">
                                    <label class="form-check-label fw-bold" for="select-all-permissions">
                                        {{ __('dashboard.Select All Permissions') }}
                                    </label>
                                </div>
                            </div>

                            <div class="row gy-5">
                                @foreach ($permissionGroups as $groupName => $permissions)
                                    <div class="col-12">
                                        <h4 class="fw-bold mb-3 text-capitalize">
                                            {{-- <i class="{{ $groupIcons[$groupName] ?? 'bi bi-question-circle' }} fs-2 me-2"></i> --}}
                                            {{ str_replace('_', ' ', $groupName) }}
                                        </h4>

                                        <div class="card border">
                                            <div class="card-body">
                                                <div class="row g-3">
                                                    @foreach ($permissions as $permission)
                                                        <div class="col-md-3">
                                                            <div class="form-check">
                                                                <input type="checkbox"
                                                                    class="form-check-input permission-checkbox"
                                                                    id="permission-{{ $permission->id }}"
                                                                    name="permissions[]" value="{{ $permission->id }}"
                                                                    data-group="{{ $groupName }}">
                                                                <label class="form-check-label"
                                                                    for="permission-{{ $permission->id }}">
                                                                    {{ str_replace(['_', $groupName], [' ', ''], $permission->name) }}
                                                                </label>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>

                        <div class="mt-7">
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-save me-2"></i>{{ __('dashboard.Save') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const selectAllCheckbox = document.getElementById('select-all-permissions');
            const permissionCheckboxes = document.querySelectorAll('.permission-checkbox');

            // Select All Handler
            selectAllCheckbox?.addEventListener('change', function () {
                const isChecked = this.checked;
                permissionCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
            });

            // Individual Permissions
            permissionCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function () {
                    updateSelectAllState();
                });
            });

            // Update Select All State
            function updateSelectAllState() {
                const checkedCount = Array.from(permissionCheckboxes)
                    .filter(checkbox => checkbox.checked).length;
                const totalCount = permissionCheckboxes.length;

                if (selectAllCheckbox) {
                    selectAllCheckbox.checked = checkedCount === totalCount;
                    selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < totalCount;
                }
            }

            // Initialize state
            updateSelectAllState();
        });
    </script>
@endsection