@extends('layouts.app')

@section('title', 'Edit Kecamatan')

@push('style')
<!-- CSS Libraries -->
@endpush

@section('css')
<!-- select2 css -->
<link href="{{ url('assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ url('assets/libs/dropzone/dropzone.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('main')<div class="main-content">
    <section class="section">
        <div class="section-header">
            <h1>Tambah Kecamatan</h1>
        </div>

        <div class="section-body">
            <div class="card">
                    <div class="row">
                            <div class="col-12 col-md-6 col-lg-6">
                                <div class="card-body">
                                    <form action="{{ route('kecamatan.store') }}" method="post" class="custom-validation" enctype="multipart/form-data">
                                        @csrf
                                        @method('POST')
                                    <div class="form-group">
                                        <input type="hidden" class="form-control" name="id" id="id" />
                                        <label style="font-weight: bold; color: black">Nama Kecamatan</label>
                                        <input type="text" name="namaKecamatan" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Alamat</label>
                                        <input type="text" name="alamat" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Provinsi</label>
                                        <select name="provinsiKec" id="provinsi" class="form-control select2">
                                            @foreach ($provinces as $item)
                                            <option value="{{ $item->id }}" >{{ $item->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Kota / Kabupaten</label>
                                        <select name="kotaKec" id="kota" class="form-control select2">
                                            @foreach ($cities as $cities )
                                            <option value="{{ $cities->id }}" >{{ $cities->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>                                                   
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Kecamatan</label>
                                        <select name="kecamatanKec" id="kecamatan" class="form-control select2">
                                            @foreach ($kecamatan as $kecamatan )
                                            <option value="{{ $kecamatan->id }}" >{{ $kecamatan->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Simpan</button>
                                <a href="{{ url()->previous() }}" class="btn btn-danger m-3">Kembali</a>
                            </div>
                        </form>
                    </div>
            </div>
        </div>
    </section>
</div>
@endsection

@push('scripts')
<!-- JS Libraies -->

<script src="{{ url('assets/libs/select2/select2.min.js') }}"></script>

<!-- dropzone plugin -->
<script src="{{ url('assets/libs/dropzone/dropzone.min.js') }}"></script>

<!-- init js -->
<script src="{{ url('assets/js/pages/ecommerce-select2.init.js') }}"></script>
<script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>
<script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
<script>

            function onChangeSelect(url, id, name) {
                // send ajax request to get the cities of the selected province and append to the select tag
                $.ajax({
                    url: url,
                    type: 'GET',
                    data: {
                        id: id
                    },
                    success: function (data) {
                        $('#' + name).empty();
                        // $('#' + name).append('<option>==Pilih Salah Satu==</option>');

                        $.each(data, function (key, value) {
                            $('#' + name).append('<option value="' + key + '">' + value + '</option>');
                        });
                    }
                });
            }

            $(function () {
            $('#provinsi').on('change', function () {
                onChangeSelect('{{ route("cities") }}', $(this).val(), 'kota');
            });
            $('#kota').on('change', function () {
                onChangeSelect('{{ route("districts") }}', $(this).val(), 'kecamatan');
            })
            $('#kecamatan').on('change', function () {
                onChangeSelect('{{ route("villages") }}', $(this).val(), 'desa');
            })
        });
</script>
<!-- Page Specific JS File -->
@endpush