@extends('layouts.app')

@push('head-script')
<style>
    .carousel-control.left{
        background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0, 0, 0, 0) 100%) !important;
    }
    .carousel-control.right{
        background-image:linear-gradient(to right,rgba(0,0,0,.0001) 0,rgba(0, 0, 0, 0) 100%) !important;
    }
    .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev{
        color:#BDBDBD;
        border: 1px solid #000;
        background-color:#d3d3d3;
        width: 30px !important;
        height: 24px !important;
    }
    .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next{
        color:#BDBDBD;
        border: 1px solid #000;
        background-color:#d3d3d3;
        width: 30px !important;
        height: 24px !important;
    }
    .carousel-indicators{
        display:none;
    }
    .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev{
        font-size:18px;
    }
    .fc-event{
        font-size: 10px !important;
    }
    #calendar .fc-view-container .fc-view .fc-more-popover{
        top: 136px !important;
        left: 105px !important;
    }
    @keyframes fa-blink {
        0% { opacity: 1; }
        25% { opacity: 0.25; }
        50% { opacity: 0.5; }
        75% { opacity: 0.75; }
        100% { opacity: 0; }
    }
    .fa-blink {
        -webkit-animation: fa-blink 1.75s linear infinite;
        -moz-animation: fa-blink 1.75s linear infinite;
        -ms-animation: fa-blink 1.75s linear infinite;
        -o-animation: fa-blink 1.75s linear infinite;
        animation: fa-blink 1.75s linear infinite;
    }
    .dashboard-clock {
        font-size: 26px;
        font-weight: 300;
    }
    #slash-custom{
        position: inherit;
        content: "/";
        color: red;
        font-weight: 100;
        font-size: 3.3em;
    }
    #description_recent_tasks p{
        margin-bottom:5px;
    }
    .view_all{
        display:block;
        color: #337ab7;
        text-align:center;
    }
</style>
@endpush
@section('page-title')


<div class="row bg-title">
    <!-- .page title -->
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <h4 class="page-title "><i class="{{ $pageIcon }}"></i> {{ __($pageTitle) }}</h4>
    </div>
</div>
<!-- /.page title -->
<!-- .breadcrumb -->
@endsection

@push('head-script')
<link rel="stylesheet" type="text/css" id="fullcalendar-css" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.css">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/calendar/dist/fullcalendar.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/bower_components/morrisjs/morris.css') }}"><!--Owl carousel CSS -->
<link rel="stylesheet" href="{{ asset('plugins/bower_components/owl.carousel/owl.carousel.min.css') }}"><!--Owl carousel CSS -->
<link rel="stylesheet" href="{{ asset('plugins/bower_components/owl.carousel/owl.theme.default.css') }}"><!--Owl carousel CSS -->

<style>
    .highcharts-subtitle{
        left:180px !important;
        top:150px !important;
        font-weight:700;
        font-size:40px !important;
    }
    .custom-panel-heading{
        border: 1px solid #ccc;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
    }
    .custom-panel-new{
        border: 1px solid #E3F5FF;
        background-color:#E3F5FF;
    }
    .custom-panel-body{
        border: 1px solid #ccc;
    }
    .col-in {
        padding: 0 20px !important;

    }

    .fc-event {
        font-size: 10px !important;
    }

    .dashboard-settings {
        padding-bottom: 8px !important;
    }
    .front-dashboard .white-box{
        margin-bottom: 8px;
    }
    .title_card{
        font-weight:600;
    }
    .subtitle_card{
        font-size:30px !important;
    }
    .fc-button.fc-button-primary{
        font-size:10px !important;
        padding-top:2px !important;
        padding-left:3px !important;
        padding-right:3px !important;
    }
    .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr{
        margin-top:0px !important;
        margin-bottom:0px !important;
    }
    @media (min-width: 769px) {
        #wrapper .panel-wrapper {
            height: 530px;
            overflow-y: auto;
        }
    }

</style>
@endpush

@section('content')

<div class="white-box">
    <div class="row">
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-body custom-panel-new">
                    <h4 class="title_card">Bookings</h4>
                    <h3 class="subtitle_card"></h3>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-body custom-panel-new">
                    <h4 class="title_card">Facilities</h4>
                    <h3 class="subtitle_card">0</h3>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="panel panel-default">
                <div class="panel-body custom-panel-new">
                    <h4 class="title_card">Cancelled Bookings</h4>
                    <h3 class="subtitle_card">0</h3>
                </div>
            </div>
        </div>
    </div>
    <div class='row test_container'>
        <div class="col-lg-4 ">
            <div class="panel panel-default">
                <div class="panel-body custom-panel-body column_test">
                    <h4 style="margin-top:6px">Customers</h4>
                    <p>Customers that made booking</p>
                    <div id="pie_booking_facility">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4 ">
            <div class="panel panel-default">
                <div class="panel-body custom-panel-body column_test">
                    <h4>Facility Review</h4>
                    <ul class="list-task list-group">
                                            </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-4 ">
            <div class="panel panel-default">
                <div class="panel-body custom-panel-body column_test">
                    <div id='calendar_bookings'></div>
                </div>
            </div>
        </div>
    </div>
    <div class='row'>
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-body custom-panel-body">
                    <input type="hidden" id="page_bookings" name="page_bookings" value="1">
                    <div id="table_bookings" class="table-responsive">
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="mdl_detail_booking" tabindex="-1" role="dialog" aria-labelledby="mdl_detail_contract" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Detail Booking</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row" id="append_detail_booking">

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

@endsection


@push('footer-script')
<script src="{{ asset('plugins/bower_components/raphael/raphael-min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/morrisjs/morris.js') }}"></script>

<script src="{{ asset('plugins/bower_components/waypoints/lib/jquery.waypoints.js') }}"></script>
<script src="{{ asset('plugins/bower_components/counterup/jquery.counterup.min.js') }}"></script>

<!-- jQuery for carousel -->
<script src="{{ asset('plugins/bower_components/owl.carousel/owl.carousel.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/owl.carousel/owl.custom.js') }}"></script>

<!--weather icon -->
<script src="{{ asset('plugins/bower_components/skycons/skycons.js') }}"></script>

<script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/fullcalendar.min.js') }}"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/jquery.fullcalendar.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.1/main.min.js"></script>
<script src="{{ asset('plugins/bower_components/calendar/dist/locale-all.js') }}"></script>
<script src="{{ asset('plugins/bower_components/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
<script src="{{ asset('js/moment-timezone.js') }}"></script>
<script src="{{ asset('js/Chart.min.js') }}"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
<script>
    

    function get_pie_booking_facility() {
    var start_date = '';
    var end_date = '';
    $.get('/admin/ajax_get_bookings_facilities', function (res) {
    Highcharts.chart('pie_booking_facility', {
    chart: {
    plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false,
            type: 'pie'
    },
            title: {
            text: null
            },
            subtitle: {
            useHTML: true,
                    text: '<span>' + res.percent_customer + '%</span>',
                    floating: true,
                    verticalAlign: 'middle',
                    y: 20
            },
            credits: {
            enabled: false
            },
            plotOptions: {
            pie: {
            allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                    enabled: false
                    },
                    showInLegend: true
            }
            },
            series: [{
            name: 'Customer',
                    innerSize: '50%',
                    colorByPoint: true,
                    data: res.data
            }]
    });
    $('.test_container').each(function(){  
      
      // Cache the highest
      var highestBox = 0;
      
      // Select and loop the elements you want to equalise
      $('.column_test', this).each(function(){
        
        // If this box is higher than the cached highest then store it
        if($(this).height() > highestBox) {
          highestBox = $(this).height(); 
        }
        console.log(highestBox)
      
      });  
            
      // Set the height of all those children to whichever was highest 
      $('.column_test',this).height(highestBox);
      $('.fc-view-harness').height(highestBox - 20)           
    }); 
    }, 'json');
    }
    get_pie_booking_facility()



            jQuery('#date-perstatus').datepicker({
    toggleActive: true,
            format: '{{ $global->date_picker_format }}',
            language: '{{ $global->locale }}',
            autoclose: true,
            weekStart: '{{ $global->week_start }}',
    });
    document.addEventListener('DOMContentLoaded', function() {
    var Calendar = FullCalendar.Calendar;
    var Draggable = FullCalendar.Draggable;
    var calendarEl = document.getElementById('calendar_bookings');
    var initialTimeZone = "UTC+7";
    var can_edit = true;
//            new Draggable(containerEl, {
//                itemSelector: '.fc-event',
//                eventData: function(eventEl) {
//                    console.log(eventEl.attributes.dataid.value)
//                    return {
//                        id: eventEl.attributes.dataid.value,
//                        title: eventEl.innerText
//                    };
//                },
//            });

    // initialize the calendar
    // -----------------------------------------------------------------

    var formatstring = "YYYY-MM-DD";
    function CalendarWoSchedule() {
    var unit_id = $('#unit_id').val();
    var calendar = new Calendar(calendarEl, {
    timeZone: initialTimeZone,
            headerToolbar: {
            left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            editable: can_edit,
            events: '/admin/workorders/ajax_get_calendar_bookings',
            eventTimeFormat: {
            hour: '2-digit', //2-digit, numeric
                    minute: '2-digit', //2-digit, numeric
                    second: '2-digit', //2-digit, numeric
                    meridiem: false, //lowercase, short, narrow, false (display of AM/PM)
                    hour12: false //true, false
            },
            eventContent: function(arg) {
            var rx = /{([0-9]+)}/g;
            return {
            html: arg.event.title.replace(rx, function($0, $1) {
            return "<br>";
            })
            }
            },
            droppable: can_edit, // this allows things to be dropped onto the calendar
            drop: function(info) {

            },
            eventClick: function(info) {
            $.get('/admin/workorders/getAjaxDetailBooking/' + info.event._def.publicId, function(res) {
            console.log(res)
                    var html = '<div class="col-lg-12">';
            html += `<table class="table table-striped table-bordered">
                                <tbody>
                                    <tr><th colspan="2">Booking Detail</th></tr>
<tr>
                                    <td>Code</td>
                                    <td>` + res.code + `</td>
                                </tr>
                                <tr>
                                    <td>Booking Date</td>
                                    <td>` + res.booking_date + `</td>
                                </tr><tr>
                                    <td>Check In</td>
                                    <td>` + res.check_in + `</td>
                                </tr><tr>
                                    <td>Check Out</td>
                                    <td>` + res.check_out + `</td>
                                </tr>
                                        <tr>
                                    <td>Tenant</td>
                                    <td>` + res.uname + `</td>
                                </tr>
                                        <tr>
                                    <td>Unit</td>
                                    <td>` + res.unit_name + `</td>
                                </tr>
                                <tr>
                                    <td>Facility</td>
                                    <td>` + res.name + `</td>
                                </tr>`;
            html += `</tbody></table></div>`;
            $('#append_detail_booking').html(html)
                    $('#mdl_detail_booking').modal('show')
            }, 'json')

            },
            eventDrop: function(info) {
            var sr_id = info.event._def.publicId;
            var start_date = info.event._instance.range.start.toLocaleDateString();
            var date_time = convert(info.event._instance.range.end);
            var utc_date = info.event._instance.range.start.getUTCDate();
            var utc_time = info.event._instance.range.end.getUTCHours();
            }
    });
    calendar.destroy();
    calendar.render();
    }
    CalendarWoSchedule();
//        $('body').on('change', '#search_personel', function() {
//            var personel_id = $(this).val()
//            console.log(personel_id)
//            CalendarWoSchedule()
//        })
    $('#apply-filters').click(function () {
    CalendarWoSchedule()
    });
    });
    
    function getTableBookings() {
            var page = $('#page_bookings').val();
            $.get('/admin/workorders/ajax_get_bookings?page=' + page, function (res) {
            $('#table_bookings').html(res)
            })
            }
    getTableBookings()
    
</script>
@endpush