@extends('admin.layout.master')
@section('content')
    @include('flash-message')
        
    <div class="row">
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-8">
                        <h3 class="text-left">OT Hour Requisition</h3>
                    </div>
                    <div class="col-md-4 text-right">
                        {{-- <a href="{{route('payroll.hrm.roster.exchange_list')}}" class="btn btn-sm btn-success">OT Request List</a> --}}
                    </div>
                </div>
                
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-6">
                        <form action="{{route('store.ot_hour.requisition')}}" method="POST">
                            @csrf
                            <input type="hidden" name="type" value="2"  id="type">
                            <div class='row'>
                                <div class='col-6'>
                                    <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-6'>
                                    <div class="form-group">
                                        <label>Employee Name</label>
                                        <select id="emp_select" class="name_code_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>In Time</label></label>
                                        <input type="text" class="form-control hrm_time_picker " id="in_time" name="in_time" value="" required >
                                    </div>
                                </div>

                                <div class='col-6'>
                                    <div class="form-group">
                                        <label>Out Time</label></label>
                                        <input type="text" class="form-control hrm_time_picker " id="out_time" name="out_time" value="" required >
                                    </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>
                            <div class='text-right'>
                                <button class="btn btn-primary btn-sm" id="submit_button">Submit</button>
                            </div>
                        </form>
                    </div>

                    <div class='col-6'>
                        <table class="table table-bordered" id="" style="width: 100%">
                            <tr>
                                <th style="width: 40%" class="text-center">Department</th>
                                <th  style="width: 35%" class="text-center">Designation</th>
                                <th style="width: 25%" class="text-center">Join Date</th>
                            </tr>
                            <tr>
                                <td id="emp_department" class="text-center"> </td>
                                <td id="emp_designation" class="text-center"></td>
                                <td id="emp_join_date" class="text-center"> </td>
                            </tr>

                        </table>
                      
                        <table class=" table-bordered datatable table table-stripped" style="width: 100%">
                            <thead>
                                <tr>
                                   <th colspan="2"><b>Current Shift List</b></th>
                                </tr>
                                <tr>
                                    <th>Shift</th>
                                    <th>Type</th>
                                </tr>
                            </thead>
                            <tbody id="current_day_shift_list">
                                
                            </tbody>
                        </table>
                        
                    </div>

                </div>
            </div>
        </div>
    </div>


<script>
    $(document).ready(function(){
        enable_submit_button();

        $("#date").change(function(){
             $('#in_time').val('');
             $('#out_time').val('');
             $('#emp_select').html('');
             $("#current_day_shift_list").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)
                    
        });
        $(".hrm_time_picker").change(function(){
            enable_submit_button();        
        });
       
        
        function get_current_shift(emp_id,date,type,emp_type){
           $.ajax({
               type: "GET",
               url:"/current-shift",
               data: {
                   _token: "{{ csrf_token() }}",
                   emp_id: emp_id,
                   date: date,
                   type: type,
                   emp_type: emp_type,
                   
               },
               success: function (data) {
                   console.log(data);
                    $("#emp_department").html(data.employee_info.fetch_department.name);
                    $("#emp_designation").html(data.employee_info.fetch_designation.name);
                    $("#emp_join_date").html(data.employee_info.joining_date);
                    $("#current_day_shift_list").html(data.html3);
                   enable_submit_button();
               },
           });
        }

        function enable_submit_button(){
            let emp_select = $('#emp_select').val();
            let type = $('#type').val();
            let request_by = $('#emp_select').val();
            let in_time = $('#in_time').val();
            let out_time =$('#out_time').val();
            console.log(type,in_time,out_time);
                if(emp_select ==null || in_time==null || out_time==null || in_time.trim() === "" ||  out_time.trim() === ""){
                    $('#submit_button').prop('disabled', true);
                }else{
                    $('#submit_button').prop('disabled', false); 
                }
        }
    });

    </script>

@endsection