@extends('layout.main')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
    <div class="card">
        <div class="card-header border-bottom mb-4">
            <h5 class="card-title mb-0">Edit Profile</h5>
        </div>
        
        <div class="card-body">
            <form id="editProfileForm" action="{{ route('profile.update', $profile->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="_method" value="PUT">
                <input type="hidden" id="edit-profile-id" name="id" value="{{ $profile->id }}">
                
                <h6 class="mb-3">Informasi Akun</h6>
                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="edit-profile-nama">Nama Lengkap<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit-profile-nama" name="nama" value="{{ $profile->nama }}" />
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="edit-profile-email">Email<span class="text-danger">*</span></label>
                        <input type="email" class="form-control" id="edit-profile-email" name="email" value="{{ $profile->email }}" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="edit-profile-telepon">No. Telepon<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit-profile-telepon" name="telepon" value="{{ $profile->telepon }}" />
                    </div>
                </div>

                <hr class="my-4">
                <h6 class="mb-3">Lokasi & Alamat</h6>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="edit-profile-provinsi">Provinsi</label>
                        <select id="edit-profile-provinsi" class="select2 form-select" data-placeholder="Pilih Provinsi">
                            <option value="">Pilih Provinsi</option>
                            @php 
                                $provId = $profile->desakelurahan->kecamatan->kabupatenkota->provinsi_id ?? null; 
                            @endphp
                            @foreach($provinsi as $prov)
                                <option value="{{ $prov->id }}" {{ $provId == $prov->id ? 'selected' : '' }}>{{ $prov->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="edit-profile-kabupaten">Kabupaten/Kota</label>
                        <select id="edit-profile-kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota">
                            @if($profile->desakelurahan)
                                <option value="{{ $profile->desakelurahan->kecamatan->kabupaten_kota_id }}" selected>
                                    {{ $profile->desakelurahan->kecamatan->kabupatenkota->nama }}
                                </option>
                            @else
                                <option value="">Pilih Kabupaten/Kota</option>
                            @endif
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label" for="edit-profile-kecamatan">Kecamatan</label>
                        <select id="edit-profile-kecamatan" class="select2 form-select" data-placeholder="Pilih Kecamatan">
                            @if($profile->desakelurahan)
                                <option value="{{ $profile->desakelurahan->kecamatan_id }}" selected>
                                    {{ $profile->desakelurahan->kecamatan->nama }}
                                </option>
                            @else
                                <option value="">Pilih Kecamatan</option>
                            @endif
                        </select>
                    </div>

                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="edit-profile-desa">Desa/Kelurahan<span class="text-danger">*</span></label>
                        <select id="edit-profile-desa" name="desa_kelurahan_id" class="select2 form-select" data-placeholder="Pilih Desa/Kelurahan">
                            @if($profile->desakelurahan)
                                <option value="{{ $profile->desa_kelurahan_id }}" selected>
                                    {{ $profile->desakelurahan->nama }}
                                </option>
                            @else
                                <option value="">Pilih Desa/Kelurahan</option>
                            @endif
                        </select>
                    </div>
                </div>

                <div class="mb-4">
                    <label class="form-label" for="edit-profile-alamat">Alamat Lengkap</label>
                    <textarea class="form-control" id="edit-profile-alamat" name="alamat" rows="2">{{ $profile->alamat }}</textarea>
                </div>

                <hr class="my-4">
                <h6 class="mb-3">Dokumen Pribadi</h6>
                <small class="text-muted d-block mb-3">*Biarkan field upload kosong jika tidak ingin mengubah dokumen lama.</small>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="edit-profile-no-ktp">NIK (KTP)</label>
                        <input type="text" class="form-control" id="edit-profile-no-ktp" name="ktp" value="{{ $profile->ktp }}" />
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="edit-profile-no-kk">No. KK</label>
                        <input type="text" class="form-control" id="edit-profile-no-kk" name="kk" value="{{ $profile->kk }}" />
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="edit-profile-file-ktp">Ganti File KTP</label>
                        <input type="file" class="form-control" id="edit-profile-file-ktp" name="file_ktp" accept="image/*,.pdf" />
                        
                        @php 
                            $hasKtp = !empty($profile->path_ktp);
                            $isKtpPdf = $hasKtp && strtolower(pathinfo($profile->path_ktp, PATHINFO_EXTENSION)) === 'pdf';
                        @endphp
                        
                        <div id="preview-container-ktp" class="mt-3 {{ $hasKtp ? '' : 'd-none' }}">
                            <img id="preview-image-ktp" src="{{ $hasKtp && !$isKtpPdf ? asset('storage/' . $profile->path_ktp) : '' }}" alt="Preview KTP" class="img-thumbnail {{ $hasKtp && !$isKtpPdf ? '' : 'd-none' }}" style="width: 100%; max-height: 250px; object-fit: contain; background-color: #f8f9fa;">
                            <div id="preview-pdf-ktp" class="badge bg-label-danger p-2 w-100 {{ $isKtpPdf ? '' : 'd-none' }}"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF (Tersimpan)</div>
                        </div>
                    </div>

                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label" for="edit-profile-file-kk">Ganti File KK</label>
                        <input type="file" class="form-control" id="edit-profile-file-kk" name="file_kk" accept="image/*,.pdf" />
                        
                        @php 
                            $hasKk = !empty($profile->path_kk);
                            $isKkPdf = $hasKk && strtolower(pathinfo($profile->path_kk, PATHINFO_EXTENSION)) === 'pdf';
                        @endphp

                        <div id="preview-container-kk" class="mt-3 {{ $hasKk ? '' : 'd-none' }}">
                            <img id="preview-image-kk" src="{{ $hasKk && !$isKkPdf ? asset('storage/' . $profile->path_kk) : '' }}" alt="Preview KK" class="img-thumbnail {{ $hasKk && !$isKkPdf ? '' : 'd-none' }}" style="width: 100%; max-height: 250px; object-fit: contain; background-color: #f8f9fa;">
                            <div id="preview-pdf-kk" class="badge bg-label-danger p-2 w-100 {{ $isKkPdf ? '' : 'd-none' }}"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF (Tersimpan)</div>
                        </div>
                    </div>
                </div>

                <div class="mt-4 text-end">
                    <a href="{{ route('profile.index') }}" class="btn btn-label-secondary me-2">Batal</a>
                    <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    'use strict';
    $(document).ready(function () {
        $('.select2').select2();

        function handleFilePreview(inputId, containerId, imageId, pdfId) {
            $(`#${inputId}`).on('change', function(event) {
                const file = event.target.files[0];
                const $container = $(`#${containerId}`);
                const $image = $(`#${imageId}`);
                const $pdf = $(`#${pdfId}`);

                if (file) {
                    $container.removeClass('d-none');
                    if (file.type.match('image.*')) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            $image.attr('src', e.target.result).removeClass('d-none');
                            $pdf.addClass('d-none');
                        }
                        reader.readAsDataURL(file);
                    } 
                    else if (file.type === 'application/pdf') {
                        $image.addClass('d-none').attr('src', '');
                        $pdf.removeClass('d-none').html('<i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF (Baru Terpilih)');
                    } else {
                        $container.addClass('d-none');
                    }
                }
            });
        }

        handleFilePreview('edit-profile-file-ktp', 'preview-container-ktp', 'preview-image-ktp', 'preview-pdf-ktp');
        handleFilePreview('edit-profile-file-kk', 'preview-container-kk', 'preview-image-kk', 'preview-pdf-kk');

        function setupCascadingDropdown(prefix) {
            $(`#${prefix}-provinsi`).on('change', function () {
                let provinsiId = $(this).val();
                let $kabupaten = $(`#${prefix}-kabupaten`);
                let $kecamatan = $(`#${prefix}-kecamatan`);
                let $desa = $(`#${prefix}-desa`);

                $kabupaten.empty().append('<option value="">Pilih Kabupaten/Kota</option>').trigger('change');
                $kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').trigger('change');
                $desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');

                if (provinsiId) {
                    $.get(`/kabupatenkotabyprovinsi/${provinsiId}`, function (res) {
                        let dataList = Array.isArray(res) ? res : (res.data || []);
                        $.each(dataList, function (key, val) { $kabupaten.append(`<option value="${val.id}">${val.nama}</option>`); });
                    });
                }
            });

            $(`#${prefix}-kabupaten`).on('change', function () {
                let kabupatenId = $(this).val();
                let $kecamatan = $(`#${prefix}-kecamatan`);
                let $desa = $(`#${prefix}-desa`);

                $kecamatan.empty().append('<option value="">Pilih Kecamatan</option>').trigger('change');
                $desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');

                if (kabupatenId) {
                    $.get(`/kecamatanbykabupatenkota/${kabupatenId}`, function (res) {
                        let dataList = Array.isArray(res) ? res : (res.data || []);
                        $.each(dataList, function (key, val) { $kecamatan.append(`<option value="${val.id}">${val.nama}</option>`); });
                    });
                }
            });

            $(`#${prefix}-kecamatan`).on('change', function () {
                let kecamatanId = $(this).val();
                let $desa = $(`#${prefix}-desa`);

                $desa.empty().append('<option value="">Pilih Desa/Kelurahan</option>').trigger('change');

                if (kecamatanId) {
                    $.get(`/desakelurahanbykecamatan/${kecamatanId}`, function (res) {
                        let dataList = Array.isArray(res) ? res : (res.data || []);
                        $.each(dataList, function (key, val) { $desa.append(`<option value="${val.id}">${val.nama}</option>`); });
                    });
                }
            });
        }
        setupCascadingDropdown('edit-profile');

        const editForm = document.getElementById('editProfileForm');
        let fvEdit = FormValidation.formValidation(editForm, {
            fields: {
                nama: { validators: { notEmpty: { message: 'Nama wajib diisi' } } },
                email: { validators: { notEmpty: { message: 'Email wajib diisi' }, emailAddress: { message: 'Email tidak valid' } } },
                telepon: { 
                    validators: { 
                        notEmpty: { message: 'Nomor telepon wajib diisi' },
                        stringLength: { max: 13, message: 'Maksimal 13 karakter' }
                    } 
                },
                desa_kelurahan_id: { validators: { notEmpty: { message: 'Desa/Kelurahan wajib dipilih' } } },
                ktp: { validators: { stringLength: { min: 16, max: 16, message: 'KTP harus terdiri dari 16 digit' } } },
                file_ktp: { validators: { file: { extension: 'jpeg,jpg,png,pdf', maxSize: 2097152, message: 'Maksimal 2MB (JPG/PNG/PDF)' } } },
                kk: { validators: { stringLength: { min: 16, max: 16, message: 'KK harus terdiri dari 16 digit' } } },
                file_kk: { validators: { file: { extension: 'jpeg,jpg,png,pdf', maxSize: 2097152, message: 'Maksimal 2MB (JPG/PNG/PDF)' } } }
            },
            plugins: {
                trigger: new FormValidation.plugins.Trigger(),
                bootstrap5: new FormValidation.plugins.Bootstrap5({ eleValidClass: '', rowSelector: '.form-control-validation' }),
                submitButton: new FormValidation.plugins.SubmitButton(),
            }
        }).on('core.form.valid', function () {
            let formData = new FormData(editForm);

            $.ajax({
                url: editForm.action,
                type: 'POST', 
                data: formData,
                processData: false,
                contentType: false,
                success: function () {
                    Swal.fire({ icon: 'success', title: 'Berhasil!', text: 'Data diupdate', timer: 1500, showConfirmButton: false })
                        .then(() => window.location.href = "{{ route('profile.index') }}");
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors || {};
                        Object.keys(errors).forEach(key => {
                            fvEdit.updateFieldStatus(key, 'Invalid', 'notEmpty');
                            const fieldRow = editForm.querySelector(`[name="${key}"]`).closest('.form-control-validation');
                            const messageContainer = fieldRow.querySelector('.fv-plugins-message-container');
                            if (messageContainer) messageContainer.innerHTML = `<div class="fv-help-block text-danger">${errors[key][0]}</div>`;
                        });
                    } else {
                        Swal.fire({ icon: 'error', title: 'Gagal!', text: xhr.responseJSON?.message || 'Error' });
                    }
                }
            });
        });

        $('.select2').on('change', function() {
            const name = $(this).attr('name');
            if (name && editForm.querySelector(`[name="${name}"]`)) fvEdit.revalidateField(name);
        });
    });
</script>
@endpush