@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">Tambah Data Keluarga</h5>
        </div>
        
        <div class="card-body">
            <form id="addKeluargaForm" action="{{ route('keluarga.store') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <h6 class="mb-3 text-primary"><i class="ti tabler-id me-1"></i> Informasi Kartu Keluarga</h6>
                
                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label">No. Kartu Keluarga (KK)<span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="kk" placeholder="Masukkan 16 Digit No KK" />
                    </div>
                </div>

                <hr class="my-4">
                <h6 class="mb-3 text-primary"><i class="ti tabler-map-pin me-1"></i> Wilayah & Adat</h6>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Provinsi</label>
                        <select id="provinsi" class="select2 form-select" data-placeholder="Pilih Provinsi">
                            <option value="">Pilih Provinsi</option>
                            @foreach($provinsi as $prov)
                                <option value="{{ $prov->id }}">{{ $prov->nama }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Kabupaten/Kota</label>
                        <select id="kabupaten" class="select2 form-select" data-placeholder="Pilih Kabupaten/Kota" disabled>
                            <option value="">Pilih Kabupaten/Kota</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4">
                        <label class="form-label">Kecamatan</label>
                        <select id="kecamatan" class="select2 form-select" data-placeholder="Pilih Kecamatan" disabled>
                            <option value="">Pilih Kecamatan</option>
                        </select>
                    </div>
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label">Desa/Kelurahan<span class="text-danger">*</span></label>
                        <select id="desa" name="desa_kelurahan_id" class="select2 form-select" data-placeholder="Pilih Desa/Kelurahan" disabled>
                            <option value="">Pilih Desa/Kelurahan</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label">Pilih Adat</label>
                        <select id="adat" name="adat_id" class="select2 form-select" data-placeholder="Pilih Adat" disabled>
                            <option value="">Pilih Adat</option>
                        </select>
                        <small class="text-muted d-block mt-1">Data adat otomatis difilter berdasarkan Desa/Kelurahan yang dipilih.</small>
                    </div>
                </div>

                <hr class="my-4">
                <h6 class="mb-3 text-primary"><i class="ti tabler-upload me-1"></i> Dokumen</h6>

                <div class="row">
                    <div class="col-md-6 mb-4 form-control-validation">
                        <label class="form-label">Upload File KK</label>
                        <input type="file" class="form-control" id="file_kk" name="file_kk" accept="image/*,.pdf" />
                        
                        <div id="preview-container" class="mt-3 d-none">
                            <img id="preview-image" src="" alt="Preview KK" class="img-thumbnail d-none" style="width: 100%; max-height: 250px; object-fit: contain; background-color: #f8f9fa;">
                            <div id="preview-pdf" class="badge bg-label-danger p-2 d-none w-100"><i class="ti tabler-file-type-pdf ti-sm me-1"></i> Dokumen PDF Terpilih</div>
                        </div>
                    </div>
                </div>

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

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

        $('#file_kk').on('change', function(event) {
            const file = event.target.files[0];
            const $container = $('#preview-container');
            const $image = $('#preview-image');
            const $pdf = $('#preview-pdf');

            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');
                } else {
                    $container.addClass('d-none');
                }
            } else {
                $container.addClass('d-none');
            }
        });

        $('#provinsi').on('change', function () {
            let id = $(this).val();
            $('#kabupaten').empty().append('<option value="">Pilih Kabupaten/Kota</option>').prop('disabled', true).trigger('change');
            $('#kecamatan').empty().append('<option value="">Pilih Kecamatan</option>').prop('disabled', true).trigger('change');
            $('#desa').empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change');
            $('#adat').empty().append('<option value="">Pilih Adat</option>').prop('disabled', true).trigger('change');
            if (id) {
                $.get(`/kabupatenkotabyprovinsi/${id}`, function (res) {
                    $('#kabupaten').prop('disabled', false);
                    let dataList = Array.isArray(res) ? res : (res.data || []);
                    $.each(dataList, function (key, val) { $('#kabupaten').append(`<option value="${val.id}">${val.nama}</option>`); });
                });
            }
        });

        $('#kabupaten').on('change', function () {
            let id = $(this).val();
            $('#kecamatan').empty().append('<option value="">Pilih Kecamatan</option>').prop('disabled', true).trigger('change');
            $('#desa').empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change');
            $('#adat').empty().append('<option value="">Pilih Adat</option>').prop('disabled', true).trigger('change');
            if (id) {
                $.get(`/kecamatanbykabupatenkota/${id}`, function (res) {
                    $('#kecamatan').prop('disabled', false);
                    let dataList = Array.isArray(res) ? res : (res.data || []);
                    $.each(dataList, function (key, val) { $('#kecamatan').append(`<option value="${val.id}">${val.nama}</option>`); });
                });
            }
        });

        $('#kecamatan').on('change', function () {
            let id = $(this).val();
            $('#desa').empty().append('<option value="">Pilih Desa/Kelurahan</option>').prop('disabled', true).trigger('change');
            $('#adat').empty().append('<option value="">Pilih Adat</option>').prop('disabled', true).trigger('change');
            if (id) {
                $.get(`/desakelurahanbykecamatan/${id}`, function (res) {
                    $('#desa').prop('disabled', false);
                    let dataList = Array.isArray(res) ? res : (res.data || []);
                    $.each(dataList, function (key, val) { $('#desa').append(`<option value="${val.id}">${val.nama}</option>`); });
                });
            }
        });

        $('#desa').on('change', function () {
            let id = $(this).val();
            $('#adat').empty().append('<option value="">Pilih Adat</option>').prop('disabled', true).trigger('change');
            if (id) {
                $.get(`/adatbydesa/${id}`, function (res) {
                    $('#adat').prop('disabled', false);
                    let dataList = Array.isArray(res) ? res : (res.data || []);
                    $.each(dataList, function (key, val) { $('#adat').append(`<option value="${val.id}">${val.nama}</option>`); });
                });
            }
        });

        const addForm = document.getElementById('addKeluargaForm');
        let fvAdd = FormValidation.formValidation(addForm, {
            fields: {
                kk: { validators: { notEmpty: { message: 'Nomor KK wajib diisi' }, stringLength: { min: 16, max: 16, message: 'Nomor KK harus 16 digit' } } },
                desa_kelurahan_id: { validators: { notEmpty: { message: 'Desa/Kelurahan wajib dipilih' } } },
                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 () {
            $(addForm).find('select').prop('disabled', false);
            let formData = new FormData(addForm);

            $.ajax({
                url: addForm.action,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function (res) {
                    Swal.fire({ icon: 'success', title: 'Berhasil!', text: res.message, timer: 1500, showConfirmButton: false })
                        .then(() => window.location.href = "{{ route('keluarga.index') }}");
                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        const errors = xhr.responseJSON.errors || {}; 
                        Object.keys(errors).forEach(key => {
                            fvAdd.updateFieldStatus(key, 'Invalid', 'notEmpty');
                            const fieldRow = addForm.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 && addForm.querySelector(`[name="${name}"]`)) fvAdd.revalidateField(name);
        });
    });
</script>
@endpush