@extends('layouts.dashboard.superadminapp')

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

@section('styles')
<style>
    div.dt-buttons {
        float: left;
        display: flex !important;
    }
    .dataTable {
        overflow-x: auto !important;
        display: table !important;
    }
    .dt-buttons .btn {
        margin-right: 0.5rem !important;
        padding: 0.25rem 0.75rem !important;
        font-size: 0.95rem !important;
    }
</style>
@endsection

@section('content')

<!-- Page Heading -->
<div class="bg-white 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 class="display-date">
        <span id="day">day</span>,
        <span id="daynum">00</span>
        <span id="month">month</span>
        <span id="year">0000</span>
    </div>
    <div class="display-time"></div>
</div>

<!-- Alerts -->
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif
@if(session('error'))
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
        <i class="fas fa-exclamation-circle mr-2"></i>{{ session('error') }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
@endif

<!-- Attendance Card -->
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center" style="background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);">
        <h6 class="m-0 font-weight-bold text-white">
            <i class="fas fa-clipboard-list mr-2"></i> Attendance Records
        </h6>
        <button type="button" class="btn btn-light btn-sm" data-toggle="modal" data-target="#uploadModal">
            <i class="fas fa-upload mr-1"></i> Upload Excel
        </button>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="attendanceTable" class="table table-bordered table-striped table-sm" width="100%" cellspacing="0">
                <thead class="thead-light">
                    <tr class="text-center">
                        <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
                        function decimalToHoursMinutes($decimal) {
                            $h = floor($decimal);
                            $m = round(($decimal - $h) * 60);
                            return sprintf('%02d:%02d', $h, $m);
                        }
                    @endphp
                    @foreach($data as $row)
                        @php
                            $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;

                            $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);
                            }
                            $ot = $workHours > 9 ? round($workHours - 9, 2) : 0;
                            $shortage = $workHours < 9 ? round(9 - $workHours, 2) : 0;
                        @endphp
                        <tr class="text-center">
                            <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>
                                @if($workDuration)
                                    <strong>{{ $workDuration }}</strong>
                                @else
                                    -
                                @endif
                            </td>
                            <td>
                                @if($ot > 0)
                                    <span class="badge badge-success">{{ decimalToHoursMinutes($ot) }}</span>
                                @else
                                    <span class="text-muted">00:00</span>
                                @endif
                            </td>
                            <td>
                                @if($shortage > 0)
                                    <span class="badge badge-danger">{{ decimalToHoursMinutes($shortage) }}</span>
                                @else
                                    <span class="text-muted">00:00</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Upload Modal -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="uploadModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form action="{{ route('superadmin.attendance.import') }}" method="POST" enctype="multipart/form-data">
                @csrf
                <div class="modal-header" style="background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);">
                    <h5 class="modal-title text-white" id="uploadModalLabel">
                        <i class="fas fa-file-excel mr-2"></i> Upload Attendance File
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label class="small font-weight-bold">Excel File (.xlsx) <span class="text-danger">*</span></label>
                        <input type="file" name="import_file" class="form-control" accept=".xlsx,.xls" required>
                        <small class="text-muted">
                            <a href="{{ asset('templates/attendance_import_template.xlsx') }}" download>
                                <i class="fas fa-download mr-1"></i> Download Sample Template
                            </a>
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">
                        <i class="fa fa-times mr-1"></i> Cancel
                    </button>
                    <button type="submit" class="btn btn-success btn-sm">
                        <i class="fa fa-upload mr-1"></i> Upload
                    </button>
                </div>
            </form>
        </div>
    </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' },
            { extend: 'colvis', className: 'btn btn-secondary btn-sm' }
        ],
        pageLength: 10,
        responsive: true,
        language: {
            emptyTable: "No attendance records found"
        }
    });
});
</script>
@endsection