@extends('website.layout')

@section('content')

<section class="banner-hosto" style="display: grid; grid-template-columns: 1fr 1fr; padding: 130px 35px 65px; color: #0c60a0; gap: 40px; align-items: center; min-height: calc(100vh - 83px - 240px);">
    <div style="align-self: center">
        <div class="title-banner" style="font-size: 2rem; margin-bottom: 20px;">L'E-Santé et L'E-Pharmacie</div>
        <div class="slogan-banner" style="font-size: 4rem; line-height: 67px; margin-bottom: 20px;" >LES SERVICES <br> MÉDICAUX, <br> DIGITALISÉS !</div>
        <div class="mb-5">
            En 2023, l'accès aux soins doit être facilité par
            une intelligence technologique qui puisse permettre
            une meilleure démocratisation et une meilleure organisation des soins.
        </div>
        <div class="d-flex gap-3 banner-buttons">
            <a class="btn btn-dark btn-lg login-btn border-0 banner-button" style="background-color: #0C60A0; width: 231px" href="{{route('register')}}">Rendez-vous médical</a>
            <a class="btn btn-dark btn-lg login-btn border-0 banner-button" style="background-color: #ED7418; width: 231px" href="{{route('register')}}">Plus d'infos</a>
        </div>
    </div>
    <div class="banner-hosto-image d-flex justify-content-end align-items-center">
        <img src="{{ asset('assets/frontoffice/img/illustration.png') }}" alt="illustration" style="width: 75%;">
    </div>
</section>

<section class="d-flex justify-content-center align-items-center text-white text-center" style="background-color: #275E9E; padding: 35px;">

    <div>
        <img src="{{ asset('assets/frontoffice/img/localisation.svg') }}" alt="position" class="d-none d-md-block" style="height: 170px;">
    </div>
    <div>
        <div style="font-size: clamp(14px, 3vw, 32px); margin-bottom: 30px">Trouver un médecin ou une pharmacie <br> à proximité de votre localisation</div>
        <div class="iq-search-bar d-none d-sm-block">
            <form action="{{ route('website.search') }}" method="post" id="searchForm" class="input-group">
                @csrf
                <select name="entity"
                        style="border-radius: 10px 0px 0px 10px !important; min-width: 100px !important; background-color: #D3EDFF !important; color: #0C60A0;" id="search_param"
                        class="btn btn-default iq-bg-liteblue dropdown-toggle" data-toggle="dropdown">
                    <option value="doctor">Docteur</option>
                    <option value="pharmacy">Pharmacie</option>
                    <option value="drug">Médicament</option>

                </select>
                <input type="text" class="form-control" style="min-width: 30vw !important;" name="search" required placeholder="">
                <button class="btn btn-se text-white" type="submit"
                        style="border-radius: 0px 10px  10px 0px !important; min-width: 100px !important; background-color: #ED7418 !important; ">
                    Recherche
                </button>
            </form>
        </div>

        <div class="search-box aos aos-init aos-animate mt-3 d-block d-sm-none" data-aos="fade-up">
            <form action="{{ route('website.search') }}" method="post">
                @csrf
                <select class="form-select" style="border: 1px solid #ccc !important; box-shadow: inset 0 0px 0px rgb(0 0 0 / 8%); border-radius: 5px; min-width: 100px;" name="entity" id="entity">
                    <option value="doctor">Docteur</option>
                    <option value="pharmacy">Pharmacie</option>
                    <option value="drug">Médicament</option>
                </select>
                <div class="form-group col-sm-12 col-md-6">
                    <input type="text" name="search" class="form-control w-100"
                           placeholder="Tapez ici pour rechercher">
                </div>
                <button type="submit" class="btn btn-primary search-btn mt-0"><i class="fas fa-search"></i>
                    <span>Rechercher</span></button>
            </form>
        </div>
    </div>

</section>

{{--<section class="specialities-section">--}}
{{--    <div class="shapes">--}}
{{--        <img src="{{asset('assets/frontoffice/img/shapes/shape-3.png')}}" alt="" class="img-fluid shape-3">--}}
{{--        <img src="{{asset('assets/frontoffice/img/shapes/shape-4.png')}}" alt="" class="img-fluid shape-4">--}}
{{--    </div>--}}
{{--    <div class="container">--}}
{{--        <div class="row">--}}
{{--            <div class="col-md-6">--}}
{{--                <div class="section-heading bg-area aos" data-aos="fade-up">--}}
{{--                    <h2>Les spécialités de nos médecins disponible</h2>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--        @php--}}
{{--        $doctors = doctors();--}}
{{--        @endphp--}}
{{--        <div class="row">--}}
{{--            @foreach (Gvalues()->where('type', "doctor_speciality") as $type)--}}
{{--            <div class="col-lg-3 col-md-6 aos" data-aos="fade-up">--}}
{{--                <div class="specialist-card d-flex">--}}
{{--                    <div class="specialist-img">--}}
{{--                        <img src="{{asset('assets/frontoffice/img/category/1.png')}}" alt="" class="img-fluid">--}}
{{--                    </div>--}}
{{--                    <div class="specialist-info">--}}
{{--                        <a href="#">--}}
{{--                            <h4>{{$type->value}}</h4>--}}
{{--                        </a>--}}
{{--                        <p>{{$doctors->where('speciality', $type->value)->count()}} Médecins</p>--}}
{{--                    </div>--}}
{{--                    <div class="specialist-nav ms-auto">--}}
{{--                        <a href="#"><i class="fas fa-long-arrow-alt-right"></i></a>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--            @endforeach--}}


{{--        </div>--}}
{{--    </div>--}}
{{--</section>--}}




<section class="our-doctors-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="section-heading aos" data-aos="fade-up">
                    <h2>Praticiens disponibles en téléconsultation expresse</h2>
                    <p></p>
                </div>
            </div>
            <div class="col-md-6 text-end aos" data-aos="fade-up">
                <div class="owl-nav slide-nav-2 text-end nav-control"></div>
            </div>
        </div>
        <div class="owl-carousel our-doctors owl-theme aos" data-aos="fade-up">

            @foreach (doctors() as $doctor)
            <div class="item">
                <div class="our-doctors-card">
                    <div class="doctors-header">
                        <a href="#"><img src="{{asset($doctor->avatar)}}" alt=""
                                class="img-fluid"></a>

                    </div>
                    <div class="doctors-body">
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <span class="d-inline-block average-ratings">3.5</span>
                        </div>
                        <a href="{{route('website.doctors.show', $doctor->id)}}">
                            <h4>{{$doctor->first_name}} {{$doctor->last_name}}</h4>
                        </a>
                        <p>{{$doctor->speciality}}</p>
                        <div class="location d-flex">
                            <p><i class="fas fa-map-marker-alt"></i> {{$doctor->town}}, {{$doctor->country}}</p>
                            <p class="ms-auto"><i class="fas fa-user-md"></i> {{$doctor->doctorAppointments->where('status', "valide")->count()}} Consultations</p>
                        </div>
                        <div class="row row-sm">
                            <div class="col-6">
                                <a href="{{route('website.doctors.show', $doctor->id)}}" class="btn view-btn" tabindex="0">Voir le profil</a>
                            </div>
                            <div class="col-6">
                                <a href="{{ route('website.doctor.booking', $doctor->id) }}" class="btn book-btn" tabindex="0">Rendez-vous</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>


<section class="clinic-features-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <div class="section-heading aos" data-aos="fade-up">
                    <h2>Nos pharmacies de garde</h2>
                </div>
            </div>
            <div class="col-md-6 text-end aos" data-aos="fade-up">
                <div class="owl-nav slide-nav-3 text-end nav-control"></div>
            </div>
        </div>
        <div class="owl-carousel clinic-feature owl-theme aos" data-aos="fade-up">
            @foreach (pharmacies() as $pharmacy)
            <div class="item">
                <div class="clinic-features">
                    <img src="{{asset($pharmacy->image ?? "no-image.png")}}" alt="" class="img-fluid">
                </div>
                <div class="clinic-feature-overlay">
                    <a href="{{route('website.pharmacies.show', $pharmacy->id)}}" class="img-overlay">{{$pharmacy->name}}</a>
                </div>
            </div>
            @endforeach

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

<section class="looking-section mt-4 pt-4">
    <div class="container mt-4">
        <div class="row">
            <div class="col-md-12">
                <div class="section-header aos aos-init aos-animate" data-aos="fade-up">

                    @guest()
                        <h2 class="color-primary">Vous n'avez pas encore de compte ?</h2>
                        <p class="color-grey">Cliquez sur le profil qui vous reflet afin d'ouvrir un compte</p>
                    @endguest

                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6 d-flex aos aos-init aos-animate" data-aos="fade-up">
                <a
                    @guest()
                        href="{{route('website.auth.register', "doctor")}}"
                    @else
                        href="{{route(user()->role)}}"
                    @endguest


                >
                    <div class="looking-grid w-100 hvr-bounce-to-right">
                        <div class="looking-small-icon">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="looking-info">
                            <span class="looking-link">Vous êtes médecin</span>
                            <p>Gérez vos rendez vous avec vos patients, faites des consultations en ligne, et des
                                ordonances
                                à vos patients</p>
                        </div>
                        <div class="looking-big-icon">
                            <i class="fas fa-user-md"></i>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 d-flex aos aos-init aos-animate" data-aos="fade-up">
                <a
                    @guest()
                        href="{{route('website.auth.register', "pharmacy")}}"
                    @else
                        href="{{route(user()->role)}}"
                    @endguest

                >
                    <div class="looking-grid w-100 hvr-bounce-to-right">
                        <div class="looking-small-icon">
                            <i class="fas fa-tablets"></i>
                        </div>
                        <div class="looking-info">
                            <span href="" class="looking-link">Vous gérez une pharmacie ?</span>
                            <p>Ouvre un compte dès aujourd'hui afin de vendre vos médicaments en ligne. Traiter
                                ordonances
                                des patients et faire livrer leurs médicaments facilement.</p>
                        </div>
                        <div class="looking-big-icon">
                            <i class="fas fa-tablets"></i>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col-lg-4 col-md-6 d-flex aos aos-init aos-animate" data-aos="fade-up">
                <a
                    @guest()
                        href="{{route('website.auth.register', "patient")}}"
                    @else
                        href="{{route(user()->role)}}"
                    @endguest

                >
                    <div class="looking-grid w-100 hvr-bounce-to-right">
                        <div class="looking-small-icon">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="looking-info">
                            <span href="#" class="looking-link">Vous êtes patient</span>
                            <p>Achetez vos médicament en ligne, consultez votre médecin sans vous déplacez, accédez à
                                toutes
                                les pharmacy de garde..</p>
                        </div>
                        <div class="looking-big-icon">
                            <i class="fas fa-vial"></i>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

@endsection