@extends('layouts.app', ['path' => 'attendance.timesheet'])

@section('content')
<div class="content" data-color="primary">

    <!-- Page Header -->
    <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-4">
        <div>
            <h2 class="mb-1 fw-semibold">Employee Time Sheet</h2>
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ route('dashboard') }}"><i class="ti ti-smart-home"></i></a>
                    </li>
                    <li class="breadcrumb-item">Attendance</li>
                    <li class="breadcrumb-item">
                        <a href="{{ route('attendance.timesheet.index') }}">Time Sheet</a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">Detail</li>
                </ol>
            </nav>
        </div>

        <div class="d-flex align-items-center gap-2 flex-wrap">
            <input type="month" class="form-control" style="width: 180px;" value="{{ now()->format('Y-m') }}">
            <button class="btn btn-primary">Apply</button>
        </div>
    </div>

    @include('partials.alerts')

    <!-- Employee Info Card -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body d-flex align-items-center gap-4 flex-wrap bg-light rounded-3 p-3">
            <div class="avatar bg-primary text-white rounded-circle shadow-sm flex-shrink-0"
                style="width:64px;height:64px;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:20px;">
                JS
            </div>
            <div class="flex-grow-1">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <h5 class="mb-0 fw-semibold text-dark">John Smith</h5>
                    <span class="badge bg-light text-dark border">EMP-101</span>
                </div>
                <div class="text-muted small mt-1 d-flex flex-wrap gap-3">
                    <span><i class="ti ti-briefcase me-1"></i><strong>Department:</strong> HR</span>
                    <span><i class="ti ti-user-circle me-1"></i><strong>Designation:</strong> Manager</span>
                    <span><i class="ti ti-clock me-1"></i><strong>Shift:</strong> Shift A</span>
                </div>
            </div>
        </div>
    </div>

    <!-- KPI Cards -->
    <div class="row g-3 mb-4">
        @php
            $stats = [
                ['label' => 'Planned Hours', 'value' => '176h', 'color' => 'text-dark'],
                ['label' => 'Short Hours', 'value' => '8h', 'color' => 'text-warning'],
                ['label' => 'Working Days', 'value' => '22', 'color' => 'text-dark'],
                ['label' => 'Worked Hours', 'value' => '168h', 'color' => 'text-success'],
                ['label' => 'Absent', 'value' => '1', 'color' => 'text-danger'],
                ['label' => 'Overtime', 'value' => '4h', 'color' => 'text-primary'],
            ];
        @endphp

        @foreach ($stats as $s)
            <div class="col-md-2 col-sm-6">
                <div class="card text-center border-0 shadow-sm h-100">
                    <div class="card-body py-3">
                        <div class="text-muted small mb-1">{{ $s['label'] }}</div>
                        <h4 class="mb-0 fw-semibold {{ $s['color'] }}">{{ $s['value'] }}</h4>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    <!-- Daily Attendance Table -->
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white d-flex align-items-center justify-content-between flex-wrap gap-2">
            <h5 class="mb-0 fw-semibold">Daily Attendance - {{ now()->format('F Y') }}</h5>
            <div class="d-flex align-items-center gap-2">
                <select class="form-select form-select-sm" style="width: 160px;">
                    <option selected>All Status</option>
                    <option>On Time</option>
                    <option>Late</option>
                    <option>Absent</option>
                    <option>Holiday</option>
                </select>
                <button class="btn btn-outline-primary btn-sm">Apply</button>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table mb-0 align-middle">
                    <thead class="table-light">
                        <tr>
                            <th>Date</th>
                            <th>Expected Check In</th>
                            <th>Check In</th>
                            <th>Expected Check Out</th>
                            <th>Check Out</th>
                            <th>Status</th>
                            {{-- <th>Notes</th> --}}
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2025-03-04 (Mon)</td>
                            <td>09:00</td>
                            <td>09:02</td>
                            <td>18:00</td>
                            <td>17:55</td>
                            <td><span class="badge bg-warning-subtle text-warning border border-warning">Late</span></td>
                            {{-- <td>Late by 2 min, Early out by 5 min</td> --}}
                        </tr>
                        <tr>
                            <td>2025-03-05 (Tue)</td>
                            <td>09:00</td>
                            <td>08:58</td>
                            <td>18:00</td>
                            <td>18:05</td>
                            <td><span class="badge bg-primary-subtle text-primary border border-primary">On Time</span></td>
                            {{-- <td>Overtime 5 min</td> --}}
                        </tr>
                        <tr>
                            <td>2025-03-06 (Wed)</td>
                            <td>09:00</td>
                            <td>—</td>
                            <td>18:00</td>
                            <td>—</td>
                            <td><span class="badge bg-danger-subtle text-danger border border-danger">Absent</span></td>
                            {{-- <td>—</td> --}}
                        </tr>
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection