<div class="container-fluid" style="padding-bottom: 2rem;">
    <div class="row">
        <div class="col-md-8">
            <div class="card bg-light-transparent" style="margin-bottom: 2rem;">
                <div class="card-header bg-white">
                    <div class="float-left">
                        <h5 class="card-title">Calendar</h5>
                    </div>
                </div>
                <div class="card-body">
                    <div class="card bg-white no-shadow">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-2">
                                    <?php foreach ($room_type as $type) { ?>
                                        <br><div data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['room']; ?>" class="text-center mt-2 text-white" style="background-color: <?php echo '#'.$type['color_code']; ?>;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #ccc; height:28px;"><?php echo $type['short_name']; ?></div>
                                    <?php } ?>
                                </div>
                                <div class="col-10">
                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card bg-light-transparent" style="margin-bottom: 2rem;">
                <div class="card-header bg-white">
                    <h5 class="card-title">Room Booking Summary</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12">
                            <button type="button" class="btn btn-dark btn-block add-shadow" onclick="loadModal(true)">
                                New booking
                            </button>
                            <!-- <a class="btn btn-block btn-dark add-shadow" href="<?php echo base_url('hr/serviceform/meeting_form'); ?>" style="padding-top: 1rem; padding-bottom: 1rem;">New Booking</a> -->
                        </div>
                    </div>
                    <br>
                    <div class="card bg-white no-shadow">
                        <div class="card-body">
                            <h6>Total Booking (<?php echo date('Y') ?>)</h6>
                            <br>
                            <div class="row">
                                <table id="table_types" class="table table-bordered table-striped table-hover mx-1">
                                    <thead class="text-center">
                                        <th>Room</th>
                                        <th>Total Booking</th>
                                    </thead>
                                    <tbody class="text-center">
                                        <?php foreach($room_type as $type): ?>
                                            <tr>
                                                <td class="text-uppercase" data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['room']; ?>"><?php echo $type['room']; ?></td>
                                                <td><?php echo $type['total_booking']; ?></td>
                                            </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="card bg-light-transparent">  
        <div class="card-header bg-white">
            <div class="float-left">
                <h4>Meeting & Training Booking List</h4>
                <a href="<?php echo base_url('hr/serviceform/meeting_form'); ?>" class="btn btn-outline-dark btn-sm" title="Add New Booking" ><i class="fa fa-plus"></i> Add New Booking</a>

                <a href="<?php echo base_url('hr/Serviceform_report/meeting_room_print')?>" target="_blank" class="btn btn-outline-dark btn-sm" title="Print"><i class="fa fa-print"></i>Print</a>

                <a id="btnShowFilters" type="button" class="btn btn-outline-dark btn-sm collapsed" data-trigger="hover" title="Show Filters Box" data-toggle="collapse" data-target="#collapseFilter" aria-expanded="false"><i class="fas fa-filter"></i>Show Filters</a>
            </div>
        </div>

        <div class="collapse" id="collapseFilter">
            <div class="card-header">
                <div class="row">
                    <div class="col">
                        <div class="card no-shadow">
                            <div class="card-body">
                                <input type="hidden" name="user_id" id="user_id" value="<?php echo $_SESSION['user']['id']; ?>">
                                <?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
                                    <div class="form-group row">
                                        <label for="sv_room_booking_filter_dept" class="col-lg-3">
                                            Department
                                        </label>                           
                                        <div class="col-lg-4" >
                                            <select class="custom-select" name="sv_room_booking_filter_dept" id="sv_room_booking_filter_dept">
                                                <option value="-1">[All]</option>
                                                <?php if($departments) foreach($departments as $row){ ?>
                                                    <option value="<?php echo $row['id']; ?>"><?php echo $row['name'].' ['.$row['branch_name'].']'; ?></option> 
                                                <?php } ?>
                                            </select>
                                        </div>
                                    </div>
                                <?php } ?>
                                <div class="form-group row">
                                    <label for="filterRoom" class="col-lg-3">
                                        Room
                                    </label>
                                    <div class="col-lg-4">    
                                        <select class='custom-select' id="sv_room_booking_filter_room" name="sv_room_booking_filter_room">
                                            <option value="-1">[All]</option>
                                            <?php foreach ($room_type as $key => $type): ?>
                                                <option value="<?php echo $type['ID'];?>"><?php echo $type['room'];?></option>
                                            <?php endforeach ?>
                                            <option value="7">Other</option>
                                        </select>
                                    </div>                                         
                                </div>
                                <div class="form-group row">
                                    <label for="sv_room_booking_filter_status" class="col-lg-3">
                                        Status
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <select class="custom-select" id="sv_room_booking_filter_status" name="sv_room_booking_filter_status">
                                            <option value="-1">[All]</option>
                                            <option value="Pending">Pending</option>
                                            <option value="In_progress">In Progress</option>
                                            <option value="Verified">Verified</option>
                                            <option value="Completed">Completed</option>
                                            <option value="Rejected">Rejected</option>
                                            <option value="Cancel">Cancel</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_room_booking_filter_year" class="col-lg-3">
                                        Year
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="sv_room_booking_filter_year" id="sv_room_booking_filter_year" class="form-control datepicker-yyyy">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="sv_room_booking_filter_month" class="col-lg-3">
                                        Requested Month
                                    </label>                           
                                    <div class="col-lg-4" >
                                        <input type="text" name="sv_room_booking_filter_month" id="sv_room_booking_filter_month" class="form-control datepicker-mm">
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col d-print-none">
                                        <button class="btn btn-info" id="searchBtn">Search</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="tab-content">
            <div class="tab-pane fade active show" id="tableView" role="tabpanel" aria-labelledby="nav-table-tab">
                <div class="card-body">
                    <div class="card no-shadow">
                        <div class="card-body">
                            <div class="table-responsive">
                                <table id="filter_table_meeting" class="table table-bordered p-0 m-0">
                                    <thead>
                                        <th class="text-center" width="1%">#</th>
                                        <th class="text-center" width="8%">Packages</th>
                                        <th class="text-center" width="10%">Meeting Room</th>
                                        <th class="text-center"  width="8%">Equipment</th>
                                        <th class="text-center"  width="10%">Event</th>
                                        <th class="text-center"  width="9%">Meal</th>
                                        <th class="text-center"  width="7%">Date Start </th>
                                        <th class="text-center"  width="7%">Date End</th>
                                        <th class="text-center"  width="5%">Status</th>
                                        <th class="text-center" width="2%">Action</th>           
                                    </thead>
                                    <tbody id="list_booking_room">
                                        <?php $i = 1; if(!empty($booking_room)) { foreach($booking_room as $key => $row) { ?>
                                            <tr>
                                                <td class="text-center"><?php echo $i++; ?></td>
                                                <td><?php echo (!empty($row['package']) && $row['package'] != '-- Please Select --')?$row['package']:''; ?></td>
                                                <td>
                                                    <?php 
                                                    if(!empty($row['other_room']))
                                                    {
                                                        echo $row['other_room'];
                                                    }else{
                                                        echo $row['room'];
                                                    }

                                                    if($row['pax'] > 0)
                                                    {
                                                        echo '<br>('.$row['pax'].' pax)';
                                                    }else{
                                                        echo '';
                                                    }

                                                    if(!empty($row['table_setup']) && $row['table_setup'] != "-- Please Select --")
                                                    {
                                                        echo '<br>['.$row['table_setup'].']';
                                                    }else{
                                                        echo '';
                                                    }
                                                    ?>
                                                </td>
                                                <td><?php if(!empty($row['equipment']))
                                                    {
                                                        $equipment = explode(',',$row['equipment']);

                                                        foreach($equipment as $eqpt) {
                                                            echo '<li>'.$eqpt.'</li>'; 
                                                        }

                                                    } else {
                                                        echo '';
                                                    } ?>
                                                </td>
                                                <td>
                                                    Title : <?php echo $row['event_title']; ?><br>
                                                    Host : <?php echo $row['dept_name'].'/'.$row['branchName']; ?><br>
                                                    Client : <?php echo $row['client']; ?>
                                                </td>
                                                <td>
                                                    <?php 
                                                    if(!empty($row['breakfast']) && $row['breakfast'] != '-- Please Select --')
                                                    { 
                                                        echo '<input type="checkbox" disabled name="breakfast" id="breakfast value="1" checked> Breakfast <br>';
                                                    } else {
                                                        echo '<input type="checkbox" disabled name="breakfast" id="breakfast value="1"> Breakfast <br>';
                                                    }

                                                    if(!empty($row['lunch'] || $row['other_menu']) && $row['lunch'] != '-- Please Select --')
                                                    {
                                                        echo '<input type="checkbox" disabled name="lunch" id="lunch value="1" checked> Lunch <br>';
                                                    } else {
                                                        echo '<input type="checkbox" disabled name="lunch" id="lunch value="1"> Lunch <br>';
                                                    }

                                                    if(!empty($row['hi_tea']) && $row['hi_tea'] != '-- Please Select --')
                                                    { 
                                                        echo '<input type="checkbox" disabled name="hi_tea" id="hi_tea value="1" checked> Hi-Tea <br>';
                                                    } else {
                                                        echo '<input type="checkbox" disabled name="hi_tea" id="hi_tea value="1"> Hi-Tea <br>';
                                                    }

                                                    if(!empty($row['special_request']))
                                                    {
                                                        echo '<input type="checkbox" disabled name="special_request" id="special_request value="1" checked> Special Request';
                                                    } else {
                                                        echo '<input type="checkbox" disabled name="special_request" id="special_request value="1"> Special Request';
                                                    }
                                                    ?>
                                                </td>
                                                <td class="text-center">
                                                    <?php echo date ('d-m-Y',strtotime($row['start_date'])) . ' / ' . $row['start_time']; ?>        
                                                </td>
                                                <td class="text-center">
                                                    <?php echo date('d-m-Y',strtotime($row['end_date'])) . ' / ' . $row['end_time']; ?>
                                                </td>
                                                <td class="text-center">
                                                    <?php 
                                                        if(($row['status_app']==null || $row['status_app']=='Pending'))
                                                        {
                                                            $status = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
                                                            $disabled = '';
                                                        }
                                                        if($row['status_app'] == 'In_progress')
                                                        {
                                                            $status = str_replace('_', ' ', $row['status_app']).' <i class="fa fa-hourglass-start" style="color: grey;"></i>';
                                                            $disabled = 'disabled style="cursor: not-allowed;"';
                                                        }
                                                        if($row['status_app'] == 'Verified')
                                                        {
                                                            $status = $row['status_app'].' <i class="fa fa-check-circle" style="color: green;"></i><p style="font-style: italic; font-size: 13px;">'.$row['status_reason'].'</p>';
                                                            $disabled = '';
                                                        }
                                                        if($row['status_app'] == 'Completed')
                                                        {
                                                            $status = $row['status_app'].' <i class="fa fa-check-circle" style="color: green;"></i>';
                                                            $disabled = 'disabled style="cursor: not-allowed;"';
                                                        }
                                                        if($row['status_app'] == 'Rejected')
                                                        {
                                                            $status = $row['status_app'].' <i class="fa fa-times-circle" style="color: red;"></i>';
                                                            $disabled = 'disabled style="cursor: not-allowed;"';
                                                        }
                                                        if($row['status_app'] == 'Cancel')
                                                        {
                                                            $status = $row['status_app'].' <i class="fa fa-times-circle" style="color: red;"></i>';
                                                            $disabled = 'disabled style="cursor: not-allowed;"';
                                                        }

                                                        echo $status;
                                                    ?> 
                                                </td>
                                                <td class="text-center">
                                                    <div class="btn-group btn-group-sm" role="group">
                                                        <button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" 
                                                        title="View Detail"
                                                        data-name="<?php echo $row['name']; ?>" 
                                                        data-dept="<?php echo $row['dept_name'].'/'.$row['branchName']; ?>" data-datereq="<?php echo date('d-m-Y',strtotime($row['createdTS'])); ?>"
                                                        data-eventtitle="<?php echo $row['event_title']; ?>"
                                                        data-client="<?php echo $row['client']; ?>"
                                                        data-datestart="<?php echo date('d-m-Y',strtotime($row['start_date'])); ?>"
                                                        data-dateend="<?php echo date('d-m-Y',strtotime($row['end_date'])); ?>"
                                                        data-timestart="<?php echo $row['start_time']; ?>"
                                                        data-timeend="<?php echo $row['end_time']; ?>"
                                                        data-vip="<?php echo $row['vip']; ?>"
                                                        data-pax="<?php echo $row['pax']; ?>"
                                                        data-pack="<?php echo $row['package']; ?>"
                                                        data-tblsetup="<?php echo $row['table_setup']; ?>"
                                                        data-equipment="<?php echo $row['equipment']; ?>"
                                                        data-breakfast="<?php echo $row['breakfast']; ?>"
                                                        data-lunch="<?php echo $row['lunch']; ?>"
                                                        data-othermenu="<?php echo $row['other_menu']; ?>"
                                                        data-hitea="<?php echo $row['hi_tea']; ?>"
                                                        data-special="<?php echo $row['special_request']; ?>"
                                                        data-room="<?php echo $row['room']; ?>"
                                                        data-otherroom="<?php echo $row['other_room']; ?>"
                                                        onclick="open_view_meeting_modal(this)">
                                                        <i class="far fa-eye"></i> </button>

                                                        <?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
                                                            <a href="<?php echo base_url('hr/serviceform/meeting_form/'.$row['ID']) ?>" type="button" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>
                                                        <?php } else { ?>
                                                            <?php if($disabled == ''){ ?>
                                                                <a href="<?php echo base_url('hr/serviceform/meeting_form/'.$row['ID']) ?>" type="button" class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>
                                                            <?php }else{ ?>
                                                                <button class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit" disabled style="cursor: not-allowed;"><i class="far fa-edit"></i></button>
                                                            <?php } ?>
                                                        <?php } ?>                                                        

                                                        <a type="button" class="btn btn-outline-dark" href="<?php echo base_url('hr/serviceform_report/meeting_room_print/').$row['ID']; ?>" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>

                                                        <?php if(($_SESSION['user']['id'] == $row['requester_id']) || ($_SESSION['user']['id'] == $row['createdBY'])){ ?>
                                                            <button id="deleteButton" type="button" class="btn btn-outline-dark" onclick="delete_meeting(<?php echo $row['ID']; ?>);" data-trigger="hover" data-tooltip="tooltip" title="Delete" <?php echo ($disabled == '')?'':'disabled style="cursor: not-allowed;"'; ?>><i class="far fa-trash-alt"></i></button>
                                                        <?php } ?>
                                                    </div>
                                                </td>
                                            </tr>
                                        <?php } } ?>
                                    </tbody>
                                </table>
                            </div>                   
                        </div>
                    </div>
                </div>
            </div>
        </div>      
    </div>
</div>

<!-- modal: newRoomBookingModal -->
<div class="modal fade modal-xl" id="newRoomBookingModal" role="dialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title">
                    <h4>New Meeting Room Book</h4>
                    <p class="text-muted" style="margin: 0; padding: 0;" id="modal-subtitle"></p>
                </div>
                <button type="button" class="close app-form" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="applicationForm" class="form">
                <div class="modal-body">
                    <input type="hidden" class="form-control" name="meetingID" id="meetingID" value="<?php echo $ID; ?>">

                    <!-- step 1: date, time, room -->
                    <div class="step-1">
                        <!-- date and time -->
                        <div class="form-row">
                            <div class="col-12 col-sm-3">
                                <div class="form-group">
                                    <label for="start_date">Date Start</label>
                                    <?php if(!empty($ID)){ ?>
                                        <input class="form-control datepicker" type="text" name="start_date" id="start_date" required value="<?php echo date('d-m-Y',strtotime($booking_room[0]['start_date'])); ?>" onchange="check_booking_date()">
                                    <?php } else { ?>
                                        <input class="form-control datepicker frm1" type="text" name="start_date" id="start_date" required onchange="checkSelection()">
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="col-12 col-sm-3">
                                <div class="form-group">
                                    <label for="end_date">Date End</label>
                                    <?php if(!empty($ID)){ ?>
                                        <input class="form-control datepicker" type="text" name="end_date" id="end_date" required value="<?php echo date('d-m-Y',strtotime($booking_room[0]['end_date'])); ?>">
                                    <?php } else { ?>
                                        <input class="form-control datepicker frm1" type="text" name="end_date" id="end_date" required onchange="checkSelection()">
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="col-12 col-sm-3">
                                <div class="form-group">
                                    <label for="start_time">Time Start</label>
                                    <?php if(!empty($ID)){ ?>
                                        <input class="form-control" type="time" name="start_time" id="start_time" required value="<?php echo $booking_room[0]['start_time']; ?>" onchange="check_booking_date()">
                                    <?php } else { ?>
                                        <input class="form-control frm1" type="time" name="start_time" id="start_time" required onchange="checkSelection()">
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="col-12 col-sm-3">
                                <div class="form-group">
                                    <label for="end_time">Time End</label>
                                    <?php if(!empty($ID)){ ?>
                                        <input class="form-control" type="time" name="end_time" id="end_time" required value="<?php echo $booking_room[0]['end_time']; ?>">
                                    <?php } else { ?>
                                        <input class="form-control frm1" type="time" name="end_time" id="end_time" required onchange="checkSelection()">
                                    <?php } ?>
                                </div>
                            </div>
                        </div>

                        <!-- rooms -->
                        <!-- <div class="form-row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="room_id">Room</label>
                                    <div class="row">
                                        <?php foreach ($room_type as $key => $row) { ?>
                                            <div class="col-12 col-sm-6 pt-2">
                                                <img src="<?php echo $row['img_link']; ?>"><br>
                                                <?php if(!empty($ID) && $row['ID'] && $booking_room[0]['room_id'] == $row['ID']){ ?>
                                                    <input type="radio" name="room_id" id="room_id" checked value="<?php echo $row['ID']; ?>" onclick="check_booking_date()">
                                                <?php } else { ?>
                                                    <input type="radio" name="room_id" id="room_id" value="<?php echo $row['ID']; ?>" onclick="check_booking_date()">
                                                <?php } ?>
                                                <?php echo (!empty($row['location']))?$row['room'].' - '.$row['location']:$row['room']; ?>
                                            </div>
                                        <?php } ?>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>

                    <!-- step 2: meeting details -->
                    <div class="step-2">
                        <!-- title and client -->
                        <div class="form-row">
                            <div class="col-12 col-sm-6">
                                <div class="form-group">
                                    <label for="event_title">Event Title</label>
                                    <?php if(!empty($ID)){ ?>
                                        <input class="form-control" type="text" name="event_title" id="event_title" required value="<?php echo $booking_room[0]['event_title']; ?>">
                                    <?php } else { ?>
                                        <input class="form-control" type="text" name="event_title" id="event_title" required>
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6">
                                <div class="form-group">
                                    <label for="client_name">Client</label>
                                    <?php if(!empty($ID)){ ?>
                                        <input class="form-control" type="text" name="client_name" id="client_name" required value="<?php echo $booking_room[0]['client']; ?>">
                                    <?php } else { ?>
                                        <input class="form-control" type="text" name="client_name" id="client_name" required>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>

                        <!-- vip, pax, package -->
                        <div class="form-row">
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="vip">Vip</label>
                                    <div class="row">
                                        <?php if(!empty($ID)){ ?>
                                            <div class="col-sm-4">
                                                <input type="radio" name="vip" id="vip" required value="1" required <?php echo ($booking_room[0]['vip'] == 1)?'checked':'' ?>> Yes
                                            </div>
                                            <div class="col-sm-4">
                                                <input type="radio" name="vip" id="vip" required value="0" required <?php echo ($booking_room[0]['vip'] == 0)?'checked':'' ?>> No
                                            </div>
                                        <?php } else { ?>
                                            <div class="col-sm-4">
                                                <input type="radio" name="vip" id="vip" required value="1" required> Yes
                                            </div>
                                            <div class="col-sm-4">
                                                <input type="radio" name="vip" id="vip" required value="0" required> No
                                            </div>
                                        <?php } ?>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <div class="form-group">
                                    <label for="no_pax">No. of Pax</label>
                                    <?php if(!empty($ID)){ ?>
                                        <input class="form-control" type="number" name="no_pax" id="no_pax" min="1" required value="<?php echo $booking_room[0]['pax'] ?>">
                                    <?php } else { ?>
                                        <input class="form-control" type="number" name="no_pax" id="no_pax" min="1" required>
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="package_id">Package</label>
                                    <select class="form-control" name="package_id" id="package_id" required>
                                        <?php if(!empty($ID)){ ?>
                                            <option selected readonly><?php echo (!empty($booking_room[0]['package']))?$booking_room[0]['package']:"-- Please Select --" ?></option>
                                            <option>Training/Meeting - half day (no meal) = RM15.00 per pax</option>
                                            <option>Training/Meeting - full day (no meal) = RM30.00 per pax</option>
                                            <option>Training/Meeting - half day (1 meal) = RM35.00 per pax</option>
                                            <option>Training/Meeting - half day (2 meals) = RM45.00 per pax</option>
                                            <option>Training/Meeting - full day (1 meal) = RM50.00 per pax</option>
                                            <option>Training/Meeting - full day (2 meals) = RM60.00 per pax</option>
                                            <option>Training/Meeting - full day (3 meals) = RM70.00 per pax</option>
                                            <option>Training/Meeting - full day (3 meals) + VIP = RM80.00 per pax</option>
                                        <?php } else { ?>
                                            <option disabled selected>-- Please Select --</option>
                                            <option>Training/Meeting - half day (no meal) = RM15.00 per pax</option>
                                            <option>Training/Meeting - full day (no meal) = RM30.00 per pax</option>
                                            <option>Training/Meeting - half day (1 meal) = RM35.00 per pax</option>
                                            <option>Training/Meeting - half day (2 meals) = RM45.00 per pax</option>
                                            <option>Training/Meeting - full day (1 meal) = RM50.00 per pax</option>
                                            <option>Training/Meeting - full day (2 meals) = RM60.00 per pax</option>
                                            <option>Training/Meeting - full day (3 meals) = RM70.00 per pax</option>
                                            <option>Training/Meeting - full day (3 meals) + VIP = RM80.00 per pax</option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- setup and equipment -->
                        <div class="form-row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="table_setup">Table Setup</label>
                                    <select class="form-control" name="table_setup" id="table_setup">
                                        <?php if(!empty($ID)){ ?>
                                            <option selected readonly><?php echo (!empty($booking_room[0]['table_setup']))?$booking_room[0]['table_setup']:"-- Please Select --" ?></option>
                                            <option>Classroom</option>
                                            <option>U Shape</option>
                                            <option>Round Table</option>
                                            <option>Theater</option>
                                            <option>Workshop</option>
                                            <option>Standing</option>
                                        <?php } else { ?>
                                            <option disabled selected>-- Please Select --</option>
                                            <option>Classroom</option>
                                            <option>U Shape</option>
                                            <option>Round Table</option>
                                            <option>Theater</option>
                                            <option>Workshop</option>
                                            <option>Standing</option>
                                        <?php } ?>
                                    </select>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="equipment_id">Equipment</label>
                                    <?php if(!empty($ID)){ ?>
                                        <?php 
                                            $eqpt = explode(",",$booking_room[0]['equipment']); 
                                            $rostrum_selected	= '';
                                            $speaker_selected	= '';
                                            $mic_selected		= '';
                                            $internet_selected	= '';
                                            $web_selected		= '';
                                            $extension_selected	= '';
                                        ?>
                                        <select class="form-control selectric" id="equipment_id" name="equipment_id[]" multiple>
                                            <option value="" disabled selected>--Please Select--</option>
                                            <?php if($eqpt) foreach($eqpt as $row){ 
                                                $rostrum_selected 	.= ($row == 'Rostrum')?'selected':'';
                                                $speaker_selected 	.= ($row == 'Portable speaker')?'selected':'';
                                                $mic_selected 		.= ($row == 'Wireless Mic')?'selected':'';
                                                $internet_selected 	.= ($row == 'Internet Connection')?'selected':'';
                                                $web_selected 		.= ($row == 'Web Conferencing')?'selected':'';
                                                $extension_selected .= ($row == 'Power Extension')?'selected':'';
                                            ?>
                                            <?php } ?>
                                            <option <?php echo $rostrum_selected; ?>>Rostrum</option>
                                            <option <?php echo $speaker_selected; ?>>Portable speaker</option>
                                            <option <?php echo $mic_selected; ?>>Wireless Mic</option>
                                            <option <?php echo $internet_selected; ?>>Internet Connection</option>
                                            <option <?php echo $web_selected; ?>>Web Conferencing</option>
                                            <option <?php echo $extension_selected; ?>>Power Extension</option>
                                        </select>
                                        <!-- <select class="form-control selectric" id="equipment_id" name="equipment_id[]" multiple>
                                            <option value="" disabled selected>--Please Select--</option>
                                            <option>Rostrum</option>
                                            <option>Portable speaker</option>
                                            <option>Wireless Mic</option>
                                            <option>Internet Connection</option>
                                            <option>Web Conferencing</option>
                                            <option>Power Extension</option>
                                        </select> -->

                                        <!-- <ol id="equipment_list" style="padding-left: 1.5rem;">
                                            <?php if(!empty($booking_room[0]['equipment'])): 
                                                $eqpt = explode(",",$booking_room[0]['equipment']); ?>
                                                <?php foreach($eqpt as $equipment): ?>
                                                    <li><?php echo ($equipment)?$equipment:''; ?></li>
                                                <?php endforeach; ?>
                                            <?php endif;?>
                                        </ol> -->

                                    <?php } else { ?>
                                        <select class="form-control selectric" id="equipment_id" name="equipment_id[]" multiple>
                                            <option value="" disabled selected>--Please Select--</option>
                                            <option>Rostrum</option>
                                            <option>Portable speaker</option>
                                            <option>Wireless Mic</option>
                                            <option>Internet Connection</option>
                                            <option>Web Conferencing</option>
                                            <option>Power Extension</option>
                                        </select>
                                    <?php } ?>
                                </div>
                            </div>
                        </div>

                        <!-- meals -->
                        <div class="form-row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="breakfast">Breakfast</label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-append">
                                            <?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
                                                <button type="button" id="updateBreakfastMenu" class="btn btn-sm btn-warning" onclick="open_modal('Breakfast')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Breakfast Menu"><i class="far fa-edit"></i></button>
                                            <?php } ?>
                                        </div>
                                        <select class="form-control" name="breakfast" id="breakfast">
                                            <?php if(!empty($ID)){ ?>
                                                <option>-- Please Select --</option>
                                                <?php if($meal_menu) foreach($meal_menu as $bf){ ?>
                                                    <?php if($bf['type'] == 0){ ?>
                                                        <option <?php echo ($booking_room[0]['breakfast'] == $bf['menu']?'selected':'') ?>><?php echo $bf['menu']; ?></option>
                                                    <?php } ?>
                                                <?php } ?>
                                            <?php } else { ?>
                                                <option>-- Please Select --</option>
                                                <?php if($meal_menu) foreach($meal_menu as $bf){ ?>
                                                    <?php if($bf['type'] == 0){ ?>
                                                        <option><?php echo $bf['menu']; ?></option>
                                                    <?php } ?>
                                                <?php } ?>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="lunch">Lunch</label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-append">
                                        <?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
                                            <button type="button" id="updateLunchMenu" class="btn btn-sm btn-warning" onclick="open_modal('Lunch')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Lunch Menu"><i class="far fa-edit"></i></button>
                                        <?php } ?>
                                        </div>
                                        <select class="form-control" name="lunch" id="lunch">
                                            <?php if(!empty($ID)){ ?>
                                                <option>-- Please Select --</option>
                                                <?php if($meal_menu) foreach($meal_menu as $lunch){ ?>
                                                    <?php if($lunch['type'] == 1){ ?>
                                                        <option <?php echo ($booking_room[0]['lunch'] == $lunch['menu']?'selected':'') ?>><?php echo $lunch['menu']; ?></option>
                                                    <?php } ?>
                                                <?php } ?>
                                            <?php } else { ?>
                                                <option>-- Please Select --</option>
                                                <?php if($meal_menu) foreach($meal_menu as $lunch){ ?>
                                                    <?php if($lunch['type'] == 1){ ?>
                                                        <option><?php echo $lunch['menu']; ?></option>
                                                    <?php } ?>
                                                <?php } ?>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="tea">Hi-Tea</label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-append">
                                        <?php if($_SESSION['all_modules_access'][0]['access_lvl'] == 'admin' || $_SESSION['user']['division_id'] == 4){ ?>
                                            <button type="button" id="updateHiTeaMenu" class="btn btn-sm btn-warning" onclick="open_modal('Hi-Tea')" data-trigger="hover" data-tooltip="tooltip" title="" data-original-title="Update Hi-Tea Menu"><i class="far fa-edit"></i></button>
                                        <?php } ?>
                                        </div>
                                        <select class="form-control" name="tea" id="tea">
                                            <?php if(!empty($ID)){ ?>
                                                <option>-- Please Select --</option>
                                                <?php if($meal_menu) foreach($meal_menu as $tea){ ?>
                                                    <?php if($tea['type'] == 2){ ?>
                                                        <option <?php echo ($booking_room[0]['hi_tea'] == $tea['menu']?'selected':'') ?>><?php echo $tea['menu']; ?></option>
                                                    <?php } ?>
                                                <?php } ?>
                                            <?php } else { ?>
                                                <option>-- Please Select --</option>
                                                <?php if($meal_menu) foreach($meal_menu as $tea){ ?>
                                                    <?php if($tea['type'] == 2){ ?>
                                                        <option><?php echo $tea['menu']; ?></option>
                                                    <?php } ?>
                                                <?php } ?>
                                            <?php } ?>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- others -->
                        <div class="form-row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <?php if(!empty($booking_room[0]['other_menu'])){ ?>
                                        <input type="checkbox" name="other_menu_id" id="other_menu_id" value="1" onchange="open_hidden_other_menu(this);" checked>
                                        <label for="other_menu">Other Menu<small><b>(*for lunch menu)</b></small></label>
                                        <input type="text" class="form-control" name="other_menu" id="other_menu" value="<?php echo $booking_room[0]['other_menu']; ?>">
                                    <?php } else { ?>
                                        <input type="checkbox" name="other_menu_id" id="other_menu_id" value="1" onchange="open_hidden_other_menu(this);">
                                        <label for="other_menu">Other Menu<small><b> (*for lunch menu)</b></small></label>
                                        <input type="text" class="form-control" name="other_menu" id="other_menu" hidden>
                                    <?php } ?>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <?php if(!empty($booking_room[0]['special_request'])){ ?>
                                        <input type="checkbox" name="special_request_id" id="special_request_id" value="1" onchange="open_hidden_special_request(this);" checked>
                                        <label for="special_request">Special Request</label>
                                        <input type="text" class="form-control" name="special_request" id="special_request" value="<?php echo $booking_room[0]['special_request']; ?>">
                                    <?php } else { ?>
                                        <input type="checkbox" name="special_request_id" id="special_request_id" value="1" onchange="open_hidden_special_request(this);">
                                        <label for="special_request">Special Request</label>
                                        <input type="text" class="form-control" name="special_request" id="special_request" hidden >
                                    <?php } ?>	
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- requester -->
                    <!-- <div class="form-row">
                        <div class="col-12 col-sm-6">
                            <div class="form-group">
                                <label>Name</label>
                                <?php if(($ID == 0)) { ?>
                                    <input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo $_SESSION['user']['name']; ?>" readonly>
                                    <input type="text" class="form-control" name="requester_id" id="requester_id" value="<?php echo $_SESSION['user']['id']; ?>" hidden>
                                <?php } else { ?>
                                    <?php if(!empty($booking_room)) { ?>
                                        <?php foreach($booking_room as $row) { //debug($row); ?>
                                            <input type="text" class="form-control" name="reqName" id="reqName" value="<?php echo $row['name']; ?>" readonly>
                                            <input type="hidden" class="form-control" name="requester_id" id="requester_id" value="<?php echo $row['requester_id']; ?>" readonly>
                                        <?php }?>
                                    <?php } ?>
                                <?php }?>												
                            </div>
                        </div>

                        <div class="col-12 col-sm-3">
                            <div class="form-group">
                                <label for="department">Department</label>
                                <?php if(!empty($ID)){ ?>
                                    <?php if(!empty($booking_room)): foreach($booking_room as $row): ?>
                                        <input type="text" class="form-control" name="department" id="department" value="<?php echo $row['dept_name']; ?>" readonly>
                                        <input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $row['department_id']; ?>" hidden>
                                    <?php endforeach;endif; ?>
                                <?php } else { ?>
                                    <input type="text" class="form-control" name="department" id="department" value="<?php echo $_SESSION['user']['department_name']; ?>" readonly>
                                    <input type="text" class="form-control" name="department_id" id="department_id" value="<?php echo $_SESSION['user']['department_id']; ?>" hidden>
                                <?php } ?>
                            </div>
                        </div>

                        <div class="col-12 col-sm-3">
                            <div class="form-group">
                                <label for="reqDate">Request Date</label>
                                <?php if(!empty($ID)){ ?>
                                    <?php if(!empty($booking_room)): foreach($booking_room as $row): ?>
                                        <input type="" class="form-control" name="reqDate" id="reqDate" value="<?php echo (!empty($ID))?date('d-m-Y',strtotime($row['createdTS'])):''; ?>" readonly>
                                    <?php endforeach;endif; ?> 
                                <?php } else { ?>
                                    <input type="" class="form-control" name="reqDate" id="reqDate" value="<?php echo date("d-m-Y"); ?>" readonly>
                                <?php } ?>
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="modal-footer">
                    <!-- buttons -->
                    <!-- <?php if($ID){ ?>
                        <?php if($_SESSION['user']['id'] == $booking_room[0]['createdBY']){ ?>
                            <div class="form-row">
                                <div class="col-12">
                                    <div class="float-right" style="padding-top: 2rem;">
                                        <a class="btn btn-light" href="<?php echo base_url('hr/serviceform/meeting_list'); ?>">Cancel</a>
                                        <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
                                    </div> 
                                </div>
                            </div>
                        <?php } ?>
                    <?php } else { ?>
                        <div class="form-row">
                            <div class="col-12">
                                <div class="float-right" style="padding-top: 2rem;">
                                    <a class="btn btn-light" href="<?php echo base_url('hr/serviceform/meeting_list'); ?>">Cancel</a>
                                    <button type="submit" class="btn btn-primary" id="submitBtn">Submit</button>
                                </div> 
                            </div>
                        </div>
                    <?php } ?> -->
                    <div class="float-left" style="margin-right: auto;">
                        <span class="text-danger" id="application-error"></span>
                    </div>
                    <div class="float-right">
                        <button type="button" class="btn btn-warning app-form" data-dismiss="modal">Cancel</button>
                        <button id="next-btn" type="button" class="btn btn-primary step-1" onclick="navigateStep(1)">
                            Next
                        </button>
                        <button id="back-btn" class="btn btn-secondary step-2" type="button" onclick="navigateStep(-1)">
                            Back
                        </button>
                        <button id="submit-btn" class="btn btn-primary step-2" type="button">
                            Submit
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>


<style type="text/css">
    .tooltipevent
    {
        width:auto;
        height:auto;
        background:rgba(0,0,0,0.75);
        position:absolute;
        color: #fff;
        z-index:10001;
        padding:10px 10px 10px 10px ;  
        line-height: 200%;
    }
</style>

<script>
    var step = 1;

    $('.step-2').hide();

    // main
    $(document).ready(function(){

        $('#table_types').DataTable().destroy();

        var fc_event= '';
        var resource = <?php echo $resource;?>;
        
        var fullcalendar = $('#calendar').fullCalendar({ 
            themeSystem: 'bootstrap4',
            header: 
            {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listMonth'
            },
            buttonText: {
                today: 'Today',
                month: 'Calendar',
                listMonth: 'List'
            },

            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            events: <?php echo $fc_event; ?>,

            eventMouseover: function (data, event, param, resource = <?php echo $resource;?>) {
                var js_res = JSON.parse(JSON.stringify(resource));
                var hover_item = js_res[data.id];
                var title = JSON.stringify(data.title);
                var start_date = moment(hover_item.start_date).format('DD-MM-YYYY');
                var end_date = moment(hover_item.end_date).format('DD-MM-YYYY');


                if(hover_item.room_id == 7)
                {
                    var room = hover_item.other_room;
                } else {
                    var room = hover_item.room;
                }

                tooltip = '<div class="tooltipevent"> Requester : '+hover_item.name+'['+hover_item.staff_id+']'+'<br/> Email : '+hover_item.email+'<br/> Room : '+room+'<br/> Start Date : '+start_date+'<br/> End Date : '+end_date+'<br/>Start Time : '+hover_item.start_time+'<br/>End Time : '+hover_item.end_time+'<br/>Department : '+hover_item.dept_name+'/'+hover_item.branchName+'</div>';

                $("body").append(tooltip);
                $(this).mouseover(function (e) {
                    $(this).css('z-index', 10000);
                    $('.tooltipevent').fadeIn('500');
                    $('.tooltipevent').fadeTo('10', 1.9);
                }).mousemove(function (e) {
                    $('.tooltipevent').css('top', e.pageY + 10);
                    $('.tooltipevent').css('left', e.pageX + 20);
                });
            },

            eventMouseout: function(data, event) {
                $(this).css('z-index', 8);
                $('.tooltipevent').remove();
            },
        });

        fullcalendar.fullCalendar();

        $('#searchBtn').click(function(){
            getData();
        });

        <?php $this->session->unset_userdata('sv_room_booking_filter_dept'); ?>
        <?php $this->session->unset_userdata('sv_room_booking_filter_room'); ?>
        <?php $this->session->unset_userdata('sv_room_booking_filter_year'); ?>
        <?php $this->session->unset_userdata('sv_room_booking_filter_month'); ?>
        <?php $this->session->unset_userdata('sv_room_booking_filter_status'); ?>
        <?php $this->session->unset_userdata('sv__booking__room'); ?>
    });

    // listeners
    $('#newRoomBookingModal').on('hidden.bs.modal', function(){
        
    });

    function loadModal(isNew){
        if(isNew){
            step = 1;
            subTitle = step == 1 ? `Step 1/2: Date & Room Selection` : `Step 2/2: Meeting Details`;
            $('#modal-subtitle').html(subTitle);
            loadStep();
            $('#newRoomBookingModal').modal('show');
        }else{

        }
    }

    function navigateStep(i){
        step += i;
        subTitle = step == 1 ? `Step 1/2: Date & Room Selection` : `Step 2/2: Meeting Detailss`;
        $('#modal-subtitle').html(subTitle);
        loadStep();
    }

    function loadStep(){
        if(step == 1){
            // show
            $('.step-1').show();
            // hide
            $('.step-2').hide();
        }else{
            // show
            $('.step-2').show();
            // hide
            $('.step-1').hide();
        }
    }

    function checkSelection(){
        if($('#start_date').val() != '' && $('#end_date').val() != ''){
            console.log('datetime ok');
            startDate = $('#start_date').val();
            endDate = $('#end_date').val();
        }
    }

    function checkDetails(){

    }

    function delete_meeting(ID) {
        validateForm("#deleteButton", "Delete this maintenance list?", function() {
            $.ajax({
                url:'<?php echo base_url('hr/serviceform/deleteMeetingList') ?>',
                data: {
                    meetingsID : ID,
                },
                type: 'post',
                dataType: 'json',
                success: (data) => {
                    if(data.status == "Success") {

                        localStorage.setItem("status", data.status);
                        localStorage.setItem("msg", data.msg);

                        location.reload();
                    }
                }
            });
        });
    }

    function open_view_meeting_modal(elem) 
    {
        // console.log(elem);

        let name                 = $(elem).data('name');
        let dept                 = $(elem).data('dept');
        let datereq              = $(elem).data('datereq');
        let title                = $(elem).data('eventtitle');
        let client               = $(elem).data('client');
        let date_start           = $(elem).data('datestart');
        let date_end             = $(elem).data('dateend');
        let time_start           = $(elem).data('timestart');
        let time_end             = $(elem).data('timeend');
        let vip                  = $(elem).data('vip');
        let pax                  = $(elem).data('pax');
        let tblsetup             = $(elem).data('tblsetup');
        let equipment            = $(elem).data('equipment');
        let special_request      = $(elem).data('special');
        let room                 = $(elem).data('room');
        let other_room           = $(elem).data('otherroom');
        // let breakfast            = $(elem).data('breakfast');
        // let lunch                = $(elem).data('lunch');
        // let other_menu           = $(elem).data('othermenu');
        // let hi_tea               = $(elem).data('hitea');
        // let package              = $(elem).data('pack');

        if($(elem).data('pack') == '' || $(elem).data('pack') == '-- Please Select --')
        {
            var package              = 'Not Select';
        }else{
            var package              = $(elem).data('pack');
        }

        if($(elem).data('breakfast') == '' || $(elem).data('breakfast') == '-- Please Select --'){
            var breakfast            = 'Not Request';
        }else{
            var breakfast            = $(elem).data('breakfast');
        }

        if($(elem).data('lunch') == '' || $(elem).data('lunch') == '-- Please Select --'){
            var lunch            = 'Not Request';
        }else{
            var lunch            = $(elem).data('lunch');
        }

        if($(elem).data('othermenu') == '' || $(elem).data('othermenu') == '-- Please Select --'){
            var other_menu            = 'Not Request';
        }else{
            var other_menu            = $(elem).data('othermenu');
        }

        if($(elem).data('hitea') == '' || $(elem).data('hitea') == '-- Please Select --'){
            var hi_tea            = 'Not Request';
        }else{
            var hi_tea            = $(elem).data('hitea');
        }

        /* view modal */
        $('#modal_view_name').val(name);
        $('#modal_view_dept').val(dept);
        $('#modal_view_date_req').val(datereq);
        $('#modal_view_event_title').val(title);
        $('#modal_view_client').val(client);
        $('#modal_view_date_start').val(date_start);
        $('#modal_view_date_end').val(date_end);
        $('#modal_view_time_start').val(time_start);
        $('#modal_view_time_end').val(time_end);
        
        if(vip == 0)
        {
            $('#modal_view_vip').val('No');
        } else {
            $('#modal_view_vip').val('Yes');
        }
        
        $('#modal_view_pax').val(pax);
        $('#modal_view_package').val(package);
        $('#modal_view_table_setup').val(tblsetup);
        $('#modal_view_equipment').val(equipment);
        $('#modal_view_breakfast').val(breakfast);

        if(lunch != null && lunch != '' && lunch != undefined)
        {
            $('#modal_view_lunch').val(lunch);
        } else {
            $('#modal_view_lunch').val(other_menu);
        }
        
        $('#modal_view_hi_tea').val(hi_tea);
        $('#modal_view_special_request').val(special_request);

        if(room == 'OTHER')
        {
            $('#modal_view_room').val(other_room);
        } else {
            $('#modal_view_room').val(room);
        }
    }

    function getData() {
        var table = $('#filter_table_meeting').DataTable();
        table.clear().draw();
        var frmData = new FormData();

        frmData.append('sv_room_booking_filter_dept',$('#sv_room_booking_filter_dept').val());
        frmData.append('sv_room_booking_filter_room',$('#sv_room_booking_filter_room').val());
        frmData.append('sv_room_booking_filter_status',$('#sv_room_booking_filter_status').val());
        frmData.append('sv_room_booking_filter_year',$('#sv_room_booking_filter_year').val());
        frmData.append('sv_room_booking_filter_month',$('#sv_room_booking_filter_month').val());
        frmData.append('user_id',$('#user_id').val());

        $.ajax({
            url:"<?php echo base_url('/hr/api/serviceform/get_meeting_filter'); ?>",
            type:'post',
            dataType:'json',
            data:frmData,
            processData: false,
            contentType: false,
            success:function(data){

                iziToast.success({
                    position: 'bottomRight',
                    message: 'filtering data',
                });

                let room_booking = data.table;

                if(room_booking != null){
                    $.each(room_booking,function(key,content)
                    {
                        var i = key + 1;

                        if(content.room_id == 7)
                        {
                            var room = content.other_room;
                        }else{
                            var room = content.room;
                        }

                        if(content.pax > 0)
                        {
                            var pax = '<br>('+content.pax+' pax)';
                        }else{
                            var pax = '';
                        }

                        if(content.table_setup != null && content.table_setup != undefined && content.table_setup != '' && content.table_setup != "-- Please Select --")
                        {
                            var table_setup = '<br>['+content.table_setup+']';
                        }else{
                            var table_setup = '';
                        }

                        if(content.start_date != '0000-00-00' && content.start_date != undefined){
                            var start_date = moment(content.start_date).format('DD-MM-YYYY');;
                        }
                        if(content.end_date != '0000-00-00' && content.end_date != undefined){
                            var end_date = moment(content.end_date).format('DD-MM-YYYY');;
                        }

                        if(content.breakfast != '' && content.breakfast != '-- Please Select --')
                        { 
                            var breakfast = '<input type="checkbox" disabled name="breakfast" id="breakfast value="1" checked> Breakfast <br>';
                        } else {
                            var breakfast = '<input type="checkbox" disabled name="breakfast" id="breakfast value="1"> Breakfast <br>';
                        }

                        if((content.lunch || content.other_menu) != '' && content.lunch != '-- Please Select --')
                        {
                            var lunch = '<input type="checkbox" disabled name="lunch" id="lunch value="1" checked> Lunch <br>';
                        } else {
                            var lunch = '<input type="checkbox" disabled name="lunch" id="lunch value="1"> Lunch <br>';
                        }

                        if(content.hi_tea != '' && content.hi_tea != '-- Please Select --')
                        { 
                            var hi_tea = '<input type="checkbox" disabled name="hi_tea" id="hi_tea value="1" checked> Hi-Tea <br>';
                        } else {
                            var hi_tea = '<input type="checkbox" disabled name="hi_tea" id="hi_tea value="1"> Hi-Tea <br>';
                        }

                        if(content.special_request != '')
                        {
                            var special_request = '<input type="checkbox" disabled name="special_request" id="special_request value="1" checked> Special Request <br>';
                        } else {
                            var special_request = '<input type="checkbox" disabled name="special_request" id="special_request value="1"> Special Request <br>';
                        }

                        var btn_view = '<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#viewDetails" data-trigger="hover" data-tooltip="tooltip" title="View Detail" data-name="'+content.name+'" data-dept="'+content.dept_name+'/'+content.branchName+'" data-datereq="'+moment(content.createdTS).format('DD-MM-YYYY')+'" data-eventtitle="'+content.event_title+'" data-client="'+content.client+'" data-datestart="'+start_date+'" data-dateend="'+end_date+'" data-timestart="'+content.start_time+'" data-timeend="'+content.end_time+'" data-vip="'+content.vip+'" data-pax="'+content.pax+'" data-pack="'+content.package+'" data-tblsetup="'+content.table_setup+'" data-equipment="'+content.equipment+'" data-breakfast="'+content.breakfast+'" data-lunch="'+content.lunch+'" data-othermenu="'+content.other_menu+'" data-hitea="'+content.hi_tea+'" data-special="'+content.special_request+'" data-room="'+content.room+'" data-otherroom="'+content.other_room+'" onclick="open_view_meeting_modal(this)"> <i class="far fa-eye"></i> </button>';

                        var btn_print = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform_report/meeting_room_print/'+content.ID+'" target="_blank" data-trigger="hover" data-tooltip="tooltip" title="Print Detail"><i class="fa fa-print"></i></a>';

                        if(content.equipment != '' && content.equipment != null)
                        {
                            var equipment_split = content.equipment.split(",");
                            var eqpt = '';
                            if(equipment_split.length > 0)
                            {
                                $.each(equipment_split,function(equipment_key,equipment_content)
                                {
                                    eqpt += '<li>'+equipment_content+'</li>';
                                });
                            }
                        }else{
                            var eqpt = '';
                        }

                        if(content.status_app == null || content.status_app == 'Pending')
                        {
                            var status      = 'Pending <i class="fa fa-exclamation-circle" style="color: #FFC107;"></i>';
                            var disabled    = '';
                        }
                        if(content.status_app == 'In_progress')
                        {
                            var status      = ((content.status_app).replace('_',' '))+' <i class="fa fa-hourglass-start" style="color: grey;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }
                        if(content.status_app == 'Verified')
                        {
                            var status      = content.status_app+' <i class="fa fa-check-circle" style="color: green;"></i><p style="font-style: italic; font-size: 13px;">'+content.status_reason+'</p>';
                            var disabled    = '';
                        }
                        if(content.status_app == 'Completed')
                        {
                            var status      = content.status_app+' <i class="fa fa-check-circle" style="color: green;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }
                        if(content.status_app == 'Rejected')
                        {
                            var status      = content.status_app+' <i class="fa fa-times-circle" style="color: red;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }
                        if(content.status_app == 'Cancel')
                        {
                            var status      = content.status_app+' <i class="fa fa-times-circle" style="color: red;"></i>';
                            var disabled    = 'disabled style="cursor: not-allowed;"';
                        }

                        if("<?php echo $_SESSION['all_modules_access'][0]['access_lvl']; ?>" == 'admin' || "<?php echo $_SESSION['user']['division_id']; ?>" == 4){
                            var btn_edit = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform/meeting_form/'+content.ID+'" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>';
                        } else {
                            if(disabled == '')
                            {
                                var btn_edit = '<a type="button" class="btn btn-outline-dark" href="<?php echo base_url();?>hr/serviceform/meeting_form/'+content.ID+'" data-trigger="hover" data-tooltip="tooltip" title="Edit"><i class="far fa-edit"></i></a>';
                            }else{
                                var btn_edit = '<button class="btn btn-outline-dark" data-trigger="hover" data-tooltip="tooltip" title="Edit" '+disabled+'><i class="far fa-edit"></i></button>';
                            }
                        }

                        var btn_delete = '<button type="button" class="btn btn-outline-dark" onclick="delete_meeting('+content.ID+')" data-trigger="hover" data-tooltip="tooltip" title="Delete" '+disabled+'><i class="far fa-trash-alt"></i></button>';

                        if(('<?php echo $_SESSION['user']['id']; ?>' == content.requester_id) || ('<?php echo $_SESSION['user']['id']; ?>' == content.createdBY))
                        {
                            var btn = btn_view+btn_edit+btn_print+btn_delete;
                        }else{
                            var btn = btn_view+btn_edit+btn_print;
                        }

                        table.row.add({
                            0   : i,
                            1   : content.package,
                            2   : room+pax+table_setup,
                            // 3   : '<li>'+content.equipment+'</li>',
                            3   : eqpt,
                            4   : 'Title : '+content.event_title+'<br>Host : '+content.dept_name+'/'+content.branchName+'<br>Client : '+content.client,
                            5   : breakfast+lunch+hi_tea+special_request,
                            6   : '<div class="text-center">'+start_date+' / '+content.start_time+'</div>',
                            7   : '<div class="text-center">'+end_date+' / '+content.end_time+'</div>',
                            8   : '<div class="text-center">'+status+'</div>',
                            9   : '<div class="text-center"><div class="btn-group btn-group-sm" role="group">'+btn+'</div></div>',
                        }).draw();
                        // console.log(data);
                    });                        
                }
            },
            error:function(){
                iziToast.warning({
                    position: 'bottomRight',
                    message: '500 Internal Server Error.'
                });
            }
        });
    }

</script>