@extends('user.layout')

@section('content')

<div class="page-header">
    <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="#">{{ __('Dealer Vehicles') }}</a>
        </li>
    </ul>
</div>

@php
    $hasFilters =
        request('keyword') ||
        request('brand_id') ||
        request('model_id') ||
        request('version_id') ||
        request('min_price') ||
        request('max_price') ||
        request('min_year') ||
        request('max_year') ||
        request('max_km') ||
        request('country_id') ||
        request('state_id') ||
        request('city_id') ||
        request('fuel_type') ||
        request('transmision');
@endphp

<div class="row">
    <div class="col-md-12">
        <div class="card mb-4">
            <div class="card-body py-3">
                <div class="d-flex justify-content-between align-items-center flex-wrap">
                    <h4 class="mb-0">{{ __('Dealer Marketplace') }}</h4>

                    <button class="btn btn-primary mt-2 mt-md-0" type="button" data-toggle="collapse" data-target="#dealerFilterCollapse"
                        aria-expanded="{{ $hasFilters ? 'true' : 'false' }}" aria-controls="dealerFilterCollapse">
                        <i class="fas fa-filter"></i> {{ __('Filter') }}
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-12">
        <div class="collapse {{ $hasFilters ? 'show' : '' }}" id="dealerFilterCollapse">
            <div class="card mb-4">
                <div class="card-header">
                    <div class="card-title">{{ __('Filter Vehicles') }}</div>
                </div>

                <div class="card-body">
                    <form action="{{ route('user.dealer_marketplace.vehicles') }}" method="GET">
                        <div class="row">

                            <div class="col-lg-3 col-md-6">
                                <div class="form-group">
                                    <label>{{ __('Keyword') }}</label>
                                    <input type="text" name="keyword" class="form-control"
                                        value="{{ request('keyword') }}"
                                        placeholder="{{ __('Search title or address') }}">
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6">
                                <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 col-md-6">
                                <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 col-md-6">
                                <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 col-md-6">
                                <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' : '' }}>Diesel</option>
                                        <option value="Electrico" {{ request('fuel_type') == 'Electrico' ? 'selected' : '' }}>Electrico</option>
                                        <option value="Hibrido" {{ request('fuel_type') == 'Hibrido' ? 'selected' : '' }}>Hibrido</option>
                                        <option value="Hibrido/Diesel" {{ request('fuel_type') == 'Hibrido/Diesel' ? 'selected' : '' }}>Hibrido/Diesel</option>
                                        <option value="Nafta/GNC" {{ request('fuel_type') == 'Nafta/GNC' ? 'selected' : '' }}>Nafta/GNC</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6">
                                <div class="form-group">
                                    <label>{{ __('Transmisión') }}</label>
                                    <select name="transmision" class="form-control">
                                        <option value="">{{ __('All Transmissions') }}</option>
                                        <option value="Manual" {{ request('transmision') == 'Manual' ? 'selected' : '' }}>{{ __('Manual') }}</option>
                                        <option value="Automática" {{ request('transmision') == 'Automática' ? 'selected' : '' }}>Automática</option>
                                    </select>
                                </div>
                            </div>

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

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

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

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

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

                            <div class="col-lg-2 col-md-6">
                                <div class="form-group">
                                    <label>{{ __('Department') }}</label>
                                    <select name="country_id" id="country_id" class="form-control">
                                        <option value="">{{ __('All Departments') }}</option>
                                        @foreach($departments as $department)
                                            <option value="{{ $department->id }}" {{ request('country_id') == $department->id ? 'selected' : '' }}>
                                                {{ $department->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6">
                                <div class="form-group">
                                    <label>{{ __('City') }}</label>
                                    <select name="state_id" id="state_id" class="form-control">
                                        <option value="">{{ __('All Cities') }}</option>
                                        @foreach($cities as $city)
                                            <option value="{{ $city->id }}" {{ request('state_id') == $city->id ? 'selected' : '' }}>
                                                {{ $city->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-6">
                                <div class="form-group">
                                    <label>{{ __('Zone') }}</label>
                                    <select name="city_id" id="city_id" class="form-control">
                                        <option value="">{{ __('All Zones') }}</option>
                                        @foreach($zones as $zone)
                                            <option value="{{ $zone->id }}" {{ request('city_id') == $zone->id ? 'selected' : '' }}>
                                                {{ $zone->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-lg-12 text-right mt-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> {{ __('Filter') }}
                                </button>

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

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">

@if($vehicles->count() > 0)

@foreach ($vehicles as $vehicle)

@php
    $img = !empty($vehicle->featured_image)
        ? asset('assets/img/property/featureds/' . $vehicle->featured_image)
        : asset('assets/img/noimage.jpg');
    $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 ?? ''));

    $title = $vehicle->title ?? 'Vehicle';
    $address = $vehicle->address ?? null;
@endphp

<div class="col-lg-4 col-md-6">
    <div class="card mb-4 shadow-sm">
        <div class="card-body p-0">
            <div style="position:relative">
                <img
                    src="{{ $img }}"
                    style="width:100%;height:220px;object-fit:cover;"
                    alt="{{ $title }}"
                >
            </div>
        </div>

        <div class="card-body">
            <h4 class="mb-1" style="font-size:18px">
                {{ \Illuminate\Support\Str::limit($title, 45) }}
            </h4>

            <div class="text-muted mb-2" style="font-size:13px">
                {{ $vehicle->brand_name ?? '-' }}
                /
                {{ $vehicle->model_name ?? '-' }}
                @if(!empty($vehicle->version_name))
                    / {{ $vehicle->version_name }}
                @endif
            </div>

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

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

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

          @if(!empty($vehicle->zone_name) || !empty($vehicle->city_name))
    <div class="mb-2" style="font-size:13px;color:#666;">
        <i class="fas fa-map-marker-alt mr-1"></i>

        @if(!empty($vehicle->zone_name))
            {{ $vehicle->zone_name }}
        @endif

        @if(!empty($vehicle->city_name))
            @if(!empty($vehicle->zone_name)), @endif
            {{ $vehicle->city_name }}
        @endif

    </div>
@endif
            @if(!empty($address))
                <div class="mb-1" style="font-size:13px;color:#666;">
                    {{ \Illuminate\Support\Str::limit($address, 60) }}
                </div>
            @endif

             <div style="font-size:13px;color:#888">
   <strong> {{ __('Published on') }}:</strong> {{ \Carbon\Carbon::parse($vehicle->created_at)->format('d/m/Y') }}
</div>

            <hr>

            <div class="d-flex align-items-center mb-3">
                <img
                    src="{{ $dealerPhoto }}"
                    style="width:40px;height:40px;border-radius:50%;object-fit:cover;margin-right:10px"
                    alt="{{ $dealerName }}"
                >

                <div>
                    <strong style="font-size:14px">
                        {{ $dealerName }}
                    </strong>

                    <div style="font-size:12px;color:#888">
                        {{ $vehicle->email ?? '' }}
                    </div>


                </div>
            </div>

            <a
                href="{{ route('user.dealer_marketplace.vehicle_details', $vehicle->id) }}"
                class="btn btn-primary btn-block"
            >
                <i class="fas fa-eye"></i>
                {{ __('View Details') }}
            </a>
        </div>
    </div>
</div>

@endforeach

<div class="col-md-12 mt-4">
    {{ $vehicles->links() }}
</div>

@else

<div class="col-md-12">
    <div class="text-center p-5">
        <h4>{{ __('No vehicles available') }}</h4>
        <p class="text-muted">
            {{ __('There are currently no shared vehicles from other dealerships.') }}
        </p>
    </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');

    const selectedModelId = "{{ request('model_id') }}";
    const selectedVersionId = "{{ request('version_id') }}";
    const selectedStateId = "{{ request('state_id') }}";
    const selectedCityId = "{{ request('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.dealer_marketplace.get_models') }}?brand_id=" + brandId)
                .then(response => response.json())
                .then(data => {
                    data.forEach(item => {
                        const option = document.createElement('option');
                        option.value = item.id;
                        option.textContent = item.name;
                        if (selectedModelId && selectedModelId == item.id) {
                            option.selected = true;
                        }
                        modelSelect.appendChild(option);
                    });

                    if (selectedModelId) {
                        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.dealer_marketplace.get_versions') }}?model_id=" + modelId)
                .then(response => response.json())
                .then(data => {
                    data.forEach(item => {
                        const option = document.createElement('option');
                        option.value = item.id;
                        option.textContent = item.name;
                        if (selectedVersionId && selectedVersionId == 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.dealer_marketplace.get_states') }}?country_id=" + countryId)
                .then(response => response.json())
                .then(data => {
                    data.forEach(item => {
                        const option = document.createElement('option');
                        option.value = item.id;
                        option.textContent = item.name;
                        if (selectedStateId && selectedStateId == item.id) {
                            option.selected = true;
                        }
                        stateSelect.appendChild(option);
                    });

                    if (selectedStateId) {
                        stateSelect.dispatchEvent(new Event('change'));
                    }
                });
        });

        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.dealer_marketplace.get_cities') }}?state_id=" + stateId)
                .then(response => response.json())
                .then(data => {
                    data.forEach(item => {
                        const option = document.createElement('option');
                        option.value = item.id;
                        option.textContent = item.name;
                        if (selectedCityId && selectedCityId == item.id) {
                            option.selected = true;
                        }
                        citySelect.appendChild(option);
                    });
                });
        });
    }
});
</script>
@endsection