@extends('layouts.user')
@section('title', 'Attendance')
@section('page-icon', 'calendar-check')
@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
    @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

    /* ===================================================
   BODY
=================================================== */

.glass-body{
    background:linear-gradient(135deg,#f8fafc 0%,#eef2ff 100%);
    font-family:'Plus Jakarta Sans',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    padding:20px;
    position:relative;
}

/* ===================================================
   BACKGROUND BLOBS
=================================================== */

.blob{
    position:fixed;
    border-radius:50%;
    filter:blur(100px);
    opacity:.18;
    pointer-events:none;
    z-index:0;
}

.blob-1{
    width:220px;
    height:220px;
    background:#7c3aed;
    top:-80px;
    left:-80px;
}

.blob-2{
    width:300px;
    height:300px;
    background:#ec4899;
    bottom:-120px;
    right:-120px;
}

.blob-3{
    width:180px;
    height:180px;
    background:#3b82f6;
    top:40%;
    right:8%;
}

/* ===================================================
   CONTAINER
=================================================== */

.glass-container{
    position:relative;
    z-index:2;
    max-width:1350px;
    margin:auto;
}

/* ===================================================
   CARD
=================================================== */

.glass-card{

    background:rgba(255,255,255,.55);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.6);

    border-radius:18px;

    padding:20px;

    box-shadow:
        0 10px 30px rgba(15,23,42,.08);

}

/* ===================================================
   PAGE TITLE
=================================================== */

.page-title{

    font-size:26px;

    font-weight:700;

    color:#0f172a;

    margin-bottom:20px;

}

.page-subtitle{

    color:#64748b;

    font-size:14px;

}

/* ===================================================
   STATISTICS CARD
=================================================== */

.stat-glass{

    background:rgba(255,255,255,.45);

    backdrop-filter:blur(8px);

    border:1px solid rgba(255,255,255,.5);

    border-radius:16px;

    padding:18px;

    transition:.25s;

    height:100%;

}

.stat-glass:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 25px rgba(0,0,0,.08);

}

.stat-glass .icn{

    width:55px;

    height:55px;

    border-radius:15px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    background:#f1f5f9;

    color:#4f46e5;

    margin-bottom:12px;

}

.stat-glass .num{

    font-size:30px;

    font-weight:700;

    color:#0f172a;

    line-height:1;

}

.stat-glass .lbl{

    margin-top:6px;

    font-size:13px;

    color:#64748b;

    text-transform:uppercase;

    letter-spacing:.08em;

}

/* ===================================================
   BUTTONS
=================================================== */

.btn-glass{

    border:none;

    border-radius:10px;

    padding:10px 18px;

    font-weight:600;

    transition:.25s;

}

.btn-checkin-glass{

    background:#22c55e;

    color:#fff;

}

.btn-checkin-glass:hover{

    background:#16a34a;

}

.btn-checkout-glass{

    background:#ef4444;

    color:#fff;

}

.btn-checkout-glass:hover{

    background:#dc2626;

}

.btn-primary{

    border-radius:10px;

}

/* ===================================================
   TABLE
=================================================== */

.table-wrapper{

    overflow-x:auto;

}

.table-glass{

    width:100%;

    border-collapse:separate;

    border-spacing:0 6px;

}

.table-glass thead th{

    background:#f8fafc;

    color:#475569;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

    padding:14px;

    border:none;

}

.table-glass tbody tr{

    background:rgba(255,255,255,.55);

    transition:.2s;

}

.table-glass tbody tr:hover{

    background:#fff;

    transform:scale(1.003);

    box-shadow:0 6px 15px rgba(0,0,0,.05);

}

.table-glass tbody td{

    padding:14px;

    font-size:14px;

    color:#0f172a;

    vertical-align:middle;

    border:none;

}

.table-glass tbody td:first-child{

    border-radius:12px 0 0 12px;

}

.table-glass tbody td:last-child{

    border-radius:0 12px 12px 0;

}

/* ===================================================
   BADGES
=================================================== */

.badge-glass{

    padding:6px 14px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

}

.present{

    background:#dcfce7;

    color:#166534;

}

.absent{

    background:#fee2e2;

    color:#991b1b;

}

.late{

    background:#fef3c7;

    color:#92400e;

}

.halfday{

    background:#dbeafe;

    color:#1d4ed8;

}

/* ===================================================
   PAGINATION
=================================================== */

.pagination{

    margin-top:20px;

}

.pagination .page-link{

    width:38px;

    height:38px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:10px !important;

    margin:0 3px;

    border:none;

    background:#fff;

    color:#334155;

    box-shadow:0 2px 8px rgba(0,0,0,.05);

}

.pagination .active .page-link{

    background:#4f46e5;

    color:#fff;

}

/* ===================================================
   FORM
=================================================== */

.form-control,

.form-select{

    border-radius:12px;

    border:1px solid #e2e8f0;

    padding:12px 14px;

    box-shadow:none;

}

.form-control:focus,

.form-select:focus{

    border-color:#6366f1;

    box-shadow:0 0 0 .15rem rgba(99,102,241,.15);

}

label{

    font-size:14px;

    font-weight:600;

    margin-bottom:8px;

    color:#334155;

}

/* ===================================================
   MODAL
=================================================== */

.modal-content{

    border:none;

    border-radius:18px;

}

.modal-header{

    border-bottom:1px solid #f1f5f9;

}

.modal-footer{

    border-top:1px solid #f1f5f9;

}

/* ===================================================
   RESPONSIVE
=================================================== */

@media(max-width:992px){

    .glass-body{

        padding:15px;

    }

    .glass-card{

        padding:16px;

    }

    .page-title{

        font-size:22px;

    }

    .stat-glass{

        margin-bottom:15px;

    }

}

@media(max-width:768px){

    .page-title{

        font-size:20px;

    }

    .stat-glass .num{

        font-size:24px;

    }

    .table-glass{
        display:table;
        width:100%!important;
        min-width:650px!important;
    }
    .table-glass thead{display:table-header-group}
    .table-glass tbody{display:table-row-group}
    .table-glass tbody tr{
        display:table-row;
        margin:0;
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
        box-shadow:none;
    }
    .table-glass tbody td{
        display:table-cell;
        padding:12px 14px!important;
        white-space:nowrap;
        text-align:left;
    }
    .table-glass tbody td::before{display:none}

}
</style>

<div class="glass-body">
    <div class="blob blob-1"></div>
    <div class="blob blob-2"></div>
    <div class="blob blob-3"></div>

    <div class="glass-container">
        @php
            $totalDays = $attendance->count();
            $presentDays = $attendance->where('status', 'Present')->count();
            $absentDays = $attendance->where('status', 'Absent')->count();
            $lateDays = $attendance->where('status', 'Late')->count();
        @endphp

        {{-- Stats --}}
        <div class="row g-3 mb-4">
            <div class="col-6 col-md-3"><div class="stat-glass d-flex align-items-center"><div class="icn me-3"><i class="far fa-calendar-alt"></i></div><div><div class="num">{{ $totalDays }}</div><div class="lbl">Total</div></div></div></div>
            <div class="col-6 col-md-3"><div class="stat-glass d-flex align-items-center"><div class="icn me-3" style="color:#16a34a"><i class="fas fa-check-circle"></i></div><div><div class="num">{{ $presentDays }}</div><div class="lbl">Present</div></div></div></div>
            <div class="col-6 col-md-3"><div class="stat-glass d-flex align-items-center"><div class="icn me-3" style="color:#dc2626"><i class="fas fa-times-circle"></i></div><div><div class="num">{{ $absentDays }}</div><div class="lbl">Absent</div></div></div></div>
            <div class="col-6 col-md-3"><div class="stat-glass d-flex align-items-center"><div class="icn me-3" style="color:#ca8a04"><i class="fas fa-hourglass-half"></i></div><div><div class="num">{{ $lateDays }}</div><div class="lbl">Late</div></div></div></div>
        </div>

        {{-- Main Table --}}
        <div class="glass-card p-0">
            <div class="d-flex justify-content-between align-items-center flex-wrap p-4 border-bottom border-white border-opacity-25">
                <h3 style="font-weight: 700; color: #0f172a;"><i class="far fa-clipboard me-2" style="opacity:0.5"></i>Attendance</h3>
                <div class="d-flex gap-2 flex-wrap">
                    <form action="{{ route('user.checkin') }}" method="POST" class="d-inline">
                        @csrf
                        <button class="btn btn-glass btn-checkin-glass"><i class="fas fa-arrow-right-to-bracket me-1"></i>Check In</button>
                    </form>
                    <form action="{{ route('user.checkout') }}" method="POST" class="d-inline">
                        @csrf
                        <button class="btn btn-glass btn-checkout-glass"><i class="fas fa-arrow-right-from-bracket me-1"></i>Check Out</button>
                    </form>
                </div>
            </div>
            <div class="table-responsive p-3">
                <table class="table-glass user-data-table">
                    <thead><tr><th>S.No</th><th>Date</th><th>Check In</th><th>Check Out</th><th>Working Hours</th><th>Status</th></tr></thead>
                    <tbody>
                        @forelse($attendance as $key => $row)
                        <tr>
                            <td>{{ $key + 1 }}</td>
                            <td><i class="far fa-calendar me-2 opacity-50"></i>{{ \Carbon\Carbon::parse($row->attendance_date)->format('d M Y') }}</td>
                            <td>{{ $row->check_in ?? '—' }}</td>
                            <td>{{ $row->check_out ?? '—' }}</td>
                            <td>{{ $row->working_hours ?? '—' }}</td>
                            <td>
                                @php $s = strtolower($row->status ?? ''); @endphp
                                <span class="badge-glass {{ $s }}">{{ $row->status ?? '—' }}</span>
                            </td>
                        </tr>
                        @empty
                        <tr><td colspan="6" class="text-center py-5" style="color:#64748b"><i class="fas fa-inbox fa-2x d-block mb-2 opacity-30"></i>No records found</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection