@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('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>
                    <th>Status</th>
                    <th>Action</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>

    @if (session('success'))
        <script>
        Swal.fire({
            icon: 'success',
            title: "{{ session('success') }}"
        });
        </script>
    @endif
    @if (session('failed'))
        <script>
        Swal.fire({
            icon: 'error',
            title: "{{ session('failed') }}"
        });
        </script>
    @endif


    <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,

            });

            

            const dataTable = $('#datatables').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('user.api.consultation.list_consultation') }}',
                    type: 'post',
                    data: function (d) {}
                },
                columns: [
                    {data: 'no'},
                    {data: 'name'},
                    {data: 'date'},
                    {data: 'time'},
                    {data: 'reason'},
                    {data: 'status'},
                    
                ],
                columnDefs: [
                    {
                        searchable: false,
                        orderable: false,
                        targets: 0,
                    },
                    {
                        targets: 5,
                        render: function ( data, type, row ) {
                            let text
                            if (row.status == 0) {
                                text = "Konsultasi Diajukan"
                            } else if(row.status == 1){
								text = "Konsultasi Dilakukan"
							}else {
                                text = "Selesai Konsultasi"
                            }
                            return text
                        }
                    },
                    {
                        targets: 6,
                        render: function (data, type, row) {
							let acc 
							if(row.status == 1){
                                return `<div class="btn-group">
                                        <a href="{{ url('user/appoitment/testimonial') }}/${row.id}" class="btn btn-sm btn-success main-gradient-button" style="padding-right:10px;">Testimoni</a>
                                    </div>`
							}else if(row.status == 0){
                                return `<div class="btn-group">
                                        <a href="{{ url('user/appoitment/edit') }}/${row.id}" class="btn btn-sm btn-warning  main-gradient-button">Edit</a>
                                        <a href="{{ url('user/appoitment/delete') }}/${row.id}" class="btn btn-sm btn-danger  main-gradient-button">Hapus</a>
                                    </div>`
                            }
                            else{
                                return ``
                            }
                          
                        }
                    }
                ],
            });

            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