<link href="<?= base_url('public/admin_assets/fullcalendar/packages/core/main.css') ?>" rel='stylesheet' />
<link href="<?= base_url('public/admin_assets/fullcalendar/packages/daygrid/main.css') ?>" rel='stylesheet' />
<script src="<?= base_url('public/admin_assets/fullcalendar/packages/core/main.js') ?>"></script>
<script src="<?= base_url('public/admin_assets/fullcalendar/packages/interaction/main.js') ?>"></script>
<script src="<?= base_url('public/admin_assets/fullcalendar/packages/daygrid/main.js') ?>"></script>
<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>



<style>
    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }

    .popper,
    .tooltip {
        position: absolute;
        z-index: 9999;
        background: #FFC107;
        color: black;
        width: 150px;
        border-radius: 3px;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
        padding: 10px;
        text-align: center;
        opacity: 1;
        top: -4px !important;
    }

    .popper .popper__arrow,
    .tooltip .tooltip-arrow {
        width: 0;
        height: 0;
        border-style: solid !important;
        border-color: #FFC107;
        position: absolute;
        border-left: transparent;
        border-right: transparent;
        border-bottom: transparent;
        border-width: 8px;
    }

    .tooltip-arrow {
        bottom: -16px;
    }


    .tooltip-inner {
        background: #FFC107 !important;
        color: black !important;
    }

    .job-reprt .modal-header {
        border-bottom-color: #f4f4f4;
        background: #367fa9;
        color: #fff;
    }

    .job-reprt .modal-header .close {
        color: #fff;
        opacity: 1;
    }

    .job-reprt .modal-body .col-xs-12 {
        padding: 5px 0;
    }

    .job-reprt .modal-body .col-xs-12:nth-child(odd) {
        background: #ecf0f5;
    }

    .job-reprt .modal-body .col-xs-12 p {
        margin: 0;
    }

    @media only screen and (max-width:667px) {
        .fc-button {
            padding: 0.4em 0.3em;
        }
    }

    @media only screen and (max-width:575px) {
        .fc-toolbar {
            flex-direction: column;
        }

        .fc-center {
            padding: 10px 0;
        }
    }
</style>

<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h3>
            Job Booking Report
        </h3>
        <!--<ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
            <li class="active">Dashboard</li>
          </ol>-->
    </section>

    <!-- Main content -->
    <section class="content">
        <div class="row">
            <div class="col-xs-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <div class="admin_tab">

                            <?php

                            $CI = &get_instance();
                            $CI->db->select('*');
                            $CI->db->from('role_menu');
                            $CI->db->join('menu', 'menu.menu_id = role_menu.menu_id', 'left');
                            $CI->db->where('role_id', $admin['role_id']);
                            //$CI->db->where('role_id',14);
                            $CI->db->where('parent_id', 39);
                            $query = $CI->db->get();
                            //echo $CI->db->last_query();exit;
                            $menus = $query->result_array();

                            function searcharray($value, $key, $array)
                            {
                                foreach ($array as $k => $val) {
                                    if ($val[$key] == $value) {
                                        return $val;
                                    }
                                }
                                return null;
                            }

                            $edit_result = searcharray('Edit', 'menu_name', $menus);
                            ?>

                            <?php if ($this->session->flashdata('error_msg')) { ?>
                                <span style="color:red; font-weight:bold"><?php echo $this->session->flashdata('error_msg'); ?></span>
                            <?php } ?>
                            <?php if ($this->session->flashdata('success_msg')) { ?>
                                <span style="color:green; font-weight:bold"><?php echo $this->session->flashdata('success_msg'); ?></span>
                            <?php } ?>
                        </div>
                    </div>
                    <!-- /.box-header -->
                    <div class="box-body">
                        <div id='calendar'></div>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </section>
    <!-- /.content -->
</div>

<div class="modal fade job-reprt" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <input type="hidden" id="meeting_id" name="meeting_id" value="">
                <h4 class="modal-title">JOB Description</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="job_title">Job Title</label>
                        <p id="job_title"></p>
                    </div>
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="service_date">Service Date</label>
                        <p id="service_date"></p>
                    </div>
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="car_no">Car No.</label>
                        <p id="car_no"></p>
                    </div>
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="job_assign_status">Job Assign Status</label>
                        <p id="job_assign_status"></p>
                    </div>
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="mechanic_name">Mechanic Name</label>
                        <p id="mechanic_name"></p>
                    </div>
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="assigned_by">Job Assigned By</label>
                        <p id="assigned_by"></p>
                    </div>
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="job_status">Job Status</label>
                        <p id="job_status"></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer accept_reject_cls">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <!-- <button type="button" class="btn btn-primary" id="accept">Accept</button> -->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            header: {
                left: 'prevYear,prev,next,nextYear today',
                center: 'title',
                right: 'dayGridMonth,dayGridWeek,dayGridDay'
            },
            defaultDate: new Date(),
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events

            events: [

                <?php foreach ($calendar_data as $calender) { ?> {
                        job_id: "<?php echo $calender['job_id']; ?>",
                        title: '<?php echo '#JOB' . str_pad($calender['job_id'], 6, '0', STR_PAD_LEFT); ?>',
                        start: '<?php echo $calender['service_date'] ?>',
                        service_date: '<?php echo $calender['formatted_service_date'] ?>',
                        car_no: '<?php echo $calender['car_no'] ?>',
                        mechanic_name: '<?php echo $calender['mechanic_name'] ?>',
                        job_status: '<?php echo $calender['job_status'] ?>',
                        assign_status: '<?php echo $calender['assign_status'] ?>',
                        assigned_by: '<?php echo $calender['assigned_by'] ?>',
                        job_type: '<?php echo $calender['job_type'] ?>',
                        paid_or_unpaid: '<?php echo $calender['paid_or_unpaid'] ?>',
                        description: 'Car: ' + "<?= $calender['car_no'] ?>" + ' Mechanic: ' + "<?= $calender['mechanic_name'] ?>"
                        //color  : ''
                        //url:'www.google.com',
                    },
                <?php } ?>
            ],
            eventRender: function(info) {
                var tooltip = new Tooltip(info.el, {
                    title: info.event.extendedProps.description,
                    placement: 'top',
                    trigger: 'hover',
                    container: 'body'
                });
            },
            eventClick: function(info) {
                // Display the modal and set the values to the event values.
                info.jsEvent.preventDefault(); // don't let the browser navigate
                console.log(info.event);
                $('.modal').modal('show');

                if (info.event.title) { //alert(event.title);
                    $('.modal').find('#job_title').text(info.event.title);
                    $('.modal').find('#car_no').text(info.event.extendedProps.car_no);
                    $('.modal').find('#service_date').text(info.event.extendedProps.service_date);
                    $('.modal').find('#mechanic_name').text(info.event.extendedProps.mechanic_name);
                    $('.modal').find('#job_id').val(info.event.extendedProps.job_id);
                    $('.modal').find('#job_status').text(info.event.extendedProps.job_status);
                    $('.modal').find('#job_assign_status').text(info.event.extendedProps.assign_status);
                    $('.modal').find('#assigned_by').text(info.event.extendedProps.assigned_by);



                } else { //alert(2);


                }
                if (info.event.url) {
                    window.open(info.event.url);
                }

            },

        });



        calendar.render();


    });
</script>