@extends('layouts.default')

@section('title', 'Notre équipe - Lécuyer')

@section('css')
<link href="{{ asset("css/owl.carousel.min.css") }}" rel="stylesheet" type="text/css" />
<link href="{{ asset("css/equipe.css") }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')

<main class="equipepage">

    <!--========== Hero area ===========-->
    <div class="hero_area">
        <div class="hero_inner">
            <div class="top_con_area">
                <h1 class="hero_title">{{ $title }}</h1>
                <hr class="hero_dibider">
            </div>
            <div class="bot_con_area row">
                <div class="col-4 pd-cont">
                    <img src="{{ asset("img/hero-logo-2.svg") }}" class="img-fluid w-100" alt="">
                </div>
                <div class="col-8 p-0">
                    <p>OFFICE DE GESTION ET DE <br> TRANSACTION IMMOBILIÈRE</p>
                </div>
            </div>
        </div>
    </div>

    <!--========== Cabinet Lécuyer area ===========-->
    <div class="cabinet_area">
        <div class="container">
            <div class="cabinet_inner">
                <h2 class="sec_title text-end">{!! $page->getContentField('cabinet_address', '') !!}</h2>
                <p class="con">{!! $page->getContentField('cabinet_description', '') !!}</p>
                <a href="{{ route('contact') }}" class="cbtn">NOUS CONTACTER</a>
            </div>
        </div>
    </div>

    @php $nonFeaturedIndex = 0; @endphp
    @foreach($teamMembers as $member)
        @if($member->is_featured)
        <!--========== {{ $member->name }} area (featured) ===========-->
        <div class="lecuyer_area">
            <div class="container">
                <div class="lecuyer_inner">
                    <img src="{{ Storage::url($member->photo) }}" alt="" class="img-fluid w-100">
                    <div class="row con_wrap">
                        <div class="col-md-7 right_area">
                            <h2 class="sec_title text-start">{{ $member->name }}</h2>
                            <h3 class="sec_sub_title">{{ $member->role }}</h3>
                            <p class="text-start email_wrap">
                                <a href="mailto:{{ $member->email }}" target="_blank">
                                    <img src="{{ asset("img/home-address.svg") }}" alt="" class="mail_img">
                                    {{ $member->email }}
                                </a>
                            </p>
                            <p class="con text-start">{!! $member->bio !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @else
        <!--========== {{ $member->name }} area ===========-->
        <div class="{{ $member->css_class }} common_about_area">
            <div class="container">
                <div class="row common_about_inner">
                    @if($nonFeaturedIndex % 2 === 0)
                    {{-- Even non-featured: image left, text right --}}
                    <div class="col-md-6 img_box_wrap pr5">
                        <div class="slider_wrap">
                            <div class="equipe_about_slider owl-carousel owl-theme">
                                @foreach($member->photos ?? [] as $photo)
                                <img src="{{ Storage::url($photo) }}" alt="" class="item img-fluid w-100">
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 con_wrap">
                        <h2 class="sec_title">{{ $member->name }}</h2>
                        <h3 class="sec_sub_title">{!! nl2br(e($member->role)) !!}</h3>
                        <p class="email_wrap">
                            <a href="mailto:{{ $member->email }}" target="_blank">
                                <img src="{{ asset("img/home-address.svg") }}" alt="" class="mail_img">
                                {{ $member->email }}
                            </a>
                        </p>
                        <hr class="sec_devider">
                        <p class="con">{!! $member->bio !!}</p>
                    </div>
                    @else
                    {{-- Odd non-featured: text left (text-end), image right + mobile duplicate --}}

                    <!-- Mobile Top Slider Start -->
                    <div class="col-md-6 img_box_wrap pl5 d-md-none d-block">
                        <div class="slider_wrap">
                            <div class="equipe_about_slider owl-carousel owl-theme">
                                @foreach($member->photos ?? [] as $photo)
                                <img src="{{ Storage::url($photo) }}" alt="" class="item img-fluid w-100">
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <!-- Mobile Top Slider End -->

                    <div class="col-md-6 con_wrap">
                        <h2 class="sec_title text-md-end">{{ $member->name }}</h2>
                        <h3 class="sec_sub_title text-md-end">{!! nl2br(e($member->role)) !!}</h3>
                        <p class="text-md-end email_wrap">
                            <a href="mailto:{{ $member->email }}" target="_blank">
                                <img src="{{ asset("img/home-address.svg") }}" alt="" class="mail_img">
                                {{ $member->email }}
                            </a>
                        </p>
                        <hr class="sec_devider ms-md-auto">
                        <p class="con text-md-end ms-md-auto">{!! $member->bio !!}</p>
                    </div>

                    <div class="col-md-6 img_box_wrap pl5 d-none d-md-block">
                        <div class="slider_wrap">
                            <div class="equipe_about_slider owl-carousel owl-theme">
                                @foreach($member->photos ?? [] as $photo)
                                <img src="{{ Storage::url($photo) }}" alt="" class="item img-fluid w-100">
                                @endforeach
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
        @php $nonFeaturedIndex++; @endphp
        @endif
    @endforeach

    <!--========== Découvrez area ===========-->
    <div class="decouvrez_area">
        <div class="decouvrez_ineer">
            <h2 class="sec_title text-center">Découvrez</h2>
            <p class="con text-center">Nos fidèles partenaires</p>
            <div class="decouverz_slider_wrap">
                <div class="decouverz_slider owl-carousel owl-theme">
                    @foreach($partners as $partner)
                    <img src="{{ Storage::url($partner->logo) }}" class="img-fluid w-100 item" alt="{{ $partner->name }}">
                    @endforeach
                    @if($partners->count() > 0)
                    <img src="{{ asset($partners->first()->logo) }}" class="img-fluid w-100 item" alt="{{ $partners->first()->name }}">
                    @endif
                </div>
            </div>
        </div>
    </div>

    <!--========== Contact area ===========-->
    <div class="contact_area">
        <div class="contact_inner">
            <h2 class="sec_title">Contactez-nous</h2>
            <h3 class="sec_sub_title">en quelques clics</h3>
            <hr class="sec_devider">
            @include('elements.forms.contact')
        </div>
    </div>


</main>

@include('elements.learn-more')

@endsection