@extends('layouts.webshop')

@section('main-content')
<style>
    .category {
        background-color: white;
        color: black;
        /* text-transform: capitalize; */
        border-radius: 0px;
        border: 0px;
        box-shadow: rgba(0,0,0,0.2) 5px 5px 0px;
        display: block;
    }
    .category:hover {
        background-color: #D9D9D9 !important;
        color: #000000 !important;
    }
</style>

<div class="scroll-to-parts"></div>

<div class="w-100 d-flex justify-content-center bg-white mt-4" style="overflow: hidden;">
    <div class="mr-2 mr-md-5">
        <a href="{{ route('selected.car') }}" class="btn btn-primary py-3 p-1 p-md-3 mx-0 mx-md-5">Alkatrész kereső</a>
    </div>
    <div class="ml-2 ml-md-5">
        <a href="{{ route('article.number') }}" class="btn btn-dark py-3 p-1 p-md-3 mx-0 mx-md-5">Cikkszám kereső</a>
    </div>
</div>

<div class="container my-5">

        @if ( !$part_slug )
        <table class="table">
            <tr>
                <th>Keresett autómárka:</th>
                <th>Keresett típus:</th>
            </tr>
            <tr>
                <td><select id="car_make" class="w-100">
                    @foreach ( $car_makes as $item )
                        <option value="{{ $item->slug }}" @if( $item->slug == $make_slug ) selected @endif>
                            {{ $item->name }}
                        </option>
                    @endforeach
                </select></td>
                <td>
                <select id="car_model" class="w-100">
                    @if ( $make )
                        @foreach ( $make->car_models()->orderBy('short_name', 'ASC')->get()->unique('short_name') as  $car_model)
                            <option value="{{ $car_model->slug }}" @if( $car_model->slug == $model_slug ) selected @endif>
                                {{ $car_model->short_name }}
                            </option>
                        @endforeach
                    @endif
                </select>
                </td>
            </tr>
        </table>
        @endif

        @if( $make_slug )
            @include('webshop.breadcrumb', [$make_slug, $make, $model_slug, $models, $category, $category_slug, $sub_category_slug, $sub_category, $part_slug, $part])
            @if( $model_slug )
            <div class="d-flex flex-wrap justify-content-evenly">
                @if( !$category_slug )
                    @foreach ( $categories as $item )
                        @php
                            $count = $item->real_parts()->whereIn('car_model_id', $models->pluck('id') )->where('state', 'Eladható')->where('price', '>', 0)->count();
                        @endphp
                        @if( $count )
                        <div class="col-12 col-lg-4 px-2">
                            <a href="{{ route('selected.car', [$make_slug, $model_slug, $item->slug]) }}" class="btn btn-outline-primary my-2 category">
                                {{ $item->name }}
                                ({{ $count }})
                            </a>
                        </div>
                        @endif
                    @endforeach
                @else
                    @if( !$sub_category_slug )
                        @foreach ( $sub_categories as $item )
                            @php
                                $count = $item->real_parts()->whereIn('car_model_id', $models->pluck('id') )->where('state', 'Eladható')->where('price', '>', 0)->count();
                            @endphp
                            @if( $count )
                        <div class="col-12 col-lg-4 ">
                            <a href="{{ route('selected.car', [$make_slug, $model_slug, $category_slug, $item->slug]) }}" class="btn btn-outline-primary my-2 category">
                                {{ $item->name }}
                                ({{ $count }})
                            </a>
                        </div>
                        @endif
                        @endforeach
                    @else
                        @if( !$part_slug )
                            @foreach ( $parts as $item )
                                @php
                                    $count = $item->products()->whereIn('car_model_id', $models->pluck('id') )->where('state', 'Eladható')->where('price', '>', 0)->count();
                                @endphp
                                @if ( $count )
                        <div class="col-12 col-lg-4 ">
                            <a href="{{ route('selected.car', [$make_slug, $model_slug, $category_slug, $sub_category_slug, Str::slug($item->name), $item->id]) }}" class="btn btn-outline-primary my-2 category">
                                    {{ $item->name }}
                                    ({{ $count }})
                                </a>
                        </div>
                        @endif
                            @endforeach
                        @else
                            <h2 class="mx-auto pb-4 text-center">{{ $make->name }} {{ $models->first()->short_name }} {{ $part->name}}</h2>

                            <div class="container py-3 mb-3">
                                <div class="row">
                                    <div class="col-6 p-0">
                                        <strong>{{ $products->count()}} Találat</strong>
                                    </div>
                                    <div class="col-6 p-0">
                                        <select name="" id="" class="w-100">
                                            <option value="">Akciós termékek elöl</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            @foreach ( $products as $product )

                            @include('webshop.list_card', ['product' => $product, 'url' => [$make_slug, $model_slug, $category_slug, $sub_category_slug, $part_slug]])

                            @endforeach

                            <div class="w-100 p-3" style="background: #ffffff;">
                                <a href="{{ route('selected.car', [$make_slug, $model_slug]) }}"  style="color: #000000;"><h5 class="m-0 p-0"><strong class="d-flex align-items-center">További {{ $make->name }} {{ $models->first()->short_name }} alkatrészek <img src="{{ URL::asset('webshop/icon_arrow_01.png')}}" class="ml-1"></strong></h5></a>
                            </div>
                        @endif
                    @endif
                @endif
            </div>
            @endif
        @endif

</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#car_make').change(function(){
        location = '{{ route('selected.car', [':manufacturer']) }}'
            .replace(':manufacturer', $('#car_make').val());
    });

    $('#car_model').change(function() {
        location = '{{ route('selected.car', [':manufacturer', ':model']) }}'
            .replace(':manufacturer', $('#car_make').val())
            .replace(':model', $('#car_model').val().toLowerCase());
    });

    @if($scroll_to_parts) 
    $('html').animate({scrollTop: $('.scroll-to-parts').offset().top}, 2000);
    @endif
});
</script>
@endpush