@extends('web.layouts.app')

@section('title', __('dashboard.Add New Product'))
@section('page_heading', __('dashboard.Add New Product'))

@section('styles')


@endsection

@section('content')
    <div class="content">

        <div class="index-header-home2">


            <div class="index-header-content">


                @include('web.partials.index.slider')

            </div>

            @include('web.partials.index.header_search_container')

        </div>

        @include('web.partials.index.categories')

        @include('web.partials.index.best_sellers')

        @include('web.partials.index.big_banner')

        @include('web.partials.index.best_offers')

        @include('web.partials.index.offers')

       @include('web.partials.index.brands')

        <div class="products-section-boxed">
            <div class="container">

                <div class="section-header">
                    <div class="section-header-info wow bounceInRight">
                        <h3>خصيصاً لك</h3>
                        <p>تصفح العديد من المنتجات الخاصة بسيارتك</p>
                    </div>
                    <a href="{{ route('products.list') }}" class="wow bounceInLeft">عرض المزيد
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M11.8284 12.0005L14.6569 14.8289L13.2426 16.2431L9 12.0005L13.2426 7.75781L14.6569 9.17203L11.8284 12.0005Z">
                            </path>
                        </svg>
                    </a>
                </div>

                <div class="products-container">
                    <div class="row justify-content-center">

                        @foreach ($recommendedProducts as $product)
                            <div class="col-lg-4 col-md-6">
                                <div class="product-card wow bounceInDown">

                                    <a href="{{ route('products.details', ['id' => $product->id]) }}" class="product-image-link">
                                        <div class="product-image">
                                            <img src="{{ Storage::url($product->main_image) }}" alt="{{ $product->name }}">
                                        </div>
                                    </a>

                                    <div class="product-info">
                                        <div class="product-category">
                                            @if (isset($product->category) && $product->category)
                                                {{ $product->category->name }}

                                            @else
                                                قسم غير محدد
                                            @endif
                                        </div>
                                        <a href="{{ route('products.details', ['id' => $product->id]) }}" class="product-name-link">
                                            <h3>{{ $product->name }}</h3>
                                        </a>
                                        <div class="product-price">
                                            <div class="current">
                                                {{ $product->price }}<span>L.E</span>
                                            </div>
                                            @if ($product->has_special_discount)
                                                <div class="discount">
                                                    {{ $product->original_price }}<span>L.E</span>
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                </div>
                            </div>
                        @endforeach

                    </div>
                </div>

            </div>
        </div>

        @include('web.partials.index.partners')

    </div>
@endsection

@section('scripts')

    <script>
        $(document).ready(function() {
            $('#brand').change(function() {
                let brandId = $(this).val();
                $('#car_model').prop('disabled', true).empty().append('<option value="">نوع السيارة</option>');
                $('#engine').prop('disabled', true).empty().append('<option value="">نوع المحرك</option>');

                if (brandId) {
                    $.ajax({
                        url: "{{ route('get.car.models') }}",
                        type: "GET",
                        data: {
                            brand: brandId
                        },
                        success: function(data) {
                            $('#car_model').prop('disabled', false);
                            $.each(data, function(key, value) {
                                $('#car_model').append('<option value="' + value.id + '">' + value.name + '</option>');
                            });
                        }
                    });
                }
            });

            $('#car_model').change(function() {
                let carModelId = $(this).val();
                $('#engine').prop('disabled', true).empty().append('<option value="">نوع المحرك</option>');

                if (carModelId) {
                    $.ajax({
                        url: "{{ route('get.engines') }}",
                        type: "GET",
                        data: {
                            carModel: carModelId
                        },
                        success: function(data) {
                            $('#engine').prop('disabled', false);
                            $.each(data, function(key, value) {
                                $('#engine').append('<option value="' + value.id + '">' + value.name + '</option>');
                            });
                        }
                    });
                }
            });

            $('#search-button').click(function(e) {
                e.preventDefault();
                let brandId = $('#brand').val();
                let carModelId = $('#car_model').val();
                let engineId = $('#engine').val();
                let categoryId = $('#category').val();

                let url = "{{ route('products.list') }}?" +
                    (brandId ? "brand=" + brandId + "&" : "") +
                    (carModelId ? "car_model=" + carModelId + "&" : "") +
                    (engineId ? "engine=" + engineId + "&" : "") +
                    (categoryId ? "category=" + categoryId : "");

                url = url.replace(/&$/, "");

                window.location.href = url;
            });
        });
    </script>

@endsection