@extends('layouts.default')

@section('title')
    Activity Calendar
@endsection

@section('header-style')
    <!--Load custom style link or css-->
    <link rel="stylesheet" type="text/css" href="{{asset('assets/fullcalender/packages/core/main.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/fullcalender/packages/daygrid/main.css')}}">
    <link rel="stylesheet" type="text/css" href="{{asset('assets/fullcalender/packages/timegrid/main.css')}}">

    <style>
        .form-control:disabled, .form-control[readonly] {
            background-color: white;
            opacity: 1;
        }

        .modal .modal-content .modal-header .modal-title {
            color: white;
        }

        .modal-body .table td, .modal-body .table th {
            padding: 7px;
            vertical-align: top;
        }

        .activeFilter {
            color: #5a8dee;
        }

        a {
            color: #000000;
        }

        .sidebar-calendars-item a {
            display: block;
            padding: 5px 12px;
            background-color: aliceblue;
            margin: 5px;
            width: 100%;
        }

        .fc-time, .fc-title {
            color: #ffffff;
        }

        .fc-content {
            color: #130000;
        }

        .fc-day-grid-event .fc-content {
            padding: 3px;
        }

        .fc-axis.fc-time.fc-widget-content {
            color: #000000;
        }
    </style>
    <style>
        /*This portion is for loading spinner*/
        #cover-spin {
            position:fixed;
            width:100%;
            left:0;right:0;top:0;bottom:0;
            background-color: rgba(255,255,255,0.7);
            z-index:9999;
            display:none;
        }

        @-webkit-keyframes spin {
            from {-webkit-transform:rotate(0deg);}
            to {-webkit-transform:rotate(360deg);}
        }

        @keyframes spin {
            from {transform:rotate(0deg);}
            to {transform:rotate(360deg);}
        }

        #cover-spin::after {
            content:'';
            display:block;
            position:absolute;
            left:48%;top:40%;
            width:40px;height:40px;
            border-style:solid;
            border-color:black;
            border-top-color:transparent;
            border-width: 4px;
            border-radius:50%;
            -webkit-animation: spin .8s linear infinite;
            animation: spin .8s linear infinite;
        }
    </style>
@endsection

@section('content')

    <div class="card" id="fullCalendar">
        <div class="card-content">
            <div class="card-body pt-2">
                <form method="POST" action="">
                    <div class="row">
{{--                        <div class="col-md-2">--}}
{{--                            <div id="sidebar-calendars" class="sidebar-calendars">--}}
{{--                                <div>--}}
{{--                                    <div class="sidebar-calendars-item mt-1">--}}

{{--                                        @if(!empty($operators) && empty($operator))--}}

{{--                                            <div class="request_officer_div" style="display: block; margin-top: 5px;">--}}

{{--                                                <select name="emp_id" id="request_officer"--}}
{{--                                                        --}}{{--                                                        class="select2 form-control request-officer-select"--}}
{{--                                                        class="select2 form-control request-officer-select">--}}
{{--                                                    <option value="">All</option>--}}
{{--                                                    @foreach($operatorList as $operatorLists)--}}
{{--                                                        <option--}}
{{--                                                            value="{{$operatorLists->operator_for_user_id}}" {{isset($person) && $person == $operatorLists->operator_for_user_id ? 'selected' : ''}}>{{isset($operatorLists->user->employee->emp_name) ? $operatorLists->user->employee->emp_name : ''}}</option>--}}
{{--                                                    @endforeach--}}
{{--                                                </select>--}}
{{--                                            </div>--}}
{{--                                        @endif--}}
{{--                                        <div id="calendarList" class="sidebar-calendars-d1 my-3">--}}
{{--                                            <div class="sidebar-calendars-item">--}}
{{--                                                <h5 style="margin: 5px;">Filter</h5>--}}
{{--                                                <a href="#"--}}
{{--                                                   class="filter-link {{$pageID == 'appointment' ? 'activeFilter' : ''}}"--}}
{{--                                                   tabindex="1">--}}
{{--                                                    <i class="bx bx-time-five"></i>--}}

{{--                                                    <span>Appointment</span>--}}
{{--                                                </a>--}}
{{--                                                <a href="#"--}}
{{--                                                   class="filter-link {{$pageID == 'visit' ? 'activeFilter' : ''}}"--}}
{{--                                                   tabindex="1">--}}
{{--                                                    <i class="bx bxs-calendar"></i>--}}
{{--                                                    <span>Visit</span>--}}
{{--                                                </a>--}}
{{--                                            </div>--}}
{{--                                        </div>--}}

{{--                                    </div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                        </div>--}}
                        <div class="col-md-12">
                            <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                View
                            </a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                <a class="dropdown-item" target="_blank" href="{{route('monthly_print')}}">Monthly</a>
                                <a class="dropdown-item" target="_blank" href="{{route('weekly_print')}}">Weekly</a>
                                <a class="dropdown-item" target="_blank" href="{{route('daily_print')}}">Daily</a>
                            </div>
                            <div class="heading-print text-center" style="display: none">
                                <h2>CHITTAGONG PORT AUTHORITY</h2>
                                <h3>Schedule Calendar</h3>
                            </div>
                            <div id="calendar" class="calendar-view mt-1"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>


{{--    This portion is for loading spinner--}}
    <div id="cover-spin"></div>


    <div class="container  col-md-12">
        <!-- The Modal -->
        <div class="modal fade" id="visitModal">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" role="document">
                <div class="modal-content" style="border: 0;">

                    <!-- Modal Header -->
                    <div class="modal-header" style="color: white;">
                        <h4 class="modal-title"></h4>
                    </div>

                    <!-- Modal body -->
                    <div class="modal-body">
                        <div id="visit" style="display: none">
                            <table class="table table-borderless ">
                                <tr>
                                    <th>Visit Type:</th>
                                    <td id="v_visit_type"></td>
                                    <th>Visit Name:</th>
                                    <td id="v_visit_name"></td>
                                    <th>Visitor Name:</th>
                                    <td id="v_visitor_name"></td>
                                </tr>

                                <tr>
                                    <th>Visit From:</th>
                                    <td id="v_visit_from"></td>
                                    <th>Visit To:</th>
                                    <td id="v_visit_to"></td>
                                    <th>Unavailable From:</th>
                                    <td id="v_unavailable_from"></td>
                                </tr>

                                <tr>
                                    <th>Unavailable To:</th>
                                    <td id="v_unavailable_to"></td>
                                    <th>Status</th>
                                    <td id="v_status"></td>
                                    <th></th>
                                    <td></td>
                                </tr>

                            </table>
                        </div>

                        <div id="appointment" style="display: none">

                            <table class="table table-borderless ">
                                <tr>
                                    <th>Subject:</th>
                                    <td id="a_agenda"></td>
                                    <th>Priority:</th>
                                    <td id="a_priority"></td>
                                    <th>Appointment To:</th>
                                    <td id="a_appointment_to"></td>
                                </tr>

                                <tr>
                                    <th>Request Type:</th>
                                    <td id="a_request_type"></td>
                                    <th>Request By:</th>
                                    <td id="a_request_by"></td>
                                </tr>

                                <tr>
                                    <th>DATE:</th>
                                    <td id="a_date"></td>
                                    <th>START TIME:</th>
                                    <td id="a_start_time"></td>
                                    <th>END TIME:</th>
                                    <td id="a_end_time"></td>
                                </tr>

                                <tr>
                                    <th>Status</th>
                                    <td id="a_status"></td>
                                    <th></th>
                                    <td></td>
                                    <th></th>
                                    <td></td>
                                </tr>

                            </table>
                        </div>

                        <div id="meeting" style="display: none">

                            <table class="table table-borderless ">
                                <tr>
                                    <th>Meeting Type:</th>
                                    <td id="m_meeting_type"></td>
                                    <th>Meeting Name:</th>
                                    <td id="m_meeting_name"></td>
                                    <th>Chairperson:</th>
                                    <td id="m_chairperson"></td>
                                </tr>

                                <tr>
                                    <th>Date:</th>
                                    <td id="m_date"></td>
                                    <th>Start Time:</th>
                                    <td id="m_start_time"></td>
                                    <th>End Time:</th>
                                    <td id="m_end_time"></td>
                                </tr>

                                <tr>
                                    <th>Location:</th>
                                    <td id="m_location"></td>
                                    <th>Venue:</th>
                                    <td id="m_venue"></td>
                                    <th>Meeting Caller:</th>
                                    <td id="m_meeting_caller"></td>
                                </tr>

                                <tr>
                                    <th>Priority:</th>
                                    <td id="m_priority"></td>
                                    <th>Agenda:</th>
                                    <td id="m_agenda"></td>
                                    <th>Status</th>
                                    <td id="m_status"></td>
                                </tr>
                            </table>
                        </div>
                    </div>

                    <!-- Modal footer -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>

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

    <div id="createEventModal" class="modal fade">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <form action="" id="EventModalForm">
                @csrf
               {{--  priority-> Normal and request_type => External --}}
                <input type="hidden" id="appointment_id" name="appointment_id" value="3">
                <input type="hidden" id="priority_id" name="priority_id" value="3">
                <input type="hidden" id="request_type" name="request_type" value="3">
{{--                <input type="hidden" id="appointment_date" name="appointment_date" value="">--}}

            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Schedule Information of &nbsp; <span class="dateSchedule"></span></h4>
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span> <span class="sr-only">close</span></button>
                </div>
                <div id="modalBody" class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="alert alert-danger" role="alert" style="display: none">
                                <span class="showMessage"></span>
                            </div>
                        </div>
                        @if(!$operators->isEmpty())
                            <div class="col-md-6">
                                <label class="input-required">Appointment To</label>
                                <div class="form-group">
                                        <select class="form-control-custom" name="meeting_caller_user_id" id="meeting_caller_user_ida" aria-hidden="true" >
{{--                                            <option value="" >-- Please select an option --</option>--}}
                                            @foreach($operators as $operator)
                                                <option value="{{$operator->operator_for_user_id}}" selected>{{isset($operator->user->employee->emp_name) ? $operator->user->employee->emp_name : ''}}</option>
{{--                                                <option value="{{$operator->operator_for_user_id}}" {{count($operators)  == 1 || old('meeting_caller_user_id') == $operator->operator_for_user_id  ? 'Selected' : ''}}>{{isset($operator->user->employee->emp_name) ? $operator->user->employee->emp_name : ''}}</option>--}}
                                            @endforeach
                                        </select>
                                        @if ($errors->has('meeting_caller_user_id'))
                                            <span class="help-block">{{ $errors->first('meeting_caller_user_id') }}</span>
                                        @endif
                                </div>
                            </div>
                        @else
                            <input type="hidden" name="meeting_caller_user_id" value="{{\Auth::id()}}">
                        @endif
                        <div class="col-md-6">
                            <label class="input-required">Date</label>
                            <div class="form-group">
                                <div class="input-group date datePiker" id="appointment_date" data-target-input="nearest">
                                    <input type="text" autocomplete="off" class="form-control datetimepicker-input appointment_date" value="{{ old('appointment_date' ) }}"  name="appointment_date" data-toggle="datetimepicker"  data-target="#appointment_date"/>
                                    <div class="input-group-append" data-target="#appointment_date" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="bx bxs-calendar"></i></div>
                                    </div>
                                @if ($errors->has('appointment_date'))
                                    <span class="help-block">{{ $errors->first('appointment_date') }}</span>
                                @endif
                            </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="input-required" for="agenda">Subject</label>
                                <input name="agenda" class="form-control" type="text" placeholder="Subject" id="agenda">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="" for="requestedBy">Requested By</label>
                                <input name="request_by" class="form-control" type="text" placeholder="Requested By" id="requestedBy">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="input-required" for="requestedBy">Start Time</label>
                                <div class="input-group date timePiker" id="start-time" data-target-input="nearest">
                                    <input type="text" autocomplete="off" class="form-control datetimepicker-input start_time" value="{{ old('start_time' ) }}" name="start_time" data-toggle="datetimepicker" data-target="#start-time"/>
                                    <div class="input-group-append" data-target="#start-time" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="bx bx-time"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="input-required" for="requestedBy">Duration</label>
                                <div class="input-group">
                                    <input id="duration" autocomplete="off" type="number" name="duration" value="{{ old('duration')}}"
                                           class="form-control">
                                    <div class="input-group-append">
                                        <select class="form-control" name="typeTime" id="typeTime">
                                            <option value="H">Hours</option>
                                            <option value="M">Minutes</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="submitButton">Save</button>
                </div>
            </div>
            </form>
        </div>
    </div>

@endsection

@section('footer-script')
    <!--Load custom script-->
    <script src="{{asset('assets/fullcalender/packages/core/main.js')}}"></script>
    <script src="{{asset('assets/fullcalender/packages/core/popper.min.js')}}"></script>
    <script src="{{asset('assets/fullcalender/packages/interaction/main.js')}}"></script>
    <script src="{{asset('assets/fullcalender/packages/daygrid/main.js')}}"></script>
    <script src="{{asset('assets/fullcalender/packages/timegrid/main.js')}}"></script>
    <script>
        // $('.printBtn').on('click', function (e){
        //     e.preventDefault();
        //      window.print();
        // });
        var calendar = '';
        document.addEventListener('DOMContentLoaded', function () {

            var calendarEl = document.getElementById('calendar');
            var d = new Date();
            var month = d.getMonth() + 1;
            var day = d.getDate();
            var sysdate = d.getFullYear() + '-' +
                (('' + month).length < 2 ? '0' : '') + month + '-' +
                (('' + day).length < 2 ? '0' : '') + day;

              calendar = new FullCalendar.Calendar(calendarEl, {
                plugins: ['interaction', 'dayGrid', 'timeGrid'],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                defaultDate: sysdate,
                defaultWeek: sysdate,
                minTime: "08:00:00",
                maxTime: "21:00:00",
                navLinks: true, // can click day/week names to navigate views
                selectable: true,
                selectMirror: true,
                height: 650,
                eventClick: function (arg) {
                    let v_id = arg.event.id;
                    let v_groupid = arg.event.groupId;
                    if (v_id) {
                        eventDetails(v_id, v_groupid);
                       // $('#createEventModal').show();
                    }
                },

                //When u select some space in the calendar do the following:
                select: function (start, end, allDay) {
                    //do something when space selected
                    //Show 'add event' modal
                    //$('.fc-day').
                    $('.alert').hide();
                    resetData();
                    $("#typeTime").html('<select class="form-control" name="typeTime" id="typeTime" aria-invalid="false">\n' +
                        '                                            <option value="H">Hours</option>\n' +
                        '                                            <option value="M">Minutes</option>\n' +
                        '                                        </select>');
                    //console.log(moment(start.startStr).format('YYYY-MM-DD HH:mm:ss'));
                    $('.appointment_date').val(moment(start.startStr).format('DD-MM-YYYY'));
                   // $('.dateSchedule').html(moment(start.startStr).format('DD-MM-YYYY'));
                    $('.modal-header').css('background-color', 'rgb(54, 169, 193)');
                    $('.modal-title').text('Schedule of ' + moment(start.startStr).format('DD-MM-YYYY'));
                    $('#createEventModal').modal('show');

                },
                editable: true,
                eventLimit: true,
                eventTimeFormat: {
                    hour: 'numeric',
                    minute: "2-digit",
                    meridiem: ' '+'short',
                    hour12: true
                },
                events: {!! $allInfo !!},
                eventRender: function(info, element) {
                    //console.log(info.event);
                     var dataToFindStart = moment(info.event.start).format('YYYY-MM-DD');
                     var dataToFindEnd = moment(info.event.end).format('YYYY-MM-DD');
                    //$("td[data-date='" + dataToFind + "']").addClass('activeDay');
                    if (info.event.groupId == 'off') {
                       // $("td[data-date='" + dataToFindStart + "']").addClass('activeDay');
                       // $("td[data-date='" + dataToFindEnd + "']").addClass('activeDay');
                        const dates = getDates(dataToFindStart, dataToFindEnd)
                        dates.forEach(function (date) {
                            console.log(date)
                            let dateFormate = moment(date).format('YYYY-MM-DD');
                            $("td[data-date='" + dateFormate + "']").addClass('activeDay');
                        })
                    }
                  }
            });
           // console.log('element '+ calendar.events);
            calendar.render();
            // Returns an array of dates between the two dates
            function getDates (startDate, endDate) {
                const dates = []
               // let currentDate = startDate
                // const addDays = function (days) {
                //     const date = new Date()
                //     date.setDate(date.getDate() + days)
                //     return date
                // }
                let currentDate = new Date(startDate);
                let endDateDate = new Date(endDate);
                //console.log(dates)
                while (currentDate <= endDateDate) {
                    dates.push(new Date(currentDate));
                    currentDate.setDate(currentDate.getDate() + 1);
                }
                console.log(dates)
                return dates
            }

            $('#submitButton').on('click', function(e){
                // We don't want this to act as a link so cancel the link action
                e.preventDefault();
                doSubmit();
            });
            function doSubmit() {
                let url = '{{ route("ScheduleCalendarStore")}}';
                let data  = $("#EventModalForm").serialize();
                $.ajax({
                    type: 'POST',
                    url: url,
                    data: data,
                    dataType: 'JSON',
                    success: function (result) {

                        if (result.success){
                            $('.alert').show();
                            $('.alert').removeClass('alert-danger');
                            $('.alert').addClass('alert-success');
                            $('.showMessage').html(result.success);
                            setTimeout(function (e) {
                                $("#createEventModal").modal('hide');
                            },3000)
                            resetData()
                            window.location.reload();
                        }else{
                            $('.alert').show();
                            $('.alert').removeClass('alert-success');
                            $('.alert').addClass('alert-danger');
                            $('.showMessage').html(result.error);

                        }
                    },
                    error:function(result){
                        $('.alert').show();
                        $('.alert').removeClass('alert-success');
                        $('.alert').addClass('alert-danger');
                        $('.showMessage').html($.parseJSON(result.responseText).message+' Required field data are not filled properly');

                    }

                });
            }
        });


        function resetData() {
           // console.log('resetData');
            $('#EventModalForm .form-control').val('');
            $('#EventModalForm #appointment_id').val('');
            // $('#meeting_caller_user_id').val('');
            //$("#meeting_caller_user_id").select2().val('').trigger("change");
        }


        function convertDate(inputFormat) {
            function pad(s) {
                return (s < 10) ? '0' + s : s;
            }

            var d = new Date(inputFormat)
            return [pad(d.getDate()), pad(d.getMonth() + 1), d.getFullYear()].join('-')
        }

        function tConvert(time) {

            time = time.toString().match(/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

            if (time.length > 1) {
                time = time.slice(1);
                time[5] = +time[0] < 12 ? ' AM' : ' PM';
                time[0] = +time[0] % 12 || 12;
            }
            return time.join('');
        }

        function convertStatus(status) {
            let getStatus = status.toUpperCase();
            switch (getStatus) {
                case "A":
                    getStatus = "APPROVED";
                    break;
                case "I":
                    getStatus = "INACTIVE";
                    break;
                case "P":
                    getStatus = "PENDING";
                    break;
                case "D":
                    getStatus = "DELETE";
                    break;
                case "C":
                    getStatus = "COMPLETE";
                    break;
                case "R":
                    getStatus = "CANCEL";
                    break;
                case "Y":
                    getStatus = "YES";
                    break;
                case "N":
                    getStatus = "NO";
                    break;
                default:
                    getStatus = "";
            }
            return getStatus;
        }

        function eventDetails(id, v_groupid) {
            let pageid;
            if (v_groupid) {
                pageid = v_groupid;
            } else {
                pageid = '{{$pageID}}';
            }

            let url = '{{ route("getDetailsCalender",['id'=>':id','pageID'=>':pageid'] ) }}';
            url = url.replace(':id', id);
            url = url.replace(':pageid', pageid);
            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'JSON',
                success: function (results) {
                    if (results.type == 'visit') {
                        $('.modal-header').css('background-color', results.data.color);
                        $('.modal-title').text('Visit Schedule Information');
                        $('#meeting').hide();
                        $('#appointment').hide();

                        $("#v_visit_type").text(results.data.activity_type.activity_name);
                        $("#v_visit_name").text(results.data.visit_name);
                        $("#v_visit_from").text(convertDate(results.data.visit_start));
                        $("#v_visit_to").text(convertDate(results.data.visit_end));
                        $("#v_unavailable_from").text(convertDate(results.data.unavailable_from));
                        $("#v_unavailable_to").text(convertDate(results.data.unavailable_to));
                        $("#v_visitor_name").text(results.data.user.employee.hasOwnProperty('emp_name') ? results.data.user.employee.emp_name : '');
                        $("#v_status").text(convertStatus(results.data.status));
                        $('#visitModal').modal('show');
                        $('#visit').show();
                        $('#cover-spin').hide();
                    } else if (results.type == 'meeting') {
                        $('.modal-header').css('background-color', results.data.color);
                        $('.modal-title').text('Meeting Schedule Information');
                        $('#visit').hide();
                        $('#appointment').hide();

                        $("#m_meeting_name").text(results.data.meeting_name);
                        $("#m_meeting_type").text(results.data.activity_type.activity_name);
                        $("#m_chairperson").text(results.data.chairperson);
                        $("#m_date").text(convertDate(results.data.meeting_date));
                        $("#m_start_time").text(results.data.start_time);
                        $("#m_end_time").text(results.data.end_time);
                        $("#m_location").text(results.data.meeting_location);
                        $("#m_venue").text(results.data.meeting_venue);
                        $("#m_agenda").text(results.data.agenda);
                        $("#m_priority").text(results.data.priority.priority_name);
                        $("#m_meeting_caller").text(results.data.user.employee.hasOwnProperty('emp_name') ? results.data.user.employee.emp_name : '');
                        $("#m_status").text(convertStatus(results.data.status));
                        $('#visitModal').modal('show');
                        $('#meeting').show();
                        $('#cover-spin').hide();
                    } else if (results.type == 'appointment') {

                        $('.modal-header').css('background-color', results.data.color);
                        $('.modal-title').text('Edit Schedule of ' + convertDate(results.data.apointmnet_start_time));
                        $('#visit').hide();
                        $('#meeting').hide();
                        console.log(results.data.appointment_ids);

                        $("#meeting_caller_user_id").select2().val(results.data.appointment_to_user_id).trigger("change");

                        $("#appointment_id").val(results.data.appointment_ids);
                        $("#agenda").val(results.data.agenda);
                        // $("#a_priority").text(results.data.priority.priority_name);
                        // $("#a_request_type").text(results.data.activity_req_type.request_name);
                        $("#requestedBy").val(results.data.requested_by);
                        $("#duration").val(results.data.appointment_duration);
                        $(".appointment_date").val(convertDate(results.data.apointmnet_start_time));

                        let a_start_time = moment(results.data.apointmnet_start_time).format('HH:mm');
                        a_start_time = tConvert(a_start_time);
                        $(".start_time").val(a_start_time);

                        let duration_type = results.data.appointment_duration_type
                        let selectedHour = '';
                        let selectedMin = '';
                        if(duration_type == 'H'){
                            selectedHour = 'selected';
                        }else{
                            selectedMin = 'selected';
                        }
                        $("#typeTime").html('<select class="form-control" name="typeTime" id="typeTime" aria-invalid="false">\n' +
                            '                                            <option value="H" '+ selectedHour +'>Hours</option>\n' +
                            '                                            <option value="M" '+ selectedMin +'>Minutes</option>\n' +
                            '                                        </select>');

                        let a_end_time = moment(results.data.apointmnet_end_time).format('HH:mm');
                        a_end_time = tConvert(a_end_time);
                        $("#a_end_time").text(a_end_time);
                        $("#a_appointment_to").text(results.data.user.employee.hasOwnProperty('emp_name') ? results.data.user.employee.emp_name : '');
                        $("#a_status").text(convertStatus(results.data.status));
                        $('#createEventModal').modal('show');
                        // $('#appointment').show();
                        $('#cover-spin').hide();
                    }
                }
            });
        }

        function printDiv(divName) {
           // var printContents = document.getElementById(divName).innerHTML;
          //  var originalContents = document.body.innerHTML;

             // document.body.innerHTML = printContents;
            // save current calendar width
          let w = $('#calendar').css('width');

            // prepare calendar for printing
            $('#calendar').css('width', '12.5in');
            $('.fc-header').hide();
           // $('#calendar').calendar('render');
            calendar.render();

            window.print();
            // document.body.innerHTML = originalContents;


            window.setTimeout(function() {
                $('.fc-header').show();
                $('#calendar').css('width', w);
              //  $('#calendar').calendar('render');
                calendar.render();
            }, 1000);

            return false;
        }

    </script>

@endsection