@extends('siswa.layouts.app')

@section('content')
    <div class="row">

        <div class="col-md-12">
            <form action="{{ route('siswa.biodata.update') }}" method="POST" enctype="multipart/form-data">
                @csrf
                
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <div class="header-title">
                            <h4 class="card-title">Ubah Biodata</h4>
                            <p>Anda hanya diperkenankan mengubah biodata sebelum status data dan
                                berkas diverifikasi
                            </p>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <ul class="d-flex nav nav-pills mb-0 text-center biodata-tab" data-toggle="slider-tab"
                                    id="biodata-pills-tab" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active show" data-bs-toggle="tab" href="#biodata-tab" role="tab"
                                            aria-selected="false">Biodata</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#berkas-tab" role="tab"
                                            aria-selected="false">Berkas</a>
                                    </li>
        
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="card-body table-responsive">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="profile-content tab-content">
                                    <div id="biodata-tab" class="tab-pane fade active show">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-sm-6 ">
                                                        <div class="form-group">
                                                            <label>Nama Lengkap <span class="red-dot"> *</span>:</label>
                                                            <input required name="nama" type="text"
                                                                class="form-control" placeholder="masukan nama lengkap"
                                                                value="{{ old('nama', $siswa->nama) }}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Tempat Lahir <span class="red-dot"> *</span>:</label>
                                                            <input required name="tempat_lahir" type="text"
                                                                class="form-control" placeholder="masukan tempat lahir"
                                                                value="{{ old('tempat_lahir', $siswa->tempat_lahir) }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6 ">
                                                        <div class="form-group">
                                                            <label>Jenis Kelamin <span class="red-dot">*</span>:</label>
                                                            <div class="form-control">
                                                                <input required id="laki-laki" name="jenis_kelamin"
                                                                    value="L" type="radio"
                                                                    @if (old('jenis_kelamin', $siswa->jenis_kelamin) == 'L') checked @endif>
                                                                <label for="laki-laki">Laki-Laki</label>
                                                                <input id="perempuan" name="jenis_kelamin" value="P"
                                                                    type="radio"
                                                                    @if (old('jenis_kelamin', $siswa->jenis_kelamin) == 'P') checked @endif>
                                                                <label for="perempuan">Perempuan</label>
                                                            </div>
                    
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Tanggal Lahir <span class="red-dot">*</span>:</label>
                                                            <input required name="tanggal_lahir" type="date"
                                                                class="form-control"
                                                                value="{{ old('tanggal_lahir', $siswa->tanggal_lahir) }}">
                                                        </div>
                                                    </div>
                                                </div>
                    
                                                <div class="form-group">
                    
                    
                                                    <label>Koordinat <span class="red-dot">*</span>:</label>
                    
                                                    <div style="height: 500px!important;width: 100%;" id="map1"></div>
                                                    <br>
                                                    <button type="button" class="btn btn-primary" id="btnGetLoc"><i class="fas fa-map-marker"></i> Lokasi
                                                        Saat Ini</button>
                    
                                                </div>
                    
                                                <div class="row">
                                                    <div class="col-sm-6 ">
                                                        <div class="form-group">
                                                            <label>Lintang <span class="red-dot" style="font-size: 11px;"> *
                                                                    Terisi otomatis
                                                                    dari
                                                                    pilihan pada
                                                                    map</span>:</label>
                                                            <input required readonly name="lintang" id="lat1"
                                                                type="text" class="form-control"
                                                                value="{{ old('lintang', $siswa->lintang) }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6 ">
                                                        <div class="form-group">
                                                            <label>Bujur <span class="red-dot" style="font-size: 11px;"> *
                                                                    Terisi otomatis
                                                                    dari
                                                                    pilihan pada
                                                                    map</span>:</label>
                                                            <input required readonly name="bujur" id="lng1"
                                                                type="text" class="form-control"
                                                                value="{{ old('bujur', $siswa->bujur) }}">
                                                        </div>
                                                    </div>
                                                </div>
                    
                                                <div class="row">
                                                    <div class="col-sm-12 ">
                                                        <div class="form-group">
                                                            <label>Kabupaten/kota <span class="red-dot"> *</span>:</label>
                                                            <select required name="kabupaten_id" id="kabupaten_id"
                                                                class="form-control">
                                                                <option value="">Pilih Kabupaten/Kota</option>
                                                                @foreach ($kabupatens as $kabupaten)
                                                                    <option value="{{ $kabupaten->id }}"
                                                                        @if (old('kabupaten_id', $siswa->kelurahan->kecamatan->kabupaten_id) == $kabupaten->id) selected @endif>
                                                                        {{ $kabupaten->nama_kabupaten }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-sm-6 ">
                                                        <div class="form-group">
                                                            <label>Kecamatan <span class="red-dot"> *</span>:</label>
                                                            <select required name="kecamatan_id" id="kecamatan_id"
                                                                class="form-control">
                                                                <option value="">Pilih Kecamatan</option>
                                                                @foreach ($siswa->kelurahan->kecamatan->kabupaten->kecamatans as $item)
                                                                    <option
                                                                        @if ($siswa->kelurahan->kecamatan_id == $item->id) selected @endif
                                                                        value="{{ $item->id }}">
                                                                        {{ $item->nama_kelurahan }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                    
                                                    <div class="col-sm-6 ">
                                                        <div class="form-group">
                                                            <label>kelurahan/Desa<span class="red-dot"> *</span>:</label>
                                                            <select required name="kelurahan_id" id="kelurahan_id"
                                                                class="form-control">
                                                                <option value="">Pilih Kelurahan</option>
                                                                @foreach ($siswa->kelurahan->kecamatan->kelurahan as $item)
                                                                    <option
                                                                        @if ($siswa->kelurahan_id == $item->id) selected @endif
                                                                        value="{{ $item->id }}">
                                                                        {{ $item->nama_kelurahan }}</option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                    </div>
                                                </div>
                    
                                                <div class="row">
                                                    <div class="col-sm-12">
                                                        <div class="form-group">
                                                            <label>Alamat <span class="red-dot" style="font-size: 11px;">
                                                                    *</span>:</label>
                                                            <input required name="alamat" id="alamat" type="text"
                                                                class="form-control"
                                                                value="{{ old('alamat', $siswa->alamat) }}">
                                                        </div>
                                                    </div>
                                                </div>
                    
                                                <div class="row ">
                                                    <div class="col-sm-4">
                                                        <div class="form-group">
                                                            <label>RT/RW <span class="red-dot"> *</span>:</label>
                                                            <div class="row">
                                                                <div class="col-sm-4">
                                                                    <input required name="rt" type="number"
                                                                        class="form-control col-sm-6" placeholder="RT"
                                                                        value="{{ old('rt', $siswa->rt) }}">
                                                                </div>
                    
                                                                <div class="col-sm-4">
                                                                    <input name="rw" type="number"
                                                                        class="form-control col-sm-6" placeholder="RW"
                                                                        value="{{ old('rw', $siswa->rw) }}">
                                                                </div>
                    
                                                            </div>
                    
                    
                    
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row ">
                                                    <div class="col-sm-12 ">
                                                        <div class="form-group">
                                                            <label>No.KK <span class="red-dot"> *</span>:</label>
                                                            <input required name="no_kk" type="number"
                                                                class="form-control" placeholder="masukan Nomor KK"
                                                                value="{{ old('no_kk', $siswa->no_kk) }}">
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-12 mt-2">
                                                        <div class="form-group">
                                                            <label>Nama Orang Tua/Wali <span class="red-dot">
                                                                    *</span>:</label>
                                                            <input required name="nama_ortu" type="text"
                                                                class="form-control" placeholder="masukan Nama"
                                                                value="{{ old('nama_ortu', $siswa->nama_ortu) }}">
                                                        </div>
                                                        <div class="form-group">
                                                            <label>No.Akta Kelahiran <span class="red-dot">
                                                                    *</span>:</label>
                                                            <input required name="no_akta_kelahiran" type="number"
                                                                class="form-control" placeholder="masukan Nomor Akta"
                                                                maxlength="17"
                                                                value="{{ old('no_akta_kelahiran', $siswa->no_akta_kelahiran) }}">
                                                        </div>
                    
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
        
                                    <div id="berkas-tab" class="tab-pane fade ">
                                        <div class="row ">
                                            <div class="col-md-12">
                                                <div class="row">
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label>Kartu Keluarga <span class="red-dot"> *</span>:</label>
                                                            <input name="kartu_keluarga" type="file"
                                                                class="form-control" accept=".pdf,.jpeg,.png,.jpg"
                                                                alt="Berkas Kartu Keluarga">
                                                            @error('kartu_keluarga')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                            @if ($siswa->hasMedia('kartu_keluargas'))
                                                                <a href="{{ $siswa->getFirstMediaUrl('kartu_keluargas') }}"
                                                                    target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
                                                                    Berkas</a>
                                                            @endif
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Surat Keterangan Orang Tua/wali <span class="red-dot">
                                                                    *</span>:</label>
                                                            <input name="surat_keterangan_ortu" type="file"
                                                                class="form-control" accept=".pdf,.jpeg,.png,.jpg"
                                                                alt="Berkas Surat Keterangan Orang Tua/wali">
                                                            @error('surat_keterangan_ortu')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                            @if ($siswa->hasMedia('surat_keterangan_ortus'))
                                                                <a href="{{ $siswa->getFirstMediaUrl('surat_keterangan_ortus') }}"
                                                                    target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
                                                                    Berkas</a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label>Kartu Keluarga lama (jika terjadi perubahan) :</label>
                                                            <input name="kartu_keluarga_lama" type="file"
                                                                accept=".pdf,.jpeg,.png,.jpg" class="form-control">
                                                            @error('surat_keterangan_ortu')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                            @if ($siswa->hasMedia('kartu_keluarga_lamas'))
                                                                <a href="{{ $siswa->getFirstMediaUrl('kartu_keluarga_lamas') }}"
                                                                    target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
                                                                    Berkas</a>
                                                            @endif
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Surat Keterangan Panti Asuhan :</label>
                                                            <input name="surat_keterangan_panti" type="file"
                                                                accept=".pdf,.jpeg,.png,.jpg" class="form-control">
                                                            @error('surat_keterangan_panti')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                            @if ($siswa->hasMedia('surat_keterangan_pantis'))
                                                                <a href="{{ $siswa->getFirstMediaUrl('surat_keterangan_pantis') }}"
                                                                    target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
                                                                    Berkas</a>
                                                            @endif
                                                        </div>
                                                    </div>
        
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label>Kartu Keluarga Sejahtera (KKS) :</label>
                                                            <input name="kartu_keluraga_sejahtera" type="file"
                                                                accept=".pdf,.jpeg,.png,.jpg" class="form-control">
                                                            @error('kartu_keluraga_sejahtera')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                            @if ($siswa->hasMedia('kartu_keluraga_sejahteras'))
                                                                <a href="{{ $siswa->getFirstMediaUrl('kartu_keluraga_sejahteras') }}"
                                                                    target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
                                                                    Berkas</a>
                                                            @endif
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Program Keluarga Harapan (PKH) :</label>
                                                            <input name="program_keluarga_harapan" type="file"
                                                                accept=".pdf,.jpeg,.png,.jpg" class="form-control">
                                                            @error('program_keluarga_harapan')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                            @if ($siswa->hasMedia('program_keluarga_harapans'))
                                                                <a href="{{ $siswa->getFirstMediaUrl('program_keluarga_harapans') }}"
                                                                    target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
                                                                    Berkas</a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                    <div class="col-sm-6">
                                                        <div class="form-group">
                                                            <label>Kartu Indonesia Pintar (KIP) :</label>
                                                            <input name="kartu_indonesia_pintar" type="file"
                                                                accept=".pdf,.jpeg,.png,.jpg" class="form-control">
                                                            @error('kartu_indonesia_pintar')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                            @if ($siswa->hasMedia('kartu_indonesia_pintars'))
                                                                <a href="{{ $siswa->getFirstMediaUrl('kartu_indonesia_pintars') }}"
                                                                    target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
                                                                    Berkas</a>
                                                            @endif
                                                        </div>
                                                        <div class="form-group">
                                                            <label>Surat Keterangan Pernyataan Bersedia Di Proses Secara Hukum
                                                                (apabila terbukti memalsukan
                                                                bukti keikutsertaan dalam program keluarga tidak mampu dari
                                                                Pemerintah Pusat atau Pemerinah
                                                                Daerah) : <span class="red-dot"> *</span></label>
                                                            <input
                                                                name="surat_keterangan_pernyataan_bersedia_di_proses_secara_hukum"
                                                                type="file" accept=".pdf,.jpeg,.png,.jpg"
                                                                class="form-control">
                                                            @error('surat_keterangan_pernyataan_bersedia_di_proses_secara_hukum')
                                                                <span class="text-danger">{{ $message }}</span>
                                                            @enderror
                                                            @if ($siswa->hasMedia('surat_keterangan_pernyataan_bersedia_di_proses_secara_hukums'))
                                                                <a href="{{ $siswa->getFirstMediaUrl('surat_keterangan_pernyataan_bersedia_di_proses_secara_hukums') }}"
                                                                    target="_blank" class="btn btn-primary btn-sm my-2"><i class="fas fa-file"></i> Lihat
                                                                    Berkas</a>
                                                            @endif
                                                        </div>
                                                    </div>
                                                   
                                                </div>
                                            </div>
                                        </div>
        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <button type="submit" class="btn btn-success"><i class="fas fa-save"></i> Simpan Data</button>
                    </div>
                </div>

            </form>
        </div>


    </div>
@endsection


@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
@endpush


@push('scripts')
    <script>
        (g => {
            var h, a, k, p = "The Google Maps JavaScript API",
                c = "google",
                l = "importLibrary",
                q = "__ib__",
                m = document,
                b = window;
            b = b[c] || (b[c] = {});
            var d = b.maps || (b.maps = {}),
                r = new Set,
                e = new URLSearchParams,
                u = () => h || (h = new Promise(async (f, n) => {
                    await (a = m.createElement("script"));
                    e.set("libraries", [...r] + "");
                    for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
                    e.set("callback", c + ".maps." + q);
                    a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
                    d[q] = f;
                    a.onerror = () => h = n(Error(p + " could not load."));
                    a.nonce = m.querySelector("script[nonce]")?.nonce || "";
                    m.head.append(a)
                }));
            d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() =>
                d[l](f, ...n))
        })({
            key: "AIzaSyCUZ860nY0z3XKAolxEBLXGSJM9p6Y04kM",
            v: "weekly",
            // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
            // Add other bootstrap parameters as needed, using camel case.
        });
    </script>
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        let map;
        let marker;

        async function initMap() {
            const {
                Map
            } = await google.maps.importLibrary("maps");
            var myLatlng = new google.maps.LatLng({{ $siswa->lintang }}, {{ $siswa->bujur }});
            map = new Map(document.getElementById("map1"), {
                center: myLatlng,
                zoom: 15,
            });

            marker = new google.maps.Marker({
                position: myLatlng,
                map,
                title: "Hello World!",
            });

            //change marker on click
            map.addListener("click", (mapsMouseEvent) => {
                // Get the coordinates of the click
                const lat = mapsMouseEvent.latLng.lat();
                const lng = mapsMouseEvent.latLng.lng();
                //change marker position
                marker.setPosition(mapsMouseEvent.latLng);
                //change input value
                document.getElementById('lat1').value = lat;
                document.getElementById('lng1').value = lng;
            });
        }

        initMap();


        //btnGetLoc get current location
        document.getElementById('btnGetLoc').addEventListener('click', () => {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition((position) => {
                    const pos = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude,
                    };
                    //change marker position
                    marker.setPosition(pos);
                    //change input value
                    document.getElementById('lat1').value = pos.lat;
                    document.getElementById('lng1').value = pos.lng;
                    //change map center
                    map.setCenter(pos);
                }, () => {
                    alert('Error: The Geolocation service failed.');
                });
            } else {
                alert('Error: Your browser doesn\'t support geolocation.');
            }
        });


        // Api Call Data Wilayah
        $("#kabupaten_id").change(function(e) {
            const kabupaten_id = $(this).val();
            $.ajax({
                type: "get",
                url: "{{ url('api/kecamatan') }}" + "/" + kabupaten_id,
                success: function(res) {
                    if (res.status == "success") {
                        let option = '<option value="">Pilih Kecamatan</option>';
                        res.data.forEach((data) => {
                            option +=
                                `<option value="${data.id}">${data.nama_kecamatan}</option>`;
                        });

                        $('select[id="kecamatan_id"]').html(option);
                        $('select[id="kelurahan_id"]').html(
                            `<option value="">Pilih Kecamatan Terlebih Dahulu</option>`);
                    } else {
                        alert("gagal.. : " + res.message);
                    }
                }
            });
        });

        $("#kecamatan_id").change(function(e) {
            const kecamatan_id = $(this).val();
            $.ajax({
                type: "get",
                url: "{{ url('api/kelurahan') }}" + "/" + kecamatan_id,
                success: function(res) {
                    if (res.status == "success") {
                        let option = '<option value="">Pilih Kelurahan</option>';
                        res.data.forEach((data) => {
                            option +=
                                `<option value="${data.id}">${data.nama_kelurahan}</option>`;
                        });

                        $('select[id="kelurahan_id"]').html(option);
                    } else {
                        alert("gagal.. : " + res.message);
                    }
                }
            });
        });
    </script>
@endpush