@extends('layout.app')

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

@section('content')
<x-material-page-header 
    title="Edit Permission" 
    :breadcrumbs="[
        ['name' => 'Manajemen Permission', 'url' => route('permission-management.index')],
        ['name' => 'Edit 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;">edit</i> Form Edit Permission
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <form action="{{ route('permission-management.update', $permission) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <!-- Basic Information -->
                            <div class="col-md-6">
                                <div class="card my-4">
                                    <div class="card-header pb-0 pt-3 bg-gradient-primary text-white">
                                        <h6 class="mb-0">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">key</i>Informasi Permission
                                        </h6>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="input-group input-group-outline mb-3">
                                            <label for="name" class="form-label font-weight-bold">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', $permission->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="input-group input-group-outline mb-3">
                                            <label for="display_name" class="form-label font-weight-bold">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', $permission->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="input-group input-group-outline mb-3">
                                            <label for="description" class="form-label font-weight-bold">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', $permission->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 my-4">
                                    <div class="card-header pb-0 pt-3 bg-gradient-success text-white">
                                        <h6 class="mb-0">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">folder</i>Grup & Status
                                        </h6>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="form-group">
                                            <label for="group" class="form-label font-weight-bold">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', $permission->group) == 'Dashboard' ? 'selected' : '' }}>Dashboard</option>
                                                <option value="User Management" {{ old('group', $permission->group) == 'User Management' ? 'selected' : '' }}>User Management</option>
                                                <option value="Role Management" {{ old('group', $permission->group) == 'Role Management' ? 'selected' : '' }}>Role Management</option>
                                                <option value="Permission Management" {{ old('group', $permission->group) == 'Permission Management' ? 'selected' : '' }}>Permission Management</option>
                                                <option value="Customer Management" {{ old('group', $permission->group) == 'Customer Management' ? 'selected' : '' }}>Customer Management</option>
                                                <option value="Payment Management" {{ old('group', $permission->group) == 'Payment Management' ? 'selected' : '' }}>Payment Management</option>
                                                <option value="Settings" {{ old('group', $permission->group) == 'Settings' ? 'selected' : '' }}>Settings</option>
                                                <option value="Reports" {{ old('group', $permission->group) == 'Reports' ? 'selected' : '' }}>Reports</option>
                                            </select>
                                            @error('group')
                                                <div class="invalid-feedback">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label for="custom_group" class="form-label font-weight-bold">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">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <div class="custom-control custom-checkbox">
                                                <input type="checkbox" class="custom-control-input" 
                                                       id="is_active" name="is_active" value="1" 
                                                       {{ old('is_active', $permission->is_active) ? 'checked' : '' }}>
                                                <label class="custom-control-label" for="is_active">
                                                    Permission Aktif
                                                </label>
                                            </div>
                                            <small class="text-muted">Permission yang tidak aktif tidak dapat digunakan</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="card shadow-sm">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <button type="submit" class="btn btn-primary btn-block">
                                                    <i class="ni ni-check-bold"></i> Update Permission
                                                </button>
                                            </div>
                                            <div class="col-md-6">
                                                <a href="{{ route('permission-management.index') }}" class="btn btn-secondary btn-block">
                                                    <i class="ni ni-bold-left"></i> Kembali
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </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 = '';
        }
    });
});
</script>
@endsection