@extends('user.layout')

@section('content')
    <div class="page-header">
        <h4 class="page-title">{{ __('Private Seller Vehicles') }}</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="#">{{ __('Purchase Options') }}</a>
            </li>
            <li class="separator">
                <i class="flaticon-right-arrow"></i>
            </li>
            <li class="nav-item">
                <a href="#">{{ __('Private Seller Vehicles') }}</a>
            </li>
        </ul>
    </div>

    @php
        $hasFilters =
            request()->filled('keyword') ||
            request()->filled('car_type') ||
            request()->filled('brand_id') ||
            request()->filled('model_id') ||
            request()->filled('version_id') ||
            request()->filled('category_id') ||
            request()->filled('country_id') ||
            request()->filled('state_id') ||
            request()->filled('city_id') ||
            request()->filled('fuel_type') ||
            request()->filled('transmision') ||
            request()->filled('year_min') ||
            request()->filled('year_max') ||
            request()->filled('km_min') ||
            request()->filled('km_max') ||
            request()->filled('price_min') ||
            request()->filled('price_max');
    @endphp

    <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>

    {{-- Filters --}}
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <div class="card-title mb-0">{{ __('Filter Vehicles') }}</div>

            <button
                class="btn btn-sm btn-primary"
                type="button"
                data-toggle="collapse"
                data-target="#privateSellerFilterBox"
                aria-expanded="{{ $hasFilters ? 'true' : 'false' }}"
                aria-controls="privateSellerFilterBox"
            >
                <i class="fas fa-filter mr-1"></i>
                {{ __('Filters') }}
            </button>
        </div>

        <div id="privateSellerFilterBox" class="collapse {{ $hasFilters ? 'show' : '' }}">
            <div class="card-body">
                <form action="{{ route('user.private_seller_marketplace.vehicles') }}" method="GET">
                    <div class="row">
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Keyword') }}</label>
                                <input
                                    type="text"
                                    name="keyword"
                                    class="form-control"
                                    value="{{ request('keyword') }}"
                                    placeholder="{{ __('Search by title, year, motor...') }}"
                                >
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Car Type') }}</label>
                                <select name="car_type" class="form-control">
                                    <option value="">{{ __('All') }}</option>
                                    <option value="car" {{ request('car_type') == 'car' ? 'selected' : '' }}>
                                        {{ __('Car') }}
                                    </option>
                                    <option value="truck" {{ request('car_type') == 'truck' ? 'selected' : '' }}>
                                        {{ __('Truck') }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Brand') }}</label>
                                <select name="brand_id" id="brand_id" class="form-control">
                                    <option value="">{{ __('All Brands') }}</option>
                                    @foreach ($brands as $brand)
                                        <option value="{{ $brand->id }}" {{ request('brand_id') == $brand->id ? 'selected' : '' }}>
                                            {{ $brand->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Model') }}</label>
                                <select name="model_id" id="model_id" class="form-control">
                                    <option value="">{{ __('All Models') }}</option>
                                    @foreach ($models as $model)
                                        <option value="{{ $model->id }}" {{ request('model_id') == $model->id ? 'selected' : '' }}>
                                            {{ $model->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Version') }}</label>
                                <select name="version_id" id="version_id" class="form-control">
                                    <option value="">{{ __('All Versions') }}</option>
                                    @foreach ($versions as $version)
                                        <option value="{{ $version->id }}" {{ request('version_id') == $version->id ? 'selected' : '' }}>
                                            {{ $version->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Category') }}</label>
                                <select name="category_id" class="form-control">
                                    <option value="">{{ __('All Categories') }}</option>
                                    @foreach ($categories as $category)
                                        @php
                                            $categoryName = method_exists($category, 'categoryContents')
                                                ? optional($category->categoryContents()->first())->name
                                                : ($category->name ?? $category->title ?? null);
                                        @endphp
                                        <option value="{{ $category->id }}" {{ request('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $categoryName ?? ('Category #' . $category->id) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Department --}}
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Department') }}</label>
                                <select name="country_id" id="country_id" class="form-control">
                                    <option value="">{{ __('All Departments') }}</option>
                                    @foreach ($countries as $country)
                                        @php
                                            $countryName = method_exists($country, 'contents')
                                                ? optional($country->contents()->first())->name
                                                : ($country->name ?? $country->title ?? null);
                                        @endphp
                                        <option value="{{ $country->id }}" {{ request('country_id') == $country->id ? 'selected' : '' }}>
                                            {{ $countryName ?? ('Department #' . $country->id) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- City --}}
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('City') }}</label>
                                <select name="state_id" id="state_id" class="form-control">
                                    <option value="">{{ __('All Cities') }}</option>
                                    @foreach ($states as $state)
                                        @php
                                            $stateName = method_exists($state, 'contents')
                                                ? optional($state->contents()->first())->name
                                                : ($state->name ?? $state->title ?? null);
                                        @endphp
                                        <option value="{{ $state->id }}" {{ request('state_id') == $state->id ? 'selected' : '' }}>
                                            {{ $stateName ?? ('City #' . $state->id) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        {{-- Zone --}}
                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Zone') }}</label>
                                <select name="city_id" id="city_id" class="form-control">
                                    <option value="">{{ __('All Zones') }}</option>
                                    @foreach ($cities as $city)
                                        @php
                                            $cityName = method_exists($city, 'contents')
                                                ? optional($city->contents()->first())->name
                                                : ($city->name ?? $city->title ?? null);
                                        @endphp
                                        <option value="{{ $city->id }}" {{ request('city_id') == $city->id ? 'selected' : '' }}>
                                            {{ $cityName ?? ('Zone #' . $city->id) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Fuel Type') }}</label>
                                <select name="fuel_type" class="form-control">
                                    <option value="">{{ __('All Fuel Types') }}</option>
                                    <option value="Nafta" {{ request('fuel_type') == 'Nafta' ? 'selected' : '' }}>Nafta</option>
                                    <option value="Diesel" {{ request('fuel_type') == 'Diesel' ? 'selected' : '' }}>Diésel</option>
                                    <option value="Electrico" {{ request('fuel_type') == 'Electrico' ? 'selected' : '' }}>Eléctrico</option>
                                    <option value="Hibrido" {{ request('fuel_type') == 'Hibrido' ? 'selected' : '' }}>Híbrido</option>
                                    <option value="Hibrido/Diesel" {{ request('fuel_type') == 'Hibrido/Diesel' ? 'selected' : '' }}>Híbrido/Diesel</option>
                                    <option value="Nafta/GNC" {{ request('fuel_type') == 'Nafta/GNC' ? 'selected' : '' }}>Nafta/GNC</option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-3">
                            <div class="form-group">
                                <label>{{ __('Transmission') }}</label>
                                <select name="transmision" class="form-control">
                                    <option value="">{{ __('All Transmission Types') }}</option>
                                    <option value="Manual" {{ request('transmision') == 'Manual' ? 'selected' : '' }}>
                                        {{ __('Manual') }}
                                    </option>
                                    <option value="Automática" {{ request('transmision') == 'Automática' ? 'selected' : '' }}>
                                        {{ __('Automatic') }}
                                    </option>
                                </select>
                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label>{{ __('Year Min') }}</label>
                                <input
                                    type="number"
                                    name="year_min"
                                    class="form-control"
                                    value="{{ request('year_min') }}"
                                    placeholder="{{ __('From') }}"
                                >
                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label>{{ __('Year Max') }}</label>
                                <input
                                    type="number"
                                    name="year_max"
                                    class="form-control"
                                    value="{{ request('year_max') }}"
                                    placeholder="{{ __('To') }}"
                                >
                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label>{{ __('KM Min') }}</label>
                                <input
                                    type="number"
                                    name="km_min"
                                    class="form-control"
                                    value="{{ request('km_min') }}"
                                    placeholder="{{ __('From') }}"
                                >
                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label>{{ __('KM Max') }}</label>
                                <input
                                    type="number"
                                    name="km_max"
                                    class="form-control"
                                    value="{{ request('km_max') }}"
                                    placeholder="{{ __('To') }}"
                                >
                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label>{{ __('Price Min') }}</label>
                                <input
                                    type="number"
                                    name="price_min"
                                    class="form-control"
                                    value="{{ request('price_min') }}"
                                    placeholder="{{ __('From') }}"
                                    step="0.01"
                                >
                            </div>
                        </div>

                        <div class="col-lg-2">
                            <div class="form-group">
                                <label>{{ __('Price Max') }}</label>
                                <input
                                    type="number"
                                    name="price_max"
                                    class="form-control"
                                    value="{{ request('price_max') }}"
                                    placeholder="{{ __('To') }}"
                                    step="0.01"
                                >
                            </div>
                        </div>

                        <div class="col-lg-4 d-flex align-items-end">
                            <div class="form-group w-100">
                                <button type="submit" class="btn btn-primary mr-2">
                                    <i class="fas fa-search"></i> {{ __('Filter') }}
                                </button>

                                <a href="{{ route('user.private_seller_marketplace.vehicles') }}" class="btn btn-secondary">
                                    <i class="fas fa-undo"></i> {{ __('Reset') }}
                                </a>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Listing --}}
    <div class="row">
        @if (count($vehicles) > 0)
            @foreach ($vehicles as $vehicle)
                <div class="col-md-6 col-lg-4">
                    <div class="card mb-4">
                        <div class="card-body p-0">
                            @php

    $firstImage = (!empty($vehicle->images) && count($vehicle->images) > 0)
        ? $vehicle->images->first()
        : null;

    $imagePath = !empty($firstImage?->image)
        ? asset('uploads/vehicles/' . $firstImage->image)
        : asset('assets/img/noimage.jpg');

                                $dealerOffer = $dealerOfferStatuses[$vehicle->id] ?? null;
                            @endphp

                            <div style="position:relative;">
                                <a href="{{ route('user.private_seller_marketplace.vehicle_details', $vehicle->id) }}">
                                    <img
                                        src="{{ $imagePath }}"
                                        alt="{{ $vehicle->title ?? 'Vehicle' }}"
                                        style="width: 100%; height: 220px; object-fit: cover;"
                                    >
                                </a>

                                @if ($dealerOffer && in_array($dealerOffer->status, ['accepted', 'contact_requested']))
                                    <span style="
                                        position:absolute;
                                        top:10px;
                                        left:10px;
                                        background:#28a745;
                                        color:#fff;
                                        padding:6px 10px;
                                        border-radius:5px;
                                        font-size:12px;
                                        font-weight:600;
                                    ">
                                        <i class="fas fa-address-card"></i> {{ __('Contact Available') }}
                                    </span>
                                @elseif ($dealerOffer)
                                    <span style="
                                        position:absolute;
                                        top:10px;
                                        left:10px;
                                        background:#17a2b8;
                                        color:#fff;
                                        padding:6px 10px;
                                        border-radius:5px;
                                        font-size:12px;
                                        font-weight:600;
                                    ">
                                        <i class="fas fa-check-circle"></i> {{ __('Offer Sent') }}
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h4 class="mb-1" style="font-size: 18px;">
                                    <a href="{{ route('user.private_seller_marketplace.vehicle_details', $vehicle->id) }}">
                                        {{ \Illuminate\Support\Str::limit($vehicle->title ?? 'Untitled Vehicle', 45) }}
                                    </a>
                                </h4>

                                <span class="badge badge-success">{{ __('Active') }}</span>
                            </div>

                            <p class="mb-2 text-muted">
                                {{ $vehicle->brand->name ?? '-' }}
                                /
                                {{ $vehicle->model->name ?? '-' }}
                                @if (!empty($vehicle->version?->name))
                                    / {{ $vehicle->version->name }}
                                @endif
                            </p>

                            <div class="mb-3">
                                <strong>{{ __('Price') }}:</strong>
                                <span class="text-primary font-weight-bold">
                                    @if(!empty($vehicle->price))
                                        {{ !empty($vehicle->currency) ? $vehicle->currency . ' ' : '$' }}{{ number_format($vehicle->price, 0, '.', ',') }}
                                    @else
                                        -
                                    @endif
                                </span>
                            </div>

                            <div class="row mb-2">
                                <div class="col-6 mb-2">
                                    <strong>{{ __('Year') }}:</strong>
                                    <div>{{ $vehicle->year ?? '-' }}</div>
                                </div>

                                <div class="col-6 mb-2">
                                    <strong>{{ __('Mileage') }}:</strong>
                                    <div>{{ $vehicle->mileage ?? '-' }}</div>
                                </div>

                                <div class="col-6 mb-2">
                                    <strong>{{ __('Fuel') }}:</strong>
                                    <div>{{ $vehicle->fuel_type ?? '-' }}</div>
                                </div>

                                <div class="col-6 mb-2">
                                    <strong>{{ __('Transmission') }}:</strong>
                                    <div>{{ $vehicle->transmision ?? '-' }}</div>
                                </div>
                            </div>

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

<p class="mb-2">
    <strong>{{ __('Published on') }}:</strong>
    {{ \Carbon\Carbon::parse($vehicle->created_at)->format('d/m/Y') }}
</p>
                            <div class="d-flex justify-content-between align-items-center mt-3">
                                <a
                                    href="{{ route('user.private_seller_marketplace.vehicle_details', $vehicle->id) }}"
                                    class="btn btn-primary btn-sm"
                                >
                                    <i class="fas fa-eye"></i> {{ __('View Details') }}
                                </a>

                                @if ($dealerOffer && in_array($dealerOffer->status, ['accepted', 'contact_requested']))
                                    <span class="badge badge-success" style="font-size:12px; padding:6px 10px;">
                                        <i class="fas fa-address-card"></i> {{ __('Contact Available') }}
                                    </span>
                                @elseif ($dealerOffer)
                                    <span class="badge badge-info" style="font-size:12px; padding:6px 10px;">
                                        <i class="fas fa-check-circle"></i> {{ __('Offer Sent') }}
                                    </span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            <div class="col-md-12">
                <div class="d-flex justify-content-center">
                    {{ $vehicles->appends(request()->query())->links() }}
                </div>
            </div>
        @else
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body text-center">
                        <h4 class="mb-0">{{ __('NO PRIVATE SELLER VEHICLES FOUND') }}</h4>
                    </div>
                </div>
            </div>
        @endif
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const brandSelect = document.getElementById('brand_id');
            const modelSelect = document.getElementById('model_id');
            const versionSelect = document.getElementById('version_id');

            const countrySelect = document.getElementById('country_id');
            const stateSelect = document.getElementById('state_id');
            const citySelect = document.getElementById('city_id');

            if (brandSelect) {
                brandSelect.addEventListener('change', function () {
                    const brandId = this.value;

                    modelSelect.innerHTML = '<option value="">{{ __("All Models") }}</option>';
                    versionSelect.innerHTML = '<option value="">{{ __("All Versions") }}</option>';

                    if (!brandId) {
                        return;
                    }

                    fetch("{{ route('user.private_seller_marketplace.get_models') }}?brand_id=" + brandId)
                        .then(response => response.json())
                        .then(data => {
                            if (data.models) {
                                data.models.forEach(function (item) {
                                    const option = document.createElement('option');
                                    option.value = item.id;
                                    option.textContent = item.name;

                                    if ("{{ request('model_id') }}" == item.id) {
                                        option.selected = true;
                                    }

                                    modelSelect.appendChild(option);
                                });

                                if ("{{ request('model_id') }}") {
                                    modelSelect.dispatchEvent(new Event('change'));
                                }
                            }
                        });
                });

                if (brandSelect.value) {
                    brandSelect.dispatchEvent(new Event('change'));
                }
            }

            if (modelSelect) {
                modelSelect.addEventListener('change', function () {
                    const modelId = this.value;

                    versionSelect.innerHTML = '<option value="">{{ __("All Versions") }}</option>';

                    if (!modelId) {
                        return;
                    }

                    fetch("{{ route('user.private_seller_marketplace.get_versions') }}?model_id=" + modelId)
                        .then(response => response.json())
                        .then(data => {
                            if (data.versions) {
                                data.versions.forEach(function (item) {
                                    const option = document.createElement('option');
                                    option.value = item.id;
                                    option.textContent = item.name;

                                    if ("{{ request('version_id') }}" == item.id) {
                                        option.selected = true;
                                    }

                                    versionSelect.appendChild(option);
                                });
                            }
                        });
                });
            }

           if (countrySelect) {
    countrySelect.addEventListener('change', function () {
        const countryId = this.value;

        stateSelect.innerHTML = '<option value="">{{ __("All Cities") }}</option>';
        citySelect.innerHTML = '<option value="">{{ __("All Zones") }}</option>';

        if (!countryId) {
            return;
        }

        fetch("{{ route('user.private_seller_marketplace.get_states') }}?country_id=" + countryId)
            .then(response => response.json())
            .then(response => {
                if (response.states) {
                    response.states.forEach(function (item) {
                        const option = document.createElement('option');
                        option.value = item.id;
                        option.textContent = item.name ?? ('City #' + item.id);

                        if ("{{ request('state_id') }}" == item.id) {
                            option.selected = true;
                        }

                        stateSelect.appendChild(option);
                    });
                }

                if ("{{ request('state_id') }}") {
                    stateSelect.dispatchEvent(new Event('change'));
                }
            })
            .catch(error => {
                console.error('Error loading states:', error);
            });
    });

    if (countrySelect.value) {
        countrySelect.dispatchEvent(new Event('change'));
    }
}

            if (stateSelect) {
                stateSelect.addEventListener('change', function () {
                    const stateId = this.value;

                    citySelect.innerHTML = '<option value="">{{ __("All Zones") }}</option>';

                    if (!stateId) {
                        return;
                    }

                    fetch("{{ route('user.private_seller_marketplace.get_cities') }}?state_id=" + stateId)
                        .then(response => response.json())
                        .then(data => {
                            if (data.cities) {
                                data.cities.forEach(function (item) {
                                    const option = document.createElement('option');
                                    option.value = item.id;
                                    option.textContent = item.name ?? item.title ?? ('Zone #' + item.id);

                                    if ("{{ request('city_id') }}" == item.id) {
                                        option.selected = true;
                                    }

                                    citySelect.appendChild(option);
                                });
                            }
                        });
                });
            }
        });
    </script>
@endsection