<!--hr/views/leave_v2/allocationlist-->
<section class="container" style="padding-bottom: 2rem;">
    <div class="card bg-light-transparent">
        <div class="card-header bg-light">
            <div class="float-right">
                <button class="btn btn-sm btn-outline-dark" onclick="setupAllocation()"><i class="fas fa-plus"></i> New Allocation</button>
            </div>
        </div>
        <div class="card-body">
            <div class="card no-shadow">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead>
                            <th>Year</th>
                            <th>Unallocated</th>
                            </thead>
                            <tbody>
                                <?php
                                if (!empty($rsUnAllocatedUserByYear))
                                    foreach ($rsUnAllocatedUserByYear as $row) {
                                        echo '<tr>';
                                        echo '<td><a href="' . base_url('hr/leave/allocation/') . $row['year'] . '">' . $row['year'] . '</a></td>';
                                        echo '<td>' . $row['unallocated'] . '</td>';
                                    }
                                ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<div class="modal fade" id="setupAllocationModal">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="allocation-modal-title">Setup Allocation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="setupYearRef">For The Year</label>
                    <input id="allocationYear" type="text" class="form-control yearpicker text-right" placeholder="Choose Year">
                </div>
            </div>
            <div class="modal-footer">
                <div class="float-right">
                    <button class="btn btn-primary" type="button" onclick="newAllocation()">Create Allocation</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    $(".yearpicker").datepicker({
        uiLibrary: 'bootstrap4',
        format: 'yyyy',
        autoclose: true,
        changeYear: true,
        viewMode: "years",
        minViewMode: "years"
    });

    function setupAllocation() {
        // clearForm('#allocationForm');

        $('#setupAllocationModal').modal('show');
    }

    function newAllocation() {
        toastConfirm('You will be redirected to another page. Are you sure you want to proceed?', () => {
            var year = $('#allocationYear').val();

            location.href = "<?php echo base_url('hr/leave_v2/newAllocation/'); ?>" + year;
        });
    }

</script>