@extends('layout.wrapper_login')

@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">
        <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">Pendaftaran Konsultasi Penyedia Jasa</h1>
                    </div>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Nama :</label>
                        <input type="text" name="nama" id="nama"
                               placeholder="Masukan Nama" required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Pilih Tanggal :</label>
                        <input type="text" name="tanggal" id="datepicker"
                               class="form-control form-control-solid"
                               placeholder="Masukan Tanggal" required>
                    </fieldset>
                </div>
                <div class="col-lg-12">
                    <fieldset>
                        <label>Pilih Waktu :</label><br>
                        <select name="waktu" id="waktu">
                            <option value="">Pilih Waktu</option>
                        </select>
                    </fieldset>
                </div>
                <!-- <div class="col-lg-12">
                    <fieldset>
                        <label>Jenis Konsultasi :</label><br>
                        <select name="jns_konsultasi" id="jns_konsultasi" >
                            <option value="">Pilih Jenis Konsultasi</option>
                            <option value="daring">Daring</option>
                            <option value="luring">Luring</option>
                        </select>

                    </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('contents1')
<div class="col-lg-10" id="contact">
    <div class="container">
        <div class="row" style="position: relative; z-index: 5;">
        <table id="datatables" class="display" style="width: 100%">
            <thead>
                <tr>
                    <th width="8%">No</th>
                    <th>Nama Penyedia</th>
                    <th>Tanggal</th>
                    <th>Waktu</th>
                    <th>Keperluan Konsultasi</th>
                </tr>
            </thead>
        </table>
        </div>
    </div>
</div>
@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));
                    }
                })
            });

            const dataTable = $('#datatables').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('user.api.consultation.datatables') }}',
                    type: 'post',
                    data: function (d) {}
                },
                columns: [
                    {data: 'no'},
                    {data: 'name'},
                    {data: 'date'},
                    {data: 'time'},
                    {data: 'reason'},
                ],
                columnDefs: [
                    {
                        searchable: false,
                        orderable: false,
                        targets: 0,
                    },
                ],
            });

            dataTable.on('order.dt search.dt', function () {
                let i = 1;

                dataTable.cells(null, 0, { search: 'applied', order: 'applied' }).every(function (cell) {
                    this.data(i++);
                });
            }).draw();

            $('#appoitment_form').on('submit', (event) => {
                event.preventDefault()
                btnLoader($('#btn_submit'))

                axios({
                    url: '{{ route('user.save-appoitment') }}',
                    method: 'post',
                    data: $(event.currentTarget).serialize(),
                }).then(response => {
                    btnLoader($('#btn_submit'))
                    if (response.data.success === true) {
                        Swal.fire({
                            icon: 'success',
                            title: response.data.message,
                        })
                        $('#datatables').DataTable().ajax.reload(null, false)
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: response.data.message
                        })
                    }
                }).catch(error => {
                    btnLoader($('#btn_submit'))
                    Swal.fire({
                        icon: 'error',
                        title: error
                    })
                })

            })
        });
    </script>
@endsection