@include('components/header')
@include('components/sidebar')


<div id="content" class="main-content">
	<div class="topbar_content mt-3">
        <h2> Detail Attendance List</h2>
        <div class="viewAll mr-4">
            <a href="{{ route('attendance_list') }}" class="viewAllBtn">
                <button class="btn btn-danger mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back</button>
            </a>
        </div>
    </div>
	<div class="layout-px-spacing layout-top-spacing">
        <div class="modal-footer">
        </div>
        <div class="card mb-3">
            <div class="card-body search-filter p-3">
                <div class="d-flex">
                    <div class="col-2">
                        <select class="form-control" onchange="exportTable(this.value)">
                            <option>Select Export Format</option>
                            <option value="excel">Excel</option>
                            <!-- <option value="pdf">PDF</option> -->
                        </select>
                    </div>
                    <div class="col-10 col-xl-10 justify-content-end">
                        <form action="{{route('filter_list')}}" method="post"> 
                            @csrf                                       
                            <div class="row emp-filter-area pr-0 pl-2 justify-content-end">
                                <div class="col-sm-3 col-12 mb-sm-0 mb-3">
                                    <input type="hidden" name="id" value="{{$emp_id}}">
                                    <input type="text" placeholder="Start Date" onkeypress="return false;" class="form-control datepicker" id="startDate" name="start_date" value='@if(Session::has("s_date")) {{Session::get("s_date")}} @endif' autocomplete="off">
                                    <span id="start_error" class="text-danger"></span>
                                    <div class="date-icon"><img src="https://dev.hrms.developstaging.com/design/img/date-icon.svg" alt="date"></div>
                                </div>
                                <div class="col-sm-3 col-12 mb-sm-0 mb-3">
                                    <input type="text" placeholder="End Date" onkeypress="return false;" id="endDate" class="form-control datepicker" name="end_date" value='@if(Session::has("e_date")) {{Session::get("e_date")}} @endif' autocomplete="off">
                                    <span id="end_error" class="text-danger"></span>
                                    <div class="date-icon"><img src="https://dev.hrms.developstaging.com/design/img/date-icon.svg" alt="date"></div>
                                </div>
                                <div class="col-sm-2 col-12 mb-sm-0 mb-3">
                                    <div class="d-flex">
                                        <button class="btn btn-primary btn-block searchBtn" id="filter_form" type="submit">Search</button>
                                        <a href="{{ route('emp_attendance_list',Crypt::encrypt($emp_id)) }}"><img style="width:35px; margin-left:20px;" src="{{asset('design/img/clearfiltericon.svg')}}"></a>
                                    </div>
                                </div>                                    
                            </div>                          
                        </form>          
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="box-widget widget-user">
                    <div class="widget-user-image">
                        <div class="row">
                            <span class="avatar avatar-icon col-12 col-xl-2 col-md-3 col-sm-4">
                                @if($employee_data->profile_picture == '')
                                    <img width="106px" accept="image/*" height="106px" alt="profile picture" src="{{asset('design/img/profiles/default.svg')}}" class="image">
                                @else
                                    <img width="105px" accept="image/*" id="zoom" height="105px" src='{{asset("root/documents/$employee_data->id/profile/$employee_data->profile_picture")}}'
                                    class="image">
                                @endif
                            </span>
                            <span class="avatar pl-4 pt-2 col-12 col-xl-3 col-md-9 col-sm-8">
                                <div class="p-1">
                                    <h6><b>Employee Id : </b> {{$employee_data->id}}</h6>
                                </div>
                                <div class="p-1">
                                    <h6><b>Employee Name : </b> {{$employee_data->first_name}}  {{$employee_data->last_name}}</h6>
                                </div>
                                <div class="p-1">
                                    <h6><b>Email : </b>{{$employee_data->official_email}}</h6>
                                </div>
                                <div class="p-1">
                                    <h6><b>Phone No. : </b>@if($employee_data->phone_number == '') NA @else{{$employee_data->phone_number}} @endif</h6>    
                                </div>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table id="zero-config" class="table dt-table-hover table-striped" style="width:100%">
                    <thead>
                        <tr class="text-center">
                            <th>Sr No</th>
                            <th>Date</th>
                            <th>Arrival Time</th>
                            @if(count($break_data) > 0)
                                @for($i=1; $i<= max($break_count); $i++)
                                    <th>Punch Out{{$i}}</th>
                                    <th>Punch In{{$i}}</th>
                                    <th>Break Hours{{$i}}</th>
                                @endfor
                            @else
                                <th>Punch Out</th>
                                <th>Punch In</th>
                                <th>Break Hours</th>
                            @endif
                            <th>Dept Time</th>
                            <th>Total Break Hours</th>
                            <th>Total Hours</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if(!empty($attendence_data))
                            @php $j=1; @endphp
                            @foreach($attendence_data as $attendence)
                                <tr class="text-center">
                                    <td>{{$j}}</td>
                                    <td>{{date('d-m-Y',strtotime($attendence->upload_date))}}</td>
                                    @if($attendence->arr_time == '0.00')
                                        <td>-</td>
                                    @else
                                        <td>{{date('H:i',strtotime(number_format($attendence->arr_time,2)))}}</td>

                                    @endif
                                    @foreach($break_data as $break)
                                        @if($break->attendence_id == $attendence->id)
                                            <td>{{date('H:i',strtotime(number_format($break->in_time,2)))}}</td>
                                            <td>{{date('H:i',strtotime(number_format($break->out_time,2)))}}</td>
                                            <td>{{date('H:i',strtotime(number_format($break->total_break_time,2)))}}</td>
                                        @else
                                            <td>-</td>
                                            <td>-</td>
                                            <td>-</td>
                                        @endif
                                    @endforeach
                                    @if(empty($break))
                                        <td>-</td>
                                        <td>-</td>
                                        <td>-</td>
                                    @endif
                                    @if($attendence->dep_time == '0.00')
                                        <td>-</td>
                                    @else
                                        <td>{{date('H:i',strtotime(number_format($attendence->dep_time,2)))}}</td>

                                    @endif
                                    @if($attendence->break_time == '0.00')
                                        <td>-</td>
                                    @else
                                        <td>{{date('H:i',strtotime(number_format($attendence->break_time,2)))}}</td>

                                    @endif
                                    @if($attendence->arr_time == '0.00' || $attendence->dep_time == '0.00')
                                        <td>-</td>
                                    @else
                                        <td>{{date('H:i',strtotime(number_format($attendence->total_time,2)))}}</td>

                                    @endif
                                </tr>
                                @php $j++ @endphp
                            @endforeach
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@include('components/footer')
<script type="text/javascript">
    $('.datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat : "dd/mm/yy",
    });
</script>
<script>
    function exportTable(format) {
        const table = document.getElementById('zero-config');
        var tabledata = new DataTable('#zero-config');
        tabledata.destroy();
        const clonedTable = table.cloneNode(true);
        const rows = clonedTable.getElementsByTagName('tr');

        const data = $(".topbar_content").find('h2').text();
        if (format === 'pdf') {
            const options = {
              margin: 10,
              filename: 'EmployeeList.pdf',
              image: { type: 'jpeg', quality: 0.98 },
              html2canvas: { scale: 2 },
              jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' }
            };
            const tableHTML = clonedTable.outerHTML; 
            const combinedHTML = `<div>${data}</div><div>${tableHTML}</div>`;

            html2pdf()
              .set(options)
              .from(combinedHTML)
              .save();
        } else if (format === 'csv') {
            let csv = [];

            clonedTable.querySelectorAll('tr').forEach(function(row) {
                let rowData = [];
                row.querySelectorAll('th, td').forEach(function(cell) {
                    console.log(cell);
                rowData.push(cell.innerText);
                });
                csv.push(rowData.join(','));
            });
            const csvContent = 'data:text/csv;charset=utf-8,' + csv.join(',');
            const encodedUri = encodeURI(csvContent);
            const link = document.createElement('a');
            link.setAttribute('href', encodedUri);
            link.setAttribute('download', 'table.csv');
            document.body.appendChild(link);
            link.click();
        } else if (format === 'excel') {
            var filename = "{{ Session::get('type') }}";
            var downloadLink;
            var dataType = 'application/vnd.ms-excel';
            var tableSelect = clonedTable;

            // Add CSS for table borders
            var style = "<style>";
            style += "table, th, td { border: 1px solid black; border-collapse: collapse; text-align: center; }";
            style += "</style>";

            var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

            // Insert the CSS at the beginning of the table HTML
            tableHTML = style + tableHTML;

            filename = filename ? filename + '.xls' : 'Attendence_data_{{$employee_data->id}}.xls';
            downloadLink = document.createElement("a");

            document.body.appendChild(downloadLink);

            if (navigator.msSaveOrOpenBlob) {
                var blob = new Blob(['\ufeff', tableHTML], {
                    type: dataType
                });
                navigator.msSaveOrOpenBlob(blob, filename);
            } else {
                downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
                downloadLink.download = filename;
                downloadLink.click();
            }

            window.location.reload(true);

        }
    }

</script>