@extends('decorator.console')

@section('page-title')
    {{ trans('employee.salary.title') }}
@stop

@section('html-head')
    <meta name="menu" content="administrationMenu">
@stop

@section('page-wrapper')
    <div class="row">
        <div class="col-md-12">
            <h1 class="page-header"> {{ trans('employee.salary.heading') }} </h1>
            <p> {{ trans('employee.salary.message') }} </p>
            <ol class="breadcrumb breadcrumb-dark col-md-12">
                <li><a href="{{ url('/console/dashboard') }}"> {{ trans('breadcrumb.dashboard') }} </a></li>
                <li class="active"> {{ trans('breadcrumb.administration.employee') }} </li>
            </ol>
        </div>
    </div>

    @include('common.console.message')

    @if($employee->id)
        @include('console.tab.employeeform')
    @endif

    <form id="employeeForm" class="well form-horizontal" action="{{ url('/console/employeeform-salary') }}"
          method="post" enctype="multipart/form-data" >

        {!! csrf_field() !!}

        <input id="id" name="id" type="hidden" value="{{ $employee->id }}">

        <fieldset>
            <legend class="accordion-heading">
                <a data-toggle="collapse" href="#collapse-all_earnings">{{ trans('employee.label.all_earnings') }}</a>
            </legend>
            <div id="collapse-all_earnings" class="accordion-body">
                @foreach($listOfSalaryEarning as $key => $employeeSalary)
                    <div class="row">
                        <div class="col-md-1">
                            @if (!$employeeSalary->salary_component->mandatory)
                                <input id="employeeSalary_active{{ $employeeSalary->id }}"
                                       id="employeeSalary_active{{ $employeeSalary->id }}" type="checkbox"
                                        @if ($employeeSalary->active) checked @endif />
                            @endif
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="employeeSalary_amount{{ $employeeSalary->id }}" class="col-md-6 control-label">
                                    {{ $employeeSalary->salary_component->name }} ({{ $employeeSalary->salary_component->value_type }})
                                </label>
                                <div class="col-md-6">
                                    <input id="employeeSalary_amount{{ $employeeSalary->id }}"
                                           name="employeeSalary_amount{{ $employeeSalary->id }}"
                                           class="numbersOnly removeZero form-control" type="text" value="{{ $employeeSalary->amount }}"
                                           @if (!$employeeSalary->active) readonly @endif>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="employeeSalary_start_date{{ $employeeSalary->id }}" class="col-md-4 control-label">
                                    {{ trans('employee.label.employeeSalary_start_date') }}
                                </label>
                                <div class="col-md-8">
                                    <div class="input-group date" id="employeeSalary_start_date{{ $employeeSalary->id }}-date">
                                        <input id="employeeSalary_start_date{{ $employeeSalary->id }}"
                                               name="employeeSalary_start_date{{ $employeeSalary->id }}"
                                               class="form-control" readonly="readonly" type="text"
                                               value="{{ $employeeSalary->start_date }}" >
                                        <span class="input-group-addon" data-toggle="datepicker">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="employeeSalary_end_date{{ $employeeSalary->id }}" class="col-md-4 control-label">
                                    {{ trans('employee.label.employeeSalary_end_date') }}
                                </label>
                                <div class="col-md-8">
                                    <div class="input-group date" id="employeeSalary_end_date{{ $employeeSalary->id }}-date">
                                        <input id="employeeSalary_end_date{{ $employeeSalary->id }}"
                                               name="employeeSalary_end_date{{ $employeeSalary->id }}"
                                               class="form-control" readonly="readonly" type="text"
                                               value="{{ $employeeSalary->end_date }}" >
                                        <span class="input-group-addon" data-toggle="datepicker">
                                            <span class="glyphicon glyphicon-calendar"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </fieldset>

        <fieldset>
            <legend class="accordion-heading">
                <a data-toggle="collapse" href="#collapse-all_deductions">{{ trans('employee.label.all_deductions') }}</a>
            </legend>
            <div id="collapse-all_deductions" class="accordion-body">
                @foreach($listOfSalaryDeduction as $key => $employeeSalary)
                    <div class="row">
                        <div class="col-md-1">
                            @if (!$employeeSalary->salary_component->mandatory)
                                <input id="employeeSalary_active{{ $employeeSalary->id }}"
                                       id="employeeSalary_active{{ $employeeSalary->id }}" type="checkbox"
                                        @if ($employeeSalary->active) checked @endif />
                            @endif
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="employeeSalary_amount{{ $employeeSalary->id }}" class="col-md-6 control-label">
                                    {{ $employeeSalary->salary_component->name }} ({{ $employeeSalary->salary_component->value_type }})
                                </label>
                                <div class="col-md-6">
                                    <input id="employeeSalary_amount{{ $employeeSalary->id }}"
                                           name="employeeSalary_amount{{ $employeeSalary->id }}"
                                           class="numbersOnly removeZero form-control" type="text" value="{{ $employeeSalary->amount }}"
                                    @if (!$employeeSalary->active) readonly @endif>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="employeeSalary_start_date{{ $employeeSalary->id }}" class="col-md-4 control-label">
                                    {{ trans('employee.label.employeeSalary_start_date') }}
                                </label>
                                <div class="col-md-8">
                                    <div class="input-group date" id="employeeSalary_start_date{{ $employeeSalary->id }}-date">
                                        <input id="employeeSalary_start_date{{ $employeeSalary->id }}"
                                               name="employeeSalary_start_date{{ $employeeSalary->id }}"
                                               class="form-control" readonly="readonly" type="text"
                                               value="{{ $employeeSalary->start_date }}" >
                                            <span class="input-group-addon" data-toggle="datepicker">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="employeeSalary_end_date{{ $employeeSalary->id }}" class="col-md-4 control-label">
                                    {{ trans('employee.label.employeeSalary_end_date') }}
                                </label>
                                <div class="col-md-8">
                                    <div class="input-group date" id="employeeSalary_end_date{{ $employeeSalary->id }}-date">
                                        <input id="employeeSalary_end_date{{ $employeeSalary->id }}"
                                               name="employeeSalary_end_date{{ $employeeSalary->id }}"
                                               class="form-control" readonly="readonly" type="text"
                                               value="{{ $employeeSalary->end_date }}" >
                                            <span class="input-group-addon" data-toggle="datepicker">
                                                <span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </fieldset>

        <fieldset>
            <legend class="accordion-heading">
                <a data-toggle="collapse" href="#collapse-salary_summary">{{ trans('employee.label.salary_summary') }}</a>
            </legend>
            <div id="collapse-salary_summary" class="accordion-body">

            </div>
        </fieldset>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                
                <a class="btn btn-default cancel-employee" href="{{ url('/console/employees') }}" title="Cancel">
                    <i class="fa fa-remove"></i> Done
                </a>
            </div>
        </div>
    </form>


    <script>
        $("#employeeForm").submit(function(event){
            var $form = $(this);
            var $inputs = $form.find("input, select, button, textarea");
            var serializedData = $form.serialize();
            $inputs.prop("disabled", true);

            pleaseWaitDialog.showPleaseWait();
            request = $.ajax({
                url: $form.attr('action'),
                type: "post",
                data: serializedData
            });

            request.done(function (result, textStatus, jqXHR){
                console.log( "RESULT : " + JSON.stringify(result));
                pleaseWaitDialog.hidePleaseWait();
                if (result.status == "OK") {
                    swal({
                        title: "Success!",
                        text: result.errorMessage,
                        type: "success",
                        showCancelButton: false,
                        confirmButtonColor: "#4cae4c",
                        confirmButtonText: "OK",
                        closeOnConfirm: false
                    }, function(){
                                                    window.location = "{{ url('/console/employeeform-salary?from=form') }}&id="+result.returnData.id;
                                            });
                } else if (result.status == "ERROR") {
                    ErrorMessage = "";
                    $.each(result.returnData.errors, function(i, error) {
                        ErrorMessage = ErrorMessage + error + "<br>";
                    });
                    swal({title: result.errorMessage, text: ErrorMessage, type: "warning", html: true });
                } else {
                    swal({title: "Error!", text: "Something went wrong! Please job Administrator.", type: "error", html: true });
                }
                $inputs.prop("disabled", false);
            });

            request.fail(function (result, textStatus, errorThrown){
                pleaseWaitDialog.hidePleaseWait();
                swal("Error!", result.responseText, "error");
                //console.error("The following error occurred: "+ textStatus, errorThrown);
            });

            request.always(function () {});

            event.preventDefault();
        });
    </script>

    <link rel="stylesheet" type="text/css" media="all" href="{{ URL:: asset('/styles/datepicker.css') }}" />
    <script type="text/javascript" src="{{ URL:: asset('/scripts/bootstrap-datepicker.js') }}"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("input[type='text']:visible:enabled:first", document.forms['employeeForm']).focus();

            $('.input-group.date input').each(function(){
               if($(this).val() == '0000-00-00') { $(this).val(''); }
            });
            $('.input-group.date').datepicker({
                autoclose: true, format: "{{ trans('common.date.picker.format.one') }}",
                startView: "decade", minViewMode: "days", language: 'en'
            });
        });
    </script>

@stop