@extends('layouts.app')

@section('subtitle', 'Edit Perangkat Desa')

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Edit Perangkat Desa" 
        subtitle="Perbarui informasi data perangkat desa dan susunan organisasi."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Informasi Desa' => route('informasi-desa.index'),
            'Perangkat Desa' => route('perangkat-desa.index'),
            'Edit Perangkat' => route('perangkat-desa.edit', $perangkatDesa->id)
        ]"
    >
        <x-slot name="buttons">
            <a href="{{ route('perangkat-desa.index') }}" class="btn btn-light border mr-2">
                <i class="fas fa-arrow-left mr-1"></i> Batal
            </a>
        </x-slot>
    </x-page-header>

    <div class="card border-0 shadow-sm rounded-xl mb-4" style="border-radius: 12px; background: #ffffff;">
        <div class="card-body p-4">
            <form action="{{ route('perangkat-desa.update', $perangkatDesa->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row">
                    <!-- Column Left: Form Fields -->
                    <div class="col-lg-8">
                        <div class="form-group mb-3">
                            <label for="nama" class="font-weight-bold text-secondary text-sm">Nama Lengkap <span class="text-danger">*</span></label>
                            <input type="text" name="nama" id="nama" class="form-control @error('nama') is-invalid @enderror" value="{{ old('nama', $perangkatDesa->nama) }}" placeholder="Tuliskan nama lengkap beserta gelar..." required style="border-radius: 8px;">
                            @error('nama')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group mb-3">
                            <label for="jabatan" class="font-weight-bold text-secondary text-sm">Jabatan Resmi <span class="text-danger">*</span></label>
                            <input type="text" name="jabatan" id="jabatan" class="form-control @error('jabatan') is-invalid @enderror" value="{{ old('jabatan', $perangkatDesa->jabatan) }}" placeholder="Contoh: Kepala Desa, Sekretaris Desa, Kaur Keuangan..." required style="border-radius: 8px;">
                            @error('jabatan')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="row">
                            <div class="col-md-6 form-group mb-3">
                                <label for="atasan_id" class="font-weight-bold text-secondary text-sm">Atasan Langsung (Struktur Organisasi)</label>
                                <select name="atasan_id" id="atasan_id" class="form-control @error('atasan_id') is-invalid @enderror" style="border-radius: 8px;">
                                    <option value="">-- Tanpa Atasan (Kepala Desa) --</option>
                                    @foreach($atasanList as $atasan)
                                        <option value="{{ $atasan->id }}" {{ old('atasan_id', $perangkatDesa->atasan_id) == $atasan->id ? 'selected' : '' }}>
                                            {{ $atasan->nama }} ({{ $atasan->jabatan }})
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-xs text-muted">Tentukan atasan langsung untuk memetakan hirarki pohon organisasi.</small>
                                @error('atasan_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <input type="hidden" name="urutan" value="{{ old('urutan', $perangkatDesa->urutan) }}">

                            <div class="col-md-6 form-group mb-3">
                                <label for="status" class="font-weight-bold text-secondary text-sm">Status <span class="text-danger">*</span></label>
                                <select name="status" id="status" class="form-control @error('status') is-invalid @enderror" required style="border-radius: 8px;">
                                    <option value="aktif" {{ old('status', $perangkatDesa->status) === 'aktif' ? 'selected' : '' }}>Aktif</option>
                                    <option value="nonaktif" {{ old('status', $perangkatDesa->status) === 'nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- Column Right: Avatar Upload -->
                    <div class="col-lg-4 text-center border-left" style="border-color: #f1f5f9 !important;">
                        <div class="px-3">
                            <span class="text-xs font-weight-bold text-uppercase text-muted d-block mb-3">Foto Profil Perangkat</span>
                            
                            <div class="d-inline-block p-2 border rounded-circle bg-light shadow-xs mb-3" style="width: 150px; height: 150px; overflow: hidden; border-radius: 50%;">
                                @if($perangkatDesa->foto)
                                    <img id="avatarPreview" src="{{ asset('storage/' . $perangkatDesa->foto) }}" alt="Foto Preview" class="img-fluid rounded-circle" style="height: 100%; width: 100%; object-fit: cover;">
                                @else
                                    <img id="avatarPreview" src="https://via.placeholder.com/150?text=Foto" alt="Foto Preview" class="img-fluid rounded-circle" style="height: 100%; width: 100%; object-fit: cover;">
                                @endif
                            </div>

                            <div class="custom-file text-left mb-2">
                                <input type="file" name="foto" class="custom-file-input @error('foto') is-invalid @enderror" id="fotoInput" accept="image/png, image/jpg, image/jpeg, image/webp" onchange="previewFile(event)">
                                <label class="custom-file-label text-sm" for="fotoInput">Pilih foto...</label>
                                @error('foto')
                                    <div class="invalid-feedback d-block mt-2">{{ $message }}</div>
                                @enderror
                            </div>
                            <small class="text-xs text-muted d-block">Maksimal: 2 MB. Format: JPG, PNG, WEBP.</small>
                        </div>
                    </div>
                </div>

                <hr class="my-4" style="border-top: 1px solid #f1f5f9;">

                <!-- Submit Button -->
                <div class="text-right">
                    <a href="{{ route('perangkat-desa.index') }}" class="btn btn-light border mr-2">Batal</a>
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Simpan Perubahan
                    </button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
<script>
    function previewFile(event) {
        var reader = new FileReader();
        reader.onload = function(){
            var output = document.getElementById('avatarPreview');
            output.src = reader.result;
        };
        reader.readAsDataURL(event.target.files[0]);

        var fileName = event.target.files[0].name;
        var label = event.target.nextElementSibling;
        label.innerText = fileName;
    }
</script>
@endpush