@section('page_slug', 'product')
@section('page_title', $product->name)
@extends('layout')
@section('content')
    <div class="container mb-10 mt-5 pt-20">
    <div class="max-w-full mx-0 hide">
        <a href="{{route('home')}}">Accueil</a> >
        @if($category)
            @foreach($category->ancestors as $parentCategory)
                <a href="{{route('categoryOrProduct',['url' => $parentCategory->url ] )}}">{{$parentCategory->name}}</a> >
            @endforeach <a href="{{route('categoryOrProduct',['url' => $category->url ] )}}">{{$category->name}}</a> >
        @endif
            {{$product->name}}
    </div>

    <h1 class="text-fcgrey text-4xl font-bold mb-5 text-center">{{$product->name}}</h1>


        <div class="text-fcgrey text-xl mb-5 text-center">@if($category)<a href="{{route('categoryOrProduct',['url' => $category->url ] )}}">{{$category->name}}</a> @endif @if($product->ref)<span class="text-sm">#{{$product->ref}}</span>@endif</div>

    <div class="row w-full px-4 md:px-6 text-xl text-gray-800 leading-normal g-0">
        <div class="col content-start col-12 lg:col-6 row" style="align-content: baseline;">
            <div class="col col-12 md:col-12 main-image">
                <img  class="w-full" src="{{$product->picture->url}}"  alt="{{$product->picture->name}}" data-src="{{$product->picture->url}}"/>
            </div>
            <div class="col col-12 md:col-12 mb-5 md:mb-0 md:inline more-images">
                @if($product->pictures->count()  > 0)
                <div class="row row-cols-{{$product->pictures->count() -1}}">
                    @foreach($product->morePictures as $picture)
                    <div class="col">
                        <img class="w-full" src="{{$picture->url}}" alt="{{$picture->name}}"/>
                    </div>
                    @endforeach
                </div>
                @endif
            </div>


        </div>
        <div class="col col-12 lg:col-6 text-left md:text-right">
            @if($product->description)
                <div class="row m-5">
                    <div class="col col-12 text-left md:text-right">
                        <p class="text-sm text-gray-800">{!!$product->description !!}</p>
                    </div>
                </div>
            @endif
            @if($product->criterions->count() > 0)
                <div class="criterions">
                    @foreach($product->criterions as $criterion)
                        <div class="criterion" data-criterion="{{$criterion->slug}}">
                            @if($product->criterions->count() > 1)
                                <div class="criterion-title">{{$criterion->title}}</div>
                            @endif
                            <div class="criterion-value-list row">
                                @foreach($product->criterionValueList($criterion) as $value)
                                    <div class="col-6 md:col-6 lg:col-3 text-black font-medium text-sm criterion-value text-center " data-value="{{$value}}">
                                        <div class="bg-gray-300  m-1  border-gray-300 rounded-xl">
                                            {{$value}}
                                        </div>
                                    </div>
                                    {{--@foreach($product->declinations as $declination)
                                            @foreach($declination->where('criterion.name', ) as $criteron)
                                                {{$criteron->title}}  : {{$criteron->pivot->value}}
                                            @endforeach
                                    @endforeach--}}
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                    <a class="text-sm text-fcgrey-dark" href="{{route('contact', ['subject' => 'missing_declination', 'message' => 'Bonjour, il manque une pointure au produit '. $product->name])}}">Il manque une pointure ? prevenez nous</a>
                </div>
                <div class="declinations mt-5 md:mt-0">
                    @foreach($product->declinations as $declination)
                        @php
                            $customOffer = null;
                            if(auth()->user())    {
                                $customOffer = auth()->user()->hasCustomOfferForDeclination( $declination );
                                    }
                        @endphp
                        <div class="declination{{$declination->activeOffers->count() == 0 && !$customOffer?' disabled':''}}"
                             data-id="{{$declination->id}}"
                             @foreach ($declination->criterions as $criterion)
                             data-{{$criterion->slug}}="{{$criterion->pivot->value}}"
                            @endforeach
                        >
                            <span class="decli-criterions-text hide">
                    @foreach ($declination->criterions as $criterion)
                                    {{$criterion->slug}} : {{$criterion->pivot->value}} <br/>
                                @endforeach
                        </span>
                            <div class="row">
                                <div class="offers mb-10 col text-center col-12 md:col-6">

                                    @if($declination->activeOffers->count() > 0 || $customOffer)


                                        <form action="{{route('cart')}}" method="post">
                                            @csrf
                                            <input type="hidden" name="action" value="addProduct">
                                            <input type="hidden" name="slug" value="{{$product->slug}}">
                                            <input type="hidden" name="declination" value="{{$declination->id}}">
                                            <button class="btn-large btn--fc buy-button">Acheter pour @if($customOffer)
                                                    {{$customOffer->price}}€
                                                @else
                                                    {{$declination->lowestOffer->price}}€
                                                @endif</button>
                                        </form>
                                        @if(auth()->user())
                                            @if(auth()->user()->allowBuyOfferDeposit())
                                                <div class="put-offer btn bg-fcgrey-midLight text-white modal-open mt-5 " data-modal=".buy-offer-popup">
                                                    Déposer une offre d'achat
                                                </div>
                                                @else
                                                {{-- TODO message vous avez déjç posté trop d'offre--}}
                                            @endif
                                            @else
                                            <a class="btn bg-fcgrey-midLight text-white mt-5 " href="{{route('login')}}">
                                                Déposer une offre d'achat
                                            </a>
                                        @endif
                                    @else
                                        <span class="text-sm">Pas d'offre pour le moment <br/>vous voulez vendre la votre ? <br/></span>
                                        <a class="btn bg-fcgrey-midLight text-white " href="{{route('login')}}">
                                            Déposer une offre d'achat
                                        </a>
                                    @endif

                                </div>
                                <div class="text-center col-12 md:col-6">
                                    @if(auth()->user() && auth()->user()->isSeller())
                                        <div class="put-offer btn-large btn--fc modal-open sell-button" data-modal=".offer-popup">
                                            Déposer une offre de vente
                                        </div>
                                    @else
                                        <a class="btn-large btn--fc sell-button" href="{{route('account.seller')}}">
                                            Déposer une offre de vente
                                        </a>
                                    @endif


                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
                <div class="decli-not-found hidden">
                    {{__('randoloc.product.combination_not_found')}}
                </div>

            @endif



        </div>

        {{----}}





    </div>

    @if(auth()->user() && auth()->user()->isSeller())
        <div class="modal hide offer-popup fc-modal" id="offer-popup">
        <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>

        <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">

            <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
                <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                    <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                </svg>
                <span class="text-sm">(Esc)</span>
            </div>

            <!-- Add margin if you want to see some of the overlay behind the modal-->
            <div class="modal-content py-4 text-left px-6">
                <!--Title-->
                <div class="flex justify-between items-center pb-3">
                    <p class="text-2xl font-bold">Déposer mon offre</p>
                    <div class="modal-close cursor-pointer z-50">
                        <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                            <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                        </svg>
                    </div>
                </div>

                <p>{{$product->name}}</p>
                <p class="declination-criterions-txt"></p>
                <!--Body-->
                <form class="offer-popup-form" method="post" action="{{route('product.put-offer', [$product->slug])}}">
                    @csrf

                    <div class="flex flex-row shadow appearance-none border border-fcgrey-dark rounded w-full  text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline">
                        <input type="number" name="price" class="bg-grey-lighter price-offer text-grey-darker py-2 px-3 w-full roundedrounded offer-input">
                        <span class="flex items-center bg-grey-lighter rounded rounded-r-none px-3 font-bold text-grey-darker rounded">€</span>
                    </div>
                    <div class="message hide"><span class="text"></span></div>

                <p class="text-sm text-grey">LES COMMISSIONS APPLIQUÉES PAR Randoloc POUR UNE VENTE SONT DE {{config('setting.sellerFeesRate') *100}}% + {{config( 'setting.seller_shipping_fees' )}}€ DE PORT.<br/>
                    Calcul de vos frais : <span class="fee-amount" data-rate="{{config('setting.sellerFeesRate')}}" data-shipping="{{config( 'setting.seller_shipping_fees' )}}">{{config( 'setting.seller_shipping_fees' )}}</span>€
                    <br/><br/>
                    Une fois l’offre déposée, vous vous engagez à envoyer le produit sous {{config('setting.seller_ship_product_time_limit')}} jours (jours ouvrés) dès lors que votre article a été vendu, sous peine d’un bannissement temporaire ou définitif.</p>
                <!--Footer-->
                <div class="2 text-center" >
                    <label>
                        <input type="checkbox" class="cgv" name="cgv" value="1"> Veuillez lire et accepter les conditions générales de vente pour continuer <br/>
                        <a class="text-fcgrey-midLight" target="_blank" href="{{route('page', ['page'=>'conditions-genererales-de-ventes'])}}">Lire les conditions générales de vente</a>
                    </label>
                </div>
                <div class="flex justify-between pt-2">
                    <div class="modal-close btn btn--fc-dark">Fermer</div>
                    <button class="btn btn--fc cgv-prevent disabled" disabled>Soumettre</button>
                </div>
                </form>

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

    @endif

    @if(auth()->user())
        <div class="buy-offer-popup hide modal fc-modal" id="buy-offer-popup">
            <div class="modal-overlay absolute w-full h-full bg-gray-900 opacity-50"></div>

            <div class="modal-container bg-white w-11/12 md:max-w-md mx-auto rounded shadow-lg z-50 overflow-y-auto">

                <div class="modal-close absolute top-0 right-0 cursor-pointer flex flex-col items-center mt-4 mr-4 text-white text-sm z-50">
                    <svg class="fill-current text-white" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                        <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                    </svg>
                    <span class="text-sm">(Esc)</span>
                </div>

                <!-- Add margin if you want to see some of the overlay behind the modal-->
                <div class="modal-content py-4 text-left px-6">
                    <!--Title-->
                    <div class="flex justify-between items-center pb-3">
                        <p class="text-2xl font-bold">Soumettre mon offre d'achat</p>
                        <div class="modal-close cursor-pointer z-50">
                            <svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18">
                                <path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
                            </svg>
                        </div>
                    </div>
                    <p>{{$product->name}}</p>
                    <p class="declination-criterions-txt"></p>
                    <!--Body-->

                    <form class="offer-popup-form" method="post" action="{{route('product.put-buy-offer', [$product->slug])}}">
                        @csrf

                        <div class="flex flex-row shadow appearance-none border border-fcgrey-dark rounded mb-3">
                            <input type="number" name="price" class="price-offer bg-grey-lighter  text-grey-darker py-2 px-3 rounded w-full  text-gray-700  leading-tight focus:outline-none focus:shadow-outline offer-input">
                            <span class="flex items-center bg-grey-lighter rounded rounded-r-none px-3 font-bold text-grey-darker rounded">€</span>
                        </div>

                        <div class="message hide"><span class="text"></span></div>
                        <p class="text-sm">Une fois l’offre acceptée par l’un de nos vendeurs, vous aurez {{(config('setting.time_before_cancel_buy_offer') / 60)}} heures pour passer commande, si vous ne le faites pas votre offre d’achat sera annulée et vous vous exposez à un bannissement temporaire ou définitif. </p>
                        Calcul de vos frais : <span class="fee-amount" data-rate="{{config('setting.buyerFeesRate')}}" data-shipping="{{config( 'setting.buyer_shipping_fees' )}}">{{config( 'setting.buyer_shipping_fees' )}}</span>€
                    <!--Footer-->
                        <div class="2 text-center" >
                            <label>
                                <input type="checkbox" class="cgv" name="cgv" value="1"> Veuillez lire et accepter les conditions générales de vente pour continuer <br/>
                                <a class="text-fcgrey-midLight" target="_blank" href="{{route('page', ['page'=>'conditions-genererales-de-ventes'])}}">Lire les conditions générales de vente</a>
                            </label>
                        </div>
                    <div class="flex justify-between pt-2">
                        <div class="modal-close btn btn--fc-dark" >Fermer</div>
                        <button class="btn btn--fc cgv-prevent disabled" disabled>Valider mon offre</button>
                    </div>
                    </form>

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

    @endif
</div>
@endsection