@extends('front.front_layouts.main')

@section('content')

    @include('front.front_component.category_slider')

    <section class="top-section">
        <div class="container">
            <div class="header">
                <h2 class="title">
                    <img class="ml-2 icon" src="{{$product->supplierCategory()->image_url}}" alt="">
                    {{$product->supplierCategory()->name}}
                </h2>
                <div class="line ml-0"></div>
            </div>
            <form class="search-form">
                <div class="row mx-0">
                    <div class="col-lg-4 row align-items-center mx-0 px-0">
                        <label class="col-sm-3 col-form-label">بحث عن متجر</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="إسم المتجر">
                        </div>
                    </div>
                    <div class="col-lg-4 row align-items-center mx-0 px-0">
                        <label class="col-sm-3 col-form-label">المحافظة</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="exampleFormControlSelect1">
                                <option selected disabled>إختر المحافظة</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                                <option>5</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-4 row align-items-center mx-0 px-0">
                        <label class="col-sm-3 col-form-label">بحث عن صنف</label>
                        <div class="col-sm-9">
                            <input type="text" class="form-control" placeholder="إسم الصنف أو رقم الباركود">
                        </div>
                    </div>
                </div>
            </form>
            <div class="row">
                @php
                    $supplier=$product->supplier;
                @endphp
                <x-front.supplier_box :supplier="$supplier"/>
            </div>
            <div class="product-details">
                <div class="row">
                    <div class="col-lg-6">

                        <div class="img big easyzoom easyzoom--overlay">
                            <a href="{{ $product->image_url }}">
                                <img src="{{ $product->image_url }}" alt="" />
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-1">
                        <div class="row">
                            @foreach($product->product_images as $image)
                            <div class="col-2 col-lg-12 mt-2 mt-lg-0">
                                <div class="img small" data-zoom="{{$image->image_url}}">
                                    <img class="lazyload" data-src="{{$image->image_url}}" alt="">
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <h3 class="product-title">{{$product->title}}</h3>
                        <h4 class="product-price"><span>{{$product->getMainUnit()->price}}</span> {{$product->country->currency}}</h4>
                        <p>{{$product->description}}</p>
                        <div class="country">صنع فى {{$product->country->name}}</div>
                        <form class="form" id="cart_product">
                            <input type="hidden" name="product_id" value="{{$product->id}}">
                            @csrf
                            <div class="row">
                                <div class="col-md-7">
                                    <select name="unit" class="form-control rounded-0">
                                        <option selected disabled>إختر الوحدة</option>
                                        @foreach($product->product_unit as $unit)
                                            <option {{ $unit->is_main?'selected':'' }}  value="{{ $unit->id }}">{{ $unit->unit_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-5 text-left">
                                    <div class="quantity-counter">
                                        <input type="button" value="-" class="btn minus">
                                        <input step="1" min="1" max="" name="qty" value="1" class="form-control mb-0 text-center quantity-input">
                                        <input type="button" value="+" class="btn plus">
                                    </div>
                                    <button type="submit" class="btn add mt-0 mt-md-3 hvr-shadow">إضافة إلى الطلب</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="col-lg-12">
                        <div class="row">

                            @foreach($product->attribute_values as $attribute)

                            <div class="col-12 col-md-6 col-lg-3">
                                <div class="properties"><span>{{$attribute->attribute->label}}</span>:<span>{{$attribute->getValueAttribute()}}</span></div>
                            </div>
                                @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="container">
            <div class="header">
                <h2 class="title">منتجات مرتبطة</h2>
                <div class="line"></div>
                <a href="{{ route('front.sale') }}" class="link hvr-shadow">عرض الكل</a>
            </div>
            <div class="product-carousel owl-carousel owl-theme">
                @foreach($related_products as $product)

                <div class="item">

                    {{--@if(!$product->product_offer->isNotEmpty())--}}

                        @include('front.front_component.product')

                    {{--@endif--}}


                </div>
                @endforeach

            </div>
        </div>
    </section>
@push('script')
    <script>
        $('.product-details .img.small').on('click', function () {
            var image = $(this).find('img').attr('src');
          //  var zoom = $(this).data('zoom');
            var bigImage = $('.product-details .img.big');
          //  bigImage.find('a').attr('href', zoom);
            bigImage.find('img').attr('src', image);
        });
        submit_cart_by_id('#cart_product','POST','{{route('cart.add')}}','إضافة إلى الطلب');
    </script>
    <script>
        $(document).ready(function() {
            $('.product_card_select').on('change', function () {
                var type = $(this).data('type');
                var formData = {
                    'id': $(this).val(),
                    'type': type
                };
                var main_div = $(this);
                $.ajax({
                    type: 'Get',
                    url: '{{ route('front.getSelectData') }}',
                    data: formData,
                    dataType: 'json',
                    encode: true
                }).done(function(data) {
                    if(type == 'bouns'){
                        main_div.parent().parent().find('.price').html(data.data.price);
                        main_div.parent().parent().find('.ponce').html(data.data.bonce);
                    }else{
                        main_div.parent().parent().find('.old-price').html(data.data.old_price);
                        main_div.parent().parent().find('.price').html(data.data.price);
                    }
                }).fail(function(data){
                });
                event.preventDefault();
            });
        });
    </script>
    @endpush
@endsection