{{-- attendance modal --}}
<div class="modal bg-body fade" tabindex="-1" id="kt_modal_1" data-focus="false" >
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content shadow-none">
            <div class="modal-header">
                <h5 class="modal-title">My Attendance</h5>


            </div>

            <div class="modal-body">

                <div class="row my-5">
                    <div class="col-md-2"></div>
                    <div class="col-md-3">
                        <label for="" class="form-label">Select User</label>
                        <input style="display:none" type="password" name="pass"/>

                        <select class="form-select"   id="hr_attendance_user_select"  autocomplete="off" >
                            <option value=''>Select The User</option>
                             @php    
                             $active_users=App\Models\User::where('IsActive',1)->whereIn('roleID',[18,19,20,21,22,23,24,25,26,27])->orderBy('FullName','asc')->get();
                             @endphp
                            @foreach($active_users as $user)
                            <option value="{{$user->UserID}}">{{$user->FullName}}</option>
                            @endforeach
                        </select>

                        @php
                                  $active_users = App\Models\User::where('IsActive',1)->whereIn('roleID',[18,19,20,21,22,23,24,25,26,27])->pluck('UserID')->toArray();

                            $attendances_data   = App\Models\Attendance::whereIn('UserID',  $active_users)
                                ->whereDate('AttendanceDate', date('Y-m-d'))->get();

                                $Group=DB::table('gcp_attendances')
                                ->leftjoin('gcp_users','gcp_attendances.UserID','=','gcp_users.UserID')
                                ->where('gcp_attendances.AttendanceDate',date('Y-m-d'))
                                ->where('gcp_users.IsActive',true)->where('gcp_users.roleID','!=',16)->where('gcp_users.roleID','!=',17)->where('gcp_users.roleID','!=',28)
                            ->orderBy('gcp_attendances.AttendanceDate')->select('gcp_attendances.Status', DB::raw('count(*) as total'))
                            ->groupBy('gcp_attendances.Status')
                            ->get();
                        @endphp

                    </div>
                    <div class="col-md-3">
                        <input type="hidden" id="attendance_start_date_search" />
                        <input type="hidden" id="attendance_end_date_search" />
                        <label for="" class="form-label">Select date and time</label>
                        <input class="form-control form-control-solid" placeholder="Pick date & time"
                            id="user_attednace_search_flat_picker" />

                    </div>
                    <div class="col-md-2" style="margin-top: 26px;">
                        <button type="button" id="user_attendance_select_search_button"  class="btn btn-outline-secondary"><i class="bi bi-arrow-clockwise fs-1"></i></button>
                    </div>
                    <div class="col-md-2"></div>
                </div>


                <div class="row">
                    <table id="attendance_table" class="table  table-striped table-row-bordered px-5">
                        <thead class="thead-dark">
                            <tr>

                                <th scope="col">User Name</th>
                                <th scope="col">Attendance Date</th>
                                <th scope="col">Day</th>
                                <th scope="col" style="width:50px">Time In</th>
                                <th scope="col" style="width:50px">Time Out</th>
                                <th scope="col">Total Time</th>

                                <th scope="col">Status</th>
                                <th>Comment</th>
                            </tr>
                        </thead>

                        <tbody id="attendace_table_body">


                            @foreach ($attendances_data  as $attendance)
                                <tr>
                                    <td><input type="hidden" class="user_attendance_id" value="{{$attendance->AttendanceID}}" />{{$attendance->user->FullName}}</td>
                                    <td>{{ date('d-m-Y', strtotime($attendance->AttendanceDate)) }}</td>
                                    <td>{{ date('l', strtotime($attendance->AttendanceDate)) }}  </td>
                                    <td>
                                        <input type="datetime-local" style="width:180px" value="@if($attendance->TimeIN==null)@else{{date('Y-m-d H:i:s', strtotime($attendance->TimeIN))}}@endif"
                                           class="form-control user_attendance_timein" >
                                         
                                     
                                    </td>
                                    <td>
                                        <input type="datetime-local" style="width:180px" value="@if($attendance->TimeOUT==null)@else{{date('Y-m-d H:i:s', strtotime($attendance->TimeOUT))}}@endif" 
                                          class="form-control user_attendance_timeout" >

                                    </td>
                                    <td>

    
                                       <input type="text" style="width:75px" class="form-control user_attendance_total_time" value=" {{ $attendance->TotalTime }} ">   
                                    </td>
                                    <td>{!!hr_attendance_status($attendance->Status)!!}</td>
                                    <td><input type="text" value="{{$attendance->Comment}}" class="attendance_comment_input form-control" /></td>


                                </tr>
                            @endforeach
                        </tbody>

                    </table>
                    <div class="d-flex align-items-center justify-content-end">
                        <input type="button" class="btn btn-primary text-center" value="Save" onclick="hr_attendance_save()"/>
                    </div>
    
    
                    
    <div class='px-4'>
        <h2 style='text-align:center'>STATUS COUNT
        </h2>
        <div class="row table-repsonsive">

      <table class="table table-row-dashed table-row-gray-300 gy-7" >
              <thead class="bg-secondary">
                <tr>
                  <th style="    padding-left: 25px;width:75% !important"  >STATUS</th>
                  <th  >COUNT</th>
                </tr>
              </thead>
              <tbody id="table_group_count">
                @foreach ($Group as $a)
      
                <tr  >
                  @php $color=DB::table('gcp_statuses')->where('Sno',$a->Status)->first(); @endphp
                  <td style="     font-size: 18px;
                  color: white;   padding-left: 25px;background-color:{{$color->Color}};font-weight:bold">{{$color->Status}}</td>
                  <td>{{$a->total}}</td>
                </tr>
                @endforeach
            </tbody>
            </table>

        </div>
      
      
      
      </div>
    
                </div>
    
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
    
                </div>
            </div>
        </div>
    </div>

                </div>
  
{{-- attendance modal ended --}}
<script>
    
    $("#hr_attendance_user_select").select2({
    dropdownParent: $('#kt_modal_1 .modal-content')
});

$("#user_attednace_search_flat_picker").flatpickr({
    altInput: true,
    altFormat: "F j, Y",
    dateFormat: "Y-m-d",
    altFormat: "Y-m-d",
    mode: "range",

    onClose: function(selectedDates, dateStr, instance) {

        var dateStart = instance.formatDate(selectedDates[0], "Y-m-d");
        var dateEnd = instance.formatDate(selectedDates[1], "Y-m-d");

        $('#attendance_start_date_search').val(dateStart);
        $('#attendance_end_date_search').val(dateEnd);
 
    }


});

        $('#user_attendance_select_search_button').click(function(){
            show_loader();
             let start_date= $('#attendance_start_date_search').val();
            let end_date= $('#attendance_end_date_search').val();
            let user_id=$('#hr_attendance_user_select').val();
             $.ajax({
            url: '/hr-attendance-search',
            type: 'POST',
            data: {
                'start_date': start_date,
                'end_date': end_date,
                'user_id':user_id

            },
            success: function(response) {
                // Hide loader
                // $("#attendance_table").destroy();
              
                $('#attendace_table_body').empty();
                            $('#attendace_table_body').append(response.data);
                            $('#table_group_count').empty();
                            $('#table_group_count').append(response.group_data);

                 hide_loader();
            },
            error: function(xhr) {
                // Hide loader
                console.log(xhr);
                hide_loader();

            }
        });

        });


             function    hr_attendance_save(){
                let start_date= $('#attendance_start_date_search').val();
            let end_date= $('#attendance_end_date_search').val();
            let user_id=$('#hr_attendance_user_select').val();
                                const attendance_id_array = [];
                                const time_in_array = [];
                                const time_out_array = [];
                                const total_time_array = [];
                                const status_array=[];
                                const comments_array = [];

                                $('.user_attendance_id').each(function() {
                                    attendance_id_array.push($(this).val());
                        });

                        $('.user_attendance_timein').each(function() {
                            time_in_array.push($(this).val());
                        });

                        $('.user_attendance_timeout').each(function() {
                            time_out_array.push($(this).val());
                        });

                        $('.user_attendance_total_time').each(function() {
                            total_time_array.push($(this).val());
                        });

                        $('.attendance_comment_input').each(function() {
                            comments_array.push($(this).val());
                        });
                        $('.hr_attendance_status_select').each(function() {
                            status_array.push($(this).val());
                        });



                        
                                $.ajax({
                        url: 'hr-attendance-update',
                        method: 'POST',
                        data: {
                            'time_in': time_in_array,
                            'user_attendance_id': attendance_id_array,
                            'time_out':time_out_array,
                            'total_time':total_time_array,
                            'status':status_array,
                            'comment':comments_array,

                            'start_date':start_date,
                            'end_date':end_date,
                            'user_id':user_id
                        },
                        success: function(response) {
                             $('#attendace_table_body').empty();
                            $('#attendace_table_body').append(response.data);
                            $('#table_group_count').empty();
                            $('#table_group_count').append(response.group_data);

 
                            swal.fire({
                                title: "Success",
                                text: "Attendance Updated Successfully",
                                icon: "success",
                            });

                        },
                        error: function(xhr, status, error) {
                            console.log(error);

                        }
                    });


        }  

      
</script>