@extends('app')
@section('content')
    <div class="container-fluid px-4">
        <h5 class="mt-4">Edit User</h5>
        <div class="row">
            <div class="col-md-6">
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-user me-1"></i>
                        Form Edit User
                    </div>
                    <div class="card-body">
                        <form action="{{ route('admin.users.update', $user->id) }}" method="POST"
                            enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="mb-3">
                                <label class="form-label">Nama</label>
                                <input type="text" class="form-control @error('nama') is-invalid @enderror"
                                    name="nama" value="{{ old('nama', $user->nama) }}" placeholder="Masukan nama user">
                                @error('nama')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Nomor HP</label>
                                <input type="tel" class="form-control @error('nomor_hp') is-invalid @enderror"
                                    name="nomor_hp" value="{{ old('nomor_hp', $user->nomor_hp) }}"
                                    placeholder="Masukan nomor HP">
                                @error('nomor_hp')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                    name="email" value="{{ old('email', $user->email) }}" placeholder="Masukan email">
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Foto KTP</label>
                                <div class="row">
                                    <div class="col-lg-4 mb-2 mb-lg-0">
                                        <img id="previewKtp" class="img-fluid"
                                            src="{{ $user->foto_ktp ? asset('storage/' . $user->foto_ktp) : asset('assets/img/image.png') }}">
                                    </div>
                                    <div class="col-lg-8">
                                        <input type="file" class="form-control @error('foto_ktp') is-invalid @enderror"
                                            name="foto_ktp" id="foto_ktp" accept="image/*">
                                        @error('foto_ktp')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Password <small class="text-muted">(Kosongkan jika tidak ingin
                                        mengubah)</small></label>
                                <input type="password" class="form-control @error('password') is-invalid @enderror"
                                    name="password" placeholder="Masukan password baru">
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Role</label>
                                <select class="form-select @error('role') is-invalid @enderror" name="role">
                                    <option value="">Pilih Role</option>
                                    <option value="admin" {{ old('role', $user->role) == 'admin' ? 'selected' : '' }}>
                                        Admin</option>
                                    <option value="teknisi" {{ old('role', $user->role) == 'teknisi' ? 'selected' : '' }}>
                                        Teknisi</option>
                                    <option value="pelanggan"
                                        {{ old('role', $user->role) == 'pelanggan' ? 'selected' : '' }}>Pelanggan</option>
                                </select>
                                @error('role')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Status Aktif</label>
                                <select class="form-select @error('is_active') is-invalid @enderror" name="is_active">
                                    <option value="1"
                                        {{ old('is_active', $user->is_active) == '1' ? 'selected' : '' }}>Aktif</option>
                                    <option value="0"
                                        {{ old('is_active', $user->is_active) == '0' ? 'selected' : '' }}>Tidak Aktif
                                    </option>
                                </select>
                                @error('is_active')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <a href="javascript:window.history.back()" class="btn btn-secondary">Batal</a>
                            <button type="submit" class="btn btn-primary">Update User</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        document.getElementById('foto_ktp').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    document.getElementById('previewKtp').src = e.target.result;
                }
                reader.readAsDataURL(file);
            }
        });
    </script>
@endsection