@extends('layouts.app')

@section('title', 'Tampil Lokasi')

@section('breadcrumb')
    <ul class="breadcrumb">
        <li>
            <p>DASHBOARD</p>
        </li>
        <li><a href="#" class="active">Tampil Lokasi</a> </li>
    </ul>
@endsection


@section('title-section', 'Tampil Lokasi')

@section('content')
    <div class="row">
        <div class="col-md-12">
            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <div class="grid simple form-grid">
                <div class="grid-title no-border">
                </div>
                <div class="grid-body no-border">
                    <form action="{{ route('save-display-location') }}" method="POST" autocomplete="off" class="validate"
                        id="roles-form">
                        @csrf
                        <div class="form-group">
                            <label class="form-label">Provinsi</label>
                            <select name="provinsi" id="provinsi-data" class="select2 form-control"
                                data-init-plugin="select2">
                                <option value="">
                                    Pilih Provinsi
                                </option>
                                @foreach ($provinsi as $data)
                                    <option value="{{ $data->id }}">
                                        {{ $data->provinsi }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        {{-- Daftar kabupaten --}}
                        <div class="row">
                            <div class="form-group">
                                <label class="form-label">Kabupaten</label>
                                <select name="kabupaten" id="list-kabupaten" class="select2 form-control"
                                    data-init-plugin="select2">
                                    <option value="">
                                        Pilih Provinsi terlebih dahulu
                                    </option>
                                </select>
                                <span class="text-danger" id="status-kabupaten"></span>
                            </div>
                        </div>

                        {{-- Daftar kecamatan --}}
                        <p style="font-size: 15px">Daftar Kecamatan</p>
                        <div id="list-kecamatan" class="row"></div>
                        {{-- <div class="row">
                            <div class="form-group">
                                <label class="form-label">Kecamatan</label>
                                <select name="kecamatan" id="list-kecamatan" class="select2 form-control"
                                    data-init-plugin="select2">
                                    <option value="">
                                        Pilih Kabupaten terlebih dahulu
                                    </option>
                                </select>
                                <span class="text-danger" id="status-kecamatan"></span>
                            </div>
                        </div> --}}

                        {{-- Daftar kelurahan --}}
                        {{-- <p style="font-size: 15px">Daftar Kelurahan</p>
                            <div id="list-kelurahan" class="row"></div> --}}

                        <div class="form-actions">
                            <div class="pull-right">
                                <button class="btn btn-success btn-cons" type="submit"><i
                                        class="icon-ok"></i>Simpan</button>
                                <button type="reset" class="btn btn-warning btn-cons">Reset</button>
                                <a href="{{ route('lokasi.index') }}" class="btn btn-danger btn-cons">Kembali</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('addon-script')
    <script>
        $("#provinsi-data").on("change", function() {
            let provinsi = $(this).val();

            $("#status-kabupaten").text("Sedang memuat data...");
            $("#list-kabupaten").html("");

            $.ajax({
                url: "{{ route('list-kabupaten') }}",
                type: "POST",
                dataType: "JSON",
                data: {
                    "_token": "{{ csrf_token() }}",
                    provinsi: provinsi,
                },
                success: function(data) {
                    $("#status-kabupaten").text("");

                    let html = "";
                    html += `<option value="">Pilih Kabupaten</option>`
                    data.forEach((e) => {
                        html += `<option value="${e.id}">${e.kota}</option>`
                    })
                    $("#list-kabupaten").append(html);
                },
                error: function(xhr, status, error) {
                    console.log(xhr.responseText);
                }
            })
        })

        $("#list-kabupaten").on("change", function() {
            let kabupaten = $(this).val();
            $("#list-kecamatan").html("");
            $("#status-kecamatan").text("Sedang memuat data...");
            $.ajax({
                url: "{{ route('list-kecamatan') }}",
                type: "POST",
                dataType: "JSON",
                data: {
                    "_token": "{{ csrf_token() }}",
                    kabupaten: kabupaten,
                },
                success: function(data) {
                    $("#status-kecamatan").text("");
                    let html = "";
                    data.forEach((e) => {
                        html += `<div class="form-group col-lg-2">
                                    <div class="form-check d-flex">
                                        <input type="checkbox" name="kecamatan[]" value="${e.id}" ${e.status === "TAMPIL" ? 'checked' : ''}>
                                        <label class="ms-2 mt-1">${e.kecamatan}</label><br>
                                    </div>
                                </div>`;
                    });
                    $("#list-kecamatan").append(html);
                }
            })
        })

        // $("#list-kecamatan").on("change", function() {
        //     let kecamatan = $(this).val();
        //     $("#list-kelurahan").html("");
        //     $.ajax({
        //         url: "{{ route('list-kelurahan') }}",
        //         type: "POST",
        //         dataType: "JSON",
        //         data: {
        //             "_token": "{{ csrf_token() }}",
        //             kecamatan: kecamatan,
        //         },
        //         success: function(data) {
        //             let html = "";
        //             data.forEach((
        //                 e) => {
        //                 html += `<div class="form-group col-lg-2">
    //                                                     <div class="form-check d-flex">
    //                                                         <input type="checkbox" name="kelurahan[]" value="${e.id}" ${e.status === "TAMPIL" ? 'checked' : ''}>
    //                                                         <label class="ms-2 mt-1">${e.kelurahan} (${e.kode_pos})</label><br>
    //                                                     </div>
    //                                                 </div>`;
        //             })
        //             $("#list-kelurahan")
        //                 .append(html);
        //         }
        //     })
        // })
    </script>
@endpush