@extends('layouts._guest')

@section('content')

<div class="bg-white ">

    <header class="relative">
        <nav aria-label="Top">
            <!-- Top navigation -->
            <div class="bg-emerald-700">
                <div class="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">

                    <p class="flex-1 text-center text-sm font-medium text-white lg:flex-none">Bu işletmede 2.gecelik
                        rezervasyonda %30 indirim
                        vardır.</p>

                </div>
            </div>
        </nav>
    </header>

    <main class="py-6">
        <nav aria-label="Breadcrumb">
            <ol role="list" class="mx-auto flex max-w-2xl items-center space-x-2 px-4 sm:px-6 lg:max-w-7xl lg:px-8">
                <li>
                    <a href="{{ route('index') }}" class="flex items-center">
                        <img class="h-6 w-6 mr-2" src="https://cdn.apper.com.tr/img/gokyuzukutulari/icon-gk-logo.svg"
                            alt="">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"
                            class="text-gray-300">
                            <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
                        </svg>
                    </a>
                </li>
                <li>
                    <div class="flex items-center">
                        <a href="#" class="mr-2 text-sm font-medium text-gray-900">{{ $list->city }}</a>
                        <svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" aria-hidden="true"
                            class="h-5 w-4 text-gray-300">
                            <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
                        </svg>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <a href="#" class="mr-2 text-sm font-medium text-gray-900">{{ $list->state }}</a>
                        <svg width="16" height="20" viewBox="0 0 16 20" fill="currentColor" aria-hidden="true"
                            class="h-5 w-4 text-gray-300">
                            <path d="M5.697 4.34L8.98 16.532h1.327L7.025 4.341H5.697z" />
                        </svg>
                    </div>
                </li>

                <li class="text-sm">
                    <a href="#" aria-current="page" class="font-medium text-gray-500 hover:text-gray-600">{{
                        $list->title }}</a>
                </li>
            </ol>
        </nav>

        <!-- IMAGES -->
        <div class="mx-auto mt-6 max-w-2xl sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:gap-x-8 lg:px-8">
            <img src="{{ asset('uploads/img/locations/'.$list->slug.'/'.$list->slug.'.jpg') }}"
                alt="Two each of gray, white, and black shirts laying flat."
                class="aspect-3/4 size-full sm:rounded-lg mb-1 rounded-none object-cover">
            <div class="lg:grid lg:grid-cols-1 lg:gap-y-8">
                <img src="{{ asset('uploads/img/locations/'.$list->slug.'/'.$list->slug.'-3.jpg') }}"
                    alt="Model wearing plain black basic tee."
                    class="aspect-3/2 size-full rounded-none sm:rounded-lg mb-1 object-cover">
                <img src="{{ asset('uploads/img/locations/'.$list->slug.'/'.$list->slug.'-2.jpg') }}"
                    alt="Model wearing plain gray basic tee."
                    class="aspect-3/2 size-full rounded-none sm:rounded-lg mb-1 object-cover">
            </div>
            <img src="{{ asset('uploads/img/locations/'.$list->slug.'/'.$list->slug.'-4.jpg') }}"
                alt="Model wearing plain white basic tee."
                class="aspect-4/5 size-full object-cover sm:rounded-lg mb-1 rounded-none lg:aspect-3/4 lg:block">
        </div>

        <!-- INFOS -->
        <div
            class="mx-auto max-w-2xl px-4 pt-10 sm:px-6 lg:grid lg:max-w-7xl lg:grid-cols-3 lg:grid-rows-[auto_auto_1fr] lg:gap-x-8 lg:px-8 lg:pt-16">
            <div class="lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8">
                <h1 class="text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl">{{ $list->title }} <span
                        class="text-lg font-normal italic">içinde</span>
                </h1>
                <p class="flex items-center text-xl font-normal tracking-tight text-gray-900 sm:text-2xl">
                    <img class="h-5 w-auto pr-2" src="https://cdn.apper.com.tr/img/gokyuzukutulari/icon-gk-logo.svg"
                        alt="">
                    Gökyüzü Kutusunda kal
                </p>
            </div>

            <!-- Options -->
            <div class="mt-4 lg:row-span-3 lg:mt-0">
                <h2 class="sr-only">Product information</h2>
                <p class="text-3xl font-bold tracking-tight text-gray-900">{{ number_format($list->price, 0, ',', '.')
                    }}<span class="font-medium text-lg pl-1 text-gray-400">TRL / 2 kişi, 1 gece</span></p>

                <!-- Reviews -->
                <div class="mt-4">
                    <h3 class="sr-only">Reviews</h3>
                    <div class="flex items-center">
                        <div class="flex items-center">
                            <div class="flex gap-x-2 items-center">
                                <span class="text-lg text-gray-600">Kutu sayısı:</span>
                                @for($i = 0; $i < $list->bedrooms; $i++)
                                    <img class="h-5 w-auto"
                                        src="https://cdn.apper.com.tr/img/gokyuzukutulari/icon-gk-logo.svg" alt="">
                                    @endfor
                            </div>
                        </div>
                    </div>
                </div>

                <form class="mt-10">
                    <button type="submit"
                        class="mt-10 flex w-full items-center justify-center rounded-md border border-transparent bg-gray-900 px-8 py-3 text-base font-medium text-white hover:bg-gray-700 focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:outline-hidden">
                        REZERVASYON
                    </button>
                </form>
            </div>

            <div class="py-10 lg:col-span-2 lg:col-start-1 lg:border-r lg:border-gray-200 lg:pt-6 lg:pr-8 lg:pb-16">
                <!-- DETAILS -->
                <div>
                    <h3 class="sr-only">Description</h3>

                    <div class="space-y-6">
                        <p class="text-lg text-gray-900">{{ $list->description }}</p>
                    </div>
                </div>

                <div class="mt-10">
                    <h2 class="text-lg font-medium text-gray-900">Olanaklar</h2>

                    <div class="mt-4">
                        <ul role="list" class="list-disc space-y-2 pl-4 text-sm">
                            @foreach($list->specs as $item)
                            <li class="text-gray-400"><span class="text-gray-600">{{ $item->name }}</span></li>
                            @endforeach
                        </ul>
                    </div>
                </div>

                <section aria-labelledby="shipping-heading" class="mt-10">
                    <h2 id="shipping-heading" class="text-lg font-medium text-gray-900">Diğer detaylar</h2>

                    <div class="mt-4 space-y-6">
                        <p class="text-sm text-gray-600">The 6-Pack includes two black, two white, and two heather gray
                            Basic Tees. Sign up for
                            our subscription service and be the first to get new, exciting colors, like our upcoming
                            &quot;Charcoal Gray&quot;
                            limited release.</p>
                    </div>
                </section>
            </div>

            <div class="lg:col-span-2 lg:border-r lg:border-gray-200 lg:pr-8 pb-48">
                @include('_partials.reviews')
            </div>
        </div>
    </main>

</div>

@endsection