@extends('layouts.template')

@section('content')
<section class="staff-controll" id="staff-status">
    <div class="container">
        <div class="row">
            <!-- BEGIN PAGE TITLE & BREADCRUMB-->       
            <h1 class="heading"style="margin-left:10px;margin-right:10px;">
                <a href="{{ url('task_assigner/dashboard') }}" title="back"><i class="fa fa-undo" aria-hidden="true"></i></a>
                Staff
            </h1>
            @if(Session::has('flash_message'))
            <div class="row-fluid">
                <div class="span12">
                    <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
                </div> 
            </div>   
            @endif
            
                <div class="cargo-search">
                    {!! Form::open(['method' => 'GET', 'url' => '/taskassigner/staffcontrol','id'=>'form1','class' => 'form-vertical', 'role' => 'search'])  !!}
                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingOne">
                                <h4 class="panel-title">
                                    <a class="table-heading" role="button" data-toggle="collapse" data-parent="#accordion"
                                    href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                    <i class="more-less glyphicon glyphicon-plus"></i>
                                    <h4> Search Filters</h4>
                                    </a>
                                </h4>
                            </div>
                        <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
                            <div class="panel-body">
                                <div class="cargo-search-form search-filters">
                                    <ul class="list-inline">
                                        <li>
                                            {!! Form::select('country',['' => 'Select Country'] + $page_data['country'] ,null, ['id'=>'country1','class' => 'form-control']) !!}
                                            <hr/>
                                        </li>
                                        <li>
                                            {!! Form::select('section',['' => 'Select Section'] + $page_data['section'] ,null, ['id'=>'section1','class' => 'form-control']) !!}
                                            <hr/>
                                        </li>
                                    </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- panel-group -->
                    {!! Form::close() !!}
                </div>

            <div class="staff_controll">
                <div class="table-heading">
                    <a id="staff_creation">{!! Html::image('images/tools1.png') !!} Staff Creation</a>    
                </div>

                <div id="staff_cret" class="staff_area" style="display:none;">
                    {!! Form::open(['url' => '/taskassigner/staffcontrol/create', 'class' => 'form-vertical','id'=>'staffcontrolform','files' => true]) !!}
                    <div class="parts-modal-content clearfix">
                        <div class="col-md-3 col-sm-3 col-xs-12 form-group{{ $errors->has('name') ? 'has-error' : ''}}">
                            <label for="Name">Name</label>
                            <span class="error"> * </span>
                            {!! Form::text('name', null, array('placeholder' => 'Name','class' => 'form-control')) !!}
                            {!! $errors->first('name', '<p class="help-block">:message</p>') !!}
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12 form-group{{ $errors->has('section') ? 'error' : ''}}">
                            <label for="Section">Section</label>
                            <span class="error"> * </span>
                            <div class="select" >
                                {!! Form::select('section',[''=>'Select section','Logistic'=>'Logistic','Transport'=>'Transport','Warehouse'=>'Warehouse','Store'=>'store'] , null, ['id'=>'section','class' => 'form-control arr']) !!}
                                {!! $errors->first('section', '<p class="help-block">:message</p>') !!}
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12 form-group {{ $errors->has('country') ? 'error' : ''}}">
                            <label for=Country">Country</label>
                            <span class="error"> * </span>
                            <div class="select" >
                                {!! Form::select('country', [''=>'Select country'] + $country, null, ['class' => 'form-control arr','id' => 'country']) !!}
                                {!! $errors->first('country', '<p class="help-block">:message</p>') !!}
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12 form-group{{ $errors->has('status') ? 'error' : ''}}">
                            <label for=Status">Status</label>
                            <span class="error"> * </span>
                            <div class="select">
                                {!! Form::select('status', [''=>'Select Status','Working'=>'Working','Dismissed'=>'Dismissed'], null, ['class' => 'form-control arr','id' => 'status']) !!}
                                {!! $errors->first('status', '<p class="help-block">:message</p>') !!}
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12 form-group {{ $errors->has('start_date') ? 'error' : ''}}">
                            <label for="Start Date">Start Date</label>
                            <span class="error"> * </span>
                            <div class="controls">
                                {!! Form::date('start_date', null, ['class' => 'form-control arr','id' => 'start_date']) !!}
                                {!! $errors->first('start_date', '<p class="help-block">:message</p>') !!}
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12 form-group {{ $errors->has('end_date') ? 'error' : ''}}">
                            <label for="End Date">End Date</label>
                            <span class="error"></span>
                            <div class="controls">
                                {!! Form::date('end_date', null, ['class' => 'form-control arr year','id' => 'end_date']) !!}
                                {!! $errors->first('end_date', '<p class="help-block">:message</p>') !!}
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12 form-group {{ $errors->has('working_days') ? 'error' : ''}}">
                            <label for="Working Days">Working Days</label>
                            <span class="error"> * </span>
                            <div class="controls">
                                {!! Form::text('working_days', null, ['placeholder' => 'Working Days','class' => 'form-control arr','id'=>'working_days']) !!}
                            </div>
                        </div>

                        <div class="col-md-3 col-sm-3 col-xs-12 form-group {{ $errors->has('leave_due') ? 'error' : ''}}">
                            <label for="Leave Due">Leave Due</label>
                            <span class="error"> * </span>
                            <div class="controls">
                                {!! Form::text('leave_due', null, ['placeholder' => 'Leave Due','class' => 'form-control arr','id'=>'leave_due']) !!}
                                {!! $errors->first('leave_due', '<p class="help-block">:message</p>') !!}
                            </div>
                        </div>

                        <div class="form-group col-md-12 col-sm-12 submit-btn">    
                            {!! Form::submit(isset($submitButtonText) ? $submitButtonText : 'Create', ['class' => 'btn green']) !!}
                            {!! Form::button('Cancel', ['id'=>'tccancel','class' => 'btn btn-primary']) !!}

                        </div>
                    </div>    
                    {!! Form::close() !!}
                </div>
            
                <div class="table-responsive" style="margin-top: 2%;">
                    <div class="span12">
                        <div class="portlet box green">
                            <div class="portlet-title">
                                <div class="tools">
                                    <a href="javascript:;" class="reload"></a>
                                    <a href="javascript:;" class="remove"></a>
                                </div>
                            </div>
                            <div class="portlet-body">
                                <table class="table table-striped table-bordered table-hover table-full-width dataTable my-table" id="staff_table">
                                    <thead>
                                        <tr>
                                            <th>Staff Nr</th>
                                            <th>Name</th>
                                            <th>Country</th>
                                            <th>Section</th>
                                            <th>Start Date</th>
                                            <th>End Date</th>
                                            <th>Working Days</th>
                                            <th>Leave Due</th>
                                            <th>Status</th>
                                            <th>Action</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($staff as $data)
                                        <tr style="cursor: pointer;" class="toolitem" data-id="{{ $data->id }}">
                                            <td>staff_{{$data->id}}</td>
                                            <td>{{$data->name}}</td>
                                            <td class="cont">{{$data->country}}</td>
                                            <td>{{$data->section}}</td>
                                            <td class="datepicker">{{Helper::convert_to_ddmmyy($data->start_date)}}</td>
                                            <td class="datepicker">{{Helper::convert_to_ddmmyy($data->end_date)}}</td>
                                            <td>{{$data->working_days}}</td>
                                            <td>{{$data->leave_due}}</td>
                                            <td>{{$data->status}}</td>
                                            <td>
                                                <button class="details_tab btn btn-warning"
                                                 data-id="{{ $data->id }}">
                                                <i class="fa fa-eye"></i></button>
                                                <!--<a href="{{ url('/taskassigner/staffcontrol/' . $data->id . '/edit') }}" title="Edit Staff"><button class="btn btn-primary"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button></a>-->
                                                {!! Form::open([
                                                'method'=>'DELETE',
                                                'url' => ['/taskassigner/staffcontrol', $data->id],
                                                'style' => 'display:inline'
                                                ]) !!}
                                                {!! Form::button('<i class="fa fa-times" aria-hidden="true"></i>', array(
                                                'type' => 'submit',
                                                'class' => 'btn btn-danger btn-s',
                                                'title' => 'Delete Name',
                                                'onclick'=>'return confirm("Confirm delete?")'
                                                )) !!}
                                                {!! Form::close() !!}
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>                           
                        </div>
                    </div>
                </div>  
            </div>
            <div class="tools-control-table status-table">
            <div class="panel with-nav-tabs panel-default">
                <div class="panel-heading table-heading">
                    <div class="table-heading">
                        <h4 class="col-md-6 col-sm-6 col-xs-6">Activity Log</h4>
                    </div>
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Staff Nr</th>
                                    <th>Name</th>
                                    <th>Section</th>
                                    <th>Date</th>
                                    <th>Status</th>
                                    <th>Days</th>
                                </tr>
                            </thead>
                            <tbody class="road_detail">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            </div>

        </div>     
    </div>
</section>
<!-- jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
    $(".status-table").hide();
    $("#country1, #section1").change(function(){
    $("#form1").submit();
  });
});
</script>
<script type="text/javascript">
jQuery(document).ready(function () {
    var country = null;
    var countryString = JSON.stringify(country);

    $('#staff_table').Tabledit({
        url: "{{URL::to('taskassigner/staffcontrol/update')}}",
        restoreButton: false,
        deleteButton: false,
        columns: {
            identifier: [0, 'Id'],
            editable: [[1, 'name'], [2, 'country', countryString], [3, 'section', '{"Logistic":"Logistic","Transport":"Transport","Warehouse":"Warehouse","Store":"store"}'], [4, 'start_date'], [5, 'end_date'], [6, 'working_days'], [7, 'leave_due'], [8, 'status', '{"Working": "Working", "Dismissed": "Dismissed"}']],
            attributes: [
                [4, '{"type": "date", "required": ""}']
            ]
        },
        onSuccess: function () {
            setTimeout(function () {
                location.reload();
            }, 1000);
        },
        onDraw: function () {
            $('table tr td:nth-child(5) input').each(function () {
                $(this).prop("type", "date");
                var id = $(this).closest('tr').attr('data-id');
                var name = $(this).attr("name");
                if (name = 'start_date') {
                    $(this).attr("id", "startdate_" + id);
                }
                $('body').on('change', '#startdate_' + id, function () {
                    var start_date = $(this).val();
                    var end_date = $("#enddate_" + id).val();    
                    var country = $("#country_" + id).val();
                   
                    if (country == '') {
                        alert("Please select country");

                    }
                    var enddate = (end_date) ? end_date : new Date(); 
                    alert(enddate);
                    var days = showDay(start_date, enddate);
                    $("#working_days_" + id).val(days);
                    var year = calculateYears(start_date, enddate);
                    alert(year);
                    $.ajax({
                        type: "POST",
                        url: "{{URL::to('taskassigner/staffcontrol/getleaves')}}",
                        data: {year: year, country: country, _token: '{{csrf_token()}}'},
                        success: function (response) {
                            console.log(response);
                            if (response) {
                                var leave = response.leave[0].year;
                                $("#leave_due_" + id).val(leave);
                            } else {
                                $("#leave_due_" + id).val(0);
                            }
                        }
                    });

                });


            });

            $('table tr td:nth-child(6) input').each(function () {
                $(this).prop("type", "date");
                var id = $(this).closest('tr').attr('data-id');
                var name = $(this).attr("name");
                if (name = 'end_date') {
                    $(this).attr("id", "enddate_" + id);
                }
                $("#enddate_" + id).change(function () {
                    var start_date = $("#startdate_" + id).val();
                    var end_date = $(this).val();
                    var country = $("#country_" + id).val();
                    if (country == '') {
                        alert("Please select country");
                        $("#enddate_" + id).val("");
                        return false;
                    }
                    if (start_date !== '') {
                        var days = showDay(start_date, end_date);
                        $("#working_days_" + id).val(days);
                        var year = calculateYear(start_date, end_date);
                        $.ajax({
                            type: "POST",
                            url: "{{URL::to('taskassigner/staffcontrol/getleaves')}}",
                            data: {year: year, country: country, _token: '{{csrf_token()}}'},
                            success: function (response) {
                                console.log(response);
                                var array = response.leave;
                                if (response) {
                                    var leave = response.leave[0].year;
                                    $("#leave_due_" + id).val(leave);

                                } else {

                                    $("#leave_due_" + id).val(0);
                                }
                            }
                        });

                    } else {
                        alert("Please Select start date");
                    }
                });


            });


            $('table tr td:nth-child(3) select').each(function () {
                var id = $(this).closest('tr').attr('data-id');
                $(this).attr("id", "country_" + id);
                $("#country_" + id).change(function () {
                    var start_date = $("#startdate_" + id).val();

                    if (start_date !== '') {
                        var end_date = $("#enddate_" + id).val();
                        var country = $("#country_" + id).val();

                        var enddate = (end_date) ? end_date : new Date();
                        var days = showDays(start_date);
                        $("#working_days_"+ id).val(days);
                        var year = calculateYears(start_date, enddate);
                        $.ajax({
                            type: "POST",
                            url: "{{URL::to('taskassigner/staffcontrol/getleaves')}}",
                            data: {year: year, country: country, _token: '{{csrf_token()}}'},
                            success: function (response) {
                                console.log(response);
                                var array = response.leave;
                                if (!array.length) {
                                    $("#leave_due_" + id).val(0);
                                } else {

                                    var leave = response.leave[0].year;
                                    $("#leave_due_" + id).val(leave);
                                }
                            }
                        });

                    }


                });
            });

            $('table tr td:nth-child(7) input').each(function () {
                var id = $(this).closest('tr').attr('data-id');
                $(this).attr("id", "working_days_" + id);
            });

            $('table tr td:nth-child(8) input').each(function () {
                var id = $(this).closest('tr').attr('data-id');
                $(this).attr("id", "leave_due_" + id);
            });

        },
    });


    $('#staffcontrolform').validate({
        highlight: function (element) {
            $(element).closest('.form-group').addClass('has-error');
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function (element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        focusInvalid: false, // do not focus the last invalid input
        ignore: "", // validate all fields including form hidden input
        rules: {
            'name': {
                required: true,
            },
            'country': {
                required: true,
            },
            'trailer': {
                required: true,
            },
            'start_date': {
                required: true,
            },
            'status': {
                required: true,
            },
            'leave_due': {
                required: true,
            },
            'section': {
                required: true,
            },
        },
        errorPlacement: function (error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        },
        messages: {
            'name': {
                required: "The name field is required",
            },
            'country': {
                required: "The country field is  required",
            },
            'section': {
                required: " The section field is  required",
            },
            'start_date': {
                required: " The start_date field is  required",
            },
            'status': {
                required: " The status field is  required",
            },
            'leave_due': {
                required: " The leave_due field is  required",
            },
        },
        focusInvalid: false,
        invalidHandler: function (form, validator) {
            if (!validator.numberOfInvalids())
                return false;
//            $('html, body').animate({
//              scrollTop: $(validator.errorList[0].element).offset().top
//            }, 2000);
          }
      });
 

    $("#staff_creation").click(function () {
        $("#staff_cret").show("slow");
    });

    $("#tccancel").click(function () {
        $("#staff_cret").hide("slow");
    });

    function calculateYears(date1, date2) {
        date1 = new Date(date1);
        date2 = new Date(date2);
        var period = date2.getFullYear() - date1.getFullYear();
        if (date2.getMonth() < date1.getMonth() - 1) {
            period--;
        }
        if (date1.getMonth() - 1 == date2.getMonth() && date2.getDate() < date1.getDate()) {
            period--;
        }
        ;

        return period;
    }

    function calculateYear(date1, date2) {
        date1 = new Date(date1);
        date2 = new Date(date2);
        var period = date2.getFullYear() - date1.getFullYear();
        if (date2.getMonth() < date1.getMonth() - 1) {
            period--;
        }
        if (date1.getMonth() - 1 == date2.getMonth() && date2.getDate() < date1.getDate()) {
            period--;
        }
        ;

        return period;
    }


    $("#start_date").change(function () {
        var start_date = $("#start_date").val();
        var end_date = $("#end_date").val();
        var country = $("#country").val();
        if (country == '') {
            alert("Please select country");
            $("#start_date").val("");
            return false;
        }
        var enddate = (end_date) ? end_date : new Date();
        console.log(enddate);
        var days = showDays(start_date);
        $("#working_days").val(days);
        var year = calculateYears(start_date, enddate);
        $.ajax({
            type: "POST",
            url: "{{URL::to('taskassigner/staffcontrol/getleaves')}}",
            data: {year: year, country: country, _token: '{{csrf_token()}}'},
            success: function (response) {
                console.log(response);
                if (response) {
                    var leave = response.leave[0].year;
                    $("#leave_due").val(leave);
                } else {
                    $("#leave_due").val(0);
                }
            }
        });

    });

    $("#end_date").change(function () {
        var start_date = $("#start_date").val();
        var end_date = $("#end_date").val();
        var country = $("#country").val();
        if (country == '') {
            alert("Please select country");
            $("#end_date").val("");
            return false;
        }
        if (start_date !== '') {
            var days = showDay(start_date, end_date);
            $("#working_days").val(days);
            var year = calculateYear(start_date, end_date);
            $.ajax({
                type: "POST",
                url: "{{URL::to('taskassigner/staffcontrol/getleaves')}}",
                data: {year: year, country: country, _token: '{{csrf_token()}}'},
                success: function (response) {
                    console.log(response);
                    var array = response.leave;
                    if (response) {
                        var leave = response.leave[0].year;
                        $("#leave_due").val(leave);

                    } else {

                        $("#leave_due").val(0);
                    }
                }
            });

        } else {
            alert("Please Select start date");
            $("#end_date").val("");
        }
    });


    $("#country").change(function () {
        var start_date = $("#start_date").val();

        if (start_date !== '') {
            var end_date = $("#end_date").val();
            var country = $("#country").val();

            var enddate = (end_date) ? end_date : new Date();
            var days = showDays(start_date);
            $("#working_days").val(days);
            var year = calculateYears(start_date, enddate);
            alert(year);
            $.ajax({
                type: "POST",
                url: "{{URL::to('taskassigner/staffcontrol/getleaves')}}",
                data: {year: year, country: country, _token: '{{csrf_token()}}'},
                success: function (response) {
                    console.log(response);
                    var array = response.leave;
                    if (!array.length) {
                        $("#leave_due").val(0);
                    } else {

                        var leave = response.leave[0].year;
                        $("#leave_due").val(leave);
                    }
                }
            });
        }

    });

    function showDays(firstDate) {

        var start = new Date(firstDate),
                end = new Date(),
                diff = new Date(end - start),
                days = diff / 1000 / 60 / 60 / 24;
        return Math.round(days);
    }

    function showDay(firstDate, secondDate) {

        var start = new Date(firstDate),
                end = new Date(secondDate),
                diff = new Date(end - start),
                days = diff / 1000 / 60 / 60 / 24;
        return Math.round(days);

    }

// Staff Activity Log
$(".details_tab").click(function (e) {
$(".status-table").hide();
$(".status-table").show("slow").addClass("slideInLeft");
var staff_id = $(this).data('id');
$.ajax({
url: "{{URL::to('taskassigner/staff_control/getStaffActivity')}}",
type: 'POST',
dataType: 'json',
data: {'id': staff_id, '_token': '{{csrf_token()}}'},
success: function (staffdata) {
if (staffdata.data != '') {
$('.road_detail').html('');
$.each(staffdata.data, function (index, value) {
$('.road_detail').append('<tr id="road_details'+value.id+'"><td>staff_<span data-id='+value.id+' data-type="road_details"></span>' + value.id + '</td><td>' + value.name + '</td><td>' + value.section + '</td><td>' + convert_to_ddmmyy(value.start_date) + '</td><td>' + value.status + '</td><td>' + value.working_days + '</td></tr>');
});
} else {
$('.road_detail').html('');
$('.road_detail').append('<tr><td colspan="8">No Data Found</td></tr>');
}
}
});
});
 
});
</script>
@endsection