@extends('layouts.app')
@section('urlContent')
    {!! view('components.breadcrumbs', [
        'b_items' => [
            'Ajanda' => '/agenda',
        ],
    ]) !!}
@endsection
@section('content')
    <div class="lg:flex lg:h-full lg:flex-col w-full pt-5">
        <header class="flex items-center justify-between border-b border-gray-200 py-4 lg:flex-none">
            <div class="flex gap-6">
                <button type="button" value="{{ $current_month->month - 1 }}" name="month"
                    class="-m-1.5 bg-indigo-600 rounded-xl flex flex-none items-center justify-center px-2 py-1 text-gray-200 hover:text-gray-500 previous">
                    <span class="sr-only">Previous month</span>
                    <!-- Heroicon name: mini/chevron-left -->
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
                <h1 class="text-xl font-semibold text-gray-300">
                    <time
                        datetime="{{ \Carbon\Carbon::parse($current_month->date)->format('Y-m') }}" class="title">{{ $current_month->month_name }}
                        {{ $current_month->year }}</time>
                </h1>
                <button type="button" value="{{ $current_month->month + 1 }}" name="month"
                    class="-m-1.5 bg-indigo-600 rounded-xl flex flex-none items-center justify-center px-2 py-1 text-gray-200 hover:text-gray-500 next">
                    <span class="sr-only">Next month</span>
                    <!-- Heroicon name: mini/chevron-right -->
                    <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                            clip-rule="evenodd" />
                    </svg>
                </button>
            </div>
            <div class="flex items-center">
                <div class="md:ml-4 md:flex md:items-center">
                    <button type="button"
                        class="dayButton rounded-md border border-transparent bg-indigo-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                        Bugün için Etkinlik Ekle
                        <time data-datetime="{{ date('Y-m-d') }}"></time>
                    </button>
                </div>
            </div>
        </header>
        <div class="shadow ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
            <div
                class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none">
                <div class="flex justify-center bg-white py-2">
                    <span class="sr-only sm:not-sr-only">Pazartesi</span>
                </div>
                <div class="flex justify-center bg-white py-2">
                    <span class="sr-only sm:not-sr-only">Salı</span>
                </div>
                <div class="flex justify-center bg-white py-2">
                    <span class="sr-only sm:not-sr-only">Çarşamba</span>
                </div>
                <div class="flex justify-center bg-white py-2">
                    <span class="sr-only sm:not-sr-only">Perşembe</span>
                </div>
                <div class="flex justify-center bg-white py-2">
                    <span class="sr-only sm:not-sr-only">Cuma</span>
                </div>
                <div class="flex justify-center bg-white py-2">
                    <span class="sr-only sm:not-sr-only">Cumartesi</span>
                </div>
                <div class="flex justify-center bg-white py-2">
                    <span class="sr-only sm:not-sr-only">Pazar</span>
                </div>
            </div>
            <div
                class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto overflow-y-auto h-[calc(100vh-240px)] ">
                <div class="hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-6 lg:gap-px">
                    @foreach ($allData as $data)
                        @if ($data->day == $current_day && $data->month == $current_month->month)
                            @php
                                $selectedActivity = $activities->whereBetween('dateTime', [today(), today()->addHours(23)]);
                            @endphp
                            <div class="dayButton relative py-2 px-3 bg-gray-50 text-gray-500">
                                <time
                                    class="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white"
                                    data-datetime="{{ $data->date }}">{{ $data->day }}</time>
                                @if ($selectedActivity)
                                    <ol class="mt-2">
                                        @foreach ($selectedActivity as $activity)
                                            @if ($loop->index >= 3)
                                                <p
                                                    class="absolute top-2 right-1 text-xs font-medium rounded-full px-2 py-1 bg-green-600 text-white">
                                                    +{{ count($selectedActivity) - 3 }} etkinlik</p>
                                            @else
                                                <li>
                                                    <div class="group cursor-pointer flex">
                                                        <p data-activity="{{ $activity->id }}"
                                                            class="activityButton flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
                                                            {{ $activity->title }}
                                                        </p>
                                                        <time
                                                            class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">{{ $activity->hour }}</time>
                                                    </div>
                                                </li>
                                            @endif
                                        @endforeach
                                    </ol>
                                @endif
                            </div>
                        @else
                            @php
                                $selectedActivity = $activities->whereBetween('dateTime', [\Carbon\Carbon::parse($data->date), \Carbon\Carbon::parse($data->date)->addHours(23)]);
                            @endphp
                            <div class="dayButton relative bg-gray-50 py-2 px-3 text-gray-500">
                                <time data-datetime="{{ $data->date }}">{{ $data->day }}</time>
                                @if ($selectedActivity)
                                    <ol class="mt-2">
                                        @foreach ($selectedActivity as $activity)
                                            @if ($loop->index >= 3)
                                                <p
                                                    class="absolute top-2 right-1 text-xs font-medium rounded-full px-2 py-1 bg-green-600 text-white">
                                                    +{{ count($selectedActivity) - 3 }} etkinlik</p>
                                            @else
                                                <li>
                                                    <div class="group cursor-pointer flex">
                                                        <p data-activity="{{ $activity->id }}"
                                                            class="activityButton flex-auto font-medium text-gray-900 group-hover:text-indigo-600">
                                                            {{ $activity->title }}
                                                        </p>
                                                        <time
                                                            class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">{{ $activity->hour }}</time>
                                                    </div>
                                                </li>
                                            @endif
                                        @endforeach
                                    </ol>
                                @endif
                            </div>
                        @endif
                    @endforeach

                    {{-- <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2021-12-28">28</time>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2021-12-29">29</time>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2021-12-30">30</time>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2021-12-31">31</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-01">1</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-01">2</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-03">3</time>
                        <ol class="mt-2">
                            <li>
                                <a href="#" class="group flex">
                                    <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
                                        Design review</p>
                                    <time datetime="2022-01-03T10:00"
                                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">10AM</time>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="group flex">
                                    <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
                                        Sales meeting</p>
                                    <time datetime="2022-01-03T14:00"
                                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">2PM</time>
                                </a>
                            </li>
                        </ol>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-04">4</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-05">5</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-06">6</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-07">7</time>
                        <ol class="mt-2">
                            <li>
                                <a href="#" class="group flex">
                                    <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
                                        Date night</p>
                                    <time datetime="2022-01-08T18:00"
                                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">6PM</time>
                                </a>
                            </li>
                        </ol>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-08">8</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-09">9</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-10">10</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-11">11</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-12"
                            class="flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white">12</time>
                        <ol class="mt-2">
                            <li>
                                <a href="#" class="group flex">
                                    <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
                                        Sam's birthday party</p>
                                    <time datetime="2022-01-25T14:00"
                                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">2PM</time>
                                </a>
                            </li>
                        </ol>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-13">13</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-14">14</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-15">15</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-16">16</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-17">17</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-18">18</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-19">19</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-20">20</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-21">21</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-22">22</time>
                        <ol class="mt-2">
                            <li>
                                <a href="#" class="group flex">
                                    <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
                                        Maple syrup museum</p>
                                    <time datetime="2022-01-22T15:00"
                                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">3PM</time>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="group flex">
                                    <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
                                        Hockey game</p>
                                    <time datetime="2022-01-22T19:00"
                                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">7PM</time>
                                </a>
                            </li>
                        </ol>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-23">23</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-24">24</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-25">25</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-26">26</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-27">27</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-28">28</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-29">29</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-30">30</time>
                    </div>
                    <div class="relative bg-white py-2 px-3">
                        <time datetime="2022-01-31">31</time>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2022-02-01">1</time>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2022-02-02">2</time>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2022-02-03">3</time>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2022-02-04">4</time>
                        <ol class="mt-2">
                            <li>
                                <a href="#" class="group flex">
                                    <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">
                                        Cinema with friends</p>
                                    <time datetime="2022-02-04T21:00"
                                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">9PM</time>
                                </a>
                            </li>
                        </ol>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2022-02-05">5</time>
                    </div>
                    <div class="relative bg-gray-50 py-2 px-3 text-gray-500">
                        <time datetime="2022-02-06">6</time>
                    </div> --}}
                </div>
                <div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px lg:hidden">
                    <!--
                                                                                                                                                                                                                            Always include: "flex h-14 flex-col py-2 px-3 hover:bg-gray-100 focus:z-10"
                                                                                                                                                                                                                            Is current month, include: "bg-white"
                                                                                                                                                                                                                            Is not current month, include: "bg-gray-50"
                                                                                                                                                                                                                            Is selected or is today, include: "font-semibold"
                                                                                                                                                                                                                            Is selected, include: "text-white"
                                                                                                                                                                                                                            Is not selected and is today, include: "text-indigo-600"
                                                                                                                                                                                                                            Is not selected and is current month, and is not today, include: "text-gray-900"
                                                                                                                                                                                                                            Is not selected, is not current month, and is not today: "text-gray-500"
                                                                                                                                                                                                                          -->
                    {{-- <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                                <!--
                                Always include: "ml-auto"
                                Is selected, include: "flex h-6 w-6 items-center justify-center rounded-full"
                                Is selected and is today, include: "bg-indigo-600"
                                Is selected and is not today, include: "bg-gray-900"
                                -->
                        <time datetime="2021-12-27" class="ml-auto">27</time>
                        <span class="sr-only">0 events</span>
                    </button> --}}
                    @foreach ($allData as $data)
                        @if ($data->day == $current_day && $data->month == $current_month->month)
                            <button type="button"
                                class="flex h-14 flex-col bg-indigo-600 py-2 px-3 text-white hover:bg-gray-100 hover:text-gray-600 focus:z-10 font-semibold transition-colors duration-150 ease-linear">
                                <time datetime="{{ $data->date }}" class="ml-auto">{{ $data->day }}</time>
                                <span class="sr-only">0 events</span>
                            </button>
                        @else
                            <button type="button"
                                class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                                <time datetime="{{ $data->date }}" class="ml-auto">{{ $data->day }}</time>
                                <span class="sr-only">0 events</span>
                            </button>
                        @endif
                    @endforeach
                    {{-- <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2021-12-28" class="ml-auto">28</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2021-12-29" class="ml-auto">29</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2021-12-30" class="ml-auto">30</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2021-12-31" class="ml-auto">31</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-01" class="ml-auto">1</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-02" class="ml-auto">2</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-03" class="ml-auto">3</time>
                        <span class="sr-only">2 events</span>
                        <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
                            <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                            <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                        </span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-04" class="ml-auto">4</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-05" class="ml-auto">5</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-06" class="ml-auto">6</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-07" class="ml-auto">7</time>
                        <span class="sr-only">1 event</span>
                        <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
                            <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                        </span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-08" class="ml-auto">8</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-09" class="ml-auto">9</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-10" class="ml-auto">10</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-11" class="ml-auto">11</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 font-semibold text-indigo-600 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-12" class="ml-auto">12</time>
                        <span class="sr-only">1 event</span>
                        <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
                            <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                        </span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-13" class="ml-auto">13</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-14" class="ml-auto">14</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-15" class="ml-auto">15</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-16" class="ml-auto">16</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-17" class="ml-auto">17</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-18" class="ml-auto">18</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-19" class="ml-auto">19</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-20" class="ml-auto">20</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-21" class="ml-auto">21</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 font-semibold text-white hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-22"
                            class="ml-auto flex h-6 w-6 items-center justify-center rounded-full bg-gray-900">22</time>
                        <span class="sr-only">2 events</span>
                        <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
                            <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                            <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                        </span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-23" class="ml-auto">23</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-24" class="ml-auto">24</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-25" class="ml-auto">25</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-26" class="ml-auto">26</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-27" class="ml-auto">27</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-28" class="ml-auto">28</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-29" class="ml-auto">29</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-30" class="ml-auto">30</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-white py-2 px-3 text-gray-900 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-01-31" class="ml-auto">31</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-02-01" class="ml-auto">1</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-02-02" class="ml-auto">2</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-02-03" class="ml-auto">3</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-02-04" class="ml-auto">4</time>
                        <span class="sr-only">1 event</span>
                        <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
                            <span class="mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-gray-400"></span>
                        </span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-02-05" class="ml-auto">5</time>
                        <span class="sr-only">0 events</span>
                    </button>
                    <button type="button"
                        class="flex h-14 flex-col bg-gray-50 py-2 px-3 text-gray-500 hover:bg-gray-100 focus:z-10">
                        <time datetime="2022-02-06" class="ml-auto">6</time>
                        <span class="sr-only">0 events</span>
                    </button> --}}
                </div>
            </div>
        </div>
        <div class="py-10 lg:hidden w-full">
            <ol
                class="divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow ring-1 ring-black ring-opacity-5">
                <li class="group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
                    <div class="flex-auto">
                        <p class="font-semibold text-gray-900">Maple syrup museum</p>
                        <time datetime="2022-01-15T09:00" class="mt-2 flex items-center text-gray-700">
                            <!-- Heroicon name: mini/clock -->
                            <svg class="mr-2 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"
                                fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
                                    clip-rule="evenodd" />
                            </svg>
                            3PM
                        </time>
                    </div>
                    <a href="#"
                        class="ml-6 flex-none self-center rounded-md border border-gray-300 bg-white py-2 px-3 font-semibold text-gray-700 opacity-0 shadow-sm hover:bg-gray-50 focus:opacity-100 group-hover:opacity-100">Edit<span
                            class="sr-only">, Maple syrup museum</span></a>
                </li>

                <li class="group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
                    <div class="flex-auto">
                        <p class="font-semibold text-gray-900">Hockey game</p>
                        <time datetime="2022-01-22T19:00" class="mt-2 flex items-center text-gray-700">
                            <!-- Heroicon name: mini/clock -->
                            <svg class="mr-2 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd"
                                    d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
                                    clip-rule="evenodd" />
                            </svg>
                            7PM
                        </time>
                    </div>
                    <a href="#"
                        class="ml-6 flex-none self-center rounded-md border border-gray-300 bg-white py-2 px-3 font-semibold text-gray-700 opacity-0 shadow-sm hover:bg-gray-50 focus:opacity-100 group-hover:opacity-100">Edit<span
                            class="sr-only">, Hockey game</span></a>
                </li>
            </ol>
        </div>
    </div>
    @include('components.agenda.addEvent')
    @include('components.agenda.detail')
    @include('components.agenda.error-modal')
@endsection
@section('javascript')
    <script src="{{ asset('js/agenda.js') }}"></script>
@endsection