@extends('website.layouts.globalLayout')

@section('content')
<div class="content pharmacy-cart-content" style="min-height: 472.602px;">
    <div class="container">

        <div class="product-description-info">
            <div class="row">
                <div class="col-lg-5 col-md-6">
                    <div class="prod-widget">
                        <div class="deal-pro-img">
                            <div class="deal-pro-tags">
                                <span class="offer">-10% OFF</span>
                            </div>
                            <a href="">
                                <img src="{{asset($drug->image ?? "no-image.png")}}" alt="" class="img-fluid">
                            </a>
                            <div class="zoom-icon">
                                <a href="javascript:void(0);">
                                    <i class="fas fa-expand-arrows-alt"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7 col-md-6">
                    <div class="pro-list">
                        <div class="prod-widget">
                            <div class="deal-pro-detail">
                                <h4><a href="">{{$drug->speciality_name ?? "nom médicament introuvable"}}</a></h4>
                                <ul class="brand-pro">
                                    <li>Pharmacie: <span>Guigon</span></li>

                                </ul>
                                <div class="pro-pricelist product-description-pricelist">
                                    <h2>{{$drug->price}} Fcfa </h2>
                                </div>
                                <div class="pro-pricelist product-description-count">
                                    <div class="product-det-buy">
                                        <div class="product-quantity">
                                            <span class="quantity-btn qtyminus">-</span>
                                            <input type="number" class="quntity-input" id="quntity-input" step="1" min="1" max="100" value="1">
                                            <span class="quantity-btn qtyplus">+</span>
                                        </div>
                                    </div>
                                    <a href="{{route('patient.drugs.cart.add.soft', $drug->id)}}" class="btn book-btn"><img src="{{asset('assets/frontoffice/img/icons/cart-icon.svg')}}"
                                            alt="" class="w-auto d-inline-block me-1"> Ajouter au panier</a>
                                    <ul>
                                        <li>
                                            <a href="javascript:void(0);"><i class="feather-heart"></i></a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0);"><i class="feather-shuffle"></i></a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="product-description-share">
                                    <ul>
                                        <li>Categories : <span>-- non renseigné</span></li>
                                        <li>Disponiblité : <span class="in-stock">En stock</span></li>

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



        <div class="related-products-section">
            <div class="row">
                <div class="col-md-12">
                    <div class="section-header sec-head text-center">
                        <h2>Dans la même catégorie</h2>
                    </div>
                </div>
            </div>
            <div class="row">
                @foreach (drugs()->take(6) as $drug)
                <div class="col-md-6 col-lg-3 d-flex">
                    <div class="prod-widget w-100">
                        <div class="deal-pro-img">
                            <div class="deal-pro-tags">
                                <a href="javascript:void(0);"
                                    class="favourite-icon favourite-icon-filled">
                                    <i class="far fa-heart"></i>
                                </a>
                            </div>
                            <a href="{{route('website.pharmacies.drugs.details', $drug->id)}}">
                                <img src="{{asset($drug->image ?? "no-image.png")}}" alt=""
                                    class="img-fluid">
                            </a>
                        </div>
                        <div class="deal-pro-detail">
                            <h6>{{$drug->posologie ?? "non posologie"}}</h6>
                            <h4><a href="{{route('website.pharmacies.drugs.details', $drug->id)}}">{{ $drug->speciality_name}}</a></h4>
                            <h2>{{$drug->price}} Fcfa </h2>

                            <div class=" d-flex justify-content-between">
                                <a href="{{route('website.pharmacies.drugs.details', $drug->id)}}" class="btn book-btn"><img
                                    src="{{asset('assets/frontoffice/img/icons/cart-icon.svg')}}" alt=""
                                    class="d-inline-block me-1"> Acheter</a>
                                    <a href="{{route('patient.drugs.cart.add.soft', $drug->id)}}" class="btn book-btn"><i class="fa fa-plus"></i> Panier</a>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach

            </div>
        </div>

    </div>
</div>

@include('website.includes.part.footer')
@endsection

@section('scrips')
    <script>
        const input = document.querySelector('#quntity-input');
        const btnminus = document.querySelector('.qtyminus');
        const btnplus = document.querySelector('.qtyplus');

        if (input && btnminus && btnplus) {

            const min = Number(input.getAttribute('min'));
            const max = Number(input.getAttribute('max'));
            const step = Number(input.getAttribute('step'));

            function qtyminus(e) {
                const current = Number(input.value);
                let newval = (current - step);
                if(newval < min) {
                        newval = min;
                    } else if(newval > max) {
                        newval = max;
                    }
                    input.value = Number(newval);
                    e.preventDefault();
                }

                function qtyplus(e) {
                    const current = Number(input.value);
                    let newval = (current + step);
                    if(newval > max) newval = max;
                    input.value = Number(newval);
                    e.preventDefault();
                }

                btnminus.addEventListener('click', qtyminus);
                btnplus.addEventListener('click', qtyplus);

            } // End if test
    </script>
@endsection