@extends('layouts.modern')

@section('title', 'Vytvořit roli - MARKOVI')
@section('breadcrumb-section', 'Administrace')
@section('breadcrumb-page', 'Vytvořit roli')

@section('content')
<div class="admin-header">
    <div class="admin-header-content">
        <div class="admin-title-section">
            <h1 class="admin-title">
                <i class="fas fa-plus-circle"></i>
                Vytvořit novou roli
            </h1>
            <p class="admin-subtitle">Definujte novou roli s příslušnými oprávněními</p>
        </div>
        
        <div class="admin-actions">
            <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i>
                Zpět na seznam
            </a>
        </div>
    </div>
</div>

<!-- Error Messages -->
@if ($errors->any())
    <div class="alert alert-error">
        <i class="fas fa-exclamation-circle"></i>
        <div>
            <strong>Opravte následující chyby:</strong>
            <ul class="error-list">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    </div>
@endif

<form method="POST" action="{{ route('admin.roles.store') }}" class="role-form">
    @csrf
    
    <div class="form-grid">
        <!-- Basic Information -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-info-circle"></i>
                    Základní informace
                </h3>
            </div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label for="name" class="form-label required">
                            <i class="fas fa-code"></i>
                            Systémový název
                        </label>
                        <input 
                            type="text" 
                            id="name" 
                            name="name" 
                            class="form-input @error('name') error @enderror" 
                            value="{{ old('name') }}" 
                            placeholder="napr. custom_manager"
                            required
                        >
                        <div class="form-help">
                            Používá se v kódu. Pouze malá písmena, čísla a podtržítka.
                        </div>
                        @error('name')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="display_name" class="form-label required">
                            <i class="fas fa-tag"></i>
                            Zobrazovaný název
                        </label>
                        <input 
                            type="text" 
                            id="display_name" 
                            name="display_name" 
                            class="form-input @error('display_name') error @enderror" 
                            value="{{ old('display_name') }}" 
                            placeholder="např. Vlastní manažer"
                            required
                        >
                        <div class="form-help">
                            Název, který uvidí uživatelé v aplikaci.
                        </div>
                        @error('display_name')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>

                <div class="form-group">
                    <label for="description" class="form-label">
                        <i class="fas fa-align-left"></i>
                        Popis role
                    </label>
                    <textarea 
                        id="description" 
                        name="description" 
                        class="form-textarea @error('description') error @enderror" 
                        rows="3"
                        placeholder="Stručný popis účelu a odpovědností této role..."
                    >{{ old('description') }}</textarea>
                    @error('description')
                        <span class="form-error">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-row">
                    <div class="form-group">
                        <label for="level" class="form-label required">
                            <i class="fas fa-layer-group"></i>
                            Úroveň oprávnění
                        </label>
                        <select 
                            id="level" 
                            name="level" 
                            class="form-select @error('level') error @enderror" 
                            required
                        >
                            <option value="">Vyberte úroveň...</option>
                            @for($i = 1; $i < Auth::user()->role->level; $i++)
                                <option value="{{ $i }}" {{ old('level') == $i ? 'selected' : '' }}>
                                    Úroveň {{ $i }}
                                    @if($i >= 80) (Vysoká - Administrátorská)
                                    @elseif($i >= 60) (Střední - Manažerská)
                                    @elseif($i >= 40) (Základní - Uživatelská)
                                    @else (Nízká - Omezená)
                                    @endif
                                </option>
                            @endfor
                        </select>
                        <div class="form-help">
                            Vyšší číslo = více oprávnění. Maximální úroveň: {{ Auth::user()->role->level - 1 }}
                        </div>
                        @error('level')
                            <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label class="form-label">
                            <i class="fas fa-toggle-on"></i>
                            Stav role
                        </label>
                        <div class="checkbox-group">
                            <label class="checkbox-label">
                                <input 
                                    type="checkbox" 
                                    name="is_active" 
                                    value="1" 
                                    {{ old('is_active', true) ? 'checked' : '' }}
                                    class="checkbox-input"
                                >
                                <span class="checkbox-custom"></span>
                                <span class="checkbox-text">Role je aktivní</span>
                            </label>
                            <div class="form-help">
                                Neaktivní role nelze přiřadit novým uživatelům.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Permissions -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-key"></i>
                    Oprávnění role
                </h3>
                <div class="card-actions">
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAllPermissions()">
                        <i class="fas fa-check-double"></i>
                        Vybrat vše
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="deselectAllPermissions()">
                        <i class="fas fa-times"></i>
                        Zrušit výběr
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div class="permissions-grid">
                    @foreach($permissions as $category => $categoryPermissions)
                        <div class="permission-category">
                            <div class="category-header">
                                <h4 class="category-title">
                                    <i class="{{ $categoryPermissions->first()->icon_class }}"></i>
                                    {{ $categoryPermissions->first()->category_display_name }}
                                </h4>
                                <div class="category-actions">
                                    <button type="button" 
                                            class="btn btn-xs btn-outline-primary select-category-btn" 
                                            data-category="{{ $category }}">
                                        <i class="fas fa-check"></i>
                                        Vybrat vše
                                    </button>
                                </div>
                            </div>
                            
                            <div class="permissions-list">
                                @foreach($categoryPermissions as $permission)
                                    <label class="permission-item">
                                        <input 
                                            type="checkbox" 
                                            name="permissions[]" 
                                            value="{{ $permission->id }}"
                                            class="permission-checkbox"
                                            data-category="{{ $category }}"
                                            {{ in_array($permission->id, old('permissions', [])) ? 'checked' : '' }}
                                        >
                                        <span class="permission-checkbox-custom"></span>
                                        <div class="permission-info">
                                            <div class="permission-name">{{ $permission->display_name }}</div>
                                            @if($permission->description)
                                                <div class="permission-description">{{ $permission->description }}</div>
                                            @endif
                                            <div class="permission-system-name">{{ $permission->name }}</div>
                                        </div>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Form Actions -->
    <div class="form-actions">
        <button type="submit" class="btn btn-primary btn-lg">
            <i class="fas fa-save"></i>
            Vytvořit roli
        </button>
        <a href="{{ route('admin.roles.index') }}" class="btn btn-secondary btn-lg">
            <i class="fas fa-times"></i>
            Zrušit
        </a>
    </div>
</form>
@endsection

@push('styles')
<style>
.admin-header {
    background: linear-gradient(135deg, var(--success-600), var(--success-700));
    color: white;
    padding: var(--space-8) 0;
    margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) var(--space-8);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.admin-header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.admin-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.admin-subtitle {
    margin: var(--space-2) 0 0;
    opacity: 0.9;
    font-size: 1.125rem;
}

.admin-actions .btn {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
}

.admin-actions .btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.role-form {
    max-width: 1200px;
    margin: 0 auto;
}

.form-grid {
    display: grid;
    gap: var(--space-8);
    margin-bottom: var(--space-8);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-label {
    font-weight: 600;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.form-label.required::after {
    content: '*';
    color: var(--error-500);
    margin-left: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input.error,
.form-select.error,
.form-textarea.error {
    border-color: var(--error-500);
}

.form-help {
    font-size: 0.75rem;
    color: var(--gray-500);
    margin-top: var(--space-1);
}

.form-error {
    font-size: 0.75rem;
    color: var(--error-500);
    margin-top: var(--space-1);
}

.error-list {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-4);
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.checkbox-input {
    display: none;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    position: relative;
    transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom {
    background: var(--primary-500);
    border-color: var(--primary-500);
}

.checkbox-input:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.checkbox-text {
    font-weight: 500;
    color: var(--gray-700);
}

.permissions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--space-6);
}

.permission-category {
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.permission-category:hover {
    border-color: var(--primary-300);
    box-shadow: var(--shadow-md);
}

.category-header {
    background: var(--gray-50);
    padding: var(--space-4);
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.category-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.category-actions .btn {
    font-size: 0.75rem;
    padding: var(--space-1) var(--space-2);
}

.permissions-list {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.permission-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}

.permission-item:hover {
    background: var(--gray-50);
}

.permission-checkbox {
    display: none;
}

.permission-checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-sm);
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: 2px;
}

.permission-checkbox:checked + .permission-checkbox-custom {
    background: var(--primary-500);
    border-color: var(--primary-500);
}

.permission-checkbox:checked + .permission-checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
}

.permission-info {
    flex: 1;
}

.permission-name {
    font-weight: 500;
    color: var(--gray-900);
    margin-bottom: var(--space-1);
}

.permission-description {
    font-size: 0.75rem;
    color: var(--gray-600);
    margin-bottom: var(--space-1);
}

.permission-system-name {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: var(--gray-500);
    background: var(--gray-100);
    padding: 2px 4px;
    border-radius: var(--radius-sm);
    display: inline-block;
}

.form-actions {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    padding: var(--space-8) 0;
    border-top: 1px solid var(--gray-200);
}

.btn-lg {
    padding: var(--space-4) var(--space-8);
    font-size: 1rem;
    font-weight: 600;
}

@media (max-width: 768px) {
    .admin-header-content {
        flex-direction: column;
        gap: var(--space-4);
        text-align: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .permissions-grid {
        grid-template-columns: 1fr;
    }
    
    .form-actions {
        flex-direction: column;
    }
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Select all permissions
    window.selectAllPermissions = function() {
        document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
            checkbox.checked = true;
        });
    };

    // Deselect all permissions
    window.deselectAllPermissions = function() {
        document.querySelectorAll('.permission-checkbox').forEach(checkbox => {
            checkbox.checked = false;
        });
    };

    // Select category permissions
    document.querySelectorAll('.select-category-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const category = this.dataset.category;
            const categoryCheckboxes = document.querySelectorAll(`[data-category="${category}"]`);
            
            // Check if all are selected
            const allSelected = Array.from(categoryCheckboxes).every(cb => cb.checked);
            
            // Toggle selection
            categoryCheckboxes.forEach(checkbox => {
                checkbox.checked = !allSelected;
            });
            
            // Update button text
            this.innerHTML = allSelected 
                ? '<i class="fas fa-check"></i> Vybrat vše'
                : '<i class="fas fa-times"></i> Zrušit výběr';
        });
    });

    // Auto-generate system name from display name
    const displayNameInput = document.getElementById('display_name');
    const nameInput = document.getElementById('name');
    
    displayNameInput.addEventListener('input', function() {
        if (!nameInput.value || nameInput.dataset.autoGenerated !== 'false') {
            const systemName = this.value
                .toLowerCase()
                .replace(/[^a-z0-9\s]/g, '')
                .replace(/\s+/g, '_')
                .substring(0, 50);
            
            nameInput.value = systemName;
            nameInput.dataset.autoGenerated = 'true';
        }
    });
    
    nameInput.addEventListener('input', function() {
        this.dataset.autoGenerated = 'false';
    });

    // Form validation
    document.querySelector('.role-form').addEventListener('submit', function(e) {
        const selectedPermissions = document.querySelectorAll('.permission-checkbox:checked');
        
        if (selectedPermissions.length === 0) {
            e.preventDefault();
            alert('Vyberte alespoň jedno oprávnění pro tuto roli.');
            return false;
        }
        
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Vytváří se...';
        submitBtn.disabled = true;
        
        // Re-enable after 5 seconds to prevent permanent disable
        setTimeout(() => {
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }, 5000);
    });
});
</script>
@endpush