@extends('admin.layout.master')
@section('title','Manual Punch')

@section ('content') 
<style>
    #draggable-submit {
        position: fixed;
        left: 100%;
        top: 70vh;
        transform: translate(-100%, 0);
        z-index: 99;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: lightblue;
        padding-left: 0.5rem;
    }
    input[type=text]{
        padding:18px; 
        box-shadow: none!important;
    }
  
  
    .hrm_date_time_picker{
        padding:0 !important; 
        margin:0 !important; 
    }

    .hrm_time_picker{
        padding:0 !important; 
        margin:0 !important; 
    }
</style>
    <div class="card sina-card" style="margin: 0">
        @include('flash-message')
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
          <div class="col-6 p-0">
            <h4 class="">Manual Attendance</h4>
          </div>
          <div class="col-6 p-0 text-right">
            @if(checkAuthPermission('monthly.individual.punch'))
                <a class="p-0 " href="{{route('monthly.individual.punch')}}" ><span class=" btn btn-sm btn-warning">Punch Details</span></a>
            @endif
        </div>
        </div> 
        <div class="card-body" style="padding: 0 20px !important">
            <div class="">
                <form action="{{route('roster.manual.punch')}}" method="get">
                    <div class='row'>
                        <div class='col-md-3'>
                            <div class="form-group">
                                <label>Name/Code</label>
                                 <select class="form-control name_code_live_search" name="emp_code" id="emp_code" required>
                                  {{-- @if($employee_info && request('employee_id'))
                                    <option value="{{$employee_info->id}}" selected >{{$employee_info->emp_name}}</option>
                                    @endif --}}

                                </select>
                            </div>
                        </div>
                      
                        <div class='col-md-2'>
                            <div class="form-group">
                                <label>Date From </label>
                                <input type="text" class="datepicker form-control" name="date_from" id="date_from" value="{{request('date_from') ? request('date_from'): date('01-m-Y')}}" required>
                            </div>
                        </div>
                        <div class='col-md-2'>
                            <div class="form-group">
                                <label>Date To</label>
                                <input type="text" class="datepicker form-control " name="date_to" id="date_to" value="{{request('date_to') ? request('date_to'): date('d-m-Y')}}" required>
                            </div>
                        </div>
                    
                        <div class='col-md-2 mt-4'>
                            <button class='btn btn-md btn-danger'>Search</button>
                        </div>
                    </div>
                </form>
                
            </div>
        </div> 
    </div> 
    @if(count($attendances)> 0)
    <div class="card">
        <div class="card-body">
            <div class="row">
                <table class="table table-bordered table-hover" id="" style="width: 100%">
                    <tr>
                        <td><b>Name</b></td>
                        <td><b>Department</b></td>
                        <td><b>Designation</b></td>
                    </tr>
                    <tr>
                        <td><b>{{$employee_info->emp_name}} </b></td>
                        <td><b>{{$employee_info->fetch_department->name}} </b></td>
                        <td><b>{{$employee_info->fetch_designation->name}} </b></td>
                    </tr>
                    
                </table>
            </div>
           
            <div class="table2excel" id="print"> {{-- table-responsive --}}
                <form action="{{route('store.roster.manual_punch')}}" method="post">
                    @csrf
                    
                    <table class="table table-bordered table-hover" id="" style="width: 100%">
                        <thead>
                            <input type="hidden" class='' id="employee" name="emp_id" value="{{$employee_info->id}}"/>
                            <input type="hidden" name="emp_code" id="emp_code" value="{{$employee_info->emp_code}}">
                        <tr>
                            <th style="width:5%">SL NO</th>
                            <th style="width:8%">Date</th>
                            <th style="width:8%">Day</th>
                            <th style="width:12%">Shift</th>
                            <th style="width:8%">Status</th>
                           
                            <th style="width:20%">In Time
                                <input class="hrm_time_picker form-control" type="text" name="" id="global_intime">
                            </th>
                            <th style="width:20%">Out Time
                                <input class="hrm_time_picker form-control" type="text" name="" id="global_outtime">
                            </th>
                            {{-- <th  style="width:5%">Late</th>
                            <th  style="width:5%">Early</th>
                            <th  style="width:5%">OT</th> --}}
                            <th  style="width:5%">Check
                                <input type="checkbox" class="" id="check_all" name="" value="" style="width:20px;height:20px">
                            </th>
                        </tr>
                        </thead>
                    
                        <tbody id="tbody_data">
                        @php
                            $i = 0;
                        @endphp
                            @foreach ($attendances as $attendance )
                           
                            @php
                                 $i++;
                                 $in_time = $attendance['in_time'] ? carbon()->parse($attendance['date'].''.$attendance['in_time'])->format('d-m-Y H:i:s') : null;;
                                 $out_time = $attendance['out_time'] ? carbon()->parse($attendance['date'].''.$attendance['out_time'])->format('d-m-Y H:i:s') : null;;
                            @endphp
                         
                            <tr>
                                <input type="hidden" class='' name="shift_status[{{$i}}]"  value="{{$attendance['shift_status']}}"/> 

                                <td>{{$i}}</td>                           
                                <td>{{$attendance['date']}}
                                    <input type="hidden" class="date{{$i}} attn_date" name=""  value="{{$attendance['date']}}"/> 

                                </td>                           
                                <td class="text-left">{{ $attendance['day_name']}} </td>
                                <td class="text-left">{{ $attendance['shift_time']}} </td>
                                <td><span class="{{attendance_status_color($attendance['status'])}}">{{$attendance['status'] =="Leave" ? ucfirst($attendance['leave_type_name'])  : ucfirst($attendance['status'])}}</span></td>
                               <td>
                                    <input style=""  type="text" class='text-center emp_intime{{$i}} hrm_date_time_picker form-control input-sm ' name="in_time[{{$i}}]" id="" value="{{$in_time}}"/> 
                                    <input type="hidden" class='' name="previous_in_time[{{$i}}]"  value="{{$in_time}}"/> 
                                    {{-- @if($in_time ) disabled @endif --}}
                                </td>  
                                <td>
                                    <input style=""   type="text" class='text-center emp_outtime{{$i}} hrm_date_time_picker form-control input-sm ' name="out_time[{{$i}}]" id="" value="{{$out_time}}" />
                                    <input type="hidden" class='' name="previous_out_time[{{$i}}]"  value="{{$out_time}}"/> 

                                </td> 
                                
                                {{-- <td class="text-right">{{ $attendance['late']}} </td>
                                <td class="text-right">{{ $attendance['early_leave']}} </td>
                                <td class="text-right">
                                    @if($attendance['over_time'])
                                         {{$attendance['over_time']}}        
                                    @else
                                        @if($attendance['ot_day'] == 1)
                                            <span class="text-warning"> {{"OT Day"}} </span>   
                                        @endif
                                    @endif
                                 </td> --}}
                                 <td class="text-center">
                                    <input type="checkbox" class="check_box" id="" name="" value="{{$i}}">
                                </td>
                               
                               
                            </tr>


                            @endforeach                        
                        </tbody>
                    </table> 

                    <div class="text-center">
                        @if(count($attendances)>0)
                            <button name="submit" class="btn btn-sm btn-success" style="min-width: 100px" type="submit">
                                <span>Submit</span> 
                            </button>
                        @endif
                    </div>
                    
            </form>              
            </div>
           
        </div> 
    </div> 

    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#draggable-submit").draggable({
                axis: "y",
                cursor: 'move',
                // containment: "body",
            });

            $("#check_all").change(function(){
                if($(this).prop("checked") != true){
                    $('input[type=checkbox]:checked').each(function() {
                        var val = $(this).val();
                        $(".emp_intime"+val).val('');
                        $(".emp_outtime"+val).val(' '); 
                        $(".emp_intime"+val).css("background","");
                        $(".emp_outtime"+val).css("background","");
                    });
                }
                $('input:checkbox').prop('checked', this.checked);  
            });
            $(".check_box").change(function(){
                var val = $(this).val();
                if($(this).prop("checked") != true){
                    $(".emp_intime"+val).val(' '); 
                    $(".emp_outtime"+val).val(' '); 
                    $(".emp_intime"+val).css("background","");
                    $(".emp_outtime"+val).css("background","");
                }
            });
              
            $('#global_intime').change(function(){
                var time = $(this).val();
                $('input[type=checkbox]:checked').each(function() {
                    var val = $(this).val();
                    var date = $(".date"+val).val();
                    var date_time = date +' '+ time;
                    $(".emp_intime"+val).val(date_time);
                    $(".emp_intime"+val).css("background","mediumaquamarine");
                });

            })
            $('#global_outtime').change(function(){
                var time = $(this).val();
                $('input[type=checkbox]:checked').each(function() {
                    var val = $(this).val();
                    var date = $(".date"+val).val();
                    var date_time = date +' '+ time;
                    $(".emp_outtime"+val).val(date_time);
                    $(".emp_outtime"+val).css("background","khaki");
                });

            })
           
        });   
       </script>
    @endif
@endsection