@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 {{ $tabel->label }}</h5>
        </div>
        
        <div class="card-body">
            <form id="addUpdateDataForm" action="{{ route('tabel.data.update', [$tabel->id, $value_id, 'program_id' => $program->id]) }}" method="POST" >
                @csrf
                @method('PUT') 

                {!! $tabel->renderHtml('edit', $errors, $list_relasi, $values) !!}
                    
                <div class="mt-4 text-end">
                    <a href="{{ route('tabel.data.index', [$tabel->id, 'program_id' => $program->id]) }}" class="btn btn-label-secondary me-2">Kembali</a>
                    <button type="submit" class="btn btn-success data-submit">Simpan Data</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    'use strict';
    $(document).ready(function () {
        $('#add-data-program,.tipe-boolean, .tipe-fk, .tipe-enum').select2();

        $('#addNewDataForm').validate({
            rules: {
                tabel: { required: true, snakecase: true },
                label: { required: true },
                menu: { required: true }
            },
            messages: {
                tabel: { required: "Nama tabel wajib diisi", snakecase: "Gunakan format snake_case (huruf kecil dan underscore)" },
                label: { required: "Label wajib diisi" },
                menu: { required: "Judul menu wajib diisi" }
            },
            errorElement: 'div',
            errorPlacement: function (error, element) {
                error.addClass('invalid-feedback');
                element.closest('.mb-6, .form-control-validation').append(error);
            },
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            }
        });

        $('[name="provinsi"]').select2({
            ajax: {
                url: '{{ route("provinsi.list") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term, // search term
                        page: params.page || 1
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.data.map(function (provinsi) {
                            return { id: provinsi.id, text: provinsi.nama };
                        }),
                        pagination: {
                            more: data.current_page < data.last_page
                        }
                    };
                },
                cache: true
            },
            placeholder: 'Pilih provinsi',
            minimumInputLength: 1,
        }).change(function() {
            $('[name="kabupaten_kota"]').empty().trigger('change');
            $('[name="kecamatan"]').empty().trigger('change');
            $('[name="desa_kelurahan"]').empty().trigger('change');
        });
        $('[name="kabupaten_kota"]').select2({
            ajax: {
                url: '{{ route("kabupatenkota.list") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term, // search term
                        page: params.page || 1,
                        provinsi_id: $('[name="provinsi"]').val() // filter by selected provinsi
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.data.map(function (kabupatenKota) {
                            return { id: kabupatenKota.id, text: kabupatenKota.nama };
                        }),
                        pagination: {
                            more: data.current_page < data.last_page
                        }
                    };
                },
                cache: true
            },
            placeholder: 'Pilih kabupaten/kota',
            minimumInputLength: 1,
        }).change(function() {
            $('[name="kecamatan"]').empty().trigger('change');
            $('[name="desa_kelurahan"]').empty().trigger('change');
        });
        $('[name="kecamatan"]').select2({
            ajax: {
                url: '{{ route("kecamatan.list") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term, // search term
                        page: params.page || 1,
                        kabupaten_kota_id: $('[name="kabupaten_kota"]').val() // filter by selected kabupaten/kota
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.data.map(function (kecamatan) {
                            return { id: kecamatan.id, text: kecamatan.nama };
                        }),
                        pagination: {
                            more: data.current_page < data.last_page
                        }
                    };
                },
                cache: true
            },
            placeholder: 'Pilih kecamatan',
            minimumInputLength: 1,
        }).change(function() {
            $('[name="desa_kelurahan"]').empty().trigger('change');
        });
        $('[name="desa_kelurahan"]').select2({
            ajax: {
                url: '{{ route("desakelurahan.list") }}',
                dataType: 'json',
                delay: 250,
                data: function (params) {
                    return {
                        search: params.term, // search term
                        page: params.page || 1,
                        kecamatan_id: $('[name="kecamatan"]').val() // filter by selected kecamatan
                    };
                },
                processResults: function (data, params) {
                    params.page = params.page || 1;
                    return {
                        results: data.data.map(function (desaKelurahan) {
                            return { id: desaKelurahan.id, text: desaKelurahan.nama };
                        }),
                        pagination: {
                            more: data.current_page < data.last_page
                        }
                    };
                },
                cache: true
            },
            placeholder: 'Pilih desa/kelurahan',
            minimumInputLength: 1,
        });
    });
</script>
@endpush