<script>
    $(document).ready(function (){
        $('#search-year').select2();
        $('#period-list').select2();

        /**Anytime we change the Year**/
        $('#search-year').on('change', function (){
            let year = $(this).val();
            let month = $('#period-list').val();

            $('#allow-prepare-payroll').hide();
            if(year != "" && month !=""){
                /**We will automatically check if a payroll has already been prepared for the selected period**/

                $('#allow-prepare-payroll').show();
            }
        });

        /**Anytime we change the Month**/
        $('#period-list').on('change', function (){
            let month = $(this).val();
            let year = $('#search-year').val();

            $('#allow-prepare-payroll').hide();
            if(year != "" && month !=""){
                $('#allow-prepare-payroll').show();
            }
        });
    });

    
    function requestPayroll(){
        let month = $('#period-list').val();
        let year = $('#search-year').val();
        let monthName = $('#period-list option:selected').text();

        /**Using AJAX, send a request to fetch payroll details**/
        var target_url = '/load-employees-payroll/yes/'+month+'/'+year;
        $.ajax({
            type: 'GET',
            url: target_url,
            success: function (res) {
                /**Close the Popup Window**/
                $("#edit_dialog_content").dialog('close');

                $('#payroll-information').text('Payroll for '+monthName+'/'+year);
                $('#load-employees-payroll').html(res);
                $('#prepare-payroll-button').hide();
            }
        });

    }
</script>
<div class="error" style="text-align: center;"><b>On this Window, You can Provide Details for Payroll to be Prepared</b></div><br>
<div class="guestDetails_inputDivider"></div>
<button type="submit" disabled style="display: none" aria-hidden="true"></button>

<div class="guestDetails_input">
    <div class="guestDetails_input">
        <div class="guestDetails_inputLabel">
            Select the Payroll Year:<span class="error">*</span>
        </div>
        <select name="search-year" id="search-year" style="width: 200px">
            <option value="">--Select the Year--</option>
            <?php for($x=date('Y'); $x >= date('Y'); $x--): ?>
                <option value="<?php echo e($x); ?>"><?php echo e($x); ?></option>
            <?php endfor; ?>
        </select>
    </div>
</div>
<div class="guestDetails_input">
    <div class="guestDetails_inputLabel">
        Select the Payroll Month:<span class="error">*</span>
    </div>
    <div class="guestDetails_input_right">
        <select name="period" id="period-list" style="width: 200px" required>
            <option value="" >--Select Month--</option>
            <option value="1">January</option>
            <option value="2">February</option>
            <option value="3">March</option>
            <option value="4">April</option>
            <option value="5">May</option>
            <option value="6">June</option>
            <option value="7">July</option>
            <option value="8">August</option>
            <option value="9">September</option>
            <option value="10">October</option>
            <option value="11">November</option>
            <option value="12">December</option>
        </select>
    </div>
</div>

<div style="text-align: center; display: none" id="allow-prepare-payroll">
    <div class="guestDetails_inputDivider"></div><br>

    <button onclick="requestPayroll()" type="button"  class="navButtons" style="background-color: #2f45d7;margin-bottom: 0">
        PREPARE COMPANY PAYROLL NOW
    </button>
</div><br>
<?php /**PATH /home/zedarroot/public_html/edwulp/resources/views/hr/employees/prepare-company-payroll.blade.php ENDPATH**/ ?>