@extends('user.layout')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"/>

    <style>
        .vehicle-gallery-main a,
        .vehicle-gallery-thumbs a {
            display: block;
            text-decoration: none;
        }

        .vehicle-gallery-main img {
            width: 100%;
            max-height: 560px;
            min-height: 420px;
            object-fit: cover;
            border-radius: 16px;
            transition: 0.25s ease;
            box-shadow: 0 10px 26px rgba(0, 0, 0, 0.10);
            cursor: pointer;
        }

        .vehicle-gallery-main img:hover {
            transform: scale(1.01);
        }

        .vehicle-gallery-thumbs .thumb-item {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
        }

        .vehicle-gallery-thumbs .thumb-item img {
            width: 100%;
            height: 105px;
            object-fit: cover;
            border-radius: 12px;
            transition: 0.25s ease;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
            border: 3px solid transparent;
            cursor: pointer;
        }

        .vehicle-gallery-thumbs .thumb-item:hover img {
            transform: scale(1.05);
        }

        .vehicle-gallery-thumbs .thumb-item img.active-thumb {
            border: 3px solid #1572e8 !important;
        }

        .vehicle-gallery-thumbs .more-overlay {
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.55);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 20px;
            border-radius: 12px;
            pointer-events: none;
        }

        .vehicle-meta-box strong {
            display: block;
            margin-bottom: 4px;
        }

        .vehicle-meta-box,
        .dealer-meta-box {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 14px;
            height: 100%;
        }

        .dealer-profile-img {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
        }

        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px;
        }

        .feature-card {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 14px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            height: 100%;
            transition: 0.2s ease;
        }

        .feature-card:hover {
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
            transform: translateY(-1px);
        }

        .feature-icon {
            width: 42px;
            height: 42px;
            min-width: 42px;
            border-radius: 12px;
            background: #eaf3ff;
            color: #1572e8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .feature-content {
            line-height: 1.35;
        }

        .feature-title {
            font-weight: 600;
            color: #212529;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .feature-subtext {
            font-size: 12px;
            color: #6c757d;
        }

        .spec-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 14px;
        }

        .spec-card {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 14px;
            padding: 14px 16px;
            height: 100%;
        }

        .spec-label {
            font-size: 13px;
            color: #6c757d;
            margin-bottom: 4px;
            font-weight: 600;
        }

        .spec-value {
            font-size: 15px;
            color: #212529;
            font-weight: 500;
            word-break: break-word;
        }

        .fancybox__content {
            padding: 0 !important;
        }

        .fancybox__image {
            max-width: 96vw !important;
            max-height: 92vh !important;
            object-fit: contain !important;
        }
    </style>
@endsection

@section('content')
    @php
        $firstImage = count($galleryImages) > 0 ? $galleryImages->first() : null;

        $mainImage = !empty($firstImage?->image)
            ? asset('assets/img/property/slider-images/' . $firstImage->image)
            : (!empty($vehicle->featured_image)
                ? asset('assets/img/property/featureds/' . $vehicle->featured_image)
                : asset('assets/img/noimage.jpg'));

        $thumbLimit = 6;

        $dealerPhoto = !empty($vehicle->photo)
            ? asset('assets/front/img/user/' . $vehicle->photo)
            : asset('assets/admin/img/propics/blank_user.jpg');

        $dealerName = !empty($vehicle->company_name)
            ? $vehicle->company_name
            : trim(($vehicle->first_name ?? '') . ' ' . ($vehicle->last_name ?? ''));

        $showEmail = !empty($vehicle->show_email_addresss) && !empty($vehicle->email);
        $showPhone = !empty($vehicle->show_phone_number) && !empty($vehicle->phone);

        $whatsappNumber = preg_replace('/[^0-9]/', '', $vehicle->phone ?? '');
    @endphp

    <div class="page-header">
        <h4 class="page-title">{{ __('Dealer Vehicle Details') }}</h4>
        <ul class="breadcrumbs">
            <li class="nav-home">
                <a href="{{ route('user-dashboard') }}">
                    <i class="flaticon-home"></i>
                </a>
            </li>

            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>

            <li class="nav-item">
                <a href="{{ route('user.dealer_marketplace.vehicles') }}">{{ __('Dealer Marketplace') }}</a>
            </li>

            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>

            <li class="nav-item">
                <a href="#">{{ __('Vehicle Details') }}</a>
            </li>
        </ul>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="vehicle-gallery mb-4">
                        <div class="vehicle-gallery-main mb-3">
                            <a href="javascript:void(0);" id="openMainGallery">
                                <img
                                    id="mainPreviewImage"
                                    src="{{ $mainImage }}"
                                    alt="{{ $vehicle->title ?? 'Vehicle' }}"
                                >
                            </a>
                        </div>

                        @if (count($galleryImages) > 0)
                            <div class="row vehicle-gallery-thumbs">
                                @foreach ($galleryImages->take($thumbLimit) as $index => $img)
                                    <div class="col-4 col-md-2 mb-3">
                                        <div class="thumb-item">
                                            <a
                                                href="{{ asset('assets/img/property/slider-images/' . $img->image) }}"
                                                data-fancybox="vehicleGallery"
                                                data-index="{{ $index }}"
                                                class="vehicle-thumb-link"
                                            >
                                                <img
                                                    src="{{ asset('assets/img/property/slider-images/' . $img->image) }}"
                                                    alt="Vehicle Image"
                                                    class="vehicle-thumb-img {{ $index === 0 ? 'active-thumb' : '' }}"
                                                    data-full="{{ asset('assets/img/property/slider-images/' . $img->image) }}"
                                                >

                                                @if($loop->last && count($galleryImages) > $thumbLimit)
                                                    <div class="more-overlay">
                                                        +{{ count($galleryImages) - $thumbLimit }}
                                                    </div>
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            @if(count($galleryImages) > $thumbLimit)
                                <div style="display:none;">
                                    @foreach ($galleryImages->slice($thumbLimit) as $img)
                                        <a
                                            href="{{ asset('assets/img/property/slider-images/' . $img->image) }}"
                                            data-fancybox="vehicleGallery"
                                        >
                                            hidden
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        @else
                            <div style="display:none;">
                                <a href="{{ $mainImage }}" data-fancybox="vehicleGallery">hidden</a>
                            </div>
                        @endif
                    </div>

                    <div class="d-flex justify-content-between align-items-start mb-3 flex-wrap">
                        <div class="mb-2">
                            <h2 class="mb-1">{{ $vehicle->title ?? __('Untitled Vehicle') }}</h2>
                            <p class="text-muted mb-0">
                                {{ $vehicle->brand_name ?? '-' }}
                                /
                                {{ $vehicle->model_name ?? '-' }}
                                @if (!empty($vehicle->version_name))
                                    / {{ $vehicle->version_name }}
                                @endif
                            </p>
                        </div>

                        <span class="badge badge-success p-2">{{ __('Shared by Dealer') }}</span>
                    </div>

                    <div class="row mt-4">
                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Price') }}</strong>
                                <div>
                                    {{ $vehicle->currency_symbol ?? '$' }}
                                    {{ number_format($vehicle->price ?? 0, 0) }}
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Year') }}</strong>
                                <div>{{ $vehicle->year ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('KM') }}</strong>
                                <div>{{ $vehicle->km ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Type') }}</strong>
                                <div>{{ $vehicle->type ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Fuel') }}</strong>
                                <div>{{ $vehicle->area ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Transmission') }}</strong>
                                <div>{{ $vehicle->transmision ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Color') }}</strong>
                                <div>{{ $vehicle->color ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Traction') }}</strong>
                                <div>{{ $vehicle->traction ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Engine') }}</strong>
                                <div>{{ $vehicle->engine ?? '-' }}</div>
                            </div>
                        </div>

                        @if(!empty($vehicle->address))
                            <div class="col-md-12 mb-3">
                                <div class="vehicle-meta-box">
                                    <strong>{{ __('Address') }}</strong>
                                    <div>{{ $vehicle->address }}</div>
                                </div>
                            </div>
                        @endif
                    </div>

                    <hr>

                    <div class="mb-4">
                        <h4 class="mb-3">{{ __('Description / Details') }}</h4>
                        <div style="white-space: normal;">
                            {!! $vehicle->description ?? ($vehicle->title ?? '-') !!}
                        </div>
                    </div>

                    @if(count($amenities) > 0)
                        <div class="mb-4">
                            <h4 class="mb-3">{{ __('Amenities') }}</h4>
                            <div class="feature-grid">
                                @foreach ($amenities as $amenity)
                                    <div class="feature-card">
                                        <div class="feature-icon">
                                            @if(!empty($amenity->icon))
                                                <i class="{{ $amenity->icon }}"></i>
                                            @else
                                                <i class="fas fa-check"></i>
                                            @endif
                                        </div>
                                        <div class="feature-content">
                                            <div class="feature-title">
                                                {{ $amenity->amenity_name ?? ('Amenity #' . $amenity->amenity_id) }}
                                            </div>
                                            <div class="feature-subtext">
                                                {{ __('Included feature') }}
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if(count($specifications) > 0)
                        <div class="mb-2">
                            <h4 class="mb-3">{{ __('Funciones adicionales') }}</h4>
                            <div class="spec-grid">
                                @foreach ($specifications as $specification)
                                    @if(!empty($specification->label) || !empty($specification->value))
                                        <div class="spec-card">
                                            <div class="spec-label">{{ $specification->label ?? '-' }}</div>
                                            <div class="spec-value">{{ $specification->value ?? '-' }}</div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
          {{-- PRICE + LOCATION CARD --}}
  <div class="card mb-3">
    <div class="card-body">
        <h5 style="font-weight:600; margin-bottom:10px;">{{ __('Price') }}:</h5>
        <div style="font-size:20px;font-weight:700;color:#1572e8;">
            {{ $vehicle->currency_symbol ?? '$' }}
            {{ number_format($vehicle->price ?? 0, 0) }}
        </div>

        <div class="mt-3" style="color:#555;font-size:14px;">
            <i class="fas fa-map-marker-alt" style="color:#e74c3c; margin-right:6px;"></i>

            {{ $vehicle->zone_name ?? '' }}
            @if(!empty($vehicle->city_name))
                {{ !empty($vehicle->zone_name) ? ', ' : '' }}{{ $vehicle->city_name }}
            @endif
        </div>
    </div>
</div>
            <div class="card">
                <div class="card-header">
                    <div class="card-title">{{ __('Dealer Information') }}</div>
                </div>

                <div class="card-body">
                    <div class="text-center mb-3">
                        <img
                            src="{{ $dealerPhoto }}"
                            alt="Dealer"
                            class="dealer-profile-img"
                        >
                    </div>

                    <p class="mb-2">
                        <strong>{{ __('Dealership') }}:</strong><br>
                        {{ $dealerName ?: '-' }}
                    </p>

                    <p class="mb-2">
                        <strong>{{ __('Name') }}:</strong><br>
                        {{ trim(($vehicle->first_name ?? '') . ' ' . ($vehicle->last_name ?? '')) ?: '-' }}
                    </p>

                    <p class="mb-2">
                        <strong>{{ __('Location') }}:</strong><br>
                        {{ $vehicle->dealer_city ?? '' }}
                        @if(!empty($vehicle->dealer_state))
                            , {{ $vehicle->dealer_state }}
                        @endif
                        @if(!empty($vehicle->dealer_country))
                            , {{ $vehicle->dealer_country }}
                        @endif
                    </p>

                    @if(!empty($vehicle->dealer_address))
                        <p class="mb-2">
                            <strong>{{ __('Address') }}:</strong><br>
                            {{ $vehicle->dealer_address }}
                        </p>
                    @endif
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <div class="card-title">{{ __('Contact Dealer') }}</div>
                </div>

                <div class="card-body">
                    @if($showPhone)
                        <div class="dealer-meta-box mb-3">
                            <strong>{{ __('Phone') }}</strong>
                            <div>{{ $vehicle->phone }}</div>
                        </div>
                    @endif

                    @if($showEmail)
                        <div class="dealer-meta-box mb-3">
                            <strong>{{ __('Email') }}</strong>
                            <div>{{ $vehicle->email }}</div>
                        </div>
                    @endif

                    @if($showPhone && !empty($whatsappNumber))
                        <a
                            href="https://wa.me/{{ $whatsappNumber }}"
                            target="_blank"
                            class="btn btn-success btn-block mb-2"
                        >
                            <i class="fab fa-whatsapp"></i> {{ __('Contact on WhatsApp') }}
                        </a>
                    @endif

                    @if($showEmail)
                        <a
                            href="mailto:{{ $vehicle->email }}"
                            class="btn btn-primary btn-block mb-2"
                        >
                            <i class="fas fa-envelope"></i> {{ __('Send Email') }}
                        </a>
                    @endif

                    <a
                        href="{{ route('user.dealer_marketplace.vehicles') }}"
                        class="btn btn-secondary btn-block"
                    >
                        <i class="fas fa-arrow-left"></i> {{ __('Back to Marketplace') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

    <script>
        Fancybox.bind('[data-fancybox="vehicleGallery"]', {
            Images: {
                zoom: false,
            },
            Thumbs: {
                autoStart: true,
            },
            Toolbar: {
                display: [
                    { id: "counter", position: "center" },
                    "zoom",
                    "slideshow",
                    "fullscreen",
                    "close",
                ],
            },
        });

        document.addEventListener('DOMContentLoaded', function () {
            const mainPreviewImage = document.getElementById('mainPreviewImage');
            const thumbImages = document.querySelectorAll('.vehicle-thumb-img');
            const thumbLinks = document.querySelectorAll('.vehicle-thumb-link');
            const openMainGallery = document.getElementById('openMainGallery');

            thumbImages.forEach(function (img) {
                img.addEventListener('click', function (e) {
                    e.preventDefault();

                    const fullImage = this.getAttribute('data-full');

                    if (mainPreviewImage && fullImage) {
                        mainPreviewImage.src = fullImage;
                    }

                    thumbImages.forEach(function (thumb) {
                        thumb.classList.remove('active-thumb');
                    });

                    this.classList.add('active-thumb');
                });
            });

            if (openMainGallery) {
                openMainGallery.addEventListener('click', function (e) {
                    e.preventDefault();

                    const activeLink =
                        document.querySelector('.vehicle-thumb-img.active-thumb')?.closest('a') ||
                        thumbLinks[0];

                    if (activeLink) {
                        activeLink.click();
                    }
                });
            }
        });
    </script>
@endsection