@extends('front.layout.master')

@section('content')

    
    <main class="main-content">
        <div class="product-wrap">
            <div class="container">
                <div class="g-head">
                    <ul>
                        <li>
                            <a onclick="history.back();">
                                {{ __('messages.home') }}</a>
                        </li>
                        <li>{{$product->name}}</li>
                    </ul>
                </div>
                <div class="row">
                    <div class="col-lg-6 col-12">
                        <div class="product-images">
                            <section class="slider">
                                <div class="slider__flex">
                                    <div class="slider__col">
                                        <div class="slider__prev">
                                            <img src="{{asset('front/images/angle.svg')}}" alt="angle" />
                                        </div>

                                        <div class="slider__thumbs">
                                            <div class="swiper-container">
                                                <div class="swiper-wrapper">
                                                    @if ($product->files->count() > 0)
                                                        @foreach($product->files as $file)
                                                            <div class="swiper-slide">
                                                                <div class="slider__image">
                                                                    <img src="{{asset($file->image)}}" alt="" />
                                                                </div>
                                                            </div>
                                                        @endforeach
                                                    @else
                                                        <div class="swiper-slide">
                                                            <div class="slider__image">
                                                                <img src="{{$product->image_path}}" alt="" />
                                                            </div>
                                                        </div>
{{--                                                        <div class="item">  <img src="{{$product->image_path}}" alt="" /></div>--}}

                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="slider__next">
                                            <img src="{{asset('front/images/angle.svg')}}" alt="angle" />
                                        </div>
                                    </div>
                                    <input type="hidden"  id="priceDis" value="{{$product->discount}}">


                                                <div class="slider__images">
                                        <div class="swiper-container">
                                            <div class="swiper-wrapper">


                                                @if ($product->files->count() > 0)
                                                    @foreach($product->files as $file)
                                                        <div class="swiper-slide zoomable">
                                                            <div class="slider__image">
                                                                <img
                                                                        src="{{asset($file->image)}}"
                                                                        alt=""
                                                                        data-zoom-image="{{asset($file->image)}}"
                                                                        class="zoomable__img"
                                                                />
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                @else

                                                    <div class="swiper-slide zoomable">
                                                        <div class="slider__image">
                                                            <img
                                                                    src="{{$product->image_path}}"
                                                                    alt=""
                                                                    data-zoom-image="{{$product->image_path}}"
                                                                    class="zoomable__img"
                                                            />
                                                        </div>
                                                    </div>

                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>
{{--                    @dd($product)--}}
                    <div class="col-lg-5 col-12">
                        <div class="product-infos">
                            <div class="infos-top">
                                <b>{{$product->tager?->name}}</b>
                                <h3>{{$product->name}}</h3>
                                <p>
                                    <span>{{$product->discount}} {{ __('messages.kd') }} </span>
                                    <span class="old"> {{$product->mainprice}} {{ __('messages.kd') }} </span>
                                </p>
                            </div>
                            <div class="infos-extras">
                                <ul>
                                    <li>
                                        <p>
                                            <span>{{$product->Size_guide}}</span>
{{--                                            <span>العرض : 20 سم</span>--}}
                                        </p>
                                        <button
                                                type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#sizesModal"
                                        >
                                            {{ __('messages.size_guide') }}
                                        </button>
                                    </li>
                                    <li>
                                        <button
                                                type="button"
                                                data-bs-toggle="modal"
                                                data-bs-target="#giftCardModal"
                                                class="gift-card-btn"
                                        >
                                            {{ __('messages.gift_card') }}
                                            <img src="{{asset('front/images/arrow-left.svg')}}" alt="arrow-left" />
                                        </button>
                                    </li>
                                </ul>
                            </div>
                            <div class="infos-description">
                                {!! $product->content !!}
                            </div>
                            <form action="{{route('addedCart')}}" method="post" id="addedForm" data-id="{{$product->id}}" data-price="{{$product->discount}}">
                                @method('post')
                                @csrf