@extends('layouts.app')

@section('title', 'Edit User')

@section('content')
<div class="container">
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h3 class="mb-1"><i class="bi bi-pencil-square me-2"></i>Edit User</h3>
                    <p class="text-muted mb-0">Perbarui data user</p>
                </div>
                <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
                    <i class="bi bi-arrow-left me-1"></i> Kembali
                </a>
            </div>
        </div>
    </div>

    <div class="card card-gov shadow-sm">
        <div class="card-header">
            <h5 class="mb-0"><i class="bi bi-file-earmark-text me-2"></i>Form Edit User</h5>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.users.update', $userData->id) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label for="name" class="form-label">Nama Lengkap <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('name') is-invalid @enderror"
                               id="name" name="name" value="{{ old('name', $userData->name) }}"
                               placeholder="Masukkan nama lengkap" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="email" class="form-label">Email <span class="text-danger">*</span></label>
                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                               id="email" name="email" value="{{ old('email', $userData->email) }}"
                               placeholder="contoh@email.com" required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control @error('password') is-invalid @enderror"
                               id="password" name="password"
                               placeholder="Kosongkan jika tidak ingin mengubah password">
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Minimal 6 karakter. Kosongkan jika tidak ingin mengubah.</small>
                    </div>

                    <div class="col-md-6 mb-3">
                        <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                        <select class="form-select @error('role') is-invalid @enderror"
                                id="role" name="role" required>
                            <option value="">-- Pilih Role --</option>
                            <option value="admin" {{ old('role', $userData->role) == 'admin' ? 'selected' : '' }}>Admin</option>
                            <option value="verifikator" {{ old('role', $userData->role) == 'verifikator' ? 'selected' : '' }}>Verifikator</option>
                            <option value="opd" {{ old('role', $userData->role) == 'opd' ? 'selected' : '' }}>OPD</option>
                        </select>
                        @error('role')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="col-md-6 mb-3" id="opdField" style="display: {{ old('role', $userData->role) == 'opd' ? 'block' : 'none' }};">
                        <label for="opd" class="form-label">OPD <span class="text-danger">*</span></label>
                        <select class="form-select @error('opd') is-invalid @enderror"
                                id="opd" name="opd">
                            <option value="">-- Pilih OPD --</option>
                            @foreach($opdList as $opdItem)
                                <option value="{{ $opdItem->name }}" {{ old('opd', $userData->opd) == $opdItem->name ? 'selected' : '' }}>
                                    {{ $opdItem->name }}
                                </option>
                            @endforeach
                        </select>
                        @error('opd')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Hanya untuk role OPD</small>
                    </div>
                </div>

                <hr class="my-4">

                <div class="d-flex justify-content-between">
                    <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
                        <i class="bi bi-x-circle me-1"></i> Batal
                    </a>
                    <button type="submit" class="btn btn-gov-primary">
                        <i class="bi bi-save me-1"></i> Update User
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.getElementById('role').addEventListener('change', function() {
    const opdField = document.getElementById('opdField');
    const opdSelect = document.getElementById('opd');

    if (this.value === 'opd') {
        opdField.style.display = 'block';
        opdSelect.required = true;
    } else {
        opdField.style.display = 'none';
        opdSelect.required = false;
        opdSelect.value = '';
    }
});
</script>
@endpush
@endsection
