{{--Get the Page Format--}}
@extends('layouts.app')

{{--Set Page Title--}}
@section('title', 'Employees Payroll Details')

{{--Include any Internal JS Code--}}
@section('internal-js')
    <script>
        $(document).ready(function () {
            var target_url = '/load-employees-payroll';
            $.ajax({
                type: 'GET',
                url: target_url,
                success: function (res) {
                    $('#load-employees-payroll').html(res);
                }
            });
        });
        function preparePayroll(){
            var route_link = '/prepare-company-payroll';

            $('#edit_dialog_content').html('<div style="text-align: center; margin: 20px 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>');
            $('#edit_dialog_content').load(encodeURI(route_link));
            $('#edit_dialog_content').dialog({
                modal: true,
                width: 500,
                title: "Prepare Company Payroll",


                open: function() {
                    $(this).parent().css({'top': 50});
                }
            });
        }

        {{--Function to Disapprove the Payroll--}}
        function disapprovePayroll(id){
            if(confirm('Are you sure to Disapprove the Displayed Payroll?')){
                var target_url = '/approve-disapprove-payroll/disapprove/'+id;
                $.ajax({
                    type: 'GET',
                    url: target_url,
                    success: function (res) {
                        if(res == 'success'){
                            alert('Payroll has successfully been Disapproved');
                            location.reload();
                        }else{
                            alert('There was an Internal Error and the System was unable to Accomplish you request');
                        }
                    }
                });
            }
            return false;
        }

        {{--Function to Approve the Payroll--}}
        function approvePayroll(id){
            if(confirm('Are you sure to Approve the Displayed Payroll?')){
                var target_url = '/approve-disapprove-payroll/approve/'+id;
                $.ajax({
                    type: 'GET',
                    url: target_url,
                    success: function (res) {
                        if(res == 'success'){
                            alert('Payroll has successfully been Approved');
                            location.reload();
                        }else{
                            alert('There was an Internal Error and the System was unable to Accomplish you request');
                        }
                    }
                });
            }
            return false;
        }
    </script>
@endsection

{{--Include any Internal CSS Code--}}
@section('internal-css')
    <style>
        #active-table th, td {
            text-align: left;
            padding: 4px;
        }
        #active-table tr:hover {background-color: #cbd1f8;}
        .switch-certificate {
            position: relative;
            display: inline-block;
            width: 38px;
            height: 17px;
        }
    </style>
@endsection

{{--Control Page Header/Links--}}
@section('headers')
    @include('headers.hr-header')
@endsection

{{--Set Page Heading--}}
@section('heading', 'Employees Payroll Details')

{{--Page Content Goes here--}}
@section('content')
    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'employees')" id="defaultOpen">Active Employees</button>
    </div>

    <div id="employees" class="tabcontent">
        <h3 class="error">
            Company's Active Employees Payroll List
            <button id="prepare-payroll-button" onclick="preparePayroll()" type="button"  class="navButtons" style="background-color: #2f45d7;margin-bottom: 0; float: right">PREPARE COMPANY PAYROLL</button>
        </h3>
        <div style="text-align: center;font-size: 18px"><b id="payroll-information"></b></div>
        <div id="load-employees-payroll" style="text-align: center; margin: 20px 0 20px 0;"><img src="{{asset('images/loads/loader.gif')}}" border=0></div>

    </div>
@endsection

@section('modal_heading')
    <h1>View Employee Payroll</h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <b>
        <ol>
            <li>View all Company Employees Payroll </li>
        </ol>
    </b>
@endsection
