@extends('front.front_layouts.main')

@section('content')

    {{--@include('front.front_component.sale_category_slider')--}}

    <section class="top-section">
        <div class="container">
            <div class="header">
                <h2 class="title"><img class="ml-2 icon" src="{{ asset('front_asset/assets/images/icons/money-bag.png')}}" alt="">الشروات</h2>
                <div class="line ml-0"></div>
            </div>
            <div class="product-details sale-inside mt-5">
                <div class="row">
                    <div class="col-lg-5">
                        <!--<div class="img big"><img class="lazyload" data-src="assets/images/product-big.png')}}" alt=""></div>-->
                        <div class="img big easyzoom easyzoom--overlay">
                            <a>
                                <img src="{{ $sale->sale_main_image->image_url }}" alt="" />
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-1">
                        <div class="row">
                            @forelse($sale->sale_images as $subimage)
                                <div class="col-2 col-lg-12 mt-2 mt-lg-0">
                                    <div class="img small" data-zoom="#">
                                        <img class="lazyload" data-src="{{ $subimage->image_url }}" alt="">
                                    </div>
                                </div>
                            @empty
                            @endforelse
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex justify-content-between align-items-center">
                            <h3 class="product-title">{{ $sale->name }}</h3>
                            <h3 class="product-title category">{{ $sale->supplierCategory->name }}</h3>
                        </div>

                        <div class="d-flex justify-content-between align-items-center">
                        <div >
                        <h4 class="product-price"><span>{{ $sale->count }}</span> قطعة</h4>

                        </div>

                        <h3 class="product-title category">{{\Carbon\Carbon::parse($sale->created_at)->format('d-m-Y')}}</h3>
                        </div>
                        <div class="sale-price"><span>{{ $sale->price }}</span> {{ $sale->currency_country_id}}</div>
                        <form class="form mt-0">
                            <div class="row">
                                <div class="col-12">
                                    <label class="color">تفاصيل الشروة</label>
                                    <textarea type="text" class="form-control mb-0 border-0 rounded-0 h-auto" rows="3" disabled>{{ $sale->description }}</textarea>
                                </div>
                                <div class="col-lg-4">
                                    <label class="color">إسم الناشر</label>
                                    <input type="text" class="form-control mb-0 border-0 rounded-0" value="{{ $sale->author }}" disabled>
                                </div>
                                <div class="col-lg-4">
                                    <label class="color">رقم الهاتف</label>
                                    <input type="text" class="form-control mb-0 border-0 rounded-0" value="{{ $sale->phone }}" disabled>
                                </div>
                                <div class="col-lg-4">
                                    <label class="color">رقم الموبايل</label>
                                    <input type="text" class="form-control mb-0 border-0 rounded-0" value="{{ $sale->mobile }}" disabled>
                                </div>
                                <div class="col-lg-4">
                                    <label class="color">رقم واتس أب</label>
                                    <input type="text" class="form-control mb-0 border-0 rounded-0" value="{{ $sale->whatsapp }}" disabled>
                                </div>
                                <div class="col-lg-4">
                                    <label class="color">المحافظة</label>
                                    <input type="text" class="form-control mb-0 border-0 rounded-0" value="{{ $sale->governorate->name }}" disabled>
                                </div>
                                <div class="col-lg-4">
                                    <label class="color">المنطقة</label>
                                    <input type="text" class="form-control mb-0 border-0 rounded-0" value="{{ $sale->region->name }}" disabled>
                                </div>
                                @if($sale->email)
                                    <div class="col-lg-4">
                                        <label class="color">البريد الإلكتروني</label>
                                        <input type="text" class="form-control mb-0 border-0 rounded-0" value="{{ $sale->email }}" disabled>
                                    </div>
                                @endif
                                {{--<div class="col-lg-12">--}}
                                    {{--<label class="color">العنوان تفصيلا</label>--}}
                                    {{--<input type="text" class="form-control mb-0 border-0 rounded-0" value="{{ $sale->address }}" disabled>--}}
                                {{--</div>--}}
                                <div class="col-md-6"></div>
                                <div class="col-md-6 text-left">
                                    <a href="https://wa.me/{{$sale->whatsapp}}" class="btn add mt-0 mt-md-3 hvr-float-shadow w-100" target="_blank">تواصل مع البائع عبر واتس آب</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@push('script')
    <script>
        $('.sale-inside .img.small').on('click', function () {
            var image = $(this).find('img').attr('src');
//            var zoom = $(this).data('zoom');
            var bigImage = $('.sale-inside .img.big');
//            bigImage.find('a').attr('href', zoom);
            bigImage.find('img').attr('src', image);
        });
    </script>
@endpush

@stop