@extends('layout.app')

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

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

<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 User
                    </h6>
                </div>
                <div class="card-body pt-3">
                    <form action="{{ route('user-management.update', $user) }}" method="POST" enctype="multipart/form-data">
                        @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;">person</i>Informasi Dasar
                                        </h6>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="input-group input-group-outline mb-3">
                                            <label for="username" class="form-label font-weight-bold">Username <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('username') is-invalid @enderror" 
                                                   id="username" name="username" value="{{ old('username', $user->username) }}" required>
                                            @error('username')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="input-group input-group-outline mb-3">
                                            <label for="name" class="form-label font-weight-bold">Nama <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('name') is-invalid @enderror" 
                                                   id="name" name="name" value="{{ old('name', $user->name) }}" required>
                                            @error('name')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="input-group input-group-outline mb-3">
                                            <label for="email" class="form-label font-weight-bold">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', $user->email) }}" required>
                                            @error('email')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="input-group input-group-outline mb-3">
                                            <label for="nama_lengkap" class="form-label font-weight-bold">Nama Lengkap <span class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('nama_lengkap') is-invalid @enderror" 
                                                   id="nama_lengkap" name="nama_lengkap" value="{{ old('nama_lengkap', $user->nama_lengkap) }}" required>
                                            @error('nama_lengkap')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Account Settings -->
                            <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;">settings</i>Pengaturan Akun
                                        </h6>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="input-group input-group-outline mb-3">
                                            <label for="password" class="form-label font-weight-bold">Password Baru</label>
                                            <input type="password" class="form-control @error('password') is-invalid @enderror" 
                                                   id="password" name="password">
                                            <small class="text-muted">Kosongkan jika tidak ingin mengubah password</small>
                                            @error('password')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="input-group input-group-outline mb-3">
                                            <label for="password_confirmation" class="form-label font-weight-bold">Konfirmasi Password Baru</label>
                                            <input type="password" class="form-control" 
                                                   id="password_confirmation" name="password_confirmation">
                                        </div>

                                        <div class="input-group input-group-outline mb-3">
                                            <label for="role" class="form-label font-weight-bold">Role <span class="text-danger">*</span></label>
                                            <select class="form-control @error('role') is-invalid @enderror" id="role" name="role" required>
                                                <option value="">Pilih Role</option>
                                                <option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>Admin</option>
                                                <option value="operator" {{ old('role', $user->role) == 'operator' ? 'selected' : '' }}>Operator</option>
                                                <option value="finance" {{ old('role', $user->role) == 'finance' ? 'selected' : '' }}>Finance</option>
                                                <option value="support" {{ old('role', $user->role) == 'support' ? 'selected' : '' }}>Support</option>
                                            </select>
                                            @error('role')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>

                                        <div class="input-group input-group-outline mb-3">
                                            <label for="status" class="form-label font-weight-bold">Status <span class="text-danger">*</span></label>
                                            <select class="form-control @error('status') is-invalid @enderror" id="status" name="status" required>
                                                <option value="">Pilih Status</option>
                                                <option value="Aktif" {{ old('status', $user->status) == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                                <option value="Nonaktif" {{ old('status', $user->status) == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                            </select>
                                            @error('status')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Additional Settings -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="card my-4">
                                    <div class="card-header pb-0 pt-3 bg-gradient-info text-white">
                                        <h6 class="mb-0">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">badge</i>Role & Permission
                                        </h6>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label font-weight-bold">Assign Roles</label>
                                            @foreach($roles as $role)
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" 
                                                       id="role_{{ $role->id }}" name="roles[]" value="{{ $role->id }}"
                                                       {{ in_array($role->id, old('roles', $user->roles->pluck('id')->toArray())) ? 'checked' : '' }}>
                                                <label class="form-check-label" for="role_{{ $role->id }}">
                                                    {{ $role->display_name }}
                                                    @if($role->description)
                                                        <small class="text-muted d-block">{{ $role->description }}</small>
                                                    @endif
                                                </label>
                                            </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="card my-4">
                                    <div class="card-header pb-0 pt-3 bg-gradient-warning text-white">
                                        <h6 class="mb-0">
                                            <i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">image</i>Avatar & Pelanggan
                                        </h6>
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="input-group input-group-outline mb-3">
                                            <label for="avatar" class="form-label font-weight-bold">Avatar</label>
                                            <input type="file" class="form-control @error('avatar') is-invalid @enderror" 
                                                   id="avatar" name="avatar" accept="image/*">
                                            <small class="text-muted">Format: JPG, PNG, GIF (Max: 2MB)</small>
                                            @error('avatar')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                            
                                            @if($user->avatar)
                                                <div class="mt-2">
                                                    <img src="{{ Storage::url($user->avatar) }}" alt="Current Avatar" class="img-thumbnail" style="max-width: 150px; max-height: 150px;">
                                                    <p class="text-muted small mt-1">Avatar saat ini</p>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="input-group input-group-outline mb-3">
                                            <label for="pelanggan_id" class="form-label font-weight-bold">Link ke Pelanggan</label>
                                            <select class="form-control @error('pelanggan_id') is-invalid @enderror" id="pelanggan_id" name="pelanggan_id">
                                                <option value="">Pilih Pelanggan (Opsional)</option>
                                                @foreach($pelanggans as $pelanggan)
                                                <option value="{{ $pelanggan->id }}" {{ old('pelanggan_id', $user->pelanggan_id) == $pelanggan->id ? 'selected' : '' }}>
                                                    {{ $pelanggan->nama }} - {{ $pelanggan->nomor_pelanggan }}
                                                </option>
                                                @endforeach
                                            </select>
                                            @error('pelanggan_id')
                                                <div class="invalid-feedback d-block">{{ $message }}</div>
                                            @enderror
                                        </div>
                                    </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 User
                                                </button>
                                            </div>
                                            <div class="col-md-6">
                                                <a href="{{ route('user-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) {
        const password = document.getElementById('password').value;
        const passwordConfirmation = document.getElementById('password_confirmation').value;
        
        if (password && password !== passwordConfirmation) {
            e.preventDefault();
            alert('Password dan konfirmasi password tidak sama!');
            return false;
        }
        
        // 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;
    });
    
    // Avatar preview
    const avatarInput = document.getElementById('avatar');
    avatarInput.addEventListener('change', function(e) {
        const file = e.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                // Create preview if not exists
                let preview = document.getElementById('avatar-preview');
                if (!preview) {
                    preview = document.createElement('img');
                    preview.id = 'avatar-preview';
                    preview.className = 'img-thumbnail mt-2';
                    preview.style.maxWidth = '150px';
                    preview.style.maxHeight = '150px';
                    avatarInput.parentNode.appendChild(preview);
                }
                preview.src = e.target.result;
            };
            reader.readAsDataURL(file);
        }
    });
});
</script>
@endsection