@extends('layout.wrapper_testimonial')

@section('styles')
    <link href="{{ asset('assets/themes/user/vendor/datetimepicker/daterangepicker.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/themes/user/css/jquery.dataTables.min.css') }}" rel="stylesheet">
@endsection
@section('contents')
    <form id="appoitment_form" method="post" action="{{ url('user/appoitment/edit/') }}/{{$id}}">
    @csrf
        <div class="container">
            <div class="row" style="position: relative; z-index: 5;">
                <div class="col-lg-12" style="position: relative; z-index: 5;">
                    <div class="section-heading">
                        <h1 class="text-center">Ubah Konsultasi Penyedia Jasa</h1>
                    </div>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Nama :</label>
                        <input type="text" name="nama" id="nama" value="{{$data->name}}"
                               placeholder="Masukan Nama" required disabled >
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Pilih Tanggal :</label>
                        <input type="text" name="tanggal" id="datepicker" value="{{$data->date}}"
                               class="form-control form-control-solid"
                               placeholder="Masukan Tanggal" required disabled>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Pilih Waktu :</label><br>
                        <input type="text" name="tanggal" id="datepicker" value="{{$data->time}}"
                               class="form-control form-control-solid"
                               placeholder="Masukan Tanggal" required disabled>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Keperluan Konsultasi :</label><br>
                        <select name="type_consultation" id="type_consultation"  enable onChange="changeTextBox();" >
                            <option value="">Pilih Keperluan Konsultasi</option>
                            <option value="Konsultasi KBLI"  >Konsultasi KBLI</option>
                            <option value="Pendaftaran e Katalog Lokal Jawa Tengah" >Pendaftaran e Katalog Lokal Jawa Tengah</option>
                            <option value="Upload / penambahan Produk Katalog Lokal Jawa Tengah" >Upload / penambahan Produk Katalog Lokal Jawa Tengah</option>
                            <option value="Perubahan  informasi produk Katalog Lokal Jawa Tengah" >Perubahan  informasi produk Katalog Lokal Jawa Tengah</option>
                            <option value="Perubahan profil Penyedia Katalog Lokal Jawa Tengah" >Perubahan profil Penyedia Katalog Lokal Jawa Tengah</option>
                            <option value="Tata cara e Purchasing dari sisi Penyedia di Wilayah Jawa Tengah" >Tata cara e Purchasing dari sisi Penyedia di Wilayah Jawa Tengah</option>
                            <option value="Informasi TKDN pada Katalog Elektronik" >Informasi TKDN pada Katalog Elektronik</option>
                            <option value="lain-lain"  >Keperluan Lain - Lain</option>
                        </select>

                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <!-- <label>Keperluan Lain - Lain :</label> -->
                        <textarea name="alasan" id="alasan" placeholder="Masukan Keperluan Lain - Lain" style="visibility:hidden;"></textarea>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <button type="submit" id="btn_submit" class="main-gradient-button">
                            <!--begin::Indicator label-->
                            <span id="indicator-label">Ajukan</span>
                            <!--end::Indicator label-->
                            <!--begin::Indicator progress-->
                            <span id="indicator-progress" class="d-none">Please wait...
										<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                            <!--end::Indicator progress-->
                        </button>
                    </fieldset>
                </div>
            </div>
        </div>
    </form>
@endsection

@section('scripts')

    <script src="{{ asset('assets/themes/user/js/moment.min.js') }}"></script>
    <script src="{{ asset('assets/themes/user/vendor/datetimepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/themes/user/js/jquery.dataTables.min.js') }}"></script>
    <script>
        function changeTextBox() {
            comp = document.getElementById('type_consultation');
            if(comp.value=='lain-lain'){
                document.getElementById('alasan').style.visibility ="visible";

            }else{
                document.getElementById('alasan').style.visibility ="hidden";
            }
        }
    </script>
    <script>
        $(document).ready(function () {
            let datepicker = $("#datepicker")

            datepicker.daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,
                minYear: 1901,
                maxYear: parseInt(moment().format("YYYY"), 12),
                autoUpdateInput: false,

            });

            datepicker.on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('MM/DD/YYYY'))

                let day = moment($(this).val(), 'MM-DD-YYYY').day()

                $('option', $('#waktu')).remove();
                axios.get(`{{ url('api/check_time') }}/${day}`).then(response => {
                    let data = response.data.data
                    for (let i = 0; i < data.length; i++) {
                        $('#waktu').append($('<option>').val(data[i].id).text(data[i].time));
                    }
                })
            });

        });
    </script>
@endsection