@extends('layouts.public')

@section('title', 'Nos vendeurs')

@section('content')
@php
    // Prépare les données côté serveur et génère des liens propres pour tel/whatsapp
    $citiesArray = $cities->map(function($city) {
        return [
            'id' => $city->id,
            'name' => $city->name,
            'image' => $city->image,
            'sellerStores' => $city->sellerStores->map(function($seller) {
                // Nettoie les chiffres (utile pour tel: et wa.me). On suppose un indicatif pays présent.
                $digits = preg_replace('/\D+/', '', $seller->phone);
                // Liens
                $telLink = 'tel:+' . $digits; // + ajouté pour sécurité si le numéro contient indicatif
                $whatsappLink = 'https://wa.me/' . $digits;
                return [
                    'name' => $seller->name,
                    'phone' => $seller->phone,
                    'phone_digits' => $digits,
                    'tel_link' => $telLink,
                    'whatsapp_link' => $whatsappLink,
                    'google_map_link' => $seller->google_map_link,
                ];
            })->values()->toArray(),
        ];
    })->values()->toArray();
@endphp

<script>
    window.citiesData = @json($citiesArray);
</script>

<div 
    x-data="{
        activeCity: null,
        cities: window.citiesData
    }"
    class="md:px-10 px-5"
>
  <iframe src="https://www.google.com/maps/d/embed?mid=1yw5EfGGJ35CjTQYTe_iVIgFcinx6BN1N&ehbc=2E312F" frameborder="0" class="w-full md:h-[450px] h-[300px]"></iframe>

    <h2 class="md:text-4xl relative tracking-wider flex gap-5 md:mt-15 mt-10">
      <div>
        <svg class="w-7 cursor-default pointer-events-none" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 22.907L4 9V35L22 22.907Z" fill="#ED1D24" stroke="#ED1D24" stroke-width="4"/>
        </svg>
      </div>
      <div class="flex flex-col">
        <span>Retrouvez nos motos dans tout le Maroc</span>
        <span class="text-brand md:text-base text-sm mb-5 md:mb-0 tracking-wider mt-2">
          {{ $cities->sum(fn($city) => $city->sellerStores->count()) }} vendeurs dans {{ $cities->count() }} villes différentes
        </span>
      </div>
       @include('backgrounds.bg-6')
    </h2>

    <div class="grid grid-cols-2 md:grid-cols-4 md:gap-6 gap-3 md:mt-10 mt-5">
        <template x-for="city in cities" :key="city.id">
            <div
                class="cursor-pointer relative border-5 transition-all"
                :class="activeCity === city.id ? 'border-brand' : 'border-transparent'"
                @click="activeCity = city.id; $nextTick(() => { $refs.sellers.scrollIntoView({ behavior: 'smooth' }) })"
            >
                <img :src="city.image" :alt="city.name" class="aspect-video object-cover mb-2">
                <span class="absolute inset-0 bg-gradient-to-t from-black to-transparent flex items-end md:px-8 md:py-4 p-4 uppercase md:text-lg tracking-wider" x-text="city.name"></span>
            </div>
        </template>
    </div>

    <div x-ref="sellers"></div>

    <template x-if="activeCity">
        <div class="pt-8">
            <template x-for="city in cities" :key="city.id">
                <div x-show="activeCity === city.id">
                    <h2 class="relative md:text-4xl text-xl tracking-wider capitalize flex gap-5 md:mt-15 mt-0">
                      <div>
                        <svg class="w-7 cursor-default pointer-events-none" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                          <path d="M22 22.907L4 9V35L22 22.907Z" fill="#ED1D24" stroke="#ED1D24" stroke-width="4"/>
                        </svg>
                      </div>
                      <div class="flex flex-col">
                        <span x-text="city.name"></span>
                        <span class="text-brand md:text-base text-sm tracking-wider mt-2 capitalize" x-text="city.sellerStores.length + ' vendeurs'"></span>
                      </div>
                       @include('backgrounds.bg-5')
                    </h2>

                    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 md:mt-8 mt-5">
                        <template x-if="city.sellerStores.length">
                            <template x-for="seller in city.sellerStores" :key="seller.name">
                                <div class="bg-[image:var(--brand-gradient)] py-5 px-7 hover:scale-105 transition" fold-bottom-right="30px">
                                    <div class="">
                                        <div class="flex items-center justify-between">
                                            <div>
                                                <h3 class="text-lg tracking-wider" x-text="seller.name"></h3>
                                                <a
                                                    :href="seller.tel_link"
                                                    class="inline-flex font-open-sans items-center gap-2 hover:text-white"
                                                    :aria-label="`Appeler ${seller.name} au ${seller.phone}`"
                                                >
                                                   @include('icons/phone', ['classes' => 'inline-block h-4'])
                                                    <span x-text="seller.phone"></span>
                                                </a>
                                            </div>
                                            <svg class="h-10" viewBox="0 0 52 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                                              <path d="M46.6437 30.2418C45.9879 33.8262 42.8743 36.45 39.2641 36.45C35.6412 36.45 32.5404 33.8198 31.8782 30.2354H19.6914C17.8704 30.2354 17.8704 27.4375 19.6914 27.4375C29.6752 27.4375 39.0285 27.4375 49.0123 27.4439C48.4329 23.2148 45.2302 19.8109 41.0788 19.0309C39.4042 18.7279 39.6844 16.1363 41.3526 16.1363C42.5369 16.1363 43.5047 15.1564 43.5047 13.9637C43.5047 12.8033 42.4987 11.7847 41.3526 11.7847H33.6355C32.0374 11.7847 31.6426 12.6357 31.4707 14.1313L30.0636 22.467C29.9553 23.1568 29.3632 23.6403 28.701 23.6403L17.1382 23.6468C16.3741 23.6468 15.7501 23.015 15.7501 22.2349L18.8891 2.81079H16.5906L11.9298 17.9478C11.707 18.6763 10.9493 19.0889 10.2298 18.8761C8.46607 18.4055 6.50498 18.4313 4.754 18.9406C3.82439 19.2178 2.93936 19.6304 2.13709 20.1526C0.6026 21.1454 -0.88732 18.7859 0.640803 17.7931C1.65955 17.1355 2.78654 16.6069 3.98357 16.2588C5.88736 15.6914 7.71474 15.6012 9.6631 15.8977L14.2538 0.992803C14.4385 0.393254 14.9861 0.00644692 15.5718 0.00644692L25.25 0C27.0773 0 27.0773 2.81079 25.25 2.81079H21.6907L18.7682 20.8295H27.5294L28.7264 13.7058C29.0894 10.8177 30.6493 8.97391 33.6355 8.97391H41.3526C44.0204 8.97391 46.2808 11.2561 46.2808 13.9637C46.2808 15.2917 45.7523 16.5102 44.9055 17.4063C49.1651 19.5724 51.8839 23.9884 51.8839 28.8364C51.8839 29.6165 51.2663 30.2483 50.4958 30.2483L50.3812 30.2418H46.6437ZM43.7912 30.2418L34.7307 30.2354C35.3292 32.2467 37.1757 33.6328 39.2641 33.6328C41.3462 33.6328 43.1927 32.2532 43.7912 30.2418ZM7.61287 21.2357C11.7579 21.2357 15.1261 24.646 15.1261 28.8364C15.1261 33.0397 11.7579 36.45 7.61287 36.45C3.46146 36.45 0.0995928 33.0397 0.0995928 28.8364C0.0995928 24.6396 3.46146 21.2357 7.61287 21.2357ZM7.61287 24.0465C4.99596 24.0465 2.87568 26.1932 2.87568 28.8364C2.87568 31.486 4.99596 33.6328 7.61287 33.6328C10.2298 33.6328 12.3501 31.4925 12.3501 28.8364C12.3501 26.1868 10.2361 24.0465 7.61287 24.0465Z" fill="white"/>
                                            </svg>

                                        </div>

                                        <div class="flex items-center gap-2 pt-3">
                                            <a
                                                :href="seller.whatsapp_link"
                                                target="_blank" rel="noopener"
                                                class="inline-flex items-center tracking-wider gap-2 px-3 py-2 rounded-lg bg-green-600 hover:bg-green-700 transition"
                                                :aria-label="`Ouvrir WhatsApp pour ${seller.name}`"
                                            >
                                                <img src="/images/whatsapp.png" class="h-5" alt="whatsapp">
                                                <span>WhatsApp</span>
                                            </a>

                                            <a
                                                :href="seller.google_map_link"
                                                target="_blank" rel="noopener"
                                                class="inline-flex items-center  tracking-wider gap-2 px-3 py-2 rounded-lg bg-zinc-900 hover:bg-black transition"
                                                :aria-label="`Voir ${seller.name} sur Google Maps`"
                                            >
                                                @include('icons/localisation', ['classes' => 'inline-block h-5'])
                                                <span>Maps</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </template>

                        <template x-if="!city.sellerStores.length">
                            <div class="text-gray-400 font-open-sans">Aucun vendeur pour cette ville.</div>
                        </template>
                    </div>
                </div>
            </template>
        </div>
    </template>
</div>
@endsection
@section('banners')
<section class="bg-[#0c0c0d] mx-4 md:mb-15 mb-5 md:mx-10 mt-8 md:mt-30 px-4 md:px-10 py-5 gap-4 md:gap-10 flex flex-col md:flex-row items-center">
    <div class="mb-2 md:mb-0">
        <svg class="md:h-30 h-15" viewBox="0 0 98 101" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M57.75 76.414C57.8125 76.3515 57.875 76.2812 57.9297 76.2187L58.0781 76.0546C59.4453 74.4296 60.3593 72.4765 60.7031 70.414C60.8125 69.7734 60.8672 69.0937 60.8672 68.3906V63.8594C60.8672 57.2969 55.5313 51.9614 48.9692 51.9614C42.4071 51.9614 37.0712 57.2973 37.0712 63.8594V68.3906C37.0712 69.0859 37.1259 69.7656 37.2352 70.4062C37.5868 72.4687 38.493 74.4218 39.868 76.0624C39.9774 76.1874 40.0946 76.2968 40.204 76.4218C33.7196 77.0156 28.626 82.4765 28.626 89.1168V93.6949C28.626 94.773 29.501 95.648 30.5791 95.648C31.6572 95.648 32.5322 94.773 32.5322 93.6949V89.1168C32.5322 84.2418 36.501 80.273 41.376 80.273H48.5244C48.6728 80.2808 48.8134 80.2964 48.9619 80.2964C49.1259 80.2964 49.29 80.2808 49.4541 80.273H56.5947C61.4697 80.273 65.4385 84.2418 65.4385 89.1168V93.6949C65.4385 94.773 66.3135 95.648 67.3916 95.648C68.4697 95.648 69.3447 94.773 69.3447 93.6949V89.1168C69.3603 82.4606 64.2424 76.992 57.75 76.414ZM40.984 63.859C40.984 59.4528 44.5699 55.8668 48.9762 55.8668C53.3825 55.8668 56.9684 59.4527 56.9684 63.859V68.3902C56.9684 68.8589 56.9293 69.3277 56.859 69.7574C56.6246 71.1402 56.0153 72.4449 55.1481 73.484L55.0387 73.6012C54.9059 73.7496 54.7731 73.8981 54.6325 74.0387C53.2419 75.4293 51.4216 76.2418 49.4763 76.359H48.5466C46.3591 76.2418 44.3044 75.234 42.8747 73.5387C41.9528 72.4449 41.3435 71.1325 41.1091 69.7496C41.0388 69.3355 40.9997 68.8668 40.9997 68.3902V63.859L40.984 63.859Z" fill="#ED1D24"/>
          <path d="M94.1022 21.6021L82.6332 7.10205C82.266 6.6333 81.6957 6.35986 81.102 6.35986H51.961H51.9532H16.8982C16.3044 6.35986 15.7341 6.6333 15.367 7.10205L3.89795 21.6021C3.62451 21.9458 3.47607 22.3755 3.47607 22.813V34.282C3.47607 39.1258 6.71827 43.2117 11.148 44.509V91.611C11.148 92.6891 12.023 93.5641 13.1011 93.5641C14.1792 93.5641 15.0542 92.6891 15.0542 91.611V44.908C18.273 44.6345 21.0854 42.9236 22.8589 40.4236C24.7886 43.158 27.9761 44.9548 31.5777 44.9548C35.1793 44.9548 38.3589 43.1579 40.2886 40.4236C42.2183 43.158 45.4058 44.9548 48.9995 44.9548C52.5932 44.9548 55.7807 43.1579 57.7104 40.4236C59.6401 43.158 62.8276 44.9548 66.4213 44.9548C70.0229 44.9548 73.2025 43.1579 75.1401 40.4236C76.9057 42.9236 79.7182 44.6345 82.9448 44.908V91.627C82.9448 92.7051 83.8198 93.5801 84.8979 93.5801C85.976 93.5801 86.851 92.7051 86.851 91.627V44.518C91.2807 43.2211 94.5229 39.1274 94.5229 34.291V22.814C94.5229 22.3765 94.3744 21.9468 94.101 21.6031L94.1022 21.6021ZM14.1412 41.0471C10.4146 41.0471 7.38337 38.0159 7.38337 34.2893V23.4923L17.8444 10.2653H28.1494L21.1963 21.8983C21.0166 22.2029 20.9228 22.5467 20.9228 22.8983V33.2183C20.9228 33.3901 20.9541 33.562 20.9931 33.7183C20.9385 33.8979 20.8994 34.0854 20.8994 34.2808C20.9072 38.0152 17.8678 41.0471 14.1412 41.0471ZM31.5712 41.0471C27.8446 41.0471 24.8056 38.0159 24.8056 34.2893C24.8056 34.1174 24.7743 33.9455 24.7353 33.7893C24.7899 33.6096 24.829 33.4221 24.829 33.2268V23.4456L32.6962 10.2736H43.2122L38.4856 22.1876C38.3919 22.4141 38.345 22.6641 38.345 22.9063V33.2263C38.345 33.3982 38.3762 33.5701 38.4153 33.7263C38.3606 33.906 38.3215 34.0935 38.3215 34.2888C38.3372 38.0154 35.2978 41.0471 31.5712 41.0471ZM49.0012 41.0471C45.2746 41.0471 42.2434 38.0159 42.2434 34.2893C42.2434 34.1174 42.2121 33.9455 42.1731 33.7893C42.2277 33.6096 42.2668 33.4221 42.2668 33.2268V23.2737L47.423 10.2657H50.5871L55.7433 23.2737V33.219C55.7433 33.4143 55.7824 33.6018 55.8371 33.7815C55.7902 33.9455 55.7667 34.1096 55.7667 34.2815C55.7589 38.0159 52.7277 41.0471 49.0012 41.0471ZM66.4312 41.0471C62.7046 41.0471 59.6734 38.0159 59.6734 34.2893C59.6734 34.0939 59.6343 33.9064 59.5796 33.7268C59.6265 33.5627 59.6499 33.3986 59.6499 33.2268V22.9068C59.6499 22.6568 59.6031 22.4146 59.5093 22.188L54.7827 10.274H65.2987L73.1659 23.446V33.2272C73.1659 33.4225 73.205 33.61 73.2597 33.7897C73.2128 33.9538 73.1893 34.1178 73.1893 34.2897C73.1893 38.0163 70.1578 41.0471 66.4312 41.0471ZM83.8612 41.0471C80.1346 41.0471 77.0956 38.0159 77.0956 34.2893C77.0956 34.0939 77.0565 33.9064 77.0018 33.7268C77.0487 33.5627 77.0721 33.3986 77.0721 33.2268V22.9068C77.0721 22.5552 76.9784 22.2114 76.7987 21.9068L69.8456 10.2738H80.1506L90.6116 23.5008V34.2898C90.6194 38.0164 87.5878 41.0471 83.8612 41.0471Z" fill="#ED1D24"/>
        </svg>
    </div>
    <div class="flex-1">
      <h1 class="tracking-wider md:text-2xl text-center md:text-left">Vous vendez nos motos?</h1>
      <h2 class="font-open-sans mt-2 text-center md:text-left text-base md:text-lg">Inscrivez-vous en tant que vendeur via notre formulaire.</h2>
    </div>
    <div class="flex mt-3 md:mt-0 flex-row justify-center md:justify-start gap-2 md:gap-4 w-full md:w-auto">
            @include('partials.button-brand', 
            ['content' => 'Devenir vendeur', 'href' => route('seller-request'), 'icon' => 'arrow-top-right',])
    </div>
</section>
@endsection