@extends('layout.app')

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

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

<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 Role
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <form action="{{ route('role-management.update', $role) }}" 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;">badge</i>Informasi Role
                                        </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 Role <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                                   id="name" name="name" value="{{ old('name', $role->name) }}" required
                                                   placeholder="contoh: admin, operator, finance">
                                            <small class="text-muted">Nama role harus unik dan tidak boleh ada spasi</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', $role->display_name) }}" required
                                                   placeholder="contoh: Administrator, Operator, Finance">
                                            <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 role ini">{{ old('description', $role->description) }}</textarea>
                                            @error('description')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="form-check mb-3">
                                            <input type="checkbox" class="form-check-input" 
                                                   id="is_active" name="is_active" value="1" 
                                                   {{ old('is_active', $role->is_active) ? 'checked' : '' }}>
                                            <label class="form-check-label" for="is_active">
                                                Role Aktif
                                            </label>
                                            <small class="text-muted d-block">Role yang tidak aktif tidak dapat digunakan</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Permissions -->
                            <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;">key</i>Assign Permissions
                                        </h6>
                                    </div>
                                    <div class="card-body pt-0">
                                        @if($permissions->count() > 0)
                                            @foreach($permissions as $group => $groupPermissions)
                                            <div class="permission-group mb-4">
                                                <h6 class="text-primary font-weight-bold mb-3">
                                                    <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">folder</i>{{ $group }}
                                                </h6>
                                                <div class="row">
                                                    @foreach($groupPermissions as $permission)
                                                    <div class="col-md-6 mb-2">
                                                        <div class="form-check">
                                                            <input type="checkbox" class="form-check-input" 
                                                                   id="permission_{{ $permission->id }}" 
                                                                   name="permissions[]" value="{{ $permission->id }}"
                                                                   {{ in_array($permission->id, old('permissions', $role->permissions->pluck('id')->toArray())) ? 'checked' : '' }}>
                                                            <label class="form-check-label" for="permission_{{ $permission->id }}">
                                                                {{ $permission->display_name }}
                                                                @if($permission->description)
                                                                    <small class="text-muted d-block">{{ $permission->description }}</small>
                                                                @endif
                                                            </label>
                                                        </div>
                                                    </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                            @endforeach
                                        @else
                                            <div class="text-center py-4">
                                                <i class="material-symbols-rounded" style="font-size: 48px; color: #6c757d; margin-bottom: 1rem;">key</i>
                                                <h6 class="text-muted">Belum ada permission</h6>
                                                <p class="text-muted">Buat permission terlebih dahulu di menu Permission Management</p>
                                                <a href="{{ route('permission-management.index') }}" class="btn btn-sm bg-gradient-primary mb-0">
                                                    <i class="material-symbols-rounded me-2" style="font-size: 16px; vertical-align: middle;">add</i> Kelola Permission
                                                </a>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Form Actions -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <div class="card my-4">
                                    <div class="card-body pt-0">
                                        <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> Update Role
                                                </button>
                                            </div>
                                            <div class="col-md-6">
                                                <a href="{{ route('role-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>
                                </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"]');
    
    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;
    });
    
    // Select all permissions in a group
    function addSelectAllButtons() {
        const groups = document.querySelectorAll('.permission-group');
        groups.forEach(group => {
            const header = group.querySelector('h6');
            const selectAllBtn = document.createElement('button');
            selectAllBtn.type = 'button';
            selectAllBtn.className = 'btn btn-sm bg-gradient-primary mb-0 ms-2';
            selectAllBtn.innerHTML = '<i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">check_circle</i> Pilih Semua';
            selectAllBtn.onclick = function() {
                const checkboxes = group.querySelectorAll('input[type="checkbox"]');
                const allChecked = Array.from(checkboxes).every(cb => cb.checked);
                checkboxes.forEach(cb => cb.checked = !allChecked);
                this.innerHTML = allChecked ? 
                    '<i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">check_circle</i> Pilih Semua' : 
                    '<i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">cancel</i> Batal Pilih';
            };
            header.appendChild(selectAllBtn);
        });
    }
    
    addSelectAllButtons();
});
</script>
@endsection