<x-app-layout>
    <x-slot name="header">
        {{ __('Dashboard') }}
    </x-slot>

    <div class="p-6 space-y-6">
        @php
            $now = now();
            $startOfMonth = $now->copy()->startOfMonth();
            $endOfMonth = $now->copy()->endOfMonth();
            $startWeekday = (int) $startOfMonth->dayOfWeekIso; // 1 (Mon) - 7 (Sun)
            $daysInMonth = $endOfMonth->day;

            $calendarCells = [];
            for ($i = 1; $i < $startWeekday; $i++) {
                $calendarCells[] = null;
            }
            for ($day = 1; $day <= $daysInMonth; $day++) {
                $calendarCells[] = $day;
            }
            while (count($calendarCells) % 7 !== 0) {
                $calendarCells[] = null;
            }
            $weekdays = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
        @endphp

        <section>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {{-- Tasks widget (top-left) --}}
                <x-dashboard.widget-card
                    title="Tasks"
                    subtitle="Your to-do list (placeholder)"
                >
                    <ul class="space-y-2">
                        @foreach([
                            ['label' => 'Review today\'s leads', 'badge' => 'Today'],
                            ['label' => 'Follow up on test drives', 'badge' => 'Today'],
                            ['label' => 'Prepare tomorrow\'s showroom', 'badge' => 'Tomorrow'],
                            ['label' => 'Update pipeline notes', 'badge' => 'Tomorrow'],
                            ['label' => 'Check outstanding valuations', 'badge' => 'Fri'],
                            ['label' => 'Plan weekly team huddle', 'badge' => 'Mon'],
                        ] as $task)
                            <li class="flex items-center justify-between gap-3">
                                <div class="flex items-center gap-3">
                                    <input
                                        type="checkbox"
                                        class="h-4 w-4 rounded border-gray-300 text-red-600 focus:ring-red-500"
                                    >
                                    <span class="text-sm text-gray-800">
                                        {{ $task['label'] }}
                                    </span>
                                </div>
                                <span class="inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-600">
                                    {{ $task['badge'] }}
                                </span>
                            </li>
                        @endforeach
                    </ul>

                    <x-slot:actions>
                        <a href="#"
                           class="inline-flex items-center text-xs font-medium text-red-600 hover:text-red-700">
                            View all tasks
                        </a>
                    </x-slot:actions>
                </x-dashboard.widget-card>

                {{-- Notifications widget (top-right) --}}
                <x-dashboard.widget-card
                    title="Notifications"
                    subtitle="Recent alerts (placeholder)"
                >
                    <ul class="space-y-2">
                        @php
                            $notifications = [
                                ['type' => 'info', 'message' => 'New lead assigned to you.', 'time' => '5m ago'],
                                ['type' => 'warning', 'message' => '2 valuations are approaching due date.', 'time' => '24m ago'],
                                ['type' => 'info', 'message' => 'Team meeting scheduled for tomorrow.', 'time' => '1h ago'],
                                ['type' => 'info', 'message' => 'Stock update completed.', 'time' => '3h ago'],
                                ['type' => 'warning', 'message' => 'One deal file still pending documents.', 'time' => 'Today'],
                            ];
                        @endphp
                        @foreach($notifications as $notification)
                            @php
                                $isWarning = $notification['type'] === 'warning';
                                $dotClasses = $isWarning
                                    ? 'bg-amber-400'
                                    : 'bg-blue-400';
                            @endphp
                            <li class="flex items-start justify-between gap-3">
                                <div class="flex items-start gap-2">
                                    <span class="mt-1 h-2 w-2 rounded-full {{ $dotClasses }}"></span>
                                    <p class="text-sm text-gray-800">
                                        {{ $notification['message'] }}
                                    </p>
                                </div>
                                <span class="shrink-0 text-xs text-gray-400">
                                    {{ $notification['time'] }}
                                </span>
                            </li>
                        @endforeach
                    </ul>

                    <x-slot:actions>
                        <button
                            type="button"
                            disabled
                            class="inline-flex items-center rounded-full border border-gray-200 bg-gray-50 px-3 py-1 text-xs font-medium text-gray-500 cursor-not-allowed"
                        >
                            Mark all as read
                        </button>
                    </x-slot:actions>
                </x-dashboard.widget-card>

                {{-- Calendar widget (bottom-left) --}}
                <x-dashboard.widget-card
                    title="Calendar"
                    subtitle="{{ $now->format('F Y') }}"
                    x-data="{ selectedDay: {{ $now->day }} }"
                >
                    <div class="space-y-3">
                        <div class="grid grid-cols-7 text-[10px] font-medium text-gray-500 gap-1">
                            @foreach($weekdays as $dayLabel)
                                <div class="text-center">
                                    {{ $dayLabel }}
                                </div>
                            @endforeach
                        </div>

                        <div class="grid grid-cols-7 text-xs gap-1">
                            @foreach($calendarCells as $day)
                                @if($day === null)
                                    <div class="aspect-square rounded-md"></div>
                                @else
                                    <button
                                        type="button"
                                        class="aspect-square w-full flex items-center justify-center rounded-md"
                                        :class="selectedDay === {{ $day }}
                                            ? 'bg-red-600 text-white font-semibold ring-2 ring-red-500/60'
                                            : 'text-gray-700 bg-gray-50'"
                                        @click="selectedDay = {{ $day }}"
                                    >
                                        {{ $day }}
                                    </button>
                                @endif
                            @endforeach
                        </div>

                        <div class="pt-2 border-t border-gray-100 space-y-1">
                            <p class="text-xs font-medium text-gray-600">
                                Upcoming
                            </p>
                            <ul class="space-y-1">
                                <li class="text-xs text-gray-700">
                                    Showroom huddle &mdash; Tomorrow 08:30
                                </li>
                                <li class="text-xs text-gray-700">
                                    Weekly sales review &mdash; Fri 16:00
                                </li>
                            </ul>
                        </div>
                    </div>
                </x-dashboard.widget-card>

                {{-- Quick Notes widget (bottom-right) --}}
                <x-dashboard.widget-card
                    title="Quick Notes"
                    subtitle="Personal scratchpad (placeholder)"
                >
                    <textarea
                        class="min-h-[120px] w-full rounded-lg border border-dashed border-gray-300 bg-gray-50 p-3 text-sm text-gray-700 focus:border-red-500 focus:ring-red-500"
                        placeholder="Jot down quick notes for today (demo only, not saved yet)..."
                    ></textarea>

                    <p class="mt-3 text-xs text-gray-400">
                        This will become notes &amp; reminders in Sprint 2.
                    </p>
                </x-dashboard.widget-card>
            </div>
        </section>
    </div>
</x-app-layout>
