@extends('layouts.app')

@push('scripts')
    <script>
        $(document).ready(function () {
            $(document).on('keyup', '.bs-searchbox input', function (e) {
                var searchData = e.target.value;


                $.ajax({
                    type: 'GET',
                    url: 'https://alamat.thecloudalert.com/api/cari/index/?keyword=' + searchData,
                    success: function (data) {
                        // $('.kecamatan-wrapper select #kecamatan_pelanggan').empty();
                        var uniqueKecamatan = [];
                        var uniqueKabkota = [];
                        var uniqueProvinsi = [];

                        for (var i = 0; i < data.result.length; i++) {
                            var kecamatan = data.result[i].kecamatan;
                            var kabkota = data.result[i].kabkota;
                            var provinsi = data.result[i].provinsi;


                            if (uniqueKecamatan.indexOf(kecamatan) === -1) {
                                uniqueKecamatan.push(kecamatan);
                                uniqueProvinsi.push(provinsi);
                                uniqueKabkota.push(kabkota);

                            }
                        }

                        $('#kecamatan_pelanggan').empty();
                        for (var j = 0; j < uniqueKecamatan.length; j++) {
                            $('#kecamatan_pelanggan').append('<option value="' +
                                uniqueKabkota[j] + 
                                '/'+uniqueKecamatan[j] +
                                '">' + uniqueProvinsi[j] + 
                                ' , ' + uniqueKabkota[j] + 
                                ' , ' + uniqueKecamatan[j] + '</option>');
                        }

                        $('#kecamatan_pelanggan').selectpicker('refresh');


                    },
                    error: function (error) {

                        console.log(error);
                    }
                });
            });

        });
    </script>

@endpush

@section('content')
    <div class="container-fluid">
        <div class="block-header">
            <h2>Tambah Konsultasi & Booking Service</h2>
        </div>


        <div class="row">
            <div class="col-md-6">
                <form class="card " method="POST" action="{{ route('konsultasi.guestStore') }}">
                    @csrf

                    <div class="body px-4 py-4">
                        <div class="form-group">
                            <div class="form-line">
                                <label for="nama_pelanggan">Nama Pelanggan <span
                                        class="required text-danger">*</span></label>
                                <input type="text" id="nama_pelanggan" name="nama_pelanggan" class="form-control "
                                    placeholder="Masukkan Nama Pelanggan" required value="{{ old('nama_pelanggan') }}">

                            </div>
                            @error('nama_pelanggan')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <div class="form-line">
                                <label for="telp_pelanggan">WA Pelanggan<span class="required text-danger">*</span></label>
                                <input type="number" id="telp_pelanggan" class="form-control "
                                    placeholder="Masukkan Nomor WA Pelanggan" name="telp_pelanggan" required value="{{ old('telp_pelanggan') }}">

                            </div>
                            @error('telp_pelanggan')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>



                        <div class="form-group ">
                            <div class="form-line">
                                <label for="kecamatan_pelanggan">Kecamatan Pelanggan</label>
                                <select class="form-control" id="kecamatan_pelanggan" name="kota_kecamatan_pelanggan"
                                    class="selectpicker" data-live-search="true" required value="{{ old('kota_kecamatan_pelanggan') }}">
                                    <option value="">Masukan Kecamatan</option>
                                    @if (isset($datas))
                                        <option value="{{ $datas->pelanggan->kecamatan_pelanggan }}" selected>
                                            {{ $datas->pelanggan->kecamatan_pelanggan }}
                                        </option>
                                    @endif
                                </select>
                            </div>
                            @error('kota_kecamatan_pelanggan')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>



                        <div class="form-group">
                            <div class="form-line">
                                <label for="alamat_pelanggan">Alamat <span class="required text-danger">*</span></label>
                                <input type="text" id="alamat_pelanggan" class="form-control "
                                    placeholder="Masukkan Alamat Pelanggan" name="alamat_pelanggan" required value="{{ old('alamat_pelanggan') }}">
                            </div>
                            @error('alamat_pelanggan')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>



                        <div class="form-group">
                            <div class="form-line">
                                <label for="merk">Merk <span class="required text-danger">*</span></label>
                                <select class="form-control " name="merk_hp" id="merk" required value="{{ old('merk_hp') }}">
                                    <option value="" selected disabled>- Pilih Merk -</option>
                                    @foreach ($merk as $item)
                                        <option value="{{ $item->nama_merk }}">{{ $item->nama_merk }}</option>
                                    @endforeach
                                </select>
                            </div>
                            @error('merk_hp')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>



                        <div class="form-group">
                            <div class="form-line">
                                <label for="tipe_hp">Tipe HP <span class="required text-danger">*</span></label>
                                <input type="text" id="tipe_hp" class="form-control " name="tipe_hp"
                                    placeholder="Masukkan Tipe HP pelanggan" required value="{{ old('tipe_hp') }}">
                            </div>
                            @error('tipe_hp')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>



                        <div class="form-group">
                            <div class="form-line">
                                <label for="keluhan">Keluhan <span class="required text-danger">*</span></label>
                                <textarea class="form-control " name="keluhan" id="keluhan" rows="5"
                                    placeholder="Jelaskan keluhan yang dihadapi pelanggan..." required>{{ old('keluhan') }}</textarea>
                            </div>
                            @error('keluhan')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <div class="input-group">
                                <div class="form-line">
                                    <label for="tanggal_booking">Tanggal Booking</label>
                                    <input type="date" class="form-control" id="tanggal_booking" name="tanggal_booking" value="{{ old('tanggal_booking') }}" required>
                                </div>
                            </div>
                            @error('tanggal_booking')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <div class="input-group">
                                <div class="form-line">
                                    <label for="jam_booking">Jam Booking</label>
                                    <input type="time" class="form-control" id="jam_booking" name="jam_booking" value="{{ old('jam_booking') }}" required>
                                </div>
                            </div>
                            @error('jam_booking')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror

                        </div>



                        <div class="form-group">
                            <button type="submit" class="btn btn-success">Simpan</button>

                        </div>
                    </div>

                </form>
            </div>
        </div>


    </div>
@endsection