@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">
        <div class="card-content">
            <div class="card-body pt-2">
                <form method="POST" action="">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="row">
                                <div class="col-md-12"><label>Priority : </label></div>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <div class="row">
                                <div class="col-md-2">
									<div class="row">
										<div class="col-md-2 bx bxs-message-square" style="color: #949494"></div>
										<div class="col-md-8 priority">None</div>
									</div>
                                </div>
                                <div class="col-md-2">
									<div class="row">
										<div class="col-md-2 bx bxs-message-square" style="color: #768CC9"></div>
										<div class="col-md-8 priority">Low</div>
									</div>
                                </div>
                                <div class="col-md-2">
									<div class="row">
										<div class="col-md-2 bx bxs-message-square" style="color: #36A9C1"></div>
										<div class="col-md-8 priority">Normal</div>
									</div>
                                </div>
                                <div class="col-md-2">
									<div class="row">
										<div class="col-md-2 bx bxs-message-square" style="color: #55A13E"></div>
										<div class="col-md-8 priority">High</div>
									</div>
                                </div>
                                <div class="col-md-2">
									<div class="row">
										<div class="col-md-2 bx bxs-message-square" style="color: #F28111"></div>
										<div class="col-md-8 priority">Urgent</div>
									</div>
                                </div>
                                <div class="col-md-2">
									<div class="row">
										<div class="col-md-2 bx bxs-message-square" style="color: #C94F4F"></div>
										<div class="col-md-8 priority">Immediate</div>
									</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <hr/>

                    <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="{{route('activityCalender')}}?person={{$person}}"
                                                   class="filter-link {{$pageID == 'all' ? 'activeFilter' : ''}}"
                                                   tabindex="1">
                                                    <i class="bx bx-list-ul"></i>
                                                    <span>All Schedule</span>
                                                </a>
                                                <a href="{{route('filterCalender',['id' => 'appointment'])}}?person={{$person}}"
                                                   class="filter-link {{$pageID == 'appointment' ? 'activeFilter' : ''}}"
                                                   tabindex="1">
                                                    <i class="bx bx-time-five"></i>

                                                    <span>Appointment</span>
                                                </a>
                                                <a href="{{route('filterCalender',['id' => 'visit'])}}?person={{$person}}"
                                                   class="filter-link {{$pageID == 'visit' ? 'activeFilter' : ''}}"
                                                   tabindex="1">
                                                    <i class="bx bxs-calendar"></i>
                                                    <span>Visit</span>
                                                </a>
                                                <a href="{{route('filterCalender',['id' => 'meeting'])}}?person={{$person}}"
                                                   class="filter-link {{$pageID == 'meeting' ? 'activeFilter' : ''}}"
                                                   tabindex="1">
                                                    <i class="bx bx-group"></i>
                                                    <span>Meeting</span>
                                                </a>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-10">
                            <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>AGENDA:</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>
                                    <th>MOBILE:</th>
                                    <td id="a_mobile"></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>
@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>
        $('select').on('change', function () {
            var selected_officer = ($('#request_officer').val());
            let filterLink = $('.filter-link').attr('href');
            if (filterLink.search("person=") > 0) {
                let oldPerson = filterLink.split('?')[1];
                let newFilterLink = filterLink.replace(oldPerson, 'person=' + selected_officer);
                $('.filter-link').attr('href', newFilterLink);
                window.location.href = newFilterLink;
            } else {
                $('.filter-link').attr('href', $('.filter-link').attr('href') + '?person=' + selected_officer);
            }
        });

    </script>
    <script>
        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;

            var 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,
                eventClick: function (arg) {
                    let v_id = arg.event.id;
                    let v_groupid = arg.event.groupId;
                    if (v_id) {
                        eventDetails(v_id, v_groupid);
                        $('#cover-spin').show();
                    }
                },

                select: function () {
                    calendar.unselect()
                },
                editable: true,
                eventLimit: true,
                eventTimeFormat: {
                    hour: 'numeric',
                    minute: "2-digit",
                    meridiem: ' '+'short',
                    hour12: true
                },
                events: {!! $allInfo !!}

            });

            calendar.render();

        });

        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('Appointment Schedule Information');
                        $('#visit').hide();
                        $('#meeting').hide();

                        $("#a_agenda").text(results.data.agenda);
                        $("#a_priority").text(results.data.priority.priority_name);
                        $("#a_request_type").text(results.data.activity_req_type.request_name);
                        $("#a_request_by").text(results.data.requested_by);
                        $("#a_mobile").text(results.data.mobile_no);
                        $("#a_date").text(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);
                        $("#a_start_time").text(a_start_time);

                        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));
                        $('#visitModal').modal('show');
                        $('#appointment').show();
                        $('#cover-spin').hide();
                    }
                }
            });
        }


    </script>

@endsection