@extends('app-new')
@push('head-script')
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/dataTables.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/tables/datatable/responsive.bootstrap5.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/vendors.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/extensions/toastr.min.css">
    
    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <!-- END: Page CSS-->
    
@endpush 

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('employee/employee.employee_master')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="home">{{trans('employee/employee.home')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="/employees">{{trans('employee/employee.employee')}}</a>
                    </li>
                    <li class="breadcrumb-item active">{{trans('employee/employee.attendance_summary')}}
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@section('content')
<section id="dashboard-ecommerce">
    <div class="row match-height">
        <!-- Statistics Card -->
        <div class="col-xl-12 col-md-12 col-12">
            <div class="card card-statistics">
                <div class="card-header pb-0">
                    <h4 class="card-title">{{trans('employee/employee.employee')}} {{trans('employee/employee.attendance_summary')}}</h4>
                </div>
                <div class="card-body statistics-body">
                    <form> 
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row d-flex align-items-end">
                           
                                <div class="col-md-4">
                                    <div class="mb-1">
                                        <label class="form-label" for="basicInput">{{trans('common/common.date_range')}}</label>
                                        <input type="text" id="date_range" name="date_range" class="form-control daterangebg" value="{{$dateRange}}">
                                    </div>
                                </div>
                
                                <div class="col-md-4">
                                    <div class="mb-1">
                                        <label class="form-label" for="basicSelect">{{trans('common/filter.shift_name')}}</label>
                                        <select class="form-control select2" id="type" name="shift_id">
                                            <option value="">{{trans('common/filter.select_shift')}}</option>
                                            @foreach($shifts as $shift)
                                                <option value="{{$shift->id}}" @if(isset($shiftId) && ($shiftId == $shift->id) || (old('shift_id') == $shift->id)) selected @endif>
                                                    {{$shift->name}}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                
                                <div class="col-md-4">
                                    <div class="mb-1">
                                        <button class="btn btn-primary w-100 waves-effect waves-float waves-light">
                                        {{trans('common/common.search')}}
                                        </button>
                                    </div>
                                </div>
                           
                                <div class="col-md-12">
                                    <table class="dt-column-search table datatables-basic no-footer dtr-column" id="organization" style="width: 1038px;">
                                        <thead>
                                            <!-- <th class="control sorting_disabled" rowspan="1" colspan="1" style="width: 25px; display: none;" aria-label=""></th>
                                            <th class="sorting_disabled dt-checkboxes-cell dt-checkboxes-select-all" rowspan="1" colspan="1" style="width: 25px;" data-col="1" aria-label=""><div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="checkboxSelectAll"><label class="form-check-label" for="checkboxSelectAll"></label></div></th> -->
                                            <th>{{trans('master/master.attendance_date')}}</th>
                                            <th>{{trans('master/master.in_time')}}</th>
                                            <th>{{trans('master/master.out_time')}}</th>
                                            <th>{{trans('master/master.working_hours')}}</th>
                                            <th>{{trans('master/master.in_address')}}</th>
                                            <th>{{trans('master/master.out_address')}}</th>
                                            <th>{{trans('master/master.view_logs')}}</th>
                                        </thead>
                                        <tbody>
                                                
                                            @foreach($data as $attendance)
                                            <tr>
                                                <td>
                                                    {{date('d M Y', strtotime($attendance->attendance_date))}}
                                                </td>
                                                <td>
                                                    {{ ($attendance->in_time && $attendance->in_time!='00:00:00') ? date('h:i A', strtotime($attendance->in_time)) : '-'}}
                                                </td>
                                                <td>

                                                    {{ ($attendance->out_time && $attendance->out_time != '00:00:00') ? date('h:i A', strtotime($attendance->out_time)) : '-'}}
                                                </td>
                                                <td>
                                                    {{$attendance->working_time}}
                                                </td>
                                                <td>
                                                    @if($attendance->in_address) {{$attendance->in_address['geo_address']}}
                                                    <a target="_blank" href="http://maps.google.com/maps?q={{$attendance->in_address['geo_latitude']}},{{$attendance->in_address['geo_longitude']}}" title="Location" class="btn btn-info btn-xs pull-center" style="min-width: 20px !important;">
                                                        <i data-feather='map-pin'></i>
                                                    </a>
                                                    @endif
                                                </td>
                                                <td>
                                                    @if($attendance->out_address) {{$attendance->out_address['geo_address']}}
                                                    <a target="_blank" href="http://maps.google.com/maps?q={{$attendance->out_address['geo_latitude']}},{{$attendance->out_address['geo_longitude']}}" title="Location" class="btn btn-info btn-xs pull-center" style="min-width: 20px !important;">
                                                        <i data-feather='map-pin'></i>
                                                    </a>
                                                    @endif
                                                </td>
                                                <td>
                                                    <a href=" /employee/{{$employee->id}}/attendance-summary?attendance_id={{$attendance->id}}&attendance_date={{$attendance->attendance_date}}" title="View Logs" class="btn btn-info btn-xs pull-center" style="min-width: 20px !important;">
                                                        <i data-feather='eye'></i>
                                                    </a>
                                                </td>
                                            </tr>
                                            @endforeach
                                            
                                            <!-- <tr class="odd"><td valign="top" colspan="7" class="dataTables_empty">No data available in table</td></tr>  -->
                                           
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-4">
                            <div class="row mt-2 mt-sm-0">
                                @foreach($attendanceLogs as $log) 
                                    @if($log->photo)
                                    <div class="col-md-5 col-12">
                                        <div class="profile-img">
                                        <img src="{!! $log->photo !!}" alt="your image" onerror="this.src='/assets/img/default-profile-3.png'">
                                        </div>
                                        <p>{{date('d M Y H:i:s', strtotime($log->created_at))}}</p>
                                    </div>
                                    @endif 
                                @endforeach

                                <div class="col-md-12">
                                    <h4 class="mt-1 mb-1">{{$employee->name}}</h4>
                                </div>

                                <div class="col-md-12">
                                    <h1 class="font-small-2">{{trans('master/master.employee_code')}}:</h1>
                                    <h5 class="mb-1">{{$employee->employee_code}}</h5>

                                    <h1 class="font-small-2">{{trans('master/master.manager')}}:</h1>
                                    <h5 class="mb-1">{{$employee->hod ? $employee->hod->name : '-'}}</h5>

                                    <h1 class="font-small-2">{{trans('master/master.location')}}:  </h1>
                                    <h5 class="mb-1">
                                    @if(count($employee->locations)>0)
                                        @foreach($employee->locations as $location)
                                            <p>
                                                {{$location->geo_address}} 
                                                @if($location->geo_latitude && $location->geo_longitude)
                                                    <a target="_blank" href="http://maps.google.com/maps?q={{$location->geo_latitude}},{{$location->geo_longitude}}" title="Location" class="btn btn-info btn-xs pull-center" style="min-width: 20px !important;">
                                                        <i data-feather='map-pin'></i>
                                                    </a>
                                                @endif
                                            </p>
                                        @endforeach
                                    @else --- @endif
                                    </h5>

                                    <h1 class="font-small-2">{{trans('master/master.email_id')}}:  </h1>
                                    <h5 class="mb-1">{{$employee->email}}</h5>

                                    <h1 class="font-small-2">{{trans('master/master.contact_no')}}:</h1>
                                    <h5 class="mb-1">{{$employee->mobile}}</h5>
                                                                        <h1 class="font-small-2">{{trans('common/filter.shifts')}}:</h1>
                                    <h5 class="mb-1">{{ isset($currentShift) && isset($currentShift->shift) ? $currentShift->shift->name.' ('.$startTime.' - '.$endTime.')' : '-'}}</h5>
                                </div>
                            </div>           
                        </div>
                    </div>
                    </form>
                </div>  
            </div>
        </div>
    </div>
        <style>
        .profile-img {
            width: 120px;
            height: 120px;
            /* margin: 0 auto; */
        }
        .profile-img img {
            border-radius: 10px;
            width: 100%;
            height: 100%;
            object-position: top;
        }
        .create-new{
            display: none!important;
        }
        </style>
</section>

<!-- Dashboard Ecommerce ends -->

@endsection 
@push('footer-script') 
    <!-- BEGIN: Page Vendor JS-->
    <script src="/app-assets/vendors/js/tables/datatable/jquery.dataTables.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.bootstrap5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.responsive.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/responsive.bootstrap5.js"></script>
    <script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
    <script src="/app-assets/js/scripts/ui/ui-feather.js"></script>

    <script src="/app-assets/vendors/js/tables/datatable/datatables.checkboxes.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/datatables.buttons.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/jszip.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/pdfmake.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/vfs_fonts.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.html5.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/buttons.print.min.js"></script>
    <script src="/app-assets/vendors/js/tables/datatable/dataTables.rowGroup.min.js"></script>
    <!-- END: Page Vendor JS-->
    <script src="/app-assets/vendors/js/extensions/toastr.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />

    <script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
    <script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
    <script src="/app-assets/js/scripts/forms/form-wizard.js"></script>

    <!-- BEGIN: Page JS-->
    <!-- END: Page JS-->
    <script>
       
       function callDt() {
           var dt_filter_table = $('.dt-column-search'); 

           if ($('body').attr('data-framework') === 'laravel') {
               assetPath = $('body').attr('data-asset-path');
           }

           if (dt_filter_table.length) {
               
               var dt_filter = dt_filter_table.DataTable({
               dom: '<"card-header border-bottom p-1"<"head-label"><"dt-action-buttons text-end"B>><"d-flex justify-content-between align-items-center mx-0 row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>t<"d-flex justify-content-between mx-0 row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
               orderCellsTop: true,
               language: {
                   paginate: {
                   // remove previous & next text from pagination
                   previous: '&nbsp;',
                   next: '&nbsp;'
                   }
               },
                "drawCallback": function( settings ) {
                    feather.replace();
                },
               
               
               buttons: [{
                   extend: 'collection',
                   className: 'btn btn-outline-secondary dropdown-toggle me-2',
                   text: feather.icons['share'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.export')}}",
                   buttons: [
                       {
                           extend: 'print',
                           filename: '{{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                           title: '{{ date("d-m-Y H-i-s") }}',
                           text: feather.icons['printer'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.print')}}",
                           className: 'dropdown-item',
                           exportOptions: { columns: Array.from(Array($("#organization th").length -1).keys()) },
                       },
                       {
                           extend: 'csv',
                           filename: '{{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                           title: '{{ date("d-m-Y H-i-s") }}',
                           text: feather.icons['file-text'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.csv')}}",
                           className: 'dropdown-item',
                           exportOptions: { columns: Array.from(Array($("#organization th").length -1).keys()) },
                       },
                       {
                           extend: 'excel',
                           filename: '{{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                           title: '{{ date("d-m-Y H-i-s") }}',
                           text: feather.icons['file'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.excel')}}",
                           className: 'dropdown-item',
                           exportOptions: { columns: Array.from(Array($("#organization th").length -1).keys()) },
                       },
                       {
                           extend: 'pdf',
                           filename: '{{ date("d-m-Y H-i-s") }}',
                           title: '{{ date("d-m-Y H-i-s") }}',
                           text: feather.icons['clipboard'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.pdf')}}",
                           className: 'dropdown-item',
                           exportOptions: { columns: Array.from(Array($("#organization th").length -1).keys()) },
                               customize: function(doc) {
                                   doc['footer']=(function() {
                                       return {
                                           columns: [
                                               {
                                                   alignment: 'center',
                                                   text: ['Downloaded by: ', { text: '{{Auth::user()->name}}' }, ' on {{ date("d-m-Y") }} at {{ date("g:i A") }}']
                                               }
                                           ],
                                           margin: 10
                                       }
                                   }); 
                               },
                           },
                       {
                           extend: 'copy',
                           filename: '{{Auth::user()->name}} - {{ date("d-m-Y H-i-s") }}',
                           title: '{{ date("d-m-Y H-i-s") }}',
                           text: feather.icons['copy'].toSvg({ class: 'font-small-4 me-50' }) + "{{trans('common/common.copy')}}",
                           className: 'dropdown-item',
                           exportOptions: { columns: Array.from(Array($("#organization th").length -1).keys()) }
                       }
                   ],
                   init: function (api, node, config) {
                       $(node).removeClass('btn-secondary');
                       $(node).parent().removeClass('btn-group');
                       setTimeout(function () {
                       $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
                       }, 50);
                   }
                   },
               ],
           
           });
           }

        //    $('div.head-label').html('<h6 class="mb-0">{{trans("employee/employee.employee_attendance_summary_listing")}}</h6>');
       };

       $(window).on('load', function() {
           if (feather) {
               feather.replace({
                   width: 14,
                   height: 14
               });
           }
       });
       $(document).ready(function(){
        $('#organization').DataTable().destroy();
            $('#date_range').daterangepicker({
                    timePicker: false,
                    locale: {
                    format: 'MM/DD/YYYY'
                    }
            })
           callDt();
       });
   </script>

@endpush