@extends('payroll.employee_frontend.layouts.employee')
@section('custom_style')
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.time.css" rel="stylesheet"/>
    <link href="{{ asset('/') }}assets/plugins/datetimepicker/css/classic.date.css" rel="stylesheet"/>
    <link rel="stylesheet" href="{{ asset('/') }}treeview/tree_view.css"/>

    <style>
#attendance_table tbody td{
    border: black 1px solid;
    padding: 3px 0px !important;
}
#attendance_table thead th{
    border: black 1px solid;
}
#table_footer th,#table_footer  td{
    border: black 1px solid;
    padding: 0;
}
</style>
@endsection
@section('content')

    <section>
        <div class="col-12 mt-1">
            <h3 class=" text-center">{{__('obs.attendance')}} {{__('obs.report')}}</h3>
        </div>
    </section>
    <section class="row">
        <div class="col-12 mb-2">
            <div class="blu-card d-flex flex-wrap">
                <div class="col-12">
                    @if (session('success'))
                        <div class="alert alert-success" id="hide-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                        <div class="alert alert-danger" id="hide-alert">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
                <form class="leave-form col-12 col-md-12 border-right" action="{{route('employee.attendance')}}"
                      method="get">
                    @csrf
                    <div class="row flex-wrap">
                        <div class="form-group col-12 col-md-3">
                            <label for="exampleInputEmail1">{{__('obs.from')}} {{__('obs.date')}}</label>
                            <input type="text"  id="date_from" name="date_from" class="form-control datepicker"
                                     value="{{ request()->get('date_from') ? request()->get('date_from') : date('01-m-Y') }}" required>
                        </div>
                        <div class="form-group col-12 col-md-3">
                            <label for="exampleInputEmail1">{{__('obs.to')}} {{__('obs.date')}}</label>
                            <input type="text"  id="date_to" name="date_to" class="form-control datepicker"
                                     value="{{ request()->get('date_to') ? request()->get('date_to') : date('d-m-Y') }}" required>
                        </div>
                        <div class="form-group col-12 col-md-3 mt-2">
                            <input class="btn btn-primary px-4 mt-4" type="submit" value="Search">
                        </div>
                    </div>
                </form>
                {{-- <div class="col-12 text-right"><button class="btn btn-md btn-danger" onclick="PrintTable();">Print</button></div> --}}
                @isset($employee)
               
                <div class="col-12 table-responsive" id="print">
                  
                    <table class="table table-bordered table-hover text-center" id="attendance_table">
                        <thead class="thead-blu">
                        <tr>
                             <th colspan="11" class="text-center p-1">
                                <h4 style="color: white">{{$employee->emp_name}} {{$employee->emp_code}}</h4>
                            </th>
                           
                            <input type="hidden" name="em_code" id="em_code" value="">
                        </tr>
                     
                       <tr style="line-height: .6em">
                            <th>{{__('obs.date')}}</th>
                            <th>{{__('obs.day')}}</th>
                            <th>{{__('obs.shift')}}</th>

                            <th>{{__('obs.in')}} {{__('obs.time')}}</th>
                            <th>{{__('obs.out')}} {{__('obs.time')}}</th>
                            <th>{{__('obs.status')}}</th>
                            <th>{{__('obs.late')}}</th>
                            <th>{{__('obs.early')}}</th>
                            <th>{{__('obs.working')}} {{__('obs.hour')}}</th>
                            <th>{{__('obs.over')}} {{__('obs.time')}}</th>
                        </tr>
                        </thead>
                        <tbody id="tbody_data">
                            @php
                               $attendances = collect($attendances)  
                            @endphp
                            @foreach ($attendances as $attendance )
                                <tr>
                                <td style="white-space: nowrap ">{{$attendance['date']}}</td>
                                <td class="text-left">{{$attendance['day_name']}}</td>
                                <td style="white-space: nowrap ">
                                    {{-- <p style="margin: 0 !important">{{$attendance['shift_name']}}</p> --}}
                                    {{$attendance['shift_time']}}
                                </td>
                                <td style="white-space: nowrap ">
                                    {{$attendance['in_time'] ? $attendance['in_time'] : "--" }} <br>
                                    {{ count($attendance['ot_shift_attendances']) > 1 ? $attendance['ot_shift_attendances']['in_time'] : null }}
                                </td>
                                <td style="white-space: nowrap ">
                                    {{$attendance['out_time'] ? $attendance['out_time'] : "--" }} <br>
                                    {{ count($attendance['ot_shift_attendances']) > 1 ? $attendance['ot_shift_attendances']['out_time'] : null }}
                                </td>
                                <td><span class="{{attendance_status_color($attendance['status'])}}">{{$attendance['status']}}</span></td>
                                <td><span class="{{late_approval_status_color($attendance['late_approval_status'])}}">{{$attendance['late']}}</span></td>
                                <td>{{$attendance['early_leave']}}</td>
                                <td>
                                    {{$attendance['working_time']}}
                                     {{-- --
                                    {{$attendance['working_hours']}} --}}
                                     <br>
                                    {{ count($attendance['ot_shift_attendances']) > 1 ? $attendance['ot_shift_attendances']['working_time'] : null }}
                                </td>
                                <td>
                                    {{$attendance['over_time']}}
                                     {{-- --
                                     {{$attendance['over_time_hours']}} --}}
                                      <br>
                                </td>
                               
                                {{-- <td></td> --}}
                            </tr>
                            @endforeach
                            
                        </tbody>   

                       
                    </table>
                    <table class="table table-bordered table-hover  text-center" id="table_footer">
                        <thead>
                            <tr>
                                <th> {{__('obs.days')}}</th>
                                <th> {{__('obs.weekends')}}</th>
                                <th> {{__('obs.holidays')}}</th>
                                <th> {{__('obs.presents')}}</th>
                                <th> {{__('obs.absents')}}</th>
                                <th> {{__('obs.leaves')}}</th>
                                <th> {{__('obs.lates')}}</th>                         
                                <th> {{__('obs.not')}} {{__('obs.in')}}</th>                         
                                <th> {{__('obs.early')}} {{__('obs.leaves')}}</th>
                                <th> {{__('obs.working')}} {{__('obs.hours')}}</th>
                                <th> {{__('obs.late')}} {{__('obs.hours')}}</th>
                                <th> {{__('obs.ot')}} {{__('obs.hours')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <td>{{count($attendances)}}</td>
                            <td>{{$attendances->where('status','Weekend')->count() + $attendances->where('status','Weekend Present')->count() }}</td>
                            <td>{{$attendances->where('status','holiday')->count() }}</td>
                            <td>{{$attendances->where('status','Present')->count() + $attendances->where('status','Half Weekend')->count()}}</td>
                            <td>{{$attendances->where('status','Absent')->count()}}</td>
                            <td>{{$attendances->where('status','Leave')->count()}}</td>
                            <td>{{$attendances->whereNotNull('late')->whereNull('late_approval_status')->count()}}</td>
                            <td>{{$attendances->whereNull('in_time')->whereNotNull('out_time')->count()}}</td>
                            <td>{{$attendances->whereNotNull('early_leave')->count()}}</td>
                            <td>{{$attendances->sum('working_hours')}}</td>
                            <td>{{$attendances->sum('late_hours')}} </td>
                            <td>{{$attendances->sum('over_time_hours')}}</td>
                          
                           
                        </tbody>
                    </table>
                </div>
                @endisset
            </div>
        </div>
    </section>
@endsection

@section('script')

    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/legacy.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.time.js"></script>
    <script src="{{ asset('/') }}assets/plugins/datetimepicker/js/picker.date.js"></script>
    <script src="{{ asset('/') }}assets/plugins/bootstrap-material-datetimepicker/js/moment.min.js"></script>

    <script>
        function total_amount() {
            let total_amount = 0;
            $(".conveyance_amount").each(function () {
                total_amount += Number($(this).val());
            });
            $("#total_conveyance_amount").val(total_amount);
        }

        today = new Date();
        days = 86400000; //number of milliseconds in a day;

        $('.datepicker').pickadate({ // this is used in the system
            selectMonths: true,
            selectYears: 100,
            format: 'dd-mm-yyyy',
            firstDay: 0
        });

        $('.datepicker_month').pickadate({ // this is used in the system
            selectMonths: true,
            selectYears: true,
            format: 'mm-yyyy'
        });
        $('.timepicker').pickatime()
    </script>

    <script type="text/javascript">
        function PrintTable() {
            var printWindow = window.open('', '', 'height=200,width=400');
            printWindow.document.write('<html><head><title>Table Contents</title><link href="{{ asset('/') }}assets/css/bootstrap.min.css" rel="stylesheet">');

            //Print the Table CSS.
            var table_style = document.getElementById("attendance_table").innerHTML;
            printWindow.document.write('<style>@page{size:landscape;}#print{font-size: 9px !important;}\n' +
                '    .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {\n' +
                '        padding: 1px;\n' +
                '        line-height: 1.428571;\n' +
                '        font-size: 11px !important;\n' +
                '        vertical-align: top;\n' +
                '        border: 1px solid black !important;\n' +
                '        text-align: center !important;\n' +
                '    }\n' +
                '    .sign{ width: 30%!important;}' +
                '    .table>thead>tr>th{ text-align: center !important;}' +
                '    .center_id{ text-align: center !important;}' +
                '</style>');
            printWindow.document.write('</head>');

            //Print the DIV contents i.e. the HTML Table.
            printWindow.document.write('<body>');
            var divContents = document.getElementById("print").innerHTML;
            printWindow.document.write(divContents);
            printWindow.document.write('</body>');

            printWindow.document.write('</html>');
            printWindow.document.close();
            printWindow.print();
        }
    </script>

@endsection