@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>Edit Kecamatan</h1>
        </div>

        <div class="section-body">
            <div class="card">
                    @foreach ($data as $data)
                    <div class="row">
                            <div class="col-12 col-md-6 col-lg-6">
                                <div class="card-body">
                                    <form action="{{ route('kecamatan.update',$data->id) }}" method="post" class="custom-validation" enctype="multipart/form-data">
                                        @csrf
                                        @method('PUT')
                                    <div class="form-group">
                                        <input type="hidden" class="form-control" name="id" id="id" value="{{ $data->id }}" />
                                        <label style="font-weight: bold; color: black">Nama Kecamatan</label>
                                        <input type="text" name="namaKecamatan" class="form-control" value="{{ $data->nama_kecamatan }}" required>
                                    </div>
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Alamat</label>
                                        <input type="text" name="alamat" class="form-control" value="{{ $data->alamat }}" 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->id == $data->provinsi_kec ? 'selected' : '' }}>{{ $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->id == $data->kota_kec ? 'selected' : ''}} >{{ $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->id == $data->kecamatan_kec ? 'selected' : ''}} >{{ $kecamatan->name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Website</label>
                                        <input value="{{ $data->website }}" type="text" name="website" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-6 col-lg-6">
                                <div class="card-body">
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Nomor Telepon</label>
                                        <input type="text" value="{{ $data->telepon }}" name="telepon" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Email</label>
                                        <input type="email" name="email" value="{{ $data->email }}" class="form-control" required>
                                    </div>
                                    <div class="form-group">
                                        <label style="font-weight: bold; color: black">Logo Kabupaten</label>
                                        <input type="file" name="logo" id="logo" class="form-control block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" />
                                    </div>
                                    <img style="width: 120px; padding: 10px;" src="{{ asset('storage/'.$data->logo) }}" alt="Logo Kabupaten">
                                </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="form-row">
                                    <div class="form-group col-md-6">
                                        <label for="keperluan">Nama Camat</label>
                                        <input type="text" value="{{ $data->nama_camat }}" name="namaCamat" placeholder="Nama Camat" class="form-control" required>
                                    </div>
                                    <div class="form-group col-md-6">
                                        <label for="keperluan">Nama Kapolsek</label>
                                        <input type="text" value="{{ $data->kapolsek }}" name="kapolsek" placeholder="Nama Kapolsek" class="form-control" required>
                                    </div>
                                </div>
                            </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>
                    @endforeach
            </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