@extends('layouts.admin')
@section('content')
    <link href="{{ URL::asset('css/dataTables.min.css') }}" media="all" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="{{ URL::asset('js/dataTables.min.js') }}"></script>
    <link href="{{ URL::asset('css/select2.css') }}" media="all" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="{{ URL::asset('js/select2.min.js') }}"></script>
    <link href="{{ URL::asset('css/select2.css') }}" media="all" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="{{ URL::asset('js/select2.min.js') }}"></script>
    <script type="text/javascript" src="{{ URL::asset('js/bootstrap-datetimepicker.min.js') }}"></script>
    <link href="{{ URL::asset('css/bootstrap-datetimepicker.min.css') }}" media="all" rel="stylesheet" type="text/css"/>
    <link href="{{ URL::asset('plugins/export/buttons.dataTables.min.css') }}" media="all" rel="stylesheet" type="text/css" />

    <div class="pageheader">
        <div class="media">
            <div class="media-body">
                <h4>@lang('messages.Appointment Reports')</h4>
                <ul class="breadcrumb">
                    <li><a href="{{ URL::to('admin/dashboard') }}"><i class="fa fa-home"></i> @lang('messages.Home')</a></li>
                    <li>@lang('messages.Appointment Reports')</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="clearfix form-blk">
        <div class="col-lg-12">

            <div class="row">
                <div class='col-md-6 form-group d-flex'>
                    <div class="form-group signup-form">
                        <div class="col-lg-6">
                            <label>From</label>
                            <div class="input-group">
                                <input type="text" name="start_date" id="start_date" class="form-control" placeholder="From Date" style="border-radius:10px 0 0 10px ;" placeholder="" value="{{ $start_date }}">
                                <span class="input-group-addon datepicker-trigger-start" id="basic-addon2" style="border-radius:0px 10px 10px 0 ;"><i class="la la-calendar"></i></span>
                            </div>
                        </div>

                        <div class="col-lg-6">
                            <label class="ml-4">To</label>
                            <div class="input-group">
                                <input type="text" name="end_date" id="end_date" class="form-control" placeholder="To Date" style="border-radius:10px 0 0 10px ;" placeholder="" value="{{ $end_date }}">
                                <span class="input-group-addon datepicker-trigger-end" style="border-radius:0px 10px 10px 0 ;" id="basic-addon2"><i class="la la-calendar"></i></span>
                            </div>
                        </div>

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

        <div class="col-lg-12">
            <div class="row">
                <div class='col-md-6 form-group d-flex'>

                    <div class='col-md-5'>
                        <div>
                            {{ Form::label('hospitals', trans('messages.Hospitals')) }}
                        </div>
                        <select id='hospitals' class='select2' name='hospitals'>
                            @if(!empty($hospitals))
                                <option value=''>@lang('messages.Select Hospitals')</option>
                                @foreach($hospitals as $hsp)
                                    <option value='{{$hsp->id}}'>{{$hsp->name}}</option>
                                @endforeach
                            @else
                                <option value=''>@lang('messages.No Hospitals')</option>
                            @endif
                        </select>
                    </div>
                    <div class='col-md-5'>
                        <div>
                            {{ Form::label('Appointment Type', trans('messages.Type')) }}
                        </div>
                        <select id='type' class='select2' name='package_type'>
                            {{-- <option value="">Select Type</option> --}}
                            <option value="0">Appointment</option>
                            <option value="1">Package</option>
                        </select>
                    </div>
                    <div class='col-md-5'>
                        <div>
                            {{ Form::label('Appointment Status', trans('messages.Status')) }}
                        </div>
                        <select id='appointment_status' class='select2' name='status'>
                            @if(!empty($statusList))
                                <option value='0'>@lang('messages.Select Status')</option>
                                @foreach($statusList as $sl)
                                    <option value='{{$sl->id}}'>{{$sl->name}}</option>
                                @endforeach
                            @else
                                <option value=''>@lang('messages.No Status')</option>
                            @endif
                        </select>
                    </div>

                    <div class="col-md-2 d-flex" style="align-items: flex-end;gap: 10px;">
                        <button class="btn btn-primary mr5" type="submit" name="submit" id ="submit" title="@lang('messages.Search')">@lang('messages.Search')</button>
                        <button type="reset" title="@lang('messages.Reset')" class="btn btn-default mr5" onclick="window.location='{{ url('admin/reports/appointment') }}'">@lang('messages.Reset')</button>
                    </div>

                </div>
                    <div class='col-md-6 form-group  '>
                <button class="btn btn-primary mr5" style="float:right" type="submit" name="export" id="export" title="@lang('messages.Filter')">@lang('messages.Export')</button>
                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="content">
        <div class="table-responsive">
            @if(IzoCommonHelper::hasPermission('appointment_reports'))
                <table id="productList" class="table table-striped table-bordered responsive">
                    <thead>
                    <tr class="headings">
                        <th>@lang('messages.Appointment Id')</th>
                        <th>@lang('messages.Customer Name')</th>
                        <th>@lang('messages.Visitor Type')</th>
                        <th>@lang('messages.Doctor Name')</th>
                        <th>@lang('messages.Hospital')</th>
                        <th>@lang('messages.Status')</th>
                        <th>@lang('messages.Created at')</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="empty-text" colspan="12" style="background-color: #fff!important;">
                            <div class="list-empty-text text-center"> @lang('messages.No records found.') </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            @endif
        </div>
    </div>

    <script>
        $( document ).ready(function() {
            $('#hospitals').select2();
            $('#type').select2();
            $('#appointment_status').select2();

        $('#start_date').datetimepicker({
            // minDate: today,
            format: 'DD-MM-YYYY',
        });

        $('#end_date').datetimepicker({
            //  minDate: today,
            format: 'DD-MM-YYYY',
        });

        $(".datepicker-trigger").on("click", function () {
            $("#start_date").datetimepicker("show");
            $("#end_date").datetimepicker("show");
        });

        $(".datepicker-trigger-start").on("click", function () {
            $("#start_date").datetimepicker("show");        
        });

        $(".datepicker-trigger-end").on("click", function () {
            $("#end_date").datetimepicker("show");
        });

        var blah= $("#hospitals").val();
        var blah1= $("#type").val();

        var start_date= $("#start_date").val();
        var end_date= $("#end_date").val();
        var order_status= $("#appointment_status").val();


        fetchdata(blah,blah1,start_date,end_date,order_status);
        });

        $("#submit").click(function(){
            var blah= $("#hospitals").val();
            var blah1= $("#type").val();

            var start_date= $("#start_date").val();
            var end_date= $("#end_date").val();
            var order_status= $("#appointment_status").val();

            fetchdata(blah,blah1,start_date,end_date,order_status);
        });
 
       function fetchdata(value,value1,start_date,end_date,order_status) {
            token = $('meta[name="csrf-token"]').attr('content');
            oTable = $('#productList').DataTable({
                dom: 'lfrtip',
                search: {
                    caseInsensitive: true
                },
                "lengthMenu": [[25, 50, 100], [25, 50, 100]],
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ URL::to('admin/reports/ajax-appointment') }}',
                    type: 'GET',
                    data: function (d) {
                        d.hospital_id = value;
                        d.type = value1;
                        d.start_date = start_date;
                        d.end_date = end_date;
                        d.order_status = order_status;
                    },
                    headers: {
                        'X-CSRF-TOKEN': token
                    }
                },
                "order": [],
                "columnDefs": [{
                    "targets": 'no-sort',
                    "orderable": false,
                    //"width": "93px", "targets": 6
                }],
                columns: [
                    {data: 'formattedOrderId', name: 'formattedOrderId', searchable: true},
                    {data: 'customer_full_name', name: 'customer_full_name', searchable: true},
                    {data: 'visitor_type_name', name: 'visitor_type_name', searchable: true},
                    {data: 'doctor_name', name: 'doctor_name', searchable: true},
                    {data: 'hospital_name', name: 'hospital_name', searchable: true},
                    {data: 'status', name: 'status', searchable: true},
                    {data: 'order_date', name: 'order_date', searchable: false},
                ],
                stateSave: true,
                 "bDestroy": true
            });
            // $('input[type=search]').on( 'keyup', function () {
            //     regExSearch = '^\\s' + this.value +'\\s*$';
            //     oTable.column(1).search(regExSearch, true, false).draw();
            // });
        // });
        // });
    }

    $('#export').click(function(e) {
        e.preventDefault();
        var hospital_id = $('#hospitals').find('option:selected').val();
        var order_status = $('#appointment_status').find('option:selected').val();
        var type = $('#type').find('option:selected').val();
        var start_date = $('#start_date').val();
        var end_date = $('#end_date').val();
        hospital_id = hospital_id == '' ? 'empty' : hospital_id;
        status = order_status == '' ? 'empty' : order_status;
        start = start_date == '' ? 'empty' : start_date;
        end = end_date == '' ? 'empty' : end_date;
        type = type == '' ? 'empty' : type;
        var e = "export-appointment/" + hospital_id + "/" + status + "/" + start + "/" + end + "/" +type;
        $(location).attr('href', e);
    });
    </script>
    <style>
        .status {
            cursor: pointer;
        }
    </style>
@endsection