@extends('layouts.frontend', ['body_class' => 'bg-aqua/20'])

@php
    SEOMeta::setTitle('Lakás - ' . $flat->name);
    $namefield = 'name_' . app()->getLocale();

    $similar_apartments = $flat->get_similar();
@endphp

@section('content')
    <x-frontend.header />

    <x-frontend.main pattern="aqua">


        <x-frontend.section class="py-8 lg:py-16">
            <x-frontend.container size="large">
                <x-frontend.animation>

                    <x-frontend.content.box>
                        <div class="flex flex-col gap-8">

                            <div class="grid items-center grid-cols-3 gap-2 md:grid-cols-4 lg:grid-cols-6">
                                <div>
                                    <div class="text-sm text-sage">{{ __('Lakás') }}</div>
                                    <div class="text-lg font-bold lg:text-xl xl:text-2xl">{{ $flat->name }}</div>
                                </div>
                                <div>
                                    <div class="text-sm text-sage">{{ __('Emelet') }}</div>
                                    <div class="text-lg font-bold lg:text-xl xl:text-2xl">
                                        {{ $flat['floor'] == 0 ? __('Fsz') : $flat['floor'] }}.
                                    </div>
                                </div>
                                <div>
                                    <div class="text-sm text-sage">{{ __('Szoba') }}</div>
                                    <div class="text-lg font-bold lg:text-xl xl:text-2xl">{{ $flat->rooms }}</div>
                                </div>
                                <div>
                                    <div class="text-sm text-sage">{{ __('Alapterület') }}</div>
                                    <div class="text-lg font-bold lg:text-xl xl:text-2xl">{{ $flat->size }}
                                        {!! __('m<sup>2</sup>') !!}
                                    </div>
                                </div>
                                <div>
                                    <div class="text-sm text-sage">{{ __('Terasz') }}</div>
                                    @if ($flat['terrace'] > 0)
                                        <div class="text-lg font-bold lg:text-xl xl:text-2xl">{{ (float) $flat->terrace }}
                                            {!! __('m<sup>2</sup>') !!}
                                        </div>
                                    @else
                                        -
                                    @endif
                                </div>
                                <div>
                                    <div class="text-sm text-sage">{{ __('Kert') }}</div>
                                    @if ($flat['garden'] > 0)
                                        <div class="text-lg font-bold lg:text-xl xl:text-2xl">{{ (float) $flat->garden }}
                                            {!! __('m<sup>2</sup>') !!}
                                        </div>
                                    @else
                                        -
                                    @endif
                                </div>
                            </div>

                            <div class="grid gap-8 grid-col-1 md:grid-cols-12">
                                <div class="md:col-span-7 lg:col-span-8">
                                    <div class="relative overflow-hidden border shadow-xl rounded-2xl border-iron/20">
                                        @if ($flat->is_penthouse)
                                            <div
                                                class="absolute left-0 z-10 px-4 py-1 text-white top-7 rounded-r-md bg-atlantis">
                                                Penthouse
                                            </div>
                                        @endif
                                        <img src="{{ $flat->img }}" alt="{{ $flat->name }}" width="1280"
                                            height="1280" class="w-full h-auto">
                                    </div>
                                </div>
                                <div class="md:col-span-5 lg:col-span-4">

                                    <div class="mb-8 overflow-hidden border shadow-xl rounded-2xl border-iron/20">
                                        <img src="{{ $flat->floor_img }}" alt="{{ $flat->name }}" width="640"
                                            height="640" class="w-full h-auto">
                                    </div>

                                    @php
                                        $flat_details = $flat->get_rooms();
                                    @endphp

                                    <table class="w-full mb-8">
                                        <tbody>
                                            @foreach ($flat_details as $flat_detail)
                                                <tr class="border-b border-iron/20">
                                                    <td class="py-1.5 font-bold text-mantis">{{ $loop->iteration }}</td>
                                                    <td class="py-1.5">{{ $flat_detail[$namefield] }}</td>
                                                    <td class="py-1.5 text-right">{{ $flat_detail['size'] }}
                                                        {!! __('m<sup>2</sup>') !!}
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>

                                    <p>
                                        <x-frontend.form.button href="{{ $flat->floorplan_pdf }}"
                                            target="_blank">
                                            Alaprajz letöltése (.pdf)
                                        </x-frontend.form.button>
                                    </p>

                                </div>
                            </div>

                            <div class="lg:w-2/3">
                                <p class="text-sm opacity-50">Az adatlapon megjelölt alaprajzi méretek vakolatlan falak
                                    közötti méretek, a kivitelezés során kismértékű méretváltozás lehetséges. Ezen
                                    dokumentációban közölt adatok a kiviteli tervek alapján kerültek megállapításra
                                    kizárólag tájékoztató jelleggel, nem minősülnek ajánlattételnek. Az alaprajzon
                                    feltüntetett bútorok tájékoztató jellegűek, azok rajzi elhelyezése nem feltétlenül
                                    tükrözi azok jövőbeni elhelyezhetőségét, illetve azok nem képzik a lakás részét.</p>
                            </div>

                        </div>
                    </x-frontend.content.box>

                </x-frontend.animation>
            </x-frontend.container>
        </x-frontend.section>


        {{--
        <x-frontend.section class="py-8 bg-white lg:py-16">
            <x-frontend.container size="medium">

                <div class="flex flex-col gap-8 lg:gap-16">

                    <x-frontend.animation>
                        <div class="w-full panorama-viewer aspect-video"
                            data-image="/kepek/sitebuild/apartments/panorama.jpg">
                        </div>

                        @push('scripts')
                            @vite(['resources/js/panorama.js'])
                        @endpush
                    </x-frontend.animation>

                    @if ($flat->t_3d)
                        <x-frontend.animation>

                            @php
                                $images = [
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/01.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/02.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/03.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/04.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/05.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/06.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/07.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/08.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                    [
                                        'img' => '/kepek/gallery/belso-latvanytervek/09.jpg',
                                        'alt_text' => 'Vadvirág Residence',
                                    ],
                                ];
                            @endphp

                            <x-frontend.gallery.images :images=$images />

                        </x-frontend.animation>
                    @endif

                </div>

            </x-frontend.container>
        </x-frontend.section>
         --}}

        @php
            $payment_structures = [
                __('A vételár 10%-a fizetése előlegként előszerződés kötésekor.'),
                __('A vételár további 10%-a fizetése 20%-os műszaki készültségnél.'),
                __('A vételár további  35%-a fizetése 55%-os műszaki készültségnél'),
                __('A vételár további  30%-a fizetése 85%-os műszaki készültségnél.'),
                __('A vételár további  10%-a fizetése 100%-os műszaki készültségnél.'),
                __('A végleges szerződéskötéskor maradék 5% vételárrészlet fizetése.'),
            ];
        @endphp

        <x-frontend.section class="py-8 bg-gradient-to-r from-aqua/20 to-white lg:py-16">
            <x-frontend.container size="medium">
                <x-frontend.animation>

                    <x-frontend.accordion>
                        <x-frontend.accordion.item icon="/kepek/apartments/floorplan/lakashitel.svg"
                            title="Lakáshitel és CSOK információ">
                            <p>Egyedi kamatkedvezményekért keresse <a href="/hu/kapcsolat">pénzügyi szakértő</a>
                                kollégánkat!</p>
                        </x-frontend.accordion.item>
                        <x-frontend.accordion.item icon="/kepek/apartments/floorplan/fizetesi-utemezes.svg"
                            title="Fizetési ütemezés">

                            <div class="flex flex-col gap-2">
                                @foreach ($payment_structures as $payment_structure)
                                    <div class="flex items-center gap-4">
                                        <div
                                            class="flex items-center justify-center w-8 h-8 text-center text-white rounded-full bg-mantis">
                                            {{ $loop->iteration }}</div>
                                        <div>{{ $payment_structure }}</div>
                                    </div>
                                @endforeach
                            </div>

                        </x-frontend.accordion.item>
                        <x-frontend.accordion.item icon="/kepek/apartments/floorplan/muszaki-leiras.svg"
                            title="Műszaki leírás, dokumentáció">
                            <p>
                                <a href="/downloads/vadvirag-residence-muszaki-tartalom.pdf" target="_blank">Műszaki
                                    tájékoztató letöltése (.pdf)</a>
                            </p>
                        </x-frontend.accordion.item>
                    </x-frontend.accordion>

                </x-frontend.animation>
            </x-frontend.container>
        </x-frontend.section>


        <x-frontend.section class="py-8 lg:py-16">
            <x-frontend.container size="medium">
                <x-frontend.animation>
                    <x-frontend.content.box>
                        <x-frontend.contact :hidesize="true" />
                    </x-frontend.content.box>
                </x-frontend.animation>
            </x-frontend.container>
        </x-frontend.section>


        <x-frontend.section class="py-8 bg-aqua/20 lg:py-16">
            <x-frontend.container size="large">
                <x-frontend.section.title class="mb-8 lg:mb-16" title="{{ __('Hasonló lakások') }}" center />
                <x-frontend.apartment.list :apartments="$similar_apartments" limit="3" />
            </x-frontend.container>
        </x-frontend.section>


    </x-frontend.main>

    <x-frontend.footer />
@endsection