@extends('layouts.dashboard.superadminapp')

@section('title', 'Employee Daily Attendance')

@section('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.bootstrap5.min.css">
<style>
    .dt-buttons .btn {
        margin-right: 0.5rem !important;
        padding: 0.25rem 0.75rem !important;
        font-size: 0.95rem !important;
    }
</style>
@endsection

@section('content')
<div class="p-2 d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h5 mb-0 text-gray-800">UEPL / Employee Daily Attendance</h1>
</div>

<div class="card shadow mb-4">
    <div class="card-header">
        <button type="button" style="width: 200px;float:right;" class="btn btn-success" data-toggle="modal" data-target="#uploadModal">
            <i class="fas fa-upload"></i> Upload Excel
        </button>
    </div>
    <div class="card-header d-flex align-items-center">
        <i class="fas fa-table me-2"></i>
        <span class="fw-bold">Attendance Records</span>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="attendanceTable" class="table table-bordered table-hover text-dark w-100">
                <thead class="table-light">
                    <tr class="text-center align-middle">
                        <th>Date</th>
                        <th>Employee ID</th>
                        <th>Employee Name</th>
                        <th>Check In</th>
                        <th>Break Out</th>
                        <th>Break In</th>
                        <th>Check Out</th>
                        <th>Working Hours</th>
                        <th>OT (hrs)</th>
                        <th>Shortage (hrs)</th>
                    </tr>
                </thead>
                <tbody>
                     @php
    // Helper for converting decimal hours to HH:MM
    function decimalToHoursMinutes($decimal) {
        $h = floor($decimal);
        $m = round(($decimal - $h) * 60);
        return sprintf('%02d:%02d', $h, $m);
    }
@endphp
                    @foreach ($data as $row)
                  

                        @php
                            // Parse times
                            $checkIn = $row->check_in ? \Carbon\Carbon::parse($row->check_in) : null;
                            $breakOut = $row->break_out ? \Carbon\Carbon::parse($row->break_out) : null;
                            $breakIn = $row->break_in ? \Carbon\Carbon::parse($row->break_in) : null;
                            $checkOut = $row->check_out ? \Carbon\Carbon::parse($row->check_out) : null;
                            
                            // Calculate total work duration (excluding break)
                            $workDuration = null;
                            $workHours = 0;
                            if ($checkIn && $checkOut) {
                                $total = $checkIn->diffInMinutes($checkOut);
                                $break = ($breakIn && $breakOut) ? $breakOut->diffInMinutes($breakIn) : 0;
                                $workMinutes = max(0, $total - $break);
                                $workHours = round($workMinutes / 60, 2);
                                $workDuration = sprintf('%02d:%02d', intdiv($workMinutes, 60), $workMinutes % 60);
                            }
                            // Calculate OT & Shortage
                            $ot = $workHours > 9 ? round($workHours - 9, 2) : 0;
                            $shortage = $workHours < 9 ? round(9 - $workHours, 2) : 0;
                        @endphp
                        <tr class="text-center align-middle">
                            <td>{{ \Carbon\Carbon::parse($row->date)->format('d-m-Y') }}</td>
                            <td>{{ $row->employee_id }}</td>
                            <td>{{ $row->employee_name }}</td>
                            <td>{{ $row->check_in }}</td>
                            <td>{{ $row->break_out }}</td>
                            <td>{{ $row->break_in }}</td>
                            <td>{{ $row->check_out }}</td>
                            <td>
                                {{ $workDuration ?? '-' }}
                            </td>
                            <td>
    @if ($ot > 0)
        <span class="badge bg-success">{{ decimalToHoursMinutes($ot) }}</span>
    @else
        00:00
    @endif
</td>
<td>
    @if ($shortage > 0)
        <span class="badge bg-danger">{{ decimalToHoursMinutes($shortage) }}</span>
    @else
        00:00
    @endif
</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <form action="{{ route('superadmin.attendance.import') }}" method="POST" enctype="multipart/form-data"
            class="modal-content">
            @csrf
            <div class="modal-header">
                <h5 class="modal-title">Upload Attendance File (Excel)</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="file" name="import_file" class="form-control" required>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary">Upload</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#attendanceTable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                { extend: 'copy', className: 'btn btn-secondary btn-sm' },
                { extend: 'csv', className: 'btn btn-secondary btn-sm' },
                { extend: 'excel', className: 'btn btn-secondary btn-sm' },
                { extend: 'pdf', className: 'btn btn-secondary btn-sm' },
                { extend: 'print', className: 'btn btn-secondary btn-sm' }
            ],
            responsive: true,
            destroy: true,
        });
    });
</script>
@endsection