@extends('layouts.admin')

@section('page_title', 'Attendance History')

@section('content')
    <div class="row align-items-center mb-5">
        <div class="col">
            <h2 class="fw-extrabold tracking-tight mb-1" style="font-weight: 800; font-size: 1.875rem;">Attendance History
            </h2>
            <p class="text-secondary opacity-75 mb-0">Monitor and manage employee logging activities.</p>
        </div>
        <div class="col-auto d-flex gap-2">
            <div class="dropdown">
                <button class="btn btn-light px-4 py-2 fw-bold d-flex align-items-center gap-2 border shadow-sm rounded-3"
                    type="button" data-bs-toggle="dropdown" style="font-size: 0.9375rem; background-color: #ffffff;">
                    <span class="material-symbols-outlined" style="font-size: 1.25rem;">download</span>
                    Export
                </button>
                <ul class="dropdown-menu shadow-lg border-0 rounded-3 mt-2">
                    <li><a class="dropdown-item py-2" href="{{ route('admin.exports.attendance.pdf') }}"><i
                                class="bi bi-file-pdf text-danger me-2"></i> PDF Report</a></li>
                    <li><a class="dropdown-item py-2" href="{{ route('admin.exports.attendance.excel') }}"><i
                                class="bi bi-file-earmark-excel text-success me-2"></i> Excel Sheet</a></li>
                </ul>
            </div>
            <a href="{{ route('admin.attendance.create') }}"
                class="btn btn-primary px-4 py-2 fw-bold d-flex align-items-center gap-2 shadow-lg"
                style="border-radius: 0.625rem; font-size: 0.9375rem;">
                <span class="material-symbols-outlined" style="font-size: 1.25rem;">add_circle</span>
                Manual Entry
            </a>
        </div>
    </div>

    <!-- Filters Bar -->
    <div class="card border-0 shadow-sm mb-4"
        style="border-radius: 0.875rem; border: 1px solid rgba(0,0,0,0.05) !important;">
        <div class="card-body p-4">
            <div class="row g-4 align-items-end">
                <div class="col-lg-4">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Search Employee</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-0 px-3"><span
                                class="material-symbols-outlined text-secondary opacity-50"
                                style="font-size: 1.25rem;">search</span></span>
                        <input type="text" id="attFilterSearch" class="form-control border-0 bg-light py-2"
                            placeholder="Search by name..." style="font-size: 0.875rem;">
                    </div>
                </div>
                <div class="col-lg-2">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Status</label>
                    <select id="filterStatus" class="form-select border-0 bg-light py-2" style="font-size: 0.875rem;">
                        <option value="">All Status</option>
                        <option value="Present">Present</option>
                        <option value="Absent">Absent</option>
                        <option value="Late">Late</option>
                    </select>
                </div>
                <div class="col-lg-3">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Date Range</label>
                    <div class="input-group">
                        <span class="input-group-text bg-light border-0 px-3"><span
                                class="material-symbols-outlined text-secondary opacity-50"
                                style="font-size: 1.1rem;">calendar_today</span></span>
                        <input type="date" id="filterDate" class="form-control border-0 bg-light py-2"
                            style="font-size: 0.875rem;">
                    </div>
                </div>
                <div class="col-lg-2">
                    <label class="text-uppercase fw-bold text-secondary mb-2 d-block"
                        style="font-size: 0.65rem; letter-spacing: 0.05rem;">Logging Type</label>
                    <select id="filterType" class="form-select border-0 bg-light py-2" style="font-size: 0.875rem;">
                        <option value="">Any Type</option>
                        <option value="System">System</option>
                        <option value="Manual">Manual</option>
                    </select>
                </div>
                <div class="col-lg-1">
                    <button class="btn btn-light w-100 fw-bold py-2" style="font-size: 0.875rem; background: #eaedf2;"
                        onclick="location.reload()">Reset</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Table Card -->
    <div class="card border-0 shadow-sm overflow-hidden"
        style="border-radius: 0.875rem; border: 1px solid rgba(0,0,0,0.05) !important;">
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="attTable">
                    <thead class="bg-light bg-opacity-50">
                        <tr>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Employee</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Date</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Check In</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Check Out</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Work Duration</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem;">Status</th>
                            <th class="px-4 py-3 text-uppercase text-secondary fw-bold"
                                style="font-size: 0.65rem; letter-spacing: 0.05rem; width: 120px;">Entry Type</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y">
                        @foreach ($attendances as $att)
                            <tr class="transition-all hover-row">
                                <td class="px-4 py-4">
                                    <div class="d-flex align-items-center gap-3">
                                        <div class="size-9 rounded-circle d-flex align-items-center justify-content-center fw-bold text-sm shadow-sm"
                                            style="width: 36px; height: 36px; font-size: 0.8rem; background-color: {{ ['#eef2ff', '#fff1f2', '#ecfdf5', '#fffbeb'][$att->user_id % 4] }}; color: {{ ['#4f46e5', '#e11d48', '#059669', '#d97706'][$att->user_id % 4] }};">
                                            {{ substr($att->user->name, 0, 1) }}{{ substr(strrchr($att->user->name, ' '), 1, 1) ?: '' }}
                                        </div>
                                        <span class="fw-bold" style="font-size: 0.875rem;">{{ $att->user->name }}</span>
                                    </div>
                                </td>
                                <td class="px-4 py-4 text-dark fw-medium" style="font-size: 0.875rem;">
                                    {{ $att->date->format('d M, Y') }}</td>
                                <td class="px-4 py-4 text-secondary" style="font-size: 0.875rem;">
                                    @if ($att->check_in)
                                        <span class="text-dark fw-semibold">{{ $att->check_in->format('h:i A') }}</span>
                                    @else
                                        <span class="opacity-25">—</span>
                                    @endif
                                </td>
                                <td class="px-4 py-4 text-secondary" style="font-size: 0.875rem;">
                                    @if ($att->check_out)
                                        <span class="text-dark fw-semibold">{{ $att->check_out->format('h:i A') }}</span>
                                    @else
                                        <span class="opacity-25">—</span>
                                    @endif
                                </td>
                                <td class="px-4 py-4 fw-bold text-primary" style="font-size: 0.875rem;">
                                    @if ($att->total_work_minutes)
                                        {{ floor($att->total_work_minutes / 60) }}h {{ $att->total_work_minutes % 60 }}m
                                    @else
                                        <span class="opacity-25 fw-normal text-secondary">—</span>
                                    @endif
                                </td>
                                <td class="px-4 py-4">
                                    @php
                                        $statusColor =
                                            $att->status == 'present'
                                                ? '#059669'
                                                : ($att->status == 'absent'
                                                    ? '#dc2626'
                                                    : '#d97706');
                                    @endphp
                                    <div class="d-flex flex-column">
                                        <span class="d-flex align-items-center gap-1.5 fw-bold"
                                            style="font-size: 0.75rem; color: {{ $statusColor }};">
                                            <span class="rounded-circle"
                                                style="width: 6px; height: 6px; background: {{ $statusColor }};"></span>
                                            {{ ucfirst($att->status) }}
                                        </span>
                                        @if ($att->is_late)
                                            <span class="text-danger x-small mt-1 fw-bold"
                                                style="font-size: 0.625rem;">(Late by {{ $att->late_minutes }}m)</span>
                                        @endif
                                    </div>
                                    <span class="d-none">{{ $att->is_late ? 'Late' : ucfirst($att->status) }}</span>
                                </td>
                                <td class="px-4 py-4">
                                    @if ($att->is_manual)
                                        <span
                                            class="px-2.5 py-0.5 rounded-pill fw-bold bg-info bg-opacity-10 text-info border border-info border-opacity-10"
                                            style="font-size: 0.625rem;">MANUAL</span>
                                    @else
                                        <span class="px-2.5 py-0.5 rounded-pill fw-bold bg-light text-secondary border"
                                            style="font-size: 0.625rem;">SYSTEM</span>
                                    @endif
                                    <span class="d-none">{{ $att->is_manual ? 'Manual' : 'System' }}</span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <!-- Pagination Placeholder (Match Roznama) -->
            <div class="px-4 py-4 bg-light bg-opacity-25 border-top d-flex align-items-center justify-content-between">
                <p class="text-secondary mb-0 fw-medium" style="font-size: 0.8125rem;">Showing <span
                        class="text-dark fw-bold">1-{{ count($attendances) }}</span> entries</p>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-light border text-secondary px-2 py-1 btn-sm"><span
                            class="material-symbols-outlined fs-6 d-block">chevron_left</span></button>
                    <button class="btn btn-primary btn-sm px-2.5 py-1 fw-bold" style="font-size: 0.75rem;">1</button>
                    <button class="btn btn-outline-light border text-secondary px-2 py-1 btn-sm"><span
                            class="material-symbols-outlined fs-6 d-block">chevron_right</span></button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .tracking-tight {
            letter-spacing: -0.015rem;
        }

        .hover-row:hover {
            background-color: rgba(248, 250, 252, 0.5) !important;
        }

        .table>thead {
            border-bottom: 2px solid #f1f5f9;
        }

        .table>tbody>tr {
            transition: all 0.2s;
        }

        /* DataTable Overrides */
        #attTable_wrapper .dataTables_filter,
        #attTable_wrapper .dataTables_length,
        #attTable_wrapper .dataTables_info,
        #attTable_wrapper .dataTables_paginate {
            display: none !important;
        }
    </style>
@endpush

@push('scripts')
    <script>
        $(document).ready(function() {
            const table = $('#attTable').DataTable({
                paging: true,
                lengthChange: false,
                pageLength: 25,
                searching: true
            });

            $('#attFilterSearch').on('keyup', function() {
                table.search(this.value).draw();
            });
            $('#filterStatus').on('change', function() {
                table.column(5).search(this.value).draw();
            });
            $('#filterDate').on('change', function() {
                table.column(1).search(this.value).draw();
            });
            $('#filterType').on('change', function() {
                table.column(6).search(this.value).draw();
            });
        });
    </script>
@endpush