@extends('layouts.app')

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

@section('content_body')
    <!-- Header & Breadcrumbs -->
    <x-page-header 
        title="Edit Profil Desa" 
        subtitle="Ubah informasi identitas resmi desa, kontak, dan penandatangan surat."
        :breadcrumbs="[
            'Dashboard' => route('dashboard'),
            'Profil Desa' => route('village-profile.show'),
            'Edit Profil' => route('village-profile.edit')
        ]"
    >
        <x-slot name="buttons">
            <a href="{{ route('village-profile.show') }}" 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 id="editProfileForm" action="{{ route('village-profile.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                @method('PUT')

                <div class="row">
                    <!-- Bagian Kiri: Upload Logo -->
                    <div class="col-lg-4 mb-4 text-center border-right" style="border-color: #f1f5f9 !important;">
                        <div class="px-2">
                            <span class="text-xs font-weight-bold text-uppercase text-muted d-block mb-3">Logo Resmi Desa</span>
                            
                            <div class="d-inline-block p-3 border rounded-circle bg-light shadow-xs mb-3" style="width: 150px; height: 150px; overflow: hidden;">
                                <img id="logoPreview" src="{{ $profile->logo ? asset('storage/' . $profile->logo) : 'https://upload.wikimedia.org/wikipedia/commons/e/ee/Lambang_kabupaten_nias_utara.jpg' }}" alt="Logo Preview" class="img-fluid object-fit-contain" style="height: 100%; width: 100%;">
                            </div>

                            <div class="form-group mb-3">
                                <div class="custom-file text-left">
                                    <input type="file" name="logo" class="custom-file-input @error('logo') is-invalid @enderror" id="logoInput" accept="image/png, image/jpg, image/jpeg" onchange="previewImage(event)">
                                    <label class="custom-file-label" for="logoInput">Pilih logo baru</label>
                                    @error('logo')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <small class="text-xs text-muted d-block mt-2">Format: PNG, JPG, JPEG. Ukuran maks: 2 MB.</small>
                            </div>
                        </div>
                    </div>

                    <!-- Bagian Kanan: Input Form Fields -->
                    <div class="col-lg-8 mb-4">
                        <div class="px-2">
                            
                            <!-- A. Identitas Desa -->
                            <h6 class="font-weight-bold text-primary text-uppercase mb-3" style="letter-spacing: 0.05em; font-size: 0.85rem;"><i class="fas fa-university mr-2"></i> Identitas Desa</h6>
                            <div class="row">
                                <div class="col-md-6 form-group mb-3">
                                    <label for="village_name" class="font-weight-bold text-secondary text-sm">Nama Desa <span class="text-danger">*</span></label>
                                    <input type="text" name="village_name" id="village_name" class="form-control @error('village_name') is-invalid @enderror" value="{{ old('village_name', $profile->village_name) }}" placeholder="Contoh: Desa Siofabanua" required style="border-radius: 8px;">
                                    @error('village_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-6 form-group mb-3">
                                    <label for="village_code" class="font-weight-bold text-secondary text-sm">Kode Desa</label>
                                    <input type="text" name="village_code" id="village_code" class="form-control @error('village_code') is-invalid @enderror" value="{{ old('village_code', $profile->village_code) }}" placeholder="Contoh: 12.24.02.2001" style="border-radius: 8px;">
                                    @error('village_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-8 form-group mb-3">
                                    <label for="address" class="font-weight-bold text-secondary text-sm">Alamat Kantor <span class="text-danger">*</span></label>
                                    <input type="text" name="address" id="address" class="form-control @error('address') is-invalid @enderror" value="{{ old('address', $profile->address) }}" placeholder="Contoh: Jalan Arah Tuhemberua Km. 28" required style="border-radius: 8px;">
                                    @error('address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 form-group mb-3">
                                    <label for="postal_code" class="font-weight-bold text-secondary text-sm">Kode Pos <span class="text-danger">*</span></label>
                                    <input type="text" name="postal_code" id="postal_code" class="form-control @error('postal_code') is-invalid @enderror" value="{{ old('postal_code', $profile->postal_code) }}" placeholder="Contoh: 22852" required style="border-radius: 8px;">
                                    @error('postal_code')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

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

                            <!-- B. Wilayah Administrasi -->
                            <h6 class="font-weight-bold text-primary text-uppercase mb-3" style="letter-spacing: 0.05em; font-size: 0.85rem;"><i class="fas fa-map-marked-alt mr-2"></i> Wilayah Administrasi</h6>
                            <div class="row">
                                <div class="col-md-4 form-group mb-3">
                                    <label for="district_name" class="font-weight-bold text-secondary text-sm">Kecamatan <span class="text-danger">*</span></label>
                                    <input type="text" name="district_name" id="district_name" class="form-control @error('district_name') is-invalid @enderror" value="{{ old('district_name', $profile->district_name) }}" placeholder="Contoh: Tuhemberua" required style="border-radius: 8px;">
                                    @error('district_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 form-group mb-3">
                                    <label for="regency_name" class="font-weight-bold text-secondary text-sm">Kabupaten/Kota <span class="text-danger">*</span></label>
                                    <input type="text" name="regency_name" id="regency_name" class="form-control @error('regency_name') is-invalid @enderror" value="{{ old('regency_name', $profile->regency_name) }}" placeholder="Contoh: Nias Utara" required style="border-radius: 8px;">
                                    @error('regency_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 form-group mb-3">
                                    <label for="province_name" class="font-weight-bold text-secondary text-sm">Provinsi <span class="text-danger">*</span></label>
                                    <input type="text" name="province_name" id="province_name" class="form-control @error('province_name') is-invalid @enderror" value="{{ old('province_name', $profile->province_name) }}" placeholder="Contoh: Sumatera Utara" required style="border-radius: 8px;">
                                    @error('province_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

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

                            <!-- C. Kontak Resmi -->
                            <h6 class="font-weight-bold text-primary text-uppercase mb-3" style="letter-spacing: 0.05em; font-size: 0.85rem;"><i class="fas fa-phone-alt mr-2"></i> Kontak Resmi</h6>
                            <div class="row">
                                <div class="col-md-4 form-group mb-3">
                                    <label for="email" class="font-weight-bold text-secondary text-sm">Email Resmi <span class="text-danger">*</span></label>
                                    <input type="email" name="email" id="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email', $profile->email) }}" placeholder="Contoh: desa.siofabanua@gmail.com" required style="border-radius: 8px;">
                                    @error('email')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 form-group mb-3">
                                    <label for="phone" class="font-weight-bold text-secondary text-sm">Nomor Telepon <span class="text-danger">*</span></label>
                                    <input type="text" name="phone" id="phone" class="form-control @error('phone') is-invalid @enderror" value="{{ old('phone', $profile->phone) }}" placeholder="Contoh: 081234567890" required style="border-radius: 8px;">
                                    @error('phone')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 form-group mb-3">
                                    <label for="website" class="font-weight-bold text-secondary text-sm">Website Resmi</label>
                                    <input type="url" name="website" id="website" class="form-control @error('website') is-invalid @enderror" value="{{ old('website', $profile->website) }}" placeholder="Contoh: https://siofabanua.desa.id" style="border-radius: 8px;">
                                    @error('website')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

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

                            <!-- D. Penandatangan Surat -->
                            <h6 class="font-weight-bold text-primary text-uppercase mb-3" style="letter-spacing: 0.05em; font-size: 0.85rem;"><i class="fas fa-signature mr-2"></i> Pejabat Penandatangan Surat</h6>
                            <div class="row">
                                <div class="col-md-5 form-group mb-3">
                                    <label for="signer_name" class="font-weight-bold text-secondary text-sm">Nama Lengkap Pejabat <span class="text-danger">*</span></label>
                                    <input type="text" name="signer_name" id="signer_name" class="form-control @error('signer_name') is-invalid @enderror" value="{{ old('signer_name', $profile->signer_name) }}" placeholder="Contoh: WA'OZATULO ZEGA, S.Pd." required style="border-radius: 8px;">
                                    @error('signer_name')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-4 form-group mb-3">
                                    <label for="signer_position" class="font-weight-bold text-secondary text-sm">Jabatan Resmi <span class="text-danger">*</span></label>
                                    <input type="text" name="signer_position" id="signer_position" class="form-control @error('signer_position') is-invalid @enderror" value="{{ old('signer_position', $profile->signer_position) }}" placeholder="Contoh: Pj. Kepala Desa Siofabanua" required style="border-radius: 8px;">
                                    @error('signer_position')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="col-md-3 form-group mb-3">
                                    <label for="signer_nip" class="font-weight-bold text-secondary text-sm">NIP Pejabat</label>
                                    <input type="text" name="signer_nip" id="signer_nip" class="form-control @error('signer_nip') is-invalid @enderror" value="{{ old('signer_nip', $profile->signer_nip) }}" placeholder="Contoh: 198005122008011002" style="border-radius: 8px;">
                                    @error('signer_nip')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

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

                <!-- Form Action Buttons -->
                <div class="text-right">
                    <a href="{{ route('village-profile.show') }}" class="btn btn-light border mr-2">Batal</a>
                    <button type="submit" id="saveButton" class="btn btn-primary">
                        <i class="fas fa-save mr-1"></i> Simpan Perubahan
                    </button>
                </div>

            </form>
        </div>
    </div>
@endsection

@push('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        // Custom File Input Label update
        document.getElementById('logoInput').addEventListener('change', function(e){
            var fileName = e.target.files[0].name;
            var nextSibling = e.target.nextElementSibling;
            nextSibling.innerText = fileName;
        });

        // Image upload client preview
        function previewImage(event) {
            var reader = new FileReader();
            reader.onload = function(){
                var output = document.getElementById('logoPreview');
                output.src = reader.result;
            };
            reader.readAsDataURL(event.target.files[0]);
        }

        // SweetAlert2 Form Submit Confirmation
        $(function() {
            $('#editProfileForm').on('submit', function(e) {
                e.preventDefault();
                let form = this;
                
                Swal.fire({
                    title: 'Konfirmasi Penyimpanan',
                    text: 'Apakah Anda yakin ingin memperbarui data profil resmi desa? Perubahan ini akan langsung memengaruhi dokumen surat baru yang diterbitkan.',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: 'var(--primary-color, #2563eb)',
                    cancelButtonColor: '#64748b',
                    confirmButtonText: 'Ya, Simpan!',
                    cancelButtonText: 'Batal',
                    customClass: {
                        confirmButton: 'btn btn-primary px-4 py-2 font-weight-bold',
                        cancelButton: 'btn btn-secondary px-4 py-2 font-weight-bold'
                    },
                    buttonsStyling: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Change button status to loading
                        let submitBtn = $('#saveButton');
                        submitBtn.prop('disabled', true);
                        submitBtn.html('<i class="fas fa-spinner fa-spin mr-1"></i> Menyimpan...');
                        
                        form.submit();
                    }
                });
            });
        });
    </script>
@endpush