<style>
    .fc-header-toolbar h2 {
        font-size: 1.3rem;
    }
</style>
<section class="container-fluid" style="padding-bottom: 2rem;">
    <div class="card bg-light-transparent">
        <div class="card-body">
            <div class="row justify-content-center">
                <div class="col-6 col-sm-4 col-md-2">
                    <button class="btn btn-block btn-dark add-shadow" onclick="location.href = '<?php echo base_url('hr/leave_v2/application') ?>'" style="padding-top: 1.5rem; padding-bottom: 1.5rem;" data-trigger="hover" data-tooltip="tooltip" title="My Leave Application" >
                        <i class="fas fa-plane fa-3x"></i> 
                    </button>
                </div>
                <?php if (isset($this->logged_module["role"]) && $this->logged_module["role"] != "user") { ?>
                    <div class="col-6 col-sm-4 col-md-2">
                        <button class="btn btn-block btn-dark add-shadow" onclick="location.href = '<?php echo base_url('hr/leave/department') ?>'" style="padding-top: 1.5rem; padding-bottom: 1.5rem;" data-trigger="hover" data-tooltip="tooltip" title="Department's Leave" >
                            <i class="fas fa-thumbs-up fa-3x"></i> 
                        </button>
                    </div>
                <?php } ?>
            </div><hr>
            <div class="row justify-content-center">
                <?php
                if ($this->logged_module["role"] == "admin") {
                    $this->load->view('../modules/hr/views/leave_v2/admin_tab');
                }
                ?>
            </div>
        </div>
    </div>
</section>
<section class="container-fluid" style="padding-bottom: 2rem;">
    <div class="card bg-light-transparent">
        <div class="card-body">
            <div class="card no-shadow" style="padding-top: 3rem; padding-bottom: 3rem;">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center align-self-center">
                            <img class="image-responsive" src="<?php echo base_url($logged_user['user']['file_location'] . $logged_user['user']['file_name']); ?>" style="max-height: 15rem; max-width: 15rem;">
                        </div>
                        <div class="col-md-8">
                            <h3><?php echo $logged_user['user']['name'] ?></h3>
                            <p><?php echo $logged_user['user']['position_name'] ?></p>
                            <p>Department: <?php echo $logged_user['user']['department_name'] ?> (<?php echo $logged_user['user']['branch_name'] ?>)</p>
                            <hr class="my-4">
                            <div class="row">
                                <div class="col">
                                    <div class="card text-white bg-dark">
                                        <div class="card-body">
                                            <h6 class="card-title">Total</h6>
                                            <p class="card-text float-right" style="font-size: 2rem;">
<?php echo ($logged_user['leave_info']['leaveTotal']) ? $logged_user['leave_info']['leaveTotal'] : 0; ?>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="card text-white bg-dark">
                                        <div class="card-body">
                                            <h6 class="card-title">Pending</h6>
                                            <p class="card-text float-right" style="font-size: 2rem;">
<?php echo ($logged_user['leave_info']['leavePending']) ? $logged_user['leave_info']['leavePending'] : 0; ?>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="card text-white bg-dark">
                                        <div class="card-body">
                                            <h6 class="card-title">Approved</h6>
                                            <p class="card-text float-right" style="font-size: 2rem;">
<?php echo ($logged_user['leave_info']['leaveApproved']) ? $logged_user['leave_info']['leaveApproved'] : 0; ?>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="card text-white bg-dark">
                                        <div class="card-body">
                                            <h6 class="card-title">Rejected</h6>
                                            <p class="card-text float-right" style="font-size: 2rem;">
<?php echo ($logged_user['leave_info']['leaveRejected']) ? $logged_user['leave_info']['leaveRejected'] : 0; ?>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="card text-white bg-dark">
                                        <div class="card-body">
                                            <h6 class="card-title">Cancelled</h6>
                                            <p class="card-text float-right" style="font-size: 2rem;">
<?php echo ($logged_user['leave_info']['leaveCancelled']) ? $logged_user['leave_info']['leaveCancelled'] : 0; ?>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<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 class="float-right">
                        <div class="row">
                            <label class="col text-right" for="applicationDept">Departments: </label>
                            <select class="form-control col mr-3" id="applicationDept" value='0'>
                                <option selecterd value="0">All</option>
                                <?php foreach ($departments as $dept): ?>
                                    <option value="<?php echo $dept['id'] ?>"><?php echo $dept['name'] . " (" . $dept['branch_name'] . ")" ?></option>
<?php endforeach; ?>
                            </select>
                        </div>
                    </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 ($types as $type) { ?>
                                        <div data-trigger="hover" data-tooltip="tooltip" title="<?php echo $type['name']; ?>" class="text-center mt-2" style="background-color: <?php echo $type['colour']; ?>;-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px; border:1px solid #ccc; height:28px;"><?php echo $type['code']; ?></div>
<?php } ?>
                                </div>
                                <div class="col-10">
                                    <div id="calendar"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card bg-light-transparent">
                <div class="card-header bg-white">
                    <h5 class="card-title">My Department</h5>
                </div>
                <div class="card-body">
                    <div class="card bg-white no-shadow">
                        <div class="card-body">
                            <h6>Staffs</h6>
                            <div class="card-body">
                                <?php /* ?><div class="row pt-md">
                                  <?php foreach($department['staffs'] as $staff): ?>
                                  <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile text-center" id="staff-<?php echo $staff['id']; ?>" data-staff="<?php echo htmlspecialchars(json_encode($staff), ENT_QUOTES, 'UTF-8'); ?>">
                                  <div class="border border-secondary img-responsive rounded-circle m-auto" style=" background-image: url(<?php echo base_url($staff['file_location'].$staff['file_name']); ?>);background-position:50% 50%; background-size: cover; width: 6rem; height: 6rem;"></div>
                                  <h6 class="pt-2"><?php echo $staff['name']; ?></h6>
                                  <?php if (is_null($department['status'][$staff['id']]['status'])) { ?>
                                  <p class="text-success">Available</p>
                                  <?php } else { ?>
                                  <p class="text-danger">On Leave</p>
                                  <?php } ?>
                                  </div>
                                  <?php endforeach; ?>
                                  </div> <?php */ ?>
                                <!-- akmal to improve speed --><div class="row pt-md">
<?php foreach ($department['staffs'] as $staff): ?>
                                        <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile text-center" id="staff-<?php echo $staff['id']; ?>" data-staff="<?php echo htmlspecialchars(json_encode($staff), ENT_QUOTES, 'UTF-8'); ?>">
                                            <div class="border border-secondary img-responsive rounded-circle m-auto" style=" background-image: url(<?php echo base_url($staff['file_location'] . $staff['file_name']); ?>);background-position:50% 50%; background-size: cover; width: 6rem; height: 6rem;"></div>
                                            <h6 class="pt-2"><?php echo $staff['name']; ?></h6>
                                            <?php if (is_null($staff['status'])) { ?>
                                                <p class="text-success">Available</p>
                                            <?php } else { ?>
                                                <p class="text-danger">On Leave</p>
                                        <?php } ?>
                                        </div>
<?php endforeach; ?>
                                </div> 
                            </div>
                            <hr>
                            <h6>Upcoming Leave</h6>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table id="table_dept_applications" class="table table-bordered table-striped table-hover">
                                        <thead>
                                        <th>#</th>
                                        <th>Staff</th>
                                        <th>Date</th>
                                        <th>Relief Person</th>
                                        </thead>
                                        <tbody>
                                            <?php if (isset($department['applications'])): $i = 1; ?>
    <?php foreach ($department['applications'] as $dept_application): ?>
                                                    <tr>
                                                        <td><?php echo $i++; ?></td>
                                                        <td><?php echo $dept_application['user_name']; ?></td>
                                                        <td nowrap><?php echo date_format(date_create($dept_application['date_from']), "d/m/y") . ' - ' . date_format(date_create($dept_application['date_to']), "d/m/y"); ?></td>
                                                        <td><?php echo $dept_application['relief_person']; ?></td>
                                                    </tr>
                                                <?php endforeach; ?>
<?php endif; ?>
                                        </tbody>
                                    </table>
                                </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">My Leave Summary</h5>
                </div>
                <div class="card-body">
                    <div class="card bg-white no-shadow">
                        <div class="card-body">
                            <h6>Leave Applications</h6>
                            <?php if ($logged_user['applications']): ?>
    <?php foreach ($logged_user['applications'] as $app): ?>
                                    <p>
                                    <div class="row">
                                        <div class="col-auto">
        <?php echo '[' . $app['code'] . '] ' . date_format(date_create($app['date_from']), "d/m/y") . ' - ' . date_format(date_create($app['date_to']), "d/m/y") ?>
                                        </div>
                                        <div class="col text-right">
                                            <?php if ($app['status'] == 1): ?>
                                                <a data-trigger="hover" data-tooltip="tooltip" title="<?php echo $app['remarks']; ?>" href="javascript:openApplicationModal(<?php echo $app['id']; ?>)" class="badge badge-warning"><?php echo $app['leave_status'] ?></a>
                                            <?php endif; ?>
                                            <?php if ($app['status'] == 2): ?>
                                                <a data-trigger="hover" data-tooltip="tooltip" title="<?php echo $app['remarks']; ?>" href="javascript:openApplicationModal(<?php echo $app['id']; ?>)" class="badge badge-success"><?php echo $app['leave_status'] ?></a>
                                            <?php endif; ?>
                                            <?php if ($app['status'] == 3): ?>
                                                <a data-trigger="hover" data-tooltip="tooltip" title="<?php echo $app['remarks']; ?>" href="javascript:openApplicationModal(<?php echo $app['id']; ?>)" class="badge badge-danger"><?php echo $app['leave_status'] ?></a>
                                            <?php endif; ?>
                                            <?php if ($app['status'] == 4): ?>
                                                <a data-trigger="hover" data-tooltip="tooltip" title="<?php echo $app['remarks']; ?>" href="javascript:openApplicationModal(<?php echo $app['id']; ?>)" class="badge badge-secondary"><?php echo $app['leave_status'] ?></a>
        <?php endif; ?>
                                        </div>
                                    </div>
                                    </p>
                                <?php endforeach; ?>
<?php endif; ?>
                            <hr>
                            <h6>Leave Balance (<?php echo date('Y') ?>)</h6>
                            <br>
                            <div class="row">
                                <table id="table_allocations" class="table table-bordered table-striped table-hover mx-1">
                                    <thead class="text-center">
                                    <th>Type</th>
                                    <!-- <th>Leave Taken</th> -->
                                    <th>Balance</th>
                                    </thead>
                                    <tbody class="text-center">
                                        <?php if (isset($logged_user['allocations'])):
                                            foreach ($logged_user['allocations'] as $allocation):
                                                ?>

                                                <tr>
                                                    <td  data-trigger="hover" data-tooltip="tooltip" title="<?php echo $allocation['name'] . '-' . $allocation['year']; ?>"><?php echo $allocation['code'] . '-' . $allocation['year']; ?></td>
                                                    <td><?php echo ($allocation['type_id'] == 1) ? $allocation['leave_balance'] . '*' : $allocation['leave_balance']; ?></td>
                                                </tr>
    <?php endforeach; ?>
<?php endif; ?>
                                    </tbody>
                                </table>
                            </div>
                            <div class="container">
                                <small>*Current Annual Leave Prorated Balance as of <?php echo date('F, Y') ?>: <b><?php echo number_format($logged_user['prorate']['allowed_leave'], 1) ?> day(s)</b></small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card bg-light-transparent">
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 pb-2">
                            <button class="btn btn-block btn-dark add-shadow" onclick="location.href = '<?php echo base_url('hr/leave_v2/application'); ?>'" style="padding-top: 1rem; padding-bottom: 1rem;">New Application</button>
                        </div>
                        <!--div class="col-12">
                            <button class="btn btn-block btn-dark add-shadow" onclick="newAllocationRequestModal()" style="padding-top: 1rem; padding-bottom: 1rem;">Request Allocation</button>
                        </div-->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="applicationModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="application-modal-title">Leave Application</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="applicationForm" class="form">
                <div class="modal-body">
                    <h6 class="mb-3" style="text-decoration: underline;">Leave Information</h6>
                    <div class="form-group" hidden>
                        <label for="applicationID">ID</label>
                        <input type="text" readonly class="form-control" name="applicationID" id="applicationID" value="">
                    </div>
                    <div class="form-group">
                        <label for="leaveApplicant">Applicant Name</label>
                        <input type="text" readonly class="form-control" name="leaveApplicant" id="leaveApplicant" value="">
                    </div>
                    <div class="form-row">
                        <div class="col">
                            <div class="form-group">
                                <label for="dateFrom">From</label>
                                <input disabled required data-parsley-error-message="Date is required." type="text" class="form-control datepicker" id="dateFrom" placeholder="From">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="periodFrom">Period</label>
                                <select disabled required data-parsley-error-message="Period is required." class="form-control" id="periodFrom">
                                    <option selected value="">Select Period</option>
                                    <?php foreach ($periods as $period): ?>
                                        <option value="<?php echo $period['id']; ?>"><?php echo $period['name']; ?></option>
<?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="dateTo">To</label>
                                <input disabled required data-parsley-error-message="Date is required." type="text" class="form-control datepicker" id="dateTo" placeholder="To">
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="periodTo">Period</label>
                                <select disabled required data-parsley-error-message="Period is required." class="form-control" id="periodTo">
                                    <option selected value="">Select Period</option>
                                    <?php foreach ($periods as $period): ?>
                                        <option value="<?php echo $period['id']; ?>"><?php echo $period['name']; ?></option>
<?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="col">
                            <div class="form-group">
                                <label for="leaveType">Leave Type</label>
                                <select disabled required data-parsley-error-message="Type is required." class="form-control" id="leaveType">
                                    <option selected value="">Select Type</option>
                                    <?php foreach ($types as $type): ?>
                                        <option value="<?php echo $type['id']; ?>">[<?php echo $type['code']; ?>] <?php echo $type['name']; ?></option>
<?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="col">
                            <div class="form-group">
                                <label for="reliefPerson">Relief Person</label>
                                <select disabled required data-parsley-error-message="Person is required." class="form-control" id="reliefPerson">
                                    <option selected value="">Select Person</option>
                                    <?php foreach ($staffs as $person): ?>
                                        <option value="<?php echo $person['id']; ?>"><?php echo $person['name']; ?></option>
<?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="modal fade" id="allocationRequestModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="application-modal-title">Leave Allocation Request</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="allocationRequestForm" class="form">
                <div class="modal-body">

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

<?php $leaveapp = ''; ?>
<?php
if ($applications):
    foreach ($applications as $application):

        if ($application['status'] == 1) {
            $status = '[Pending]';
        } else if ($application['status'] == 4) {
            $status = '[Cancelled]';
        } else if ($application['status'] == 3) {
            $status = '[Rejected]';
        } else {
            $status = '[Approved] ';
        }

        $leaveapp .= '
		{
			data        : ' . json_encode($application) . ', 
			title       : "' . $application['user_name'] . '",
			start       : "' . $application['date_from'] . '",
			end	        : "' . date('Y-m-d', strtotime($application['date_to'] . "+1 days")) . '",
            color       : "' . $application['colour'] . '",
            department  : "' . $application['department_id'] . '", 
            description : "' . (
                //($application['status'] == 1) ? '[Pending] ' : '[Approved] '
                $status
                ) . $application['period_from'] . '"
		},'
        ?>
    <?php endforeach;
endif; ?>

<script type="text/javascript">
    var applications = [<?php echo $leaveapp; ?>];

    $(function () {
        $('[data-tooltip="tooltip"]').tooltip();

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

        $('#calendar').fullCalendar({
            themeSystem: 'bootstrap4',
            firstDay: 1,
            // weekNumbers: true,
            // eventLimit: true, // allow "more" link when too many events
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,listMonth'
            },
            buttonText: {
                today: 'Today',
                month: 'Calendar',
                listMonth: 'List'
            },
            //Random default events
            events: applications,
            eventRender: function eventRender(event, element, view) {
                return ['0', event.department].indexOf($('#applicationDept').val()) >= 0
            },
            eventAfterRender: (event, element) => {
                $(element).tooltip({title: event.description, container: "body"});
            },
            eventClick: (event, jsEvent, view) => {
                var data = event.data;

                var dateFrom = moment(data.date_from, 'YYYY-MM-DD');
                var dateTo = moment(data.date_to, 'YYYY-MM-DD');

                $('#applicationID').val(data.id);
                $('#leaveApplicant').val(data.user_name);
                $('#dateFrom').val(dateFrom.format('DD-MM-YYYY'));
                $('#periodFrom').val(data.period_from_id);
                $('#dateTo').val(dateTo.format('DD-MM-YYYY'));
                $('#periodTo').val(data.period_to_id);
                $('#leaveType').val(data.type_id);
                $('#reliefPerson').val(data.absent_relief_id);

                $('#application-modal-title').html(dateFrom.format('LL') + ': ' + data.user_name);
                $('#applicationModal').modal();
            }
        });

        $('#applicationDept').on('change', function () {
            $('#calendar').fullCalendar('rerenderEvents');
        })

    });

    function newAllocationRequestModal() {
        $('#allocationRequestModal').modal('show');
    }
</script>