@section('stylesheets')
<link rel="stylesheet" href="{{ asset('css/spacing-helpers.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.css">

@endsection

{{-- General --}}
{{ Form::open(['url' =>  $d__a->url, 'class'=>'form-horizontal', 'method'=>'POST']) }}
<div class="row form-group">
    <div class="col-md-12">
        <strong>General</strong>
    </div>
        
    {{-- Project --}}
    <div class="col-md-4">
        {{ Form::label('projects','Projects',['class'=>'control-label']) }}
        {{ Form::select('project', $d__a->projects,$d__a->mLeaveAssigns->user->employee->organization->project_id_fk ?? null,['class'=>'form-control','id'=>'project']) }}
        {!! $errors->first('project', '<span class="help-block" style="color: red;">:message</span>') !!}
    </div>

    {{-- Project Type --}}
    <div class="col-md-4">
        {{ Form::label('project_type','Project Type',['class'=>'control-label']) }}
        {{ Form::select('project_type', $d__a->groups,null,['class'=>'form-control','id'=>'project_type']) }}
        {!! $errors->first('project_type', '<span class="help-block" style="color: red;">:message</span>') !!}
    </div>
    
    
    {{-- Branch --}}
    <div class="col-md-4">
        {{ Form::label('branch','Branch',['class'=>'control-label']) }}
        {{ Form::select('branch', [],null,['class'=>'form-control hr-select2','id'=>'branch']) }}
        {!! $errors->first('branch', '<span class="help-block" style="color: red;">:message</span>') !!}
    </div>

</div>

{{-- Details --}}
<div class="row form-group">
    <div class="col-md-12">
        <strong>Details</strong>
    </div>

    {{-- User --}}
    <div class="col-md-4">
        {{ Form::label('employee','Employee',['class'=>'control-label']) }}
        {{ Form::select('user', [],null,['id'=>'user','class'=>'form-control','id'=>'user']) }}
        {!! $errors->first('user', '<span class="help-block" style="color: red;">:message</span>') !!}
    </div>   

    {{-- Month --}}
    <div class="col-md-4">
        {{ Form::label('month','Month',['class'=>'control-label']) }}
        {{ Form::text('month', null, ['class' => 'form-control monthpicker', 'placeholder'=>'Select Date', 'autocomplete'=>'off']) }} 
        {!! $errors->first('month', '<span class="help-block" style="color: red;">:message</span>') !!}   
    </div>  

    {{-- Day --}}
    <div class="col-md-4">
        {{ Form::label('total_late_day','Total Late (Day)',['class'=>'control-label']) }}
        {{ Form::select('total_late_day', $d__a->mLeaveAssigns->dayList(), null, ['id' => 'total_late_day', 'class' => 'form-control', 'placeholder'=>'Select Day', 'autocomplete'=>'off']) }}    
        {!! $errors->first('total_late_day', '<span class="help-block" style="color: red;">:message</span>') !!}   
    </div>
      
    {{--Calculate Day --}}
    <div class="col-md-4">
        {{ Form::label('calculate_day','Counted Day',['class'=>'control-label']) }}
        {{ Form::text('calculate_day', null, ['id'=>'day','class' => 'form-control', 'placeholder'=>'Calculate Day', 'autocomplete'=>'off','readonly']) }}    
        {!! $errors->first('calculate_day', '<span class="help-block" style="color: red;">:message</span>') !!}   
    </div> 
</div>

<br>

{{-- Button --}}
<div class="row">
    <div class="col-md-12 text-center">
        <div class="form-group">
            {!! Form::submit('Submit', ['class' => 'btn btn-info']); !!}
            <a href="{!! route('lateLeaveAssigns.index') !!}" class="btn btn-danger closeBtn">Close</a>
        </div>
    </div>
</div>


@section('footerAssets')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-toast-plugin/1.3.2/jquery.toast.min.js"></script>

<script type="text/javascript">
    function ajaxRequest(sourceAttr,targetAttr,link,selected=null){

        var sourceId      = sourceAttr.val() || '';
        var projectId     = $('#project').val() || 0;
        var projectTypeId = $('#project_type').val() || 0;
        var branchId      = $('#branch').val() || 0;
        var token         = $('meta[name="_token"]').attr('content');
        
        var sendingData = {
            'sourceId': sourceId,
            'projectId': projectId,
            'projectTypeId': projectTypeId,
            'branchId':branchId,
            '_token': token
        }

        $response = $.ajax({
            url: link,
            dataType: 'json',
            type: 'POST',
            data: sendingData,
            success: function( data ){
                console.log(data);
                var options="<option value=''>Select One</option>";
                $.each(data,function(key,val){
                    var selectedData='';
                    if(selected!=null && val.id==selected){
                        selectedData = 'selected="selected"';
                    }
                    
                    options += '<option '+selectedData+' value="'+val.id+'">'+val.name+'</option>';
                });
                targetAttr.html(options);
                if (targetAttr.attr('id') === 'branch') {
                    targetAttr.val('').trigger('change.select2')
                }
            },
            error: function(response){
                // console.log(response);
            }
        });

        return $response;
    }

    // Append project type
    $(document).on('change','#project', function() {
        console.log($('#project'));
        ajaxRequest($('#project'), $('#project_type'), 
            "{{ url('hr/filter/getProjectType') }}" );
    });

    // Append branch
    $(document).on('change','#project_type', function() {
        ajaxRequest($('#project_type'), $('#branch'), 
            "{{ url('hr/filter/getBranch') }}" );
    });

    // Append user
    $(document).on('change','#branch', function() {
        ajaxRequest($('#branch'), $('#user'), 
            "{{ url('hr/filter/getUsers') }}" );
    });

    

    ajaxRequest($('#project'), 
        $('#project_type'), 
        "{{ url('hr/filter/getProjectType') }}", 
        "{{ $data['filter']['project_type'] ?? null }}" )
        .then(function(){
            ajaxRequest($('#project_type'), $('#branch'), 
                "{{ url('hr/filter/getBranch') }}", 
                "{{ $data['filter']['branch'] ?? null }}" )
                .then(function(){
                    ajaxRequest($('#branch'), $('#user'), 
                    "{{ url('hr/filter/getUsers') }}", 
                    "{{ $data['filter']['user'] ?? null }}" );
                });
        });
      
    $("#total_late_day").change(function(e){
        var _data = {};
        var dayElement = $("#day");
        var totalLateDayElement = $(this);
        var user = $("#user");
        var url = "{{ route('lateLeaveAssigns.getLateLeaveDayByTotalLate') }}"; 
        _data.totalLate = totalLateDayElement.val();
        _data.userId = user.val() || 0;
        $.ajax({
            type: "GET",
            url: url,
            data: _data,
            success: function( response ){
                if(response.status == 'error'){
                    $.toast({    
                        heading: 'Error',
                        text:response.message,
                        showHideTransition : 'slide',
                        loader: false,     
                        bgColor: '#A94442',
                        position: 'top-right'
                    })
                    return;
                } else {
                    if(response.day > 0){
                        dayElement.val(response.day);
                    } else {
                        dayElement.val("");
                    }
                }
            },
            error: function(response){}
        });
    });

</script>
@endsection