@extends('admin.layout.master')
@section('title','Monthly Individual Punch')
@section ('content')
<div class="card sina-card">
    <div class="card-header d-flex justify-content-between align-items-center ">
        <h4 class="col-6 pl-0">{{__('obs.monthly')}} {{__('obs.individual')}} {{__('obs.punch')}}</h4>
    </div>

        <div class="card-body" style="padding: 0 20px !important">
            <div class="">
                <form action="{{route('payroll.hrm.attendance.monthly_individual_punch')}}" method="get">
                    <div class='row'>
                        <div class='col-md-3'>
                            <div class="form-group">
                                <label>{{__('obs.employee')}} {{__('obs.name')}}/{{__('obs.code')}}</label>
                                <select class="form-control name_code_live_search" name="employee_id" id="emp_code" required>
                                </select>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="form-group">
                                <label>{{__('obs.date')}} {{__('obs.from')}} </label>
                                <input type="text" class="datepicker form-control" name="date_from" id="date_from" value="{{ request()->get('date_from') ? request()->get('date_from') : date('01-m-Y') }}" required>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="form-group">
                                <label>{{__('obs.date')}} {{__('obs.to')}}</label>
                                <input type="text" class="datepicker form-control " name="date_to" id="date_to"  value="{{ request()->get('date_to') ? request()->get('date_to') : date('d-m-Y') }}" required>
                            </div>
                        </div>

                        <div class='col-md-3 mt-4'>
                            <button class='btn btn-md btn-danger'>{{__('obs.search')}}</button>
                        </div>
                    </div>
                </form>

            </div>


            @if(count($attendances)> 0)
                <div class="row">
                    <div class="table2excel" id="print"> {{-- table-responsive --}}

                        <table class="table table-bordered table-hover text-center" id="" style="width: 100%">
                            <thead>
                            <tr>
                                <th colspan="11" class="text-center">
                                    <h4>
                                       <span id="heading_name"> {{$employee_name}}</span>
                                    </h4>
                                    <h4>{{__('obs.attendance')}} {{__('obs.for')}} {{__('obs.the')}} {{__('obs.date')}}  {{__('obs.of')}} ({{carbon()->parse($date_from)->format('d-m-Y')}} - {{carbon()->parse($date_to)->format('d-m-Y')}})</h4>
                                </th>
                                <input type="hidden" name="em_code" id="em_code" value="">
                            </tr>
                            <tr>
                                <th style="width:10%">{{__('obs.sl')}} {{__('obs.no')}}</th>
                                <th style="width:20%">{{__('obs.date')}}</th>
                                <th style="width:15%">{{__('obs.day')}}</th>
                                <th style="width:25%">{{__('obs.punch')}} {{__('obs.time')}}</th>
                                <th style="width:10%">{{__('obs.type')}}</th>
                                <th style="width:10%">{{__('obs.action')}}</th>
                            </tr>
                            </thead>

                            <tbody id="tbody_data">
                                <input type="hidden" class='' id="employee" name="emp_id" value="{{$attendances->first()->emp_id}}"/>
                               @php
                                   $i = 1;
                               @endphp
                                @foreach ($attendances as $attendance )
                                <tr>
                                    <input type="hidden" class='' name="attendance_id" value="{{$attendance->id}}"/>

                                    <td>{{$i++}}</td>
                                    <td>{{carbon()->parse($attendance->date_time)->format("d-m-Y")}}</td>
                                    <td>{{date('l', $attendance->str_date_time)}} </td>
                                    <td class="{{$attendance->in_out_type ==1 ? 'text-info' : ($attendance->in_out_type ==2 ? 'text-danger' : null) }}">
                                        {{date('h:i:s A',$attendance->str_date_time)}}
                                        {{-- <span class="attendance" id='attendance_{{$attendance->id}}' row-id="{{$attendance->id}}">{{date('h:i:s A',$attendance->str_date_time)}}</span> --}}
                                        {{-- <input style="display: none"  id='input_attn_{{$attendance->id}}' type="text" class='text-center hrm_date_time_picker form-control input-sm ' name="in_time[]" id="" value="" /> --}}
                                    </td>
                                    <td>
                                        @if($attendance->type ==1 )
                                            <span class="text-success">{{__('obs.auto')}}</span>
                                        @else
                                            <span class="text-danger">{{__('obs.manual')}}</span>
                                        @endif
                                        @if (!empty($attendance->image))
                                            <a target="_blank" href="{{asset('storage/payroll_assets/uploads/attendance').'/'.$attendance->image}}" style="color:red;">View</a>
                                        @endif
                                    {{-- <td>
                                        <button  class="btn btn-info btn-sm update_attendance_info" data-id="{{$attendance->id}}"> <i class="fa fa-pencil-alt"></i>
                                    </td> --}}

                                    <td class="no-print">
                                        @if ($attendance->type == 2)
                                            @if(checkAuthPermission('payroll.data.delete'))
                                            <button type="button" class="btn btn-danger btn-sm " onclick="delete_data({{$attendance->id}},'pay_attendances')">
                                                <i class="fa fas fa-trash"></i>
                                            </button>
                                            @endif                                           
                                        @endif
                                     </td>
                                </tr>
                                @endforeach

                            </tbody>
                        </table>
                    </div>
                </div>
                @endif

        </div>
    </div>

@endsection

@section('script')
<script src="{{ asset('payroll_assets/payroll_common.js') }}?v={{ time() }}"></script>

<script type="text/javascript">
    $(document).ready(function() {

        $('.attendance').click(function(){
          var row_id = $(this).attr('row-id');
          $("#attendance_"+row_id).hide();
          $("#input_attn_"+row_id).show();

        });


        $('.update_attendance_info').on('click' , function(e){
            e.preventDefault();

            var attendance_id = $(this).data('id');
            var employee_id = $("#employee").val();
            var date_time = $("#input_attn_"+attendance_id).val();




            var token = '{{csrf_token()}}';
            let data = {
                employee_id: employee_id,
                attendance_id: attendance_id,
                date_time: date_time,
            };
            if(date_time){

                $.ajax({
                type:'POST',
                url: '{{route("payroll.hrm.attendance.update")}}',
                data: { data:data },
                success: function(data){

                    document.location.reload()

                    }
                });
            }else{
                alert('Please Select Date Time');
            }


        });

    });
   </script>
@endsection