@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,
        .offer-meta-box strong {
            display: block;
            margin-bottom: 4px;
        }

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

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

        .fancybox__content {
            padding: 0 !important;
        }

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

@section('content')
    @php
        $galleryImages = isset($vehicle->images) ? $vehicle->images : collect();
        $firstImage = count($galleryImages) > 0 ? $galleryImages->first() : null;
        $mainImage = !empty($firstImage?->image)
            ? asset('uploads/vehicles/' . $firstImage->image)
            : asset('assets/img/noimage.jpg');

        $thumbLimit = 6;

        $stateName = null;
        if (!empty($vehicle->state)) {
            $stateName = method_exists($vehicle->state, 'contents')
                ? optional($vehicle->state->contents()->first())->name
                : ($vehicle->state->name ?? $vehicle->state->title ?? null);
        }

        $cityName = null;
        if (!empty($vehicle->city)) {
            $cityName = method_exists($vehicle->city, 'contents')
                ? optional($vehicle->city->contents()->first())->name
                : ($vehicle->city->name ?? $vehicle->city->title ?? null);
        }

        $countryName = null;
        if (!empty($vehicle->country)) {
            $countryName = method_exists($vehicle->country, 'contents')
                ? optional($vehicle->country->contents()->first())->name
                : ($vehicle->country->name ?? $vehicle->country->title ?? null);
        }

        $categoryName = null;
        if (!empty($vehicle->category)) {
            $categoryName = method_exists($vehicle->category, 'categoryContents')
                ? optional($vehicle->category->categoryContents()->first())->name
                : ($vehicle->category->name ?? $vehicle->category->title ?? null);
        }

        $features = $vehicle->features ?? [];
        if (!is_array($features)) {
            $features = [];
        }

        $accessories = $vehicle->accessories ?? [];
        if (!is_array($accessories)) {
            $accessories = [];
        }

        $conditions = $vehicle->conditions ?? [];
        if (!is_array($conditions)) {
            $conditions = [];
        }

        $featureLabels = [
            'air_conditioning' => 'Air-conditioning',
            'cameras' => 'Cameras',
            'touch_screen' => 'Touch screen',
            'electric_windows' => 'Electric windows',
        ];

        $conditionLabels = [
            'under_warranty' => "It's under warranty.",
            'has_debts' => 'Has debts',
            'sole_owner' => 'Sole Owner',
            'never_shocked' => 'Never shocked',
            'not_selected' => 'Not Selected',
        ];

        $offerStatus = $existingOffer->status ?? null;
        $displayStatus = match ($offerStatus) {
            'accepted' => 'Contact Requested',
            'expired' => 'Expired',
            'not_selected' => 'Not Selected',
            'rejected' => 'Rejected',
            'pending' => 'Pending',
            default => null,
        };

        $showSellerContact = !empty($existingOffer) && $existingOffer->status === 'accepted';
    @endphp

    <div class="page-header">
        <h4 class="page-title">{{ __('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.private_seller_marketplace.vehicles') }}">{{ __('Private Seller Vehicles') }}</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-md-12">
            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            @if (session('warning'))
                <div class="alert alert-warning">
                    {{ session('warning') }}
                </div>
            @endif

            @if ($errors->any())
                <div class="alert alert-danger pb-1">
                    <button type="button" class="close" data-dismiss="alert">×</button>
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    {{-- Gallery --}}
                    <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('uploads/vehicles/' . $img->image) }}"
                                                data-fancybox="vehicleGallery"
                                                data-index="{{ $index }}"
                                                class="vehicle-thumb-link"
                                            >
                                                <img
                                                    src="{{ asset('uploads/vehicles/' . $img->image) }}"
                                                    alt="Vehicle Image"
                                                    class="vehicle-thumb-img {{ $index === 0 ? 'active-thumb' : '' }}"
                                                    data-full="{{ asset('uploads/vehicles/' . $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('uploads/vehicles/' . $img->image) }}"
                                            data-fancybox="vehicleGallery"
                                        >
                                            hidden
                                        </a>
                                    @endforeach
                                </div>
                            @endif
                        @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">{{ __('Active') }}</span>
                    </div>

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

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Category') }}</strong>
                                <div>{{ $categoryName ?? '-' }}</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>{{ __('Mileage') }}</strong>
                                <div>{{ $vehicle->mileage ?? '-' }}</div>
                            </div>
                        </div>

                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Price') }}</strong>
                                <div>
                                    @if(!empty($vehicle->price))
                                        {{ !empty($vehicle->currency) ? $vehicle->currency . ' ' : '$' }}{{ number_format($vehicle->price, 0, '.', ',') }}
                                    @else
                                        -
                                    @endif
                                </div>
                            </div>
                        </div>

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


                        <div class="col-md-4 mb-3">
                            <div class="vehicle-meta-box">
                                <strong>{{ __('Fuel Type') }}</strong>
                                <div>{{ $vehicle->fuel_type ?? '-' }}</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>{{ __('Title Owner') }}</strong>
                                <div>{{ (int) ($vehicle->is_title_owner ?? 0) === 1 ? __('Yes') : __('No') }}</div>
                            </div>
                        </div>

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

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

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

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

                    <hr>

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

                    <div class="row">


                        <div class="col-md-4 mb-4">
                            <h4 class="mb-3">{{ __('Accessories / Features') }}</h4>

                            @if (count($accessories) > 0)
                                <ul class="pl-3 mb-0">
                                    @foreach ($accessories as $item)
                                        <li>{{ $featureLabels[$item] ?? ucfirst(str_replace('_', ' ', $item)) }}</li>
                                    @endforeach
                                </ul>
                            @else
                                <p class="mb-0 text-muted">{{ __('No accessories added.') }}</p>
                            @endif
                        </div>

                        <div class="col-md-4 mb-4">
                            <h4 class="mb-3">{{ __('Conditions') }}</h4>

                            @if (count($conditions) > 0)
                                <ul class="pl-3 mb-0">
                                    @foreach ($conditions as $item)
                                        <li>{{ $conditionLabels[$item] ?? ucfirst(str_replace('_', ' ', $item)) }}</li>
                                    @endforeach
                                </ul>
                            @else
                                <p class="mb-0 text-muted">{{ __('No conditions added.') }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right Side --}}
        <div class="col-lg-4">
        <div class="card mb-3">
    <div class="card-body">

        {{-- PRICE --}}
        <h5 style="font-weight:600; margin-bottom:10px;">{{ __('Price') }}:</h5>
        <div style="font-size:20px;font-weight:700;color:#1572e8;">
            {{ !empty($vehicle->currency) ? $vehicle->currency : 'USD' }}
            {{ number_format($vehicle->price ?? 0, 0, '.', ',') }}
        </div>

        {{-- LOCATION --}}
        <div class="mt-3" style="color:#555;font-size:14px; display:flex; align-items:center; gap:6px;">
            <i class="fas fa-map-marker-alt" style="color:#e74c3c;"></i>

            <span>
               {{ $cityName ?? '' }} @if(!empty($stateName)) , {{ $stateName }} @endif
            </span>
        </div>

    </div>
</div>
            @if($showSellerContact)
                <div class="card">
                    <div class="card-header">
                        <div class="card-title">{{ __('Seller Contact Information') }}</div>
                    </div>
                    <div class="card-body">
                        @php
                            $sellerImage = !empty($vehicle->seller->profile_image)
                                ? asset($vehicle->seller->profile_image)
                                : asset('assets/admin/img/propics/blank_user.jpg');
                        @endphp

                        <div class="text-center mb-3">
                            <img
                                src="{{ $sellerImage }}"
                                alt="Seller"
                                class="seller-profile-img"
                            >
                        </div>

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

                        <p class="mb-2">
                            <strong>{{ __('Email') }}:</strong><br>
                            {{ $vehicle->seller->email ?? '-' }}
                        </p>

                        <p class="mb-0">
                            <strong>{{ __('Phone') }}:</strong><br>
                            {{ $vehicle->seller->phone ?? '-' }}
                        </p>
                    </div>
                </div>
            @endif

            <div class="card">
                <div class="card-header">
                    <div class="card-title">{{ __('Send Offer') }}</div>
                </div>
                <div class="card-body">
                    @if (!empty($existingOffer))
                        <div class="alert alert-info">
                            <strong>{{ __('Your latest offer status:') }}</strong>
                            <br>
                            {{ __($displayStatus) }}

                            @if (!empty($existingOffer->offer_price))
                                <br><strong>{{ __('Amount') }}:</strong>
                                ${{ number_format($existingOffer->offer_price, 0, '.', ',') }}
                            @endif

                            @if($existingOffer->status === 'accepted')
                                <br><small class="text-success">{{ __('Seller has requested contact with you.') }}</small>
                            @endif
                        </div>
                    @endif

                    @if (empty($existingOffer) || in_array($existingOffer->status, ['rejected', 'expired', 'not_selected']))
                        <form
                            action="{{ route('user.private_seller_marketplace.send_offer', $vehicle->id) }}"
                            method="POST"
                        >
                            @csrf

                            <div class="form-group">
                                <label>{{ __('Offer Price') }} <span class="text-danger">*</span></label>
                                <input
                                    type="number"
                                    step="1"
                                    min="1"
                                    name="offer_price"
                                    class="form-control"
                                    value="{{ old('offer_price') }}"
                                    placeholder="{{ __('Enter offer amount') }}"
                                >
                            </div>

                            <div class="form-group">
                                <label>{{ __('Message') }}</label>
                                <textarea
                                    name="message"
                                    rows="5"
                                    class="form-control"
                                    placeholder="{{ __('Write your message') }}"
                                >{{ old('message') }}</textarea>
                            </div>

                            <button type="submit" class="btn btn-primary btn-block">
                                <i class="fas fa-paper-plane"></i> {{ __('Send Offer') }}
                            </button>
                        </form>
                    @else
                        <div class="alert alert-secondary mb-0">
                            @if($existingOffer->status === 'pending')
                                {{ __('You already have a pending offer for this vehicle.') }}
                            @elseif($existingOffer->status === 'accepted')
                                {{ __('Your offer has been selected. Seller contact information is now available above.') }}
                            @else
                                {{ __('You already interacted with this listing.') }}
                            @endif
                        </div>
                    @endif

                    <a
                        href="{{ route('user.private_seller_marketplace.my_offers') }}"
                        class="btn btn-secondary btn-block mt-2"
                    >
                        <i class="fas fa-list"></i> {{ __('My Offers') }}
                    </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