@extends('admin.layout.master')
@section('content')
    @include('flash-message')
     
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h3 class="text-left"> Roster Exchange/Replace/OT</h3>
                        </div>
                        <div class="col-md-4 text-right">
                            <a href="{{route('payroll.hrm.roster.exchange_list')}}" class="btn btn-sm btn-success">Roster Exchange List</a>
                        </div>
                    </div>
                   
                </div>
                <div class="card-body">
                    <form action="{{route('payroll.hrm.roster.exchange_store')}}" method="POST">
                        @csrf
                       
                        <div class='row col-8 offset-2' >
                            <div class='col-4'>
                                <div class="form-group">
                                    <label>Date</label>
                                    <input type="text" class="form-control datepicker" id="date" name="date" value="{{carbon()->now()->format('d-m-Y')}}" placeholder="Date" required >
                                </div>
                            </div>
                            <div class='col-4'>
                                <div class="form-group">
                                    <label>Type</label>
                                    <select class='form-control input-sm' name="type" id="type">
                                        {{-- <option value="">--Select--</option> --}}
                                       <option value="1">Exchange</option>
                                       <option value="2">Replace</option>
                                       <option value="3">OT</option>
                                    </select>   
                                </div>
                            </div>
                            <div class='col-4'>
                                <div class="form-group">
                                    <label>Department</label>
                                    <select class='form-control input-sm' name="emp_department" id="emp_department">
                                        <option value="0">--Select--</option>
                                        @if(!empty($department_lists))
                                            @foreach($department_lists as $dept_val)
                                                <option value="{{$dept_val->id}}">{{$dept_val->name}}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                            </div>
                            <div class='col-6'>
                                <div class="form-group">
                                    <label>Employee Name</label>
                                    <select id="emp_select" class="name_live_search form-control" name="employee_id">
                                        <option selected disabled value="">Select employee</option>
                                        @foreach ($employes as $e)
                                            <option value="{{$e->id}}" @if(request()->get('employee_id') == $e->id) {{'selected'}} @endif>{{$e->emp_name}}-{{$e->emp_code}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class='col-6'>
                                <div class="form-group">
                                    <label>Shift</label>
                                    <select class="form-control input-sm" name="request_by_shift_id" id="request_by_shift_id">
                                       
                                    </select>
                                </div>
                            </div>

                            <div class='col-6'>
                                <div class="form-group">
                                    <label>Replace Of</label>
                                    <select id="replace_of" class="name_live_search form-control" name="replace_of">
                                        <option selected disabled value="">Select employee</option>
                                        @foreach ($employes as $e)
                                            <option value="{{$e->id}}" @if(request()->get('employee_id') == $e->id) {{'selected'}} @endif>{{$e->emp_name}}-{{$e->emp_code}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class='col-6'>
                                <div class="form-group">
                                    <label>Shift</label>
                                    <select class="form-control input-sm" name="replace_of_shift_id" id="replace_of_shift_id">
                                       
                                    </select>
                                </div>
                            </div>

                            <div class='col-12' >
                                <div class="form-group">
                                    <label>Remaks</label>
                                    <input type="text" class="form-control" id="remarks" name="remarks" value="" placeholder="Remarks"  >
                                </div>
                            </div>
                            <div class='col-md-2 offset-8'>
                                <button class="btn btn-primary btn-sm" id="submit_button">Submit</button>
                            </div>
                            <div class='col-md-2 text-center'>
                                <a href="{{route('payroll.hrm.roster.create')}}" class="btn btn-warning btn-sm">Refresh</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>



    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-8">
                            <h3 class="text-left"> Roster Exchange OR Replace List</h3>
                        </div>
                    </div>  
                </div>
                <div class="card-body">
                    <div class='row'>
                        <table class="display table-bordered datatable table table-stripped mt-3" style="width: 100%">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th>Replace With</th>
                                    <th>Shift</th>
                                </tr>
                            </thead>
                            <tbody id="exchange_or_replace_list">
                                
                            </tbody>
                        </table>
                        
                    </div>  
                </div>
            </div>
        </div>
    </div>
    <script>

//    $(this).closest("tr").after(newRow);

    $(document).ready(function(){
        enable_submit_button();

        $("#date").change(function(){
             $('#request_by_shift_id').html('');
             $('#emp_select').html('');
             $('#replace_of').html('');
             $('#replace_of_shift_id').html('');
             enable_submit_button();
        });

        $("#type").change(function(){
             $('#request_by_shift_id').html('');
             $('#emp_select').html('');
             $('#replace_of').html('');
             $('#replace_of_shift_id').html('');
             enable_submit_button();
        });
        $("#emp_select").change(function(){
            // alert('asfsgg');
            let emp_id = $(this).val();
            let date = $('#date').val();
            let type = $('#type').val();
            let emp_type = 1;
            get_current_shift(emp_id,date,type,emp_type)
                    
        });
        $("#replace_of").change(function(){
            let emp_id = $(this).val();
            let date = $('#date').val();
            let type = $('#type').val();
            let emp_type = 2;
            get_current_shift(emp_id,date,type,emp_type)
        });

        function get_current_shift(emp_id,date,type,emp_type){
        let li = links();
           
           $.ajax({
               type: "GET",
               url: li + "current-shift",
               data: {
                   _token: "{{ csrf_token() }}",
                   emp_id: emp_id,
                   date: date,
                   type: type,
                   emp_type: emp_type,
                   
               },
               success: function (data) {
                   console.log(data);
                    if(data.emp_type==1){
                        $("#request_by_shift_id").html(data.html);
                    }else{
                        $("#replace_of_shift_id").html(data.html);
                    }
                    $("#exchange_or_replace_list").html(data.html2);

                   // if(data == 'true'){
                   //     $("#request_by_shift_id").html(data);
                   //     $("#alert_message").text(" ");
                   // }else{
                   //     $("#leave_submit_button").attr("disabled", true);
                   //     $("#alert_message").text("You Are Not Eligible For Leave Application.");
                   // }
                   enable_submit_button();
               },
           });
        }

        function enable_submit_button(){
            let type = $('#type').val();
            let request_by = $('#emp_select').val();
            let request_of = $('#replace_of').val();
            let shift1 = $('#request_by_shift_id').val();
            let shift2 =$('#replace_of_shift_id').val();
            console.log( type,shift1,shift2,request_by);
// alert(type,shift1,request_by,request_of);
            if(type == 1){
                if(shift1==null || shift2==null || shift1==" " || shift2 ==" "){
                    $('#submit_button').prop('disabled', true);
                }else{
                    $('#submit_button').prop('disabled', false); 
                }
            }else if(type == 2){
                if(shift1==null || shift1==" " || request_of==null || request_of==" "){
                    $('#submit_button').prop('disabled', true);
                }else{
                    $('#submit_button').prop('disabled', false); 
                }
            }else if(type == 3){
                if(shift1==null || shift1==" " || request_by==null || request_by ==" "){
                    $('#submit_button').prop('disabled', true);
                }else{
                    $('#submit_button').prop('disabled', false); 
                }
            }else{
                if(shift1==null || shift2==null || shift1==" " || shift2 ==" "){
                    $('#submit_button').prop('disabled', true);
                }else{
                    $('#submit_button').prop('disabled', false); 
                }
            }
        }
    });

    </script>

@endsection