@extends('layout.app')

@section('title', 'Tambah Permission - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Tambah Permission" 
    :breadcrumbs="[
        ['name' => 'Manajemen Permission', 'url' => route('permission-management.index')],
        ['name' => 'Tambah Permission']
    ]"
/>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">key</i> Form Tambah Permission
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <form action="{{ route('permission-management.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <!-- Basic Information -->
                            <div class="col-md-6">
                                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                    <div class="card-header pb-3" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                        <h6 class="mb-0 font-weight-bold d-flex align-items-center text-white" style="font-size: 0.875rem;">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1;">key</i> Informasi Permission
                                        </h6>
                                    </div>
                                    <div class="card-body pt-3">
                                        <div class="form-group mb-3">
                                            <label for="name" class="form-label">Nama Permission <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                                   id="name" name="name" value="{{ old('name') }}" required
                                                   placeholder="contoh: users.create, roles.edit">
                                            <small class="text-muted">Nama permission harus unik dan menggunakan format module.action</small>
                                            @error('name')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="display_name" class="form-label">Display Name <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('display_name') is-invalid @enderror" 
                                                   id="display_name" name="display_name" value="{{ old('display_name') }}" required
                                                   placeholder="contoh: Tambah User, Edit Role">
                                            <small class="text-muted">Nama yang akan ditampilkan di interface</small>
                                            @error('display_name')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="description" class="form-label">Deskripsi</label>
                                            <textarea class="form-control @error('description') is-invalid @enderror" 
                                                      id="description" name="description" rows="3" 
                                                      placeholder="Deskripsi singkat tentang permission ini">{{ old('description') }}</textarea>
                                            @error('description')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Group and Status -->
                            <div class="col-md-6">
                                <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                                    <div class="card-header pb-3" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                                        <h6 class="mb-0 font-weight-bold d-flex align-items-center text-white" style="font-size: 0.875rem;">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1;">folder</i> Grup & Status
                                        </h6>
                                    </div>
                                    <div class="card-body pt-3">
                                        <div class="form-group mb-3">
                                            <label for="group" class="form-label">Grup <span class="text-danger">*</span></label>
                                            <select class="form-control @error('group') is-invalid @enderror" id="group" name="group" required>
                                                <option value="">Pilih Grup</option>
                                                <option value="Dashboard" {{ old('group') == 'Dashboard' ? 'selected' : '' }}>Dashboard</option>
                                                <option value="User Management" {{ old('group') == 'User Management' ? 'selected' : '' }}>User Management</option>
                                                <option value="Role Management" {{ old('group') == 'Role Management' ? 'selected' : '' }}>Role Management</option>
                                                <option value="Permission Management" {{ old('group') == 'Permission Management' ? 'selected' : '' }}>Permission Management</option>
                                                <option value="Customer Management" {{ old('group') == 'Customer Management' ? 'selected' : '' }}>Customer Management</option>
                                                <option value="Payment Management" {{ old('group') == 'Payment Management' ? 'selected' : '' }}>Payment Management</option>
                                                <option value="Settings" {{ old('group') == 'Settings' ? 'selected' : '' }}>Settings</option>
                                                <option value="Reports" {{ old('group') == 'Reports' ? 'selected' : '' }}>Reports</option>
                                            </select>
                                            @error('group')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group mb-3">
                                            <label for="custom_group" class="form-label">Atau Grup Kustom</label>
                                            <input type="text" class="form-control @error('custom_group') is-invalid @enderror" 
                                                   id="custom_group" name="custom_group" value="{{ old('custom_group') }}"
                                                   placeholder="Masukkan nama grup kustom">
                                            <small class="text-muted">Kosongkan jika menggunakan grup di atas</small>
                                            @error('custom_group')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-check form-switch mb-3">
                                            <input type="checkbox" class="form-check-input" 
                                                   id="is_active" name="is_active" value="1" 
                                                   {{ old('is_active', true) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_active">
                                                <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">toggle_on</i> Permission Aktif
                                            </label>
                                            <small class="text-muted d-block mt-1">Permission yang tidak aktif tidak dapat digunakan</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="form-group mt-4">
                            <div class="row">
                                <div class="col-md-6">
                                    <button type="submit" class="btn bg-gradient-primary mb-0 w-100">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">save</i> Simpan Permission
                                    </button>
                                </div>
                                <div class="col-md-6">
                                    <a href="{{ route('permission-management.index') }}" class="btn bg-gradient-secondary mb-0 w-100">
                                        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">arrow_back</i> Kembali
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Form validation
    const form = document.querySelector('form');
    const submitBtn = form.querySelector('button[type="submit"]');
    const groupSelect = document.getElementById('group');
    const customGroupInput = document.getElementById('custom_group');
    
    form.addEventListener('submit', function(e) {
        // Show loading state
        submitBtn.innerHTML = '<i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle; animation: spin 1s linear infinite;">sync</i> Menyimpan...';
        submitBtn.disabled = true;
    });
    
    // Handle group selection
    groupSelect.addEventListener('change', function() {
        if (this.value) {
            customGroupInput.value = '';
            customGroupInput.disabled = true;
        } else {
            customGroupInput.disabled = false;
        }
    });
    
    customGroupInput.addEventListener('input', function() {
        if (this.value) {
            groupSelect.value = '';
        }
    });
    
    // Auto-generate display name from name
    const nameInput = document.getElementById('name');
    const displayNameInput = document.getElementById('display_name');
    
    nameInput.addEventListener('input', function() {
        if (!displayNameInput.value) {
            const name = this.value;
            const parts = name.split('.');
            if (parts.length === 2) {
                const action = parts[1];
                const module = parts[0];
                const actionText = action.charAt(0).toUpperCase() + action.slice(1);
                const moduleText = module.charAt(0).toUpperCase() + module.slice(1);
                displayNameInput.value = `${actionText} ${moduleText}`;
            }
        }
    });
});
</script>
@endsection