@extends('admin.layout.app')
@section('title','Create Employee Over Time')
@push('headerscript')
    <link href="{{asset('theme/plugins/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet">
@endpush
@section('content')
    <div class="content">
        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="page-title-box">
                        <h4 class="page-title">Create Employee Over Time</h4>
                        <div class="pull-right">
                            <a href="{{route('employee-over-time.index')}}"
                               class="btn btn-info btn-rounded waves-effect waves-light m-b-2"><i
                                    class=" mdi mdi-keyboard-backspace"></i> Back</a>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            {!! Form::open(['route'=>array('employee-over-time.store'), 'onsubmit'=>'BtnSubmit.disabled = true','method' => 'post']) !!}
            <div class="row">
                <div class="col-xs-3">
                    <label for="voucher_no">Voucher No.<span
                            class="text-danger">*</span></label>
                    <input id="voucher_no" type="text" class="form-control number"
                           value="{{ $count+1 < 10 ? 'OT1-0'.$count+1 : 'OT1-'.$count+1 }}"
                           name="voucher_no" readonly
                           autofocus>
                    <div class="text-danger">{{$errors->first('voucher_no')}}</div>
                </div>
                <div class="form-group col-sm-3 col-3">
                    <label for="date">Date</label>
                    <input type="text" name="date" id="atten_date"
                           value="{{old('date', date('d-m-Y'))}}"
                           class="form-control datepicker" autocomplete="off">
                    <div class="text-danger">{{$errors->first('date')}}</div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12 col-12 table-responsive">
                    <table class="table table-striped dataTable" id="datatable">
                        <thead>
                        <tr class="text-center">
                            <th style="width: 3%">#</th>
                            <th style="width: 20%">Employee Name<span
                                    class="text-danger">*</span>
                            </th>
                            <th style="width: 20%">Work Hours<span
                                    class="text-danger">*</span>
                            </th>
                            <th style="width: 20%">OT Rate<span
                                    class="text-danger">*</span>
                            </th>
                            <th style="width: 20%">Amount<span
                                    class="text-danger">*</span>
                            </th>
                            <th style="width: 20%">Remarks
                            </th>
                            <th style="width: 10%">
                                <button type="button"
                                        class="btn btn-info btn-sm m-l-10"
                                        id="add_employee">
                                    <i class="fa fa-plus"></i>
                                </button>
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                {{1}}
                            </td>
                            <td>
                                {!! Form::select("employee_id[]", [''=>'Select Employee']+$employees, old("employee_id"), ['class'=>'form-control', 'required', 'id'=>'employee_id11'] ) !!}
                            </td>
                            <td>
                                <input id="ot_hours11" type="text"
                                       class="form-control floatnumber"
                                       name="ot_hours[]" value="{{ old('ot_hours') }}" required>
                            </td>
                            <td>
                                <input id="ot_rate11" type="text"
                                       class="form-control floatnumber"
                                       name="ot_rate[]" value="{{ old('ot_rate') }}" required>
                            </td>
                            <td>
                                <input id="ot_amount11" type="text"
                                       class="form-control floatnumber"
                                       name="ot_amount[]" value="{{ old('ot_amount') }}" required>
                            </td>
                            <td>
                                <input id="remarks11" type="text" class="form-control"
                                       name="remarks[]" value="{{ old('remarks') }}">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="form-group text-center m-t-10">
                    <div class="col-xs-12 m-t-20">
                        <button type="submit"
                                id="BtnSubmit"
                                class="btn w-md btn-bordered btn-success waves-effect waves-light">
                            Submit
                        </button>
                    </div>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>
@endsection
@push('footerscript')
    <script src="{{asset('theme/plugins/moment/moment.js')}}"></script>
    <script src="{{asset('theme/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    <script>
        $(".datepicker").datepicker({
            format: 'dd-mm-yyyy',
            autoclose: true,
            endDate: "today"
        });
        $(function () {
            if ({{count($employees)}} == 1
            ) {
                $('#employee_id option:eq(1)').prop('selected', true)
            }
        });

        $('.number').keyup(function (e) {
            if (/\D/g.test(this.value)) {
                this.value = this.value.replace(/\D/g, '');
            }
        });
        $('.floatnumber').on('input', function () {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });
        $('input[id^=ot_rate], input[id^=ot_hours]').keyup(function () {
            var lastnum = $(this).attr('id').slice(-2);
            $('#ot_amount' + lastnum).val($('#ot_hours' + lastnum).val() * $('#ot_rate' + lastnum).val());
        });

        var j = 12;
        $("#add_employee").on('click', function () {
            var col = "<tr>";
            col += '<td> ' + (j - 10) + ' </td>'
            col += '<td><select name="employee_id[]"  id="employee_id' + j + '" class="form-control" required="">' +
                '<option value="">Select Employee</option>@foreach($employees as $row => $value)<option value="{{$row}}">{{$value}}</option>@endforeach
                    </select></td>';
            col += '<td><input id="ot_hours' + j + '" type="text" class="form-control floatnumber" name="ot_hours[]" required>  </td>'
            col += '<td><input id="ot_rate' + j + '" type="text" class="form-control floatnumber" name="ot_rate[]"  required> </td>'
            col += '<td><input id="ot_amount' + j + '" type="text" class="form-control floatnumber" name="ot_amount[]" required> </td>'
            col += '<td><input id="remarks' + j + '" type="text" class="form-control" name="remarks[]"> </td>'
            col += '<td><button class="btn btn-danger btn-sm" id="delete_over_time_row" type="button"><i class="fa fa-trash"></i></button></td>';
            $("table#datatable").append(col);
            j++;
            $('input[id^=ot_rate], input[id^=ot_hours]').keyup(function () {
                var lastnum = $(this).attr('id').slice(-2);
                $('#ot_amount' + lastnum).val($('#ot_hours' + lastnum).val() * $('#ot_rate' + lastnum).val());
            })
        });
        $("table#datatable").on("click", "#delete_over_time_row", function (event) {
            $(this).closest("tr").remove();
        });
    </script>
@endpush