@extends('app')
@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            Doctor Appointment List
        </h1>
        <ol class="breadcrumb">
            <li><a href="{{url('/')}}"><i class="fa fa-dashboard"></i> Home</a></li>
            <li><a href="#">Outdoor</a></li>
            <li class="active">Doctor Appointment List</li>
        </ol>
    </section>
    <!-- Main content -->
    <section class="content">
        <!-- SELECT2 EXAMPLE -->
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">

                <!-- {{--<a data-toggle="modal" href="#modal" onclick="loadModal('diagnostic/add-diagnostic-test')" class="btn btn-info btn-md">--}}
                {{--<i class="fa fa-plus"></i>&nbsp;--}}
                {{--Add Diagnostic Test--}}
                {{--</a>--}} -->

                    @can('doctor-appointment-create')
                        <a href="{{route('add.doctor.appointment')}}" class="btn btn-info btn-md pull-left">
                            <i class="fa fa-shopping-cart"></i>&nbsp;
                            Add Doctor Appointment
                        </a>
                    @endcan
                </h3>


            </div>
            <!-- /.box-header -->
            <div class="box-body">

                <div class="row">

                    <div class="col-md-12">

                        <form method="GET" action="#" id="custom_search_form" class="no-print" role="form">

                            <div class="row">

                                <div class="col-md-3 form-group">
                                    <label for="email" class="control-label">Start date</label>
                                    <input class="form-control datepicker" value="{{request('start_date')}}"
                                           id="start_date"
                                           type="text"
                                           placeholder="Start Date"
                                           autocomplete="off"
                                           name="start_date">
                                </div>

                                <div class="col-md-3 form-group">
                                    <label for="pwd" class="control-label">End date</label>
                                    <input class="form-control datepicker" value="{{request('end_date')}}" id="end_date"
                                           type="text"
                                           placeholder="End Date"
                                           autocomplete="off"
                                           name="end_date">
                                </div>

                                <div class="col-md-3 form-group">
                                    <label class="control-label">Please Select A Doctor</label>
                                    {!! Form::select('doctor_id',$doctors,null, ['class'=> 'form-control select2', 'id'=>'select_doc', 'placeholder'=>'Select Doctor']) !!}
                                </div>

                                <div class="col-md-2 form-group">
                                </div>

                                <div class="col-md-1 form-group">
                                    <button type="button" class="btn btn-sm btn-default print-btn pull-right"><i
                                            class="fa fa-print"></i></button>
                                </div>

                            </div>

                            <div class="row">
                                <div class="col-md-12 form-group">
                                    <button class="btn btn-info pull-right" type="submit">Search</button>
                                </div>
                            </div>

                        </form>
                        @can('doctor-appointment-view')
                            <table id="doctorDatatable" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>Sl No</th>
                                    <th>Doctor</th>
                                    <th>Patient</th>
                                    <th>Schedule Date</th>
                                    <th>Appointment Date</th>
                                    <th>Payment</th>
                                    <th>Status</th>
                                    @canany(['doctor-appointment-edit','doctor-appointment-update','doctor-appointment-remove'])
                                        <th>Action</th>
                                    @endcanany
                                </tr>
                                </thead>

                                <tfoot>
                                <tr>
                                    <th>Sl No</th>
                                    <th>Doctor</th>
                                    <th>Patient</th>
                                    <th>Schedule Date</th>
                                    <th>Appointment Date</th>
                                    <th>Payment</th>
                                    <th>Status</th>
                                    @canany(['doctor-appointment-edit','doctor-appointment-update','doctor-appointment-remove'])
                                        <th>Action</th>
                                    @endcanany
                                </tr>
                                </tfoot>

                            </table>
                        @endcan
                    </div>
                </div>
            </div>

            <div class="box-footer">

            </div>
        </div>
    </section>
@endsection
@section('script')

    <script src="{{asset('assets/plugins/print-this/printThis.js')}}"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            var yajraTable = $('#doctorDatatable').DataTable({
                processing: true,
                serverSide: true,
                columnDefs: [
                    {"width": "5%", "targets": 0},
                    {"width": "20%", "targets": 1},
                    {"width": "20%", "targets": 2},
                    {"width": "10%", "targets": 3},
                    {"width": "10%", "targets": 4},
                    {"width": "10%", "targets": 5},
                    {"width": "10%", "targets": 6},
                ],
                autoWidth: false,
                ajax: {
                    url: '{{ route("get.doctor.appointment.list.ajax") }}',
                    data: function (d) {
                        d.start_date = $('input[name=start_date]').val();
                        d.end_date = $('input[name=end_date]').val();
                        d.doctor_id = $('select[name=doctor_id]').val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex', orderable: false, searchable: false},
                    {data: 'docname', name: 'doc.full_name', orderable: true, searchable: true},
                    {data: 'patname', name: 'pat.full_name', orderable: true, searchable: true},
                    {data: 'appointment_date', name: 'appointment_date', orderable: true, searchable: false},
                    {data: 'schedule_date', name: 'schedule_date', orderable: true, searchable: false},
                    {data: 'payment', name: 'payment', orderable: false, searchable: false},
                    {data: 'status', name: 'status', orderable: false, searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });

            $('#custom_search_form').on('submit', function (e) {
                e.preventDefault();
                if ($('input[name=start_date]').val().length === 0 || $('input[name=end_date]').val().length === 0) {
                    alert('Please Select Date');
                    return false;
                }
                yajraTable.draw();
            });

        });

        function updateStatus(modelReference, action, id) {
            var reference = $("#reference_" + id);
            if (action == 'delete') {
                if (!confirm('Do you want to Delete ?')) {
                    return false;
                }
            }

            $.ajax({
                url: "update-status/" + modelReference + "/" + action + "/" + id,
                method: "GET",
                dataType: 'json',
                success: function (data) {
                    if (data.success == true) {
                        if (action == 'active') {
                            // reference.
                            location.reload();
                            reference.prev().show().prev().hide();
                            reference.parent().prev().children().next().show().prev().hide();
                        } else if (action == 'inactive') {
                            location.reload();
                            console.log(reference)
                            reference.prev().hide().prev().show();
                            reference.parent().prev().children().next().hide().prev().show();
                        } else if (action == 'delete') {
                            location.reload();
                            reference.parent().parent().hide(1000).remove();
                        }
                        $('.box-modal-message').show();
                        $('.messageBodySuccess').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    } else {
                        $('.box-modal-message').show();
                        $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                    }
                },
                error: function (data) {
                    $('.box-modal-message').show();
                    $('.messageBodyError').slideDown(1000).delay(3000).slideUp(1000).children().next().html(data.message);
                }
            });
        }

        function paymentbutton(id) {
            //alert(id);
            event.preventDefault();
            document.getElementById("payment-post-" + id).submit();
        }

        function duepaymentbutton(id) {
            event.preventDefault();
            document.getElementById("due-payment-post-" + id).submit();
        }

        $('.print-btn').click(function (e) {
            e.preventDefault();
            var btn = e.currentTarget
            var typeVal = $(this).val();
            // $('.dt-buttons').addClass('no-print');
            // window.addEventListener("load", window.print())
            var urlData = {
                'start_date': $('input[name=start_date]').val(),
                'end_date': $('input[name=end_date]').val(),
                'doctor_id': $('select[name=doctor_id]').val()
            };

            urlData[typeVal] = true;

            const querystring = encodeQueryData(urlData);
            var win = window.open('{{route('print.doctor.appointment.list')}}?' + querystring, '_blank');
            if (win) {
                //Browser has allowed it to be opened
                win.focus();
            } else {
                //Browser has blocked it
                alert('Please allow popups for this website');
            }

        });


        function encodeQueryData(data) {
            const ret = [];
            for (let d in data)
                ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
            return ret.join('&');
        }

    </script>
@endsection