@extends('dashboard.layouts.app')


<style>
    .quick-link-hover:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        background-color: #e9ecef !important;
        transform: translateY(-1px);
    }
    .transition-shadow {
        transition: all 0.2s ease-in-out;
    }
</style>
@section('content')


    <div class="container-fluid">
        <div class="row g-3">

            {{-- Attendance --}}
            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-3 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="">Attendance</h6>
                        </div>
                        @if($attendence && $attendence->check_in)
                            <div class="text-center">
                                <div class="mb-2">
                                    <div class="fw-bold text-success fs-5">Checked in at</div>
                                    <div class="fs-4 fw-semibold">
                                        {{ \Carbon\Carbon::parse($attendence->check_in)->format('h:i A') }}
                                    </div>
                                </div>

                                <div class="bg-light p-3 rounded shadow-sm">
                                    <div class="fw-bold text-dark fs-3" id="hoursWorked">0:00:00 Hrs</div>
                                    <small class="text-muted">Working since check-in</small>
                                </div>

                                <div class="mt-2 text-muted small">
                                    {{ \Carbon\Carbon::parse($attendence->attendence_date)->format('M d, Y') }}
                                </div>
                            </div>

                            <script>
                                document.addEventListener('DOMContentLoaded', () => {
                                    const checkInTime = new Date("{{ \Carbon\Carbon::parse($attendence->check_in)->format('Y-m-d H:i:s') }}");
                                    const hoursWorkedEl = document.getElementById('hoursWorked');

                                    function updateHoursWorked() {
                                        const now = new Date();
                                        let diffMs = now - checkInTime;

                                        let hours = Math.floor(diffMs / (1000 * 60 * 60));
                                        let minutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
                                        let seconds = Math.floor((diffMs % (1000 * 60)) / 1000);

                                        const formatted =
                                            `${hours.toString().padStart(2, '0')}:` +
                                            `${minutes.toString().padStart(2, '0')}:` +
                                            `${seconds.toString().padStart(2, '0')} Hrs`;

                                        hoursWorkedEl.textContent = formatted;
                                    }

                                    updateHoursWorked();
                                    setInterval(updateHoursWorked, 1000);
                                });
                            </script>
                        @else
                            <p class="text-muted text-center">No check-in record found for today.</p>
                        @endif
                    </div>
                </div>
            </div>


            {{-- Request For Approval --}}
            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-3 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class=""> Request For Approval</h6>
                            <span class="badge bg-primary fs-6">{{ $requestForApproval->count() }}</span>
                        </div>

                        @forelse ($requestForApproval as $item)
                            <div class="p-2 mb-2 rounded d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="fw-semibold">Request Type: {{ ucfirst($item->type->name) }}</span>
                                </div>
                                <div>
                                    <span class="badge 
                                        @if($item->status === 'pending') bg-warning text-dark 
                                        @elseif($item->status === 'in_progress') bg-info 
                                        @else bg-secondary 
                                        @endif">
                                        {{ ucfirst(str_replace('_', ' ', $item->status)) }}
                                    </span>
                                </div>
                            </div>
                        @empty
                            <p class=" text-center mb-0">No requests found.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Announcements --}}
            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-3 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="">Announcements</h6>
                        </div>
                        <div class="p-2 mb-2 rounded d-flex justify-content-between align-items-center">
                            <span class="fw-semibold"></span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Upcoming Holidays --}}
            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-3 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6>Upcoming Holidays</h6>
                            <span class="badge bg-primary fs-6">{{ $upcomingHolidays->count() }}</span>
                        </div>
                        @forelse ($upcomingHolidays as $item)
                            <div class="p-2 mb-2 rounded d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="fw-semibold text-dark">{{ ucfirst($item->holiday_title) }}</span>
                                </div>
                                <div>
                                    <span class="badge bg-warning text-dark ">From: {{ $item->from_date }} - To:
                                        {{ $item->to_date }}</span>
                                </div>
                            </div>
                        @empty
                            <p class=" text-center mb-0">No Holidays found.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Leave Request --}}
            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-3 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="">Leave Request</h6>
                            <span class="badge bg-primary fs-6">{{ $leaveBalances->count() }}</span>
                        </div>

                        @forelse ($leaveBalances as $balance)
                            <div class="p-2 mb-2 rounded">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="fw-semibold text-capitalize">
                                        {{ ucfirst($balance->leaveType->type ?? 'Unknown') }}
                                    </span>
                                    <span class=" small">
                                        {{ $balance->used_days ?? 0 }} used
                                    </span>
                                </div>
                                <div class="progress mt-1" style="height: 10px;">
                                    @php
                                        $totalDays = $balance->leaveType->total_days ?? 0;
                                        $usedDays = $balance->used_days ?? 0;
                                        $percent = $totalDays > 0 ? ($usedDays / $totalDays) * 100 : 0;
                                    @endphp
                                    <div class="progress-bar 
                                        @if($percent < 50) bg-success 
                                        @elseif($percent < 80) bg-warning 
                                        @else bg-danger 
                                        @endif" role="progressbar" style="width: {{ $percent }}%">
                                    </div>
                                </div>
                                <small class="">
                                    {{ $totalDays - $usedDays }} days available out of {{ $totalDays }}
                                </small>
                            </div>
                        @empty
                            <p class=" text-center mb-0">No leave records found.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Birthday --}}
            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-3 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="">Birthday</h6>
                        </div>
                        @forelse ($birthDates as $item)
                            <div class="p-2 mb-2 rounded">
                                <div class="d-flex justify-content-between align-items-center">
                                    {{ $item->first_name }} {{ $item->last_name }} - {{ $item->date_of_birth }}
                                </div>
                            </div>
                        @empty
                            <p class=" text-center mb-0">No leave records found.</p>
                        @endforelse

                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-3 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="">My Pending Tasks</h6>
                            <span class="badge bg-primary fs-6">{{ $pendingTasks->count() }}</span>
                        </div>

                        @forelse ($pendingTasks as $item)
                            <div class="p-2 mb-2 rounded">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="fw-semibold text-capitalize">
                                        {{ ucfirst($item->task_name ?? 'Unknown') }}
                                    </span>
                                </div>
                                <div class="progress mt-1" style="height: 15px;">

                                    <div class="progress-bar 
                                        @if($item->progress < 50) bg-warning 
                                        @elseif($item->progress < 80) bg-success
                                        @else bg-primary 
                                        @endif" role="progressbar" style="width: {{ $item->progress }}%">
                                        {{ $item->progress }}%
                                    </div>
                                </div>
                            </div>
                        @empty
                            <p class=" text-center mb-0">No Tasks found.</p>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- My Files --}}
            <div class="col-md-4">
                <div class="card shadow-sm border-0 rounded-3 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center justify-content-between mb-3">
                            <h6 class="">My Files</h6>
                            <span class="badge bg-primary fs-6">{{ $sharedCenter->count() }}</span>
                        </div>

                        @forelse ($sharedCenter as $item)
                            <div class="p-2 mb-2 rounded d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="fw-semibold text-dark">Url: <a
                                            href="{{ $item->attachment }}">{{ $item->name }}</a></span>
                                </div>
                            </div>
                        @empty
                            <p class=" text-center mb-0">No Files found.</p>
                        @endforelse

                    </div>
                </div>
            </div>

            {{-- Quick Links --}}



<div class="col-md-4">
    <div class="card shadow-sm border-0 rounded-3 h-100">
        <div class="card-body">
            
            <div class="d-flex align-items-center justify-content-between pb-3 border-bottom">
                <h6 class="mb-0 text-dark fw-bold">🚀 Quick Links</h6>
                <span class="badge bg-primary rounded-pill fs-6">{{ $quick_links->count() }}</span>
            </div>
            
            <div class="mt-3">
                @forelse($quick_links as $quick_link)
                    {{-- Quick Link Item --}}
                    <a href="{{ $quick_link->link }}" target="_blank" class="text-decoration-none d-block">
                        <div class="p-3 mb-2 rounded border transition-shadow bg-light quick-link-hover">
                            <div class="d-flex align-items-center">
                                <i class="fas fa-link text-muted me-2"></i> 
                                <span class="text-truncate text-dark fw-medium">{{ $quick_link->name }}</span>
                            </div>
                        </div>
                    </a>
                @empty
                    {{-- Empty State --}}
                    <div class="alert alert-info py-2 my-3 text-center" role="alert">
                        <i class="fas fa-info-circle me-1"></i> No quick links defined.
                    </div>
                @endforelse
            </div>
        </div>
    </div>
</div>
        </div>
    </div>
@endsection