@extends('layouts.main')

@section('breadcrumbs')
    {{ Breadcrumbs::render('car', $car) }}
@endsection

@section('content')
    <div class="container-default mx-auto px-5 xl:px-0">
        <div class="flex justify-between items-center max-sm:flex-col">
            <h1 class="font-extrabold dark:text-white overflow-hidden lg:text-4xl text-2xl">{{ $car->name }}</h1>
            @if(config('app.car_removal'))
                @if(config('app.batch_removal'))
                    <button onclick="Livewire.dispatch('openModal', { component: 'remove-car-dialog', arguments: { car_id: {{ $car->id }}, car_vin: '{{ $car->vin }}' }})" class="relative inline-flex text-center items-center justify-center p-0.5 max-sm:ml-0 max-sm:mt-2 ml-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800">
                        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">{{ __('app.remove_car') }}</span>
                    </button>
                @else
                    <a data-tooltip-target="tooltip-default" target="_blank" href="{{ route('remove-car', ['car_id' => $car->id]) }}" rel="nofollow noopener noreferrer" class="btn-remove-car relative inline-flex text-center items-center justify-center p-0.5 max-sm:ml-0 max-sm:mt-2 ml-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800">
                        <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">{{ __('app.remove_car') }}</span>
                    </a>
                    <div id="tooltip-default" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
                        {{ __('app.remove_car_tooltip', ['sum' => get_setting('removal_price')]) }}
                        <div class="tooltip-arrow" data-popper-arrow></div>
                    </div>
                @endif
            @elseif(config('app.car_removal_modal'))
                <button
                    class="btn-remove-car relative inline-flex text-center items-center justify-center p-0.5 max-sm:ml-0 max-sm:mt-2 ml-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-pink-500 to-orange-400 group-hover:from-pink-500 group-hover:to-orange-400 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-pink-200 dark:focus:ring-pink-800"
                    onclick="Livewire.dispatch('openModal', { component: 'remove-request', arguments: { car_id: {{ $car->id }} } })"
                >
                    <span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0">{{ parse_url(config('app.url'), PHP_URL_HOST) === 'verifymy.vin' ? 'Remove Vehicle History' : __('app.remove_car') }}</span>
                </button>
            @endif
        </div>
        <div class="flex justify-between mt-5 flex-col lg:flex-row">
            @if(is_array($car->big_images_url) and count($car->big_images_url))
                <div class="w-full lg:w-2/3 pr-0 lg:pr-5">
                    <div class="rounded overflow-hidden">
                        <div
                            class="fotorama"
                            data-nav="thumbs"
                            data-autoplay="true"
                            data-loop="true"
                            data-keyboard="true"
                            data-allowfullscreen="true"
                            data-width="100%"
                        >
                            @foreach($car->big_images_url as $image)
                                <img
                                    src="{{ $image }}"
                                    alt="{{ Str::upper($car?->vin) }} {{ $car->title }}"
                                    data-alt="{{ Str::upper($car?->vin) }} {{ $car->title }}"
                                    data-title="{{ $car->vin }} {{ $car->title }}"
                                    title="{{ $car->vin }}"
                                    loading="lazy"
                                >
                            @endforeach
                        </div>
                    </div>

                    @if(config('app.call_requests'))
                        <div class="flex items-center justify-center mt-7">
                            <div class="w-full max-w-md p-4 text-center bg-gray-50 border border-gray-200 rounded-lg shadow sm:p-8">
                                @if(config('app.arman'))
                                    <h5 class="mb-2 text-3xl font-bold text-blue-900">{{ __('app.interesant_car') }} <strong>{{Str::upper($car->vin)}}</strong></h5>
                                @else
                                    <h5 class="mb-2 text-3xl font-bold text-blue-900">{{ __('app.interesant_car') }}</h5>
                                @endif
                                <p class="mb-5 text-base text-gray-500 sm:text-lg">{{ __('app.we_help_you') }}</p>
                                <div class="items-center justify-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
                                    <button
                                        onclick="Livewire.dispatch('openModal', { component: 'call-me-request', arguments: { car_id: {{ $car->id }} } })"
                                        type="button"
                                        class="btn-order-consultation px-6 py-3.5 text-base font-medium text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center"
                                        wire:loading.class="opacity-50"
                                        wire:loading.attr="disabled"
                                        wire:target="save"
                                    >{{ __('app.order_consultation') }}</button>
                                </div>
                            </div>
                        </div>
                    @endif

                    @if(strip_tags(get_setting('remove_instructions')))
                        <div class="flex items-center justify-center mt-7">
                            <div class="w-full max-w-lg prose overflow-scroll p-4 bg-gray-50 border border-gray-200 rounded-lg shadow sm:p-8">
                                {!! get_setting('remove_instructions') !!}
                            </div>
                        </div>
                    @endif
                </div>
            @endif
            <div @class(['w-full mt-5 lg:mt-0', 'md:w-1/3' => is_array($car->images_url) and count($car->images_url)])>
                @if($car->lot instanceof \App\Models\Lot)
                    <x-lot-info :lot="$car->lot" />
                    <x-vehicle-condition :lot="$car->lot" />
                @endif
                <x-vehicle-info :car="$car" />
            </div>
        </div>
        @if($car->image and ($car->image->interior_url or $car->image->exterior_urls))
            <div class="flex justify-between mt-5 flex-col lg:flex-row">
                @if(is_array($car->image->exterior_urls) and count($car->image->exterior_urls))
                    <div @class(['w-full lg:w-1/2 mb-5', 'pr-0 lg:pr-5' => $car->image->interior_url])>
                        <div id="exterior"></div>
                        <script>
                            $('#exterior').spritespin({
                                source: [
                                    @foreach($car->image->exterior_urls as $image)
                                    "{{ $image }}",
                                    @endforeach
                                ],
                                width: 640,
                                height: 400,
                                sense: -1,
                                animate: true,
                                responsive: true
                            });
                        </script>
                    </div>
                @endif
                @if($car->image->interior_url)
                    <div @class(['w-full lg:w-1/2 mb-5', 'pl-0 lg:pl-5' => is_array($car->image->exterior_urls) and count($car->image->exterior_urls)])>
                        <div id="interior"></div>
                        <script>
                            pannellum.viewer('interior', {
                                "type": "equirectangular",
                                "panorama": "{{ $car->image->interior_url }}",
                                "autoLoad": true
                            });
                        </script>
                    </div>
                @endif
            </div>
        @endif
        @if($car->image and ($car->image->video_url or $car->image->external_panorama_url))
            <div class="flex justify-between mt-5 flex-col lg:flex-row">
                <div @class(['w-full lg:w-1/2 mb-5', 'pr-0 lg:pr-5' => $car->image->external_panorama_url])>
                    @if($car->image->youtube_id)
                        <iframe
                            width="100%"
                            height="385"
                            src="https://www.youtube.com/embed/{{ $car->image->youtube_id }}"
                            title="YouTube video player"
                            frameborder="0"
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                            allowfullscreen
                        ></iframe>
                    @elseif($car->image->video_url)
                        <video width="100%" height="100%" preload="auto" controls="controls">
                            <source src="{{ $car->image->video_url }}" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
                        </video>
                    @endif
                </div>
                @if($car->image->external_panorama_url)
                    <div @class(['w-full lg:w-1/2 mb-5', 'pl-0 lg:pl-5' => $car->image->video_url])>
                        <iframe src="{{ $car->image->external_panorama_url }}" class="w-full h-96"></iframe>
                    </div>
                @endif
            </div>
        @endif
        @if(isset($article) and $article)
            <div class="wrapper-custom-article block ml-auto mr-auto p-6 bg-white border border-gray-200 rounded-lg mt-5 shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 prose max-w-2xl">{!! $article !!}</div>
        @endif
        @if(isset($similar) and $similar instanceof \Illuminate\Database\Eloquent\Collection and $similar->count() > 0)
            @if(config('app.arman'))
                <h4 class="text-2xl font-bold dark:text-white mt-5 mb-5">{{ __('app.similar_cars') }} <strong>{{ $car->name }}</strong></h4>
            @else
                <h4 class="text-2xl font-bold dark:text-white mt-5 mb-5">{{ __('app.similar_cars') }}</h4>
            @endif
            <div class="flex flex-col xl:grid sm:grid grid-cols-1 xl:grid-cols-3 sm:grid-cols-2 xl:gap-7 sm:gap-5">
                @foreach($similar as $item)
                    <x-car-card :car="$item" />
                @endforeach
            </div>
        @endif
    </div>
@endsection

@section('head')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
    <script src="{{ asset('vendor/fotorama.min.js') }}"></script>
    @if($car->image and is_array($car->image->exterior_urls) and count($car->image->exterior_urls))
        <script src="https://unpkg.com/spritespin@4.0.11/release/spritespin.js" type="text/javascript"></script>
    @endif
    @if($car->image and $car->image->interior_url)
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.css"/>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/pannellum@2.5.6/build/pannellum.js"></script>
    @endif
    <style>
        .list > div {
            padding: 5px 15px;
        }
        .list > div:nth-child(odd) {
            background-color: rgba(255, 255, 255, 0.05);
        }
        .list > div:nth-child(even) {
            background-color: rgba(0, 0, 0, 0.05);
        }
        #interior, #exterior {
            width: 100%;
            height: 400px;
            border-radius: 10px;
        }
        .fotorama__thumb-border {
            border-color: #c51f25;
        }
    </style>
@endsection