@extends('adminlte::page')

@section('title', config('adminlte.title') . ' | Dashboard')

@php
    $firstName = explode(' ', Auth::user()->name)[0];
@endphp

@section('content_header')
    <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-center">
        <div>
            <h1>Welcome Back, {{ $firstName }}!</h1>
        </div>
        <div>
            <div id="clock"></div>
            {{-- <h6>{{ \Carbon\Carbon::now()->format('l jS F Y H:i') }}</h6> --}}
        </div>
    </div>
@stop


@section('content')
    <!-- Weather Icons CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.12/css/weather-icons-wind.min.css">

    <div>
        {{-- Announcement Section --}}
        <div class="row">
            <div class="col-12">
                
            @if ($announcement->status === 1)
                @php
                    $description = $announcement->description;
                    preg_match('/\[(.*?)\]\s*(.*)/', $description, $matches);
                    if (count($matches) === 3) {
                        $type = $matches[1];
                        $message = $matches[2];
                    } else {
                        $type = 'info';
                        $message = $description;
                    }
                @endphp
                <div class="alert alert-{{ $type }} alert-dismissible fade show text-center" role="alert">
                    <span class="h2">{{ $message }}</span>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Weather & Quick Info --}}
    <div class="card-deck mb-3">
        <div class="card holiday-card">
            <div class="card-header bg-light">
                <h3 class="card-title">Current Weather</h3>
            </div>
            <div class="card-body d-flex align-items-center justify-content-center " id="weatherWidget">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        </div>

        @php
            // Calculate total entitlement and taken for current year
            $currentYearTotal = $holidaysTotal ?? 0;
            $currentYearRemaining = $holidaysRemaining ?? 0;
            // Calculate taken as the difference
            $currentYearTaken = $currentYearTotal - $currentYearRemaining;
        @endphp
        
        <x-dashboard.balance-card
            :year="date('Y')"
            :currentTotal="$currentYearTotal"
            :totalAvailable="$currentYearRemaining"
            :currentTaken="$currentYearTaken"
            :currentCarryover="0"
            :currentCOR="0"
            :duvetThisYear="null"
            :showDetails="false"
            cardClass="holiday-card"
            titleSize="h3"
        />

        <div class="card holiday-card">
            <div class="card-header bg-light">
                <h3 class="card-title">Duvet Day</h3>
            </div>
            <div class="card-body text-center">
                @if (!!$duvetDayUsed)
                    <div>
                        <i class="fas fa-bed  fa-3x mb-3 text-secondary"></i>
                        <h4 class="text-muted">Already Used</h4>
                        <p class="mb-0 text-muted">Used on: {{ $duvetDayDate ?? 'N/A' }}</p>
                    </div>
                @else
                    <div>
                        <i class="fas fa-bed fa-3x mb-3 text-purple"></i>
                        <h4>Available</h4>
                        <p class="mb-0 text-muted">1 duvet day remaining this year</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Quick Actions --}}
    <div class="row">
        <div class="col-12">
            <div class="card holiday-card">
                <div class="card-header bg-light">
                    <h3 class="card-title">Quick Actions</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 col-sm-6">
                            <a href="{{ route('holidays.create') }}" class="btn btn-app w-100">
                                <i class="fas fa-calendar-plus"></i> Book Holiday
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <a href="{{ route('holidays.viewing') }}" class="btn btn-app w-100">
                                <i class="fas fa-history"></i> My Requests
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <a href="{{ route('documents.index') }}" class="btn btn-app w-100">
                                <i class="fas fa-file"></i> View Documents
                            </a>
                        </div>
                        <div class="col-md-3 col-sm-6">
                            <a href="{{ route('profile.index') }}" class="btn btn-app w-100">
                                <i class="fas fa-user-cog"></i> My Profile
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Upcoming Holidays --}}
    @if (isset($upcomingHolidays) && count($upcomingHolidays) > 0)
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header bg-light">
                        <h3 class="card-title">Your Upcoming Holidays</h3>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Start Date</th>
                                        <th>End Date</th>
                                        <th>Type</th>
                                        <th>Days</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($upcomingHolidays as $holiday)
                                        <tr>
                                            <td>{{ $holiday->start_date->format('d M Y') }}</td>
                                            <td>{{ $holiday->end_date->format('d M Y') }}</td>
                                            <td>{{ $holiday->type }}</td>
                                            <td>{{ number_format($holiday->days, 1) }} days</td>
                                            <td>
                                                <span class="badge badge-{{ $holiday->status_color }}"
                                                    style="font-size: 15px">
                                                    {{ ucfirst($holiday->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif
@stop


@section('footer')
    &nbsp;
@stop

@section('js')
    <script>
        // Fetch weather data
        async function loadWeather() {
            const weatherWidget = document.getElementById('weatherWidget');

            try {
                const response = await fetch('https://wttr.in/{{ $userPostCode }}?format=j1');
                const data = await response.json();

                const current = data.current_condition[0];
                const temp = current.temp_C;
                const tempMin = data.weather[0].mintempC;
                const tempMax = data.weather[0].maxtempC;
                const desc = current.weatherDesc[0].value;
                const town = data.nearest_area[0].areaName[0].value;
                const country = data.nearest_area[0].country[0].value;

                // Map wttr.in weather codes to Weather Icons classes
                const codeMap = {
                    '113': 'wi-day-sunny',
                    '116': 'wi-day-cloudy',
                    '119': 'wi-cloudy',
                    '122': 'wi-cloudy',
                    '143': 'wi-fog',
                    '176': 'wi-showers',
                    '179': 'wi-snow',
                    '182': 'wi-sleet',
                    '185': 'wi-sleet',
                    '200': 'wi-thunderstorm',
                    '227': 'wi-snow',
                    '230': 'wi-snow',
                    '248': 'wi-fog',
                    '260': 'wi-fog',
                    '263': 'wi-sprinkle',
                    '266': 'wi-rain',
                    '281': 'wi-sleet',
                    '284': 'wi-sleet',
                    '293': 'wi-sprinkle',
                    '296': 'wi-rain',
                    '299': 'wi-rain',
                    '302': 'wi-rain',
                    '305': 'wi-rain',
                    '308': 'wi-rain',
                    '311': 'wi-sleet',
                    '314': 'wi-sleet',
                    '317': 'wi-sleet',
                    '320': 'wi-snow',
                    '323': 'wi-snow',
                    '326': 'wi-snow',
                    '329': 'wi-snow',
                    '332': 'wi-snow',
                    '335': 'wi-snow',
                    '338': 'wi-snow',
                    '350': 'wi-sleet',
                    '353': 'wi-sprinkle',
                    '356': 'wi-rain',
                    '359': 'wi-rain',
                    '362': 'wi-sleet',
                    '365': 'wi-sleet',
                    '368': 'wi-snow',
                    '371': 'wi-snow',
                    '374': 'wi-rain',
                    '377': 'wi-rain',
                    '386': 'wi-thunderstorm',
                    '389': 'wi-thunderstorm',
                    '392': 'wi-thunderstorm',
                    '395': 'wi-snow'
                };

                const iconClass = codeMap[current.weatherCode] || 'wi-day-cloudy';

                weatherWidget.innerHTML = `
             <div style="display: flex; flex-direction: column; align-items: center; gap: 0.3rem;">
                <div style="display: flex; align-items: center; gap: 1rem;">
                    <!-- Icon on left -->
                    <i class="wi ${iconClass} mt-2" style="font-size: 80px; color: #a0a0a0;"></i>
                    <!-- Description + Temp on right -->
                    <div style="display: flex; flex-direction: column; justify-content: center; text-align: left;">
                        <div style="font-weight: bold; font-size: 1rem;">${desc}</div>
                        <div style="font-size: 1.2rem;">${temp}°C (${tempMin}°C/${tempMax}°C)</div>
                    </div>
                </div>
                <!-- Location below -->
                <div style="font-size: 0.9rem; color: gray; margin-top: 0.1rem;">
                    ${town}, ${country}
                </div>
            </div>
        `;

            } catch (error) {
                console.error(error);
                weatherWidget.innerHTML = `<div style="color: gray;">Weather unavailable</div>`;
            }
        }

        document.addEventListener('DOMContentLoaded', loadWeather);

        // Real-time clock
        function startClock() {
            const clockEl = document.getElementById('clock');

            function ordinalSuffix(n) {
                const s = ["th", "st", "nd", "rd"];
                const v = n % 100;
                return s[(v - 20) % 10] || s[v] || s[0];
            }

            function updateClock() {
                const now = new Date();
                //get the day, date with th, month, year
                const day = now.toLocaleDateString('en-US', {
                    weekday: 'long'
                });
                const date = now.getDate();
                const dayWithSuffix = `${date}${ordinalSuffix(date)}`;
                const month = now.toLocaleDateString('en-US', {
                    month: 'long'
                });
                const year = now.getFullYear();

                @if (Auth::user()->country === 'United Kingdom')
                    // 24-hour format
                    let hours = now.getHours().toString().padStart(2, '0');
                    let minutes = now.getMinutes().toString().padStart(2, '0');
                    let seconds = now.getSeconds().toString().padStart(2, '0');
                    clockEl.textContent = `${day},  ${dayWithSuffix} ${month} ${year} ${hours}:${minutes}`;
                @else
                    // 12-hour format with AM/PM
                    let hours = now.getHours();
                    let ampm = hours >= 12 ? 'PM' : 'AM';
                    hours = hours % 12;
                    hours = hours ? hours : 12; // 0 => 12
                    let minutes = now.getMinutes().toString().padStart(2, '0');
                    let seconds = now.getSeconds().toString().padStart(2, '0');
                    clockEl.textContent = `${day},  ${dayWithSuffix} ${month} ${year} ${hours}:${minutes} ${ampm}`;
                @endif
            }

            updateClock();
            setInterval(updateClock, 1000);
        }

        startClock();
    </script>
@stop