@extends('admin.layout.master')
@section('title','Individual Time Card')

@section ('home') 
<style>
    input[type=text]{
        padding:18px !important; 
        box-shadow: none!important;
    }
    select,.select2-selection--single {
       height: 38px !important; 
       box-shadow: none!important;
    }
    label {
        margin-bottom: 1px;
    }
    .form-group {
        margin-bottom: 9px;
    }
    .table-responsive {
        height: calc(100vh - 170px);
    }
    th {
        background: #007bff;
        color: white !important;
        position: sticky;
        top: 0;
        text-align: center;
    }

    thead.fsm th {
        background: #101011;
        color: white !important;
        position: sticky;
        top: 0;
        text-align: center;
    }
    table {
        position: relative;
        text-align: center;
    }
    .table-bordered td, .table-bordered th {
        border: 1px solid #aaabab;
        padding: 5px;
    }
</style>
    <div class="card sina-card" style="margin: 0">
        <div class="card-header card-header-s d-flex flex-wrap align-items-center">
            <h4 class="col-6 pl-0">Individual Time Card</h4> 
        </div> 
        <div class="card-body" style="padding: 0 20px !important">
            <div class="">
                <form action="{{route('individual.time.card')}}" method="get">
                    <div class='row'>
                        <div class='col-md-3'>
                            <div class="form-group">
                                <label>Employee Code</label>
                                <select class="form-control code_live_search" name="employee_id" id="emp_code" required>
                                </select>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="form-group">
                                <label>Date From </label>
                                <input type="text" class="datepicker form-control" name="date_from" id="date_from" value="" required>
                            </div>
                        </div>
                        <div class='col-md-3'>
                            <div class="form-group">
                                <label>Date To</label>
                                <input type="text" class="datepicker form-control " name="date_to" id="date_to" value="" required>
                            </div>
                        </div>
                    
                        <div class='col-md-3 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">
                <div class="col-sm-1 text-right offset-10">
                    <button class="btn btn-sm  btn-info" onclick="PrintTable();">Print</button>
                </div>
                <div class="col-sm-1 text-right">
                    @include('payroll.includes.printAndExcel')
                </div>
            </div>
           
            <div class=" table-responsive table2excel" id="print"> {{-- table-responsive --}}
                
                <table class="table table-bordered table-hover" id="">
                    <thead>
                    <tr>
                        <th colspan="11" class="text-center">
                            <h4>
                               <span id="heading_name"> {{$employee_name}}</span>
                            </h4>
                            <h4>Attendance For The Date  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>Date</th>
                        <th>Day Name</th>
                        <th>Shift Name</th>
                        <th>In Time</th>
                        <th>Out Time</th>
                        <th>Status</th>
                        <th>Late</th>
                        <th>Early Leave</th>
                        <th>Working Hour</th>
                        <th>Over Time</th>
                        {{-- <th>
                            <button id="edit_button" onclick="getEditableAttendanceList(this)"
                                    class="btn btn-success btn-sm">Edit
                            </button>
                            <button id="edit_button" onclick="removeAttendance(this)"
                                    class="btn btn-danger btn-sm">Remove
                            </button>
                            <input id="checkall" type="checkbox" onclick="toggle(this);"
                                   style="width: 20px; height: 20px; background-color:green;"><br/>
                        </th> --}}
                    </tr>
                    </thead>
                   
                    <tbody id="tbody_data">
                        @foreach ($attendances as $attendance )
                           
                            {{-- @dd(count($attendance['ot_shift_attendances'])); --}}
                            <tr>
                            <td>{{$attendance['date']}}</td>
                            <td class="text-left">{{$attendance['day_name']}}</td>
                            <td>
                                <p style="margin: 0 !important">{{$attendance['shift_name']}}</p>
                                {{$attendance['shift_time']}}
                            </td>
                            <td>
                                {{$attendance['in_time'] ? $attendance['in_time'] : "--" }} <br>
                                {{ count($attendance['ot_shift_attendances']) > 1 ? $attendance['ot_shift_attendances']['in_time'] : null }}
                            </td>
                            <td>
                                {{$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>{{$attendance['late']}}</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">
                    <thead class="fsm">
                    <tr>
                        <th>Total Day</th>
                        <th>Total Weekend</th>
                        <th>Total Present</th>
                        <th>Total Absent</th>
                        <th>Total Late</th>
                        <th>Total Leave</th>
                        <th>Total Early Leave</th>
                        <th>Total Working Hour</th>
                        <th>Total OT Hour</th>
                        <th>Total OT Day</th>
                    </tr>
                    </thead>
                    <tbody>
                       <tr>
                           <td>{{count($attendances)}}</td>
                           <td>{{$attendances->where('status','Holiday')->count()}}</td>
                           <td>{{$attendances->where('status','Present')->count()}}</td>
                           <td>{{$attendances->where('status','Absent')->count()}}</td>
                           <td>{{$attendances->whereNotNull('late')->count()}}</td>
                           <td></td>
                           <td>{{$attendances->whereNotNull('early_leave')->count()}}</td>
                           <td>
                               {{$attendances->sum('working_hours')}}
                            </td>
                           <td>
                               {{$attendances->sum('over_time_hours')}}
                            </td>
                           <td></td>
                       </tr>
                   
                    </tbody>
                </table>
            </div>
           
        </div> 
    </div> 
    @endif

    @include('payroll.attendance.report.attendance_edit_modal');

    <script src="{{asset('payroll_assets/attendance/js/attendance_edit.js')}}"></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