@extends('layouts.user_type.auth')

@section('content')
<div class="container-fluid">
    <div class="card p-4">
        <!-- Header Section -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h3>Attendance Summary</h3>
                <span>General [ 9:30 AM - 6:30 PM ]</span>
            </div>
            <div class="d-flex align-items-center">
                <input type="text" class="form-control me-3" placeholder="Add notes for check-out">
                <button class="btn btn-danger">Check-out: 07:37:13 Hrs</button>
            </div>
        </div>

        <!-- Navigation Tabs -->
        <ul class="nav nav-tabs mb-4" id="attendanceTabs">
            <li class="nav-item">
                <a class="nav-link active" id="attendance-summary-tab" data-bs-toggle="tab" href="#attendance-summary">Attendance Summary</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="regularization-tab" data-bs-toggle="tab" href="#regularization">Regularization</a>
            </li>
        </ul>

        <!-- Attendance Timeline -->
        <div class="tab-content">
            <!-- Attendance Summary Tab Content -->
            <div class="tab-pane fade show active" id="attendance-summary">
                <!-- Date Range Selector -->
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <button class="btn btn-outline-secondary" id="prev-week">&lt;</button>
                    <span id="week-range">01-Dec-2024 - 07-Dec-2024</span>
                    <button class="btn btn-outline-secondary" id="next-week">&gt;</button>
                </div>

                <!-- Attendance Timeline Table -->
                <div class="table-responsive">
                    <table class="table align-items-center mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th class="text-center">Day</th>
                                <th class="text-center">Start Time</th>
                                <th class="text-center">Checked In Time</th>
                                <th class="text-center">Checked Out Time</th>
                                <th class="text-center">Total Worked Hours</th>
                            </tr>
                        </thead>
                        <tbody id="attendance-data">
                            <!-- Attendance rows will be injected dynamically -->
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Regularization Tab Content -->
            <div class="tab-pane fade" id="regularization">
                <p>Regularization coming soon</p>
            </div>
        </div>
    </div>
</div>
@endsection