@extends('layouts.home')

@section('title')
    Daftar -
@endsection

@push('styles')
    @if($tingkat == 'TK')
        <style>
            .header {
                background-color: #41B06E!important;
            }
        </style>
    @endif
    @if($tingkat == 'SD')
        <style>
            .header {
                background-color: #E23D41!important;
            }
        </style>
    @endif
    @if($tingkat == 'SMP')
        <style>
            .header {
                background-color: #00B2FF!important;
            }
        </style>
    @endif
@endpush

@section('content')
    <div class="container pb-20 mt-15">
        <div class="row justify-content-center mb-7">
            <div class="col-md-12">
                <form action="{{ route('daftar.submit', [$tingkat, $jalur]) }}" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="card shadow-sm card-flush h-lg-100" id="kt_contacts_main">
                        <div class="card-body p-20">
                            @if(session()->has('error'))
                                <x-alert type="error" display="1">
                                    {{ session('error') }}
                                </x-alert>
                            @endif
                            @if($jalur == 'Prestasi')
                                <p class="mb-6 fs-5">
                                    # Pendataan Mandiri Jalur <b>Khusus Prestasi</b> <br>
                                    Pendataan Peserta PPDB Khusus Jalur Prestasi KK LUAR KOTA.
                                </p>
                            @endif
                            @if($jalur == 'Zonasi')
                                <p class="mb-6 fs-5">
                                    # Pendataan Mandiri Jalur <b>Khusus Zonasi</b> <br>
                                    Pendataan Peserta PPDB Khusus Jalur Zonasi KK LUAR KOTA.
                                </p>
                            @endif
                            @if($jalur == 'Inklusi')
                                <p class="mb-6 fs-5">
                                    # Pendataan Mandiri Jalur <b>Khusus Inklusi</b> <br>
                                    Pendataan Peserta PPDB Khusus Jalur Inklusi KK Dalam Kota Kediri.
                                </p>
                            @endif
                            @if($jalur == 'Afirmasi')
                                <p class="mb-6 fs-5">
                                    # Pendataan Mandiri Jalur <b>Khusus Afirmasi</b> <br>
                                    Pendataan Peserta PPDB Khusus Jalur Afirmasi KK Dalam Kota Kediri.
                                </p>
                            @endif
                            <x-metronic-input name="nama" caption="Nama" placeholder="Nama Siswa" :value="old('nama', '')" />
                            <x-metronic-input type="number" name="nisn" caption="NISN" placeholder="Nomor Induk Siswa Nasional (Biarkan kosong apabila tidak ada)" :value="old('nisn', '')" />
                            <x-metronic-input type="number" name="nik" caption="NIK" placeholder="Nama Induk Kependudukan" :value="old('nik', '')" />
                            <x-metronic-select name="jenis_kelamin" caption="Jenis Kelamin" :options="gender()" :value="old('jenis_kelamin', '')" />
                            <x-metronic-input name="tempat_lahir" caption="Tempat Lahir" placeholder="Kota Lahir" :value="old('tempat_lahir', '')" />
                            <x-metronic-input name="tanggal_lahir" caption="Tanggal Lahir" class="datepicker" placeholder="dd-mm-yyyy" :value="format_date(old('tanggal_lahir', ''))" />
                            <x-metronic-input name="nama_ibu" caption="Nama Ibu" placeholder="Nama Ibu" :value="old('nama_ibu', '')" />
                            @if($tingkat !== 'TK')
                                <x-metronic-input name="asal_sekolah_npsn" caption="NPSN Asal Sekolah" placeholder="NPSN Sekolah Sesuai Dapodik (Opsional)" :value="old('asal_sekolah_npsn', '')" />
                                <x-metronic-input name="asal_sekolah" caption="Nama Asal Sekolah" placeholder="Nama Sekolah Sesuai Dapodik (Opsional)" :value="old('asal_sekolah', '')" />
                            @endif
                            @if($jalur == 'Inklusi')
                                <x-metronic-input name="jenis_inklusi" caption="Jenis Inklusi" placeholder="Jenis Inklusi" :value="old('jenis_inklusi', '')" />
                                    <div class="row mb-6">
                                        <label class="col-lg-3 col-form-label fw-bold fs-6">File Keterangan Inklusi</label>
                                        <div class="col-lg-9">
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <x-input type="file" name="file_inklusi" class="form-control-solid" :value="old('jenis_inklusi', '')" />
                                                </div>
                                                <div class="col-md-6">
                                                    <a href="{{ asset('formulir_psikolog_keterangan_inklusi.pdf') }}" target="_blank" class="btn btn-success w-100">Download Format Keterangan Inklusi</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                            @endif
                            <x-metronic-input name="alamat" caption="Alamat Rumah" placeholder="Nama Jalan/Nama Gang/Nama Perumahan/Nomor Rumah" :value="old('alamat', '')" />
                            <div class="row mb-6">
                                <div class="col-lg-3"></div>
                                <div class="col-lg-9">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <x-select name="provinsi" caption="-Pilih Provinsi-" class="form-select form-select-solid" data-control="select2" />
                                        </div>
                                        <div class="col-md-3">
                                            <x-select name="kabupaten" caption="-Pilih Kabupaten-" class="form-select form-select-solid" data-control="select2" />
                                        </div>
                                        <div class="col-md-3">
                                            <x-select name="kecamatan" caption="-Pilih Kecamatan-" class="form-select form-select-solid" data-control="select2" />
                                        </div>
                                        <div class="col-md-3">
                                            <x-select name="kelurahan" caption="-Pilih Kelurahan-" class="form-select form-select-solid" data-control="select2" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-end pb-6 pt-0 px-9">
                            <a href="{{ url()->previous() !== url('daftar/' . $tingkat) ? url()->previous() : url('/') }}" class="btn btn-light btn-active-light-primary me-5">Batal</a>
                            <button type="submit" class="btn btn-primary">Simpan</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        let get_lokasi = ($target, tingkat, parent_id = '', selected = '') => {
            $.get("https://lokasi.renandatta.com" + (parent_id !== '' ? ('?parent_id=' + parent_id) : ''), (result) => {
                $target.html('');
                let caption = '';
                if (tingkat === 1) caption = 'Provinsi';
                if (tingkat === 2) caption = 'Kab/Kota';
                if (tingkat === 3) caption = 'Kecamatan';
                if (tingkat === 4) caption = 'Kelurahan';
                $target.append('<option value="" data-id="">-Pilih ' + caption + '-</option>');
                if (parent_id !== '' || tingkat === 1 || tingkat === 2) {
                    $.each(result, (i, value) => {
                        let attr = value.nama.toString().toLowerCase() === selected.toString().toLowerCase() ? 'selected' : '';
                        let allow = true;
                        @if($jalur == 'Inklusi')
                            if (tingkat === 1 && value.nama !== 'JAWA TIMUR') allow = false;
                            if (tingkat === 2 && value.nama !== 'KOTA KEDIRI') allow = false;
                        @endif
                        @if($jalur == 'Prestasi' || $jalur == 'Zonasi')
                            if (tingkat === 2 && value.nama === 'KOTA KEDIRI') allow = false;
                        @endif
                        if (value.nama === 'KEDIRI') value.nama = 'KAB. KEDIRI';
                        if (allow === true) $target.append('<option data-id="' + value.id + '" ' + attr + '>' + value.nama + '</option>');
                    });
                }
                $target.change().select2();
            }).fail((xhr) => {
                console.log(xhr.responseText);
            });
        }
    </script>
    <script>
        init_form_element();

        $provinsi = $('#provinsi');
        $kabupaten = $('#kabupaten');
        $kecamatan = $('#kecamatan');
        $kelurahan = $('#kelurahan');

        @php($provinsi = old('provinsi'))
        @if($jalur == 'Inklusi') @php($provinsi = 'JAWA TIMUR') @endif

        @php($kabupaten = old('kabupaten'))
        @if($jalur == 'Inklusi') @php($kabupaten = 'KOTA KEDIRI') @endif

        get_lokasi($provinsi, 1, '', '{{ $provinsi }}');
        $provinsi.change(() => {
            let id = $provinsi.find('option:selected').attr('data-id');
            get_lokasi($kabupaten, 2, id, '{{ $kabupaten === 'KAB. KEDIRI' ? 'KEDIRI' : $kabupaten }}');
        });
        $kabupaten.change(() => {
            let id = $kabupaten.find('option:selected').attr('data-id');
            get_lokasi($kecamatan, 3, id, '{{ old('kecamatan') }}');
        });
        $kecamatan.change(() => {
            let id = $kecamatan.find('option:selected').attr('data-id');
            get_lokasi($kelurahan, 4, id, '{{ old('kelurahan') }}');
        });
    </script>
@endpush