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

{{--Set Page Title--}}
@section('title', 'Setup Employee Allowance Types')

{{--Include any Internal JS Code--}}
@section('internal-js')
    <script>
        $(document).ready(function () {
            $('#active-table').dataTable({
                dom: 'lBfrtip',
                buttons: [
                    { extend: 'excel', className: 'download-buttons' },
                    { extend: 'pdf', className: 'download-buttons' }
                ],
                "paging":   false,
            } );
        });

        {{--Create New User Account Function--}}
        function addNewEmployeeAllowanceItem(){
            var route_link = '/add-employee-allowance-type';

            $('#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: 650,
                title: "Add New Employee Allowance Type",

                buttons: [
                    {
                        text: "Save Details",
                        icon: "ui-icon-check",
                        id: "my-button-1",
                        click: function(e) {
                            if(confirm('Are you sure to Save Entered Details?')){
                                e.preventDefault();
                                $("#my-button-1").attr('disabled', true).text('Please Wait....');
                                var datas = $('#add-employee-allowance-type').serializeArray();

                                $.ajax({
                                    method: "POST",
                                    url: route_link,
                                    data: datas,
                                    success: function (res){
                                        if(res == 'success'){
                                            window.location = '/setup-allowances?addAllowance=true';
                                        }else if(res == 'empty fields'){
                                            alert('Please provide both the Name and Basis for the Deduction Type');
                                            $("#my-button-1").attr('disabled', false).text('Save Details');
                                        }else if(res == 'exists'){
                                            alert('The Entered Deduction Type already Exists');
                                            $("#my-button-1").attr('disabled', false).text('Save Details');
                                        }else{
                                            alert('System Encountered an Error. Please Contact System Admin');
                                        }
                                    }
                                });
                            }
                            return false;
                        }
                    }
                ],
                open: function() {
                    $(this).parent().css({'top': 50});
                }
            });
        }

        {{--Create a Function to Add/Update Allowanc Calculator--}}
        function addAllowanceCalculator(id){
            var route_link = '/add-employee-allowance-calculator/'+id;

            $('#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: 700,
                title: "Update/Add New Employee Allowance Calculator",

                buttons: [
                    {
                        text: "Save Details",
                        icon: "ui-icon-check",
                        id: "my-button-1",
                        click: function(e) {
                            if(confirm('Are you sure to Save Entered Details?')){
                                e.preventDefault();
                                $("#my-button-1").attr('disabled', true).text('Please Wait....');
                                var datas = $('#add-employee-allowance-calculator').serializeArray();

                                $.ajax({
                                    method: "POST",
                                    url: route_link,
                                    data: datas,
                                    success: function (res){
                                        if(res == 'success'){
                                            window.location = '/setup-allowances?addAllowanceCalculator=true';
                                        }else if(res == 'no rates'){
                                            alert('Please provide the Applicable Rates to Proceed');
                                            $("#my-button-1").attr('disabled', false).text('Save Details');
                                        }else if(res == 'error'){
                                            alert('There was an Error while trying to update your Records');
                                            $("#my-button-1").attr('disabled', false).text('Save Details');
                                        }else{
                                            alert('System Encountered an Error. Please Contact System Admin');
                                        }
                                    }
                                });
                            }
                            return false;
                        }
                    }
                ],
                open: function() {
                    $(this).parent().css({'top': 50});
                }
            });
        }
    </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', 'Employee Allowance Listing')

{{--Page Content Goes here--}}
@section('content')
    @isset($_GET['addDeduction'])
        <div class="error-section">
            <span onclick="this.parentElement.style.display='none'" class="topright" style="color: white ;margin-top: -4px;font-weight: bold; margin-right: 5px">&times</span>
            @if($_GET['addAllowance'] == 'true')
                <div class="yesFound">New Employee Allowance Type has been Created Successfully</div><br>
            @elseif($_GET['addAllowance'] == 'false')
                <div class="notFound">There was an error while trying to Create Employee Allowance Type</div><br>
            @endif
        </div>
    @endisset
    <div class="tab">
        <button class="tablinks" onclick="openCity(event, 'deductions')" id="defaultOpen">Active Employee Allowance</button>
    </div>

    <div id="deductions" class="tabcontent">
        <h3 class="error">
            Employee Allowance Types
            <button onclick="addNewEmployeeAllowanceItem()" class="section-button">+ Add New Employee Allowance Type</button>
        </h3>
        <table id="active-table" class="display" style="width: 100%; border-collapse: collapse; ">
            <thead>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Name:</th>
                <th>Computation Basis</th>
                <th>Min. Amount Allowed</th>
                <th>Has Calculator</th>
                <th>Add a Calculator (Based on Basic Salary)</th>
                <th>Edit</th>
                <th>Created By</th>
                <th>Date & Time</th>
            </tr>
            </thead>
            <tbody>
            @foreach($allowances as $row)
                <tr>
                    <td class="ar"></td>
                    <td><b class="error">{!! strtoupper($row->name) !!}</b></td>
                    <td><b>{!! ucwords($row->basis) !!}</b></td>
                    <td><b class="error">{!! number_format($row->min_amount, 2) !!}</b></td>
                    <td>
                        @if(count($row->calculator) > 0)
                            <b class="success">YES</b>
                        @else
                            <b class="error">No</b>
                        @endif
                    </td>
                    <td><i onclick="addAllowanceCalculator('{{$row->id}}')" class="fa fa-calculator" style="font-size: 14px; cursor: pointer"></i></td>
                    <td><i class="fa fa-pencil error" style="font-size: 14px; cursor: pointer"></i></td>
                    <td>
                        @if($row->user)
                            {!! $row->user->firstName." ".$row->user->lastName !!}
                        @endif
                    </td>
                    <td>{!! $row->created_at->format('d/m/Y H:i:s a') !!}</td>
                </tr>
            @endforeach
            </tbody>
            <tfoot>
            <tr style="background-color: #a1b5d3">
                <th>No</th>
                <th>Name:</th>
                <th>Computation Basis</th>
                <th>Min. Amount Allowed</th>
                <th>Has Calculator</th>
                <th>Add a Calculator (Based on Basic Salary)</th>
                <th>Edit</th>
                <th>Created By</th>
                <th>Date & Time</th>
            </tr>
            </tfoot>
        </table>
    </div>
@endsection

@section('modal_heading')
    <h1>Setup Employee Allowances</h1>
@endsection
@section('modal_title')
    <h3><u>Dashboard Functionalities</u></h3>
    <b>
        <ol>
            <li>View all Setup Employee Allowances </li>
            <li>Add New Types of Employee Allowances</li>
        </ol>
    </b>
@endsection
