@extends('admin.layouts.app')

@section('title', __('dashboard.create_role'))

@section('content')
    <x-admin.page-header :title="__('dashboard.create_role')" :breadcrumbs="[__('models.roles') => route('admin.roles.index'), __('models.create') => '']" />

    <form action="{{ route('admin.roles.store') }}" method="POST" class="ajax-form">
        @csrf

        <div class="row">
            <div class="col-lg-4">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">{{ __('dashboard.role_information') }}</h5>
                    </div>
                    <div class="card-body">
                        <x-admin.form-input name="name" :label="__('dashboard.role_name')" :required="true"
                            :placeholder="__('dashboard.enter_role_name')" />

                        <div class="alert alert-info mb-0">
                            <div class="d-flex">
                                <i class="ri-information-line me-2 fs-16"></i>
                                <div>
                                    <p class="mb-0">{{ __('dashboard.role_permissions_hint') }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-success">
                        <i class="ri-save-line align-bottom me-1"></i> {{ __('models.create') }}
                    </button>
                    <a href="{{ route('admin.roles.index') }}" class="btn btn-light">{{ __('models.cancel') }}</a>
                </div>
            </div>

            <div class="col-lg-8">
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex align-items-center justify-content-between">
                            <h5 class="card-title mb-0">{{ __('dashboard.permissions') }}</h5>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="select-all-permissions">
                                <label class="form-check-label fw-semibold" for="select-all-permissions">
                                    {{ __('dashboard.select_all') }}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @forelse ($permissions as $group => $perms)
                            <div class="permission-group mb-4">
                                <div class="d-flex align-items-center justify-content-between mb-3">
                                    <div class="d-flex align-items-center">
                                        <div class="form-check form-switch me-2">
                                            <input class="form-check-input group-checkbox" type="checkbox"
                                                id="group_{{ Str::slug($group) }}" data-group="{{ Str::slug($group) }}">
                                        </div>
                                        <h6 class="mb-0 text-uppercase fw-bold">
                                            <i class="ri-folder-line me-1 text-primary"></i>
                                            {{ ucfirst(str_replace('_', ' ', $group)) }}
                                        </h6>
                                        <span class="badge bg-primary-subtle text-primary ms-2">{{ $perms->count() }}</span>
                                    </div>
                                </div>
                                <div class="permission-items ps-4">
                                    <div class="row g-2">
                                        @foreach ($perms as $permission)
                                            @php
                                                $action = explode('.', $permission->name)[1] ?? $permission->name;
                                                $actionIcon = match($action) {
                                                    'list', 'index' => 'ri-list-check',
                                                    'view', 'show' => 'ri-eye-line',
                                                    'create', 'store' => 'ri-add-line',
                                                    'edit', 'update' => 'ri-pencil-line',
                                                    'delete', 'destroy' => 'ri-delete-bin-line',
                                                    default => 'ri-checkbox-circle-line'
                                                };
                                                $actionColor = match($action) {
                                                    'list', 'index' => 'info',
                                                    'view', 'show' => 'primary',
                                                    'create', 'store' => 'success',
                                                    'edit', 'update' => 'warning',
                                                    'delete', 'destroy' => 'danger',
                                                    default => 'secondary'
                                                };
                                            @endphp
                                            <div class="col-md-4 col-sm-6">
                                                <div class="form-check permission-item p-3 rounded border {{ $actionColor }}-border-subtle">
                                                    <input class="form-check-input permission-checkbox group-{{ Str::slug($group) }}"
                                                        type="checkbox" name="permissions[]"
                                                        value="{{ $permission->name }}"
                                                        id="perm_{{ $permission->id }}">
                                                    <label class="form-check-label d-flex align-items-center w-100" for="perm_{{ $permission->id }}">
                                                        <i class="{{ $actionIcon }} text-{{ $actionColor }} me-2"></i>
                                                        <span class="text-capitalize">{{ ucfirst(str_replace('_', ' ', $action)) }}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                            @if(!$loop->last)
                                <hr class="my-4">
                            @endif
                        @empty
                            <div class="alert alert-warning mb-0">
                                <i class="ri-alert-line me-2"></i>
                                {{ __('dashboard.no_permissions_available') }}
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection

@push('styles')
<style>
    .permission-item {
        transition: all 0.2s ease;
        cursor: pointer;
        background: #fff;
    }
    .permission-item:hover {
        background: #f8f9fa;
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }
    .permission-item:has(input:checked) {
        background: rgba(var(--vz-primary-rgb), 0.08);
        border-color: var(--vz-primary) !important;
    }
    .permission-group {
        animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .info-border-subtle { border-color: rgba(var(--vz-info-rgb), 0.3) !important; }
    .primary-border-subtle { border-color: rgba(var(--vz-primary-rgb), 0.3) !important; }
    .success-border-subtle { border-color: rgba(var(--vz-success-rgb), 0.3) !important; }
    .warning-border-subtle { border-color: rgba(var(--vz-warning-rgb), 0.3) !important; }
    .danger-border-subtle { border-color: rgba(var(--vz-danger-rgb), 0.3) !important; }
    .secondary-border-subtle { border-color: rgba(var(--vz-secondary-rgb), 0.3) !important; }
</style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            // Select All Global
            $('#select-all-permissions').on('change', function() {
                var isChecked = $(this).is(':checked');
                $('.group-checkbox').prop('checked', isChecked);
                $('.permission-checkbox').prop('checked', isChecked);
            });

            // Group checkbox handler
            $('.group-checkbox').on('change', function() {
                var group = $(this).data('group');
                $('.permission-checkbox.group-' + group).prop('checked', $(this).is(':checked'));
                checkGlobalSelectAll();
            });

            // Individual checkbox handler to update group checkbox
            $('.permission-checkbox').on('change', function() {
                var classes = $(this).attr('class');
                var match = classes.match(/group-([a-z0-9-]+)/i);
                if (match) {
                    var group = match[1];
                    var allChecked = $('.permission-checkbox.group-' + group).length === $(
                        '.permission-checkbox.group-' + group + ':checked').length;
                    $('#group_' + group).prop('checked', allChecked);
                }
                checkGlobalSelectAll();
            });

            // Click on permission item to toggle checkbox
            $('.permission-item').on('click', function(e) {
                if (e.target.type !== 'checkbox') {
                    var checkbox = $(this).find('input[type="checkbox"]');
                    checkbox.prop('checked', !checkbox.prop('checked')).trigger('change');
                }
            });

            function checkGlobalSelectAll() {
                var allPerms = $('.permission-checkbox').length;
                var checkedPerms = $('.permission-checkbox:checked').length;
                $('#select-all-permissions').prop('checked', allPerms === checkedPerms && allPerms > 0);
            }
        });
    </script>
@endpush