@extends('website.layouts.globalLayout')

@section('content')

<div class="content" style="min-height: 481.602px;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xl-7 col-lg-12 order-md-last order-sm-last order-last map-left">
                <div class="row align-items-center mb-4">
                    <div class="col-md-6 col">
                        <h4>{{$pharmacies->count()}} Pharmacies trouvés</h4>
                    </div>
                    <div class="col-md-6 col-auto">

                        <div class="sort-by d-sm-block d-none">
                            <span class="sortby-fliter">
                                <select class="form-select">
                                    <option>Trier par</option>
                                    <option class="sorting">Pharmacie de garde</option>
                                    <option class="sorting">Pas de garde</option>

                                </select>
                            </span>
                        </div>
                    </div>
                </div>

                <div class="row">
                    @foreach ($pharmacies as $pharmacy)
                    <div class="col-lg-4">
                            <div class="category-box aos aos-init aos-animate" data-aos="fade-up">
                                <div class="category-image category-image-primary">
                                    <img src="{{asset($pharmacy->image ?? "no-image.png")}}" alt="">
                                </div>
                                <div class="category-content">
                                    <strong>{{$pharmacy->name}}</strong> <br>
                                    <small>{{$pharmacy->address}}, {{$pharmacy->town}}, {{$pharmacy->country}}</small> <br>
                                    {{-- <small></small> <br> --}}
                                    <a href="{{route('website.pharmacies.show', $pharmacy->id)}}" class="badge mt-2 bg-primary p-2">Plus
                                        détails</a>
                                </div>
                            </div>
                    </div>

                    @endforeach


            </div>


            <div>
                {!!$pharmacies->links() !!}
            </div>


        </div>

        <div class="col-xl-5 col-lg-12 map-right">
            <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d16542.3007874719!2d-17.25561328733031!3d14.733609750167378!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xec10cb6af11911d%3A0xde968a753c166425!2sSENICO%20SA!5e0!3m2!1sen!2ssn!4v1673027083513!5m2!1sen!2ssn" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

        </div>

    </div>

</div>
</div>

@endsection