@extends('Layout.Payslipmaster')

@section('title', 'Process payroll')

@section('header-include')
    <link rel="stylesheet" href="/js/select2/css/select2.min.css">
@endsection

@section('content')

    <section id="content">
        <form method="POST" action="/process_payroll" role="form" class="vbox form-horizontal clearfix">
            {{ csrf_field() }}
            <section class="scrollable padder">
                <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                    <li><a href="."><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="/process_payroll">Payroll</a></li>
                    <li class="active">Process payroll</li>
                </ul>
                <section class="panel panel-default col-md-8 no-padder col-md-offset-2" style="margin-right:30px;">
                    <header class="panel-heading font-semibold">
                        Process payroll
                    </header>
                    <div class="panel-body pull-in">
                        <div class="alert-info padder padder-v">
                            Ready to process payroll!
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">Year</label>
                            <select class="form-control" id="payroll-year">
                                <option value="" disabled>Year</option>
                                <?php
                                    $year = date('Y');
                                    do{
                                        echo "<option value='$year'>$year</option>";
                                        $year -= 1;
                                    }while($year > 2017)
                                ?>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="control-label">Month</label>
                            <select class="form-control" id="payroll-month">
                                <option value="" disabled>Month</option>
                                <?php
                                    $month = date('m');
                                    $month *= 1; # [Optional] This forces PHP to display 3 instead of 03 for the month
                                    do{
                                        echo "<option value='$month'>$month</option>";
                                        $month -= 1;
                                    }while($month > 0)
                                ?>
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">Business unit</label>
                            <select class="form-control multi-select" id="business-units" name="payroll-business-units[]" multiple="multiple">
                                <option value="0" selected>All business units</option>
                                @foreach($business_units as $business_unit)
                                    <option value="{{ $business_unit->id }}">{{ $business_unit->business_unit}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="control-label">Department</label>
                            <select class="form-control multi-select" id="payroll-departments" name="payroll-departments[]" multiple="multiple">
                                <option value="0" selected>All departments</option>
                                @foreach($departments as $department)
                                    <option value="{{ $department->id }}">{{ $department->department_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-12 payroll-instances no-padder" style="margin-top:20px;border-top:1px dashed rgba(0,0,0,0.2);">
                            <table class="table table-condensed m-b-none" style="border:0 !important;">
                                <thead>
                                    <tr>
                                        <th>Year</th>
                                        <th>Month</th>
                                        <th>Business Units</th>
                                        <th>Departments</th>
                                        <th>Approvals</th>
                                        <th>Rejections</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @if(!count($instances))
                                        <tr>
                                            <td colspan="6" class="text-center">Payroll has not been processed for selected dates</td>
                                        </tr>
                                    @else
                                        @foreach($instances as $instance)
                                            <tr>
                                                <td>{{ $instance->year }}</td>
                                                <td>{{ $instance->month }}</td>
                                                <td>{{ $instance->business_units }}</td>
                                                <td>{{ $instance->departments }}</td>
                                                <td>4/5</td>
                                                <td>1/5</td>
                                                <td>
                                                    <span class="btn btn-default btn-sm"><i class="fa fa-eye no-margin"></i></span>
                                                    <span class="btn btn-info btn-sm">Re-Run</span>
                                                    <span class="btn btn-danger btn-sm"><i class="fa fa-trash no-margin"></i></span>
                                                </td>
                                            </tr>
                                        @endforeach
                                    @endif
                                </tbody>
                            </table>
                        </div>
                        <div class="col-md-12" style="text-align:right;border-top:1px dashed rgba(0,0,0,0.2);">
                            <div style="margin-top:20px;">
                                <button type="submit" class="btn btn-success" id="process-payroll"><i class="fa fa-database"></i>Process</button>
                            </div>
                        </div>
                    </div>
                </section>
            </section>
            <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen, open" data-target="#nav,html"></a>
        </form>
    </section>
    <aside class="bg-light lter b-l aside-md hide" id="notes">
        <div class="wrapper">Notification</div>
    </aside>

@endsection

@section('footer-include')
    <!-- fuelux -->
    <script src="/js/libs/underscore-min.js"></script>
    <script src="/js/fuelux/fuelux.js"></script>
    {{--<script src="js/fuelux/demo.datagrid.js"></script>--}}
    <!-- select2 -->
    <script src="/js/select2/js/select2.min.js"></script>
@endsection

@section('j-script')
    <!-- Jquery -->
    <script>
        $(document).on('ready', function(){
            $('.multi-select').select2();

            $('#process-payroll').on('click', function(e){
                e.preventDefault();

                let el = $(this);

                let year = $('#payroll-year').val();
                let month = $('#payroll-month').val();
                let businessUnits = $("#business-units").val();
                let departments = $("#payroll-departments").val();

                console.log('Starting..');

                let processPayrollRequest = $.ajax({
                    type:'POST',
                    url:'/process_payroll/process',
                    data:{
                        year:year,
                        month:month,
                        businessUnits:businessUnits,
                        departments:departments
                    },
                    dataType:'json',
                    timeout:10000,
                    beforeSend:function(){
                        console.log('Processing..');
                        el.addClass('disabled');
                    },
                    success:function(response){
                        el.removeClass('disabled');

                        if (response.status === 0){
                            alert(response.error_message);
                        }else{
                            window.location = '/process_payroll';
                        }
                    },
                    error(x,t,m){
                        el.removeClass('disabled');
                        if (t === "timeout"){
                            processPayrollRequest.abort();
                            console.log('Request time out');
                        }
                    }
                });

                console.log('Done..');
            });
        });
    </script>
@endsection