@extends('layouts.guest')

@section('content')

{{-- TARİH VE EZAN SAATLERİ --}}
<div class="bg-white py-12">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mb-8 text-center">
            <div class="grid justify-center">
                <p class="text-3xl text-gray-500">{{ $hijriDate }}</p>
                <p class="text-base text-gray-400">{{ now()->locale('tr')->isoFormat('D MMMM Y') }}</p>
            </div>
        </div>
        <div class="mx-auto max-w-2xl lg:max-w-none">
            <dl class="grid grid-cols-3 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-6">
                @php
                // Set timezone to GMT+3 (Turkey timezone)
                $timezone = new DateTimeZone('Europe/Istanbul');
                $currentTime = \Carbon\Carbon::now($timezone);

                $prayerTimes = [
                'İMSAK' => \Carbon\Carbon::createFromFormat('H:i', '04:18', $timezone),
                'SABAH' => \Carbon\Carbon::createFromFormat('H:i', '05:55', $timezone),
                'ÖĞLE' => \Carbon\Carbon::createFromFormat('H:i', '13:06', $timezone),
                'İKİNDİ' => \Carbon\Carbon::createFromFormat('H:i', '16:56', $timezone),
                'AKŞAM' => \Carbon\Carbon::createFromFormat('H:i', '20:06', $timezone),
                'YATSI' => \Carbon\Carbon::createFromFormat('H:i', '21:37', $timezone),
                ];

                $nextPrayer = null;
                foreach ($prayerTimes as $name => $time) {
                if ($time->greaterThan($currentTime)) {
                $nextPrayer = $name;
                break;
                }
                }

                if (!$nextPrayer && count($prayerTimes) > 0) {
                $nextPrayer = array_key_first($prayerTimes);
                }
                @endphp

                @foreach ($prayerTimes as $name => $time)
                <div class="flex flex-col {{ $name === $nextPrayer ? 'bg-amber-100' : 'bg-gray-400/5' }} p-3 gap-y-1">
                    <dt
                        class="text-xs sm:text-sm/6 font-semibold {{ $name === $nextPrayer ? 'text-amber-700' : 'text-gray-400' }}">
                        {{ $name }}</dt>
                    @php
                    // Calculate remaining time to next prayer
                    $remainingTime = "";
                    if ($name === $nextPrayer) {
                    $diff = $currentTime->diffInMinutes($time, false);
                    $hours = floor(abs($diff) / 60);
                    $minutes = abs($diff) % 60;

                    if ($hours > 0) {
                    $remainingTime = $hours . " saat " . $minutes . " dakika";
                    } else {
                    $remainingTime = $minutes . " dakika";
                    }
                    }
                    @endphp
                    @if ($name === $nextPrayer)
                    <dt class="text-xs italic font-normal text-amber-500">{{ $remainingTime }} kaldı</dt>
                    @endif
                    <dd
                        class="order-first text-3xl font-semibold tracking-tight {{ $name === $nextPrayer ? 'text-amber-700' : 'text-gray-500' }}">
                        {{ $time->format('H:i') }}</dd>
                </div>
                @endforeach
            </dl>
        </div>
    </div>
</div>

{{-- SLIDER --}}
<div class="mx-auto px-0 sm:px-36">
    <img class="aspect-video rounded-none sm:rounded-3xl bg-gray-50 object-cover"
        src="{{ asset('assets/img/alican-helik-ulucami.jpg') }}" alt="photo by Alican HELİK">
</div>

{{-- CONTENT --}}
<div class="bg-white py-24 sm:py-32">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
        <div class="mx-auto max-w-2xl lg:text-center">
            <h2 class="text-base/7 font-semibold text-gray-600">BURSA ULU CAMİ'Yİ</h2>
            <p class="mt-2 text-5xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl lg:text-balance">
                DİNLEYİN</p>
            <p class="mt-6 text-lg/8 text-gray-600">Karekodlar yardımı ile
                <br>hat ve eserlerin ses kayıtlarına ulaşabilirsiniz.
            </p>
        </div>
        <div class="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-4xl">
            <dl class="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
                <div class="relative pl-16">
                    <dt class="text-base/7 font-semibold text-gray-900">
                        <div
                            class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-gray-600">
                            <span class="material-symbols-outlined text-white">
                                counter_1
                            </span>
                        </div>
                        KAREKODU OKUTUN
                    </dt>
                    <dd class="mt-2 text-base/7 text-gray-600">Sisteme giriş yapmak için giriş kapılarında ve
                        hat/eserlerin yakınlarına yerleştirilmiş karekodlardan birini okutun.</dd>
                </div>
                <div class="relative pl-16">
                    <dt class="text-base/7 font-semibold text-gray-900">
                        <div
                            class="absolute top-0 left-0 flex size-10 items-center justify-center rounded-lg bg-gray-600">
                            <span class="material-symbols-outlined text-white">
                                counter_2
                            </span>
                        </div>
                        HAT/ESER NUMARASINI SEÇİN
                    </dt>
                    <dd class="mt-2 text-base/7 text-gray-600">Sisteme giriş yaptıktan sonra dinlemek istediğiniz
                        hat/eserin numarasını seçin.</dd>
                </div>
            </dl>
        </div>
        <div class="mx-auto max-w-2xl lg:text-center mt-10">
            <a href="{{ route('artifacts') }}"
                class="rounded-md bg-gray-600 px-5 py-3.5 text-lg font-semibold text-white shadow-xs hover:bg-gray-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600">TÜM
                ESERLER</a>
        </div>
    </div>
</div>

@endsection