@extends('fo.layout')

@section('title', __('Retrouvez vos produits Lionor près de chez vous'))
@section('description', __('Recherchez le magasin le plus près de chez vous commercialisant des produits de chez nous.'))
@section('breadcrumb', request()->route()->getName())

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
    integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
    crossorigin=""/>
@endpush


@section('content')
    <div class="g-0 pb-md-5 position-relative hero">
        <img src="{{ Vite::asset('resources/assets/images/100LOCAL-V1.png') }}" alt="Logo 100% local" class="img-fluid">
        <div class="position-relative hero-fix-height">
            <img src="{{ Vite::asset('resources/assets/images/Panoramique7.jpg') }}" alt="Un plat de poulet rôti et ses accompagnements sortant du four" class="img-fluid">
        </div>
        <!-- breadcrumb -->
        <div class="container breadcrumb-obj small mt-3">
            <div class="row">
                <div class="col-12 d-flex ">
                    <p class="fst-italic me-2">Vous êtes ici</p>
                    @include('modules/breadcrumb/breadcrumb-body')
                </div>
            </div>
        </div>
        <!-- END breadcrumb -->
    </div>

    <div class="container pt-5 position-relative">
        <div class="row">
            <section class="col-md-8 offset-md-2 stripes">
                <h1 class="text-uppercase text-center font-amatic font-amatic-48">{{ __('Retrouvez vos produits Lionor') }}<span class="font-amatic-red">{{ __('près de chez vous') }}</span></h1>
            </section>
        </div>

        <div class="row my-4 search">
            <div class="col-md-6 offset-md-3">
                <form class="d-flex" id="address-form">
                    <input class="form-control" type="search" placeholder="Poste Weg, Caëstre, Hauts-de-France, France" aria-label="Search" spellcheck="false" id="addressInputField">
                    <button class="btn" type="submit"><i class="fa fa-magnifying-glass"></i></button>
                </form>
            </div>
        </div>

        <!-- GRID -->
        <div class="row g-3">
            <div class="col-lg-6 shops-module">
                <span class="shops-module-title text-uppercase">{{ __('Magasins') }}</span>

                <div class="list-group shops-list" id="shops-list">
                    <button class="list-group-item list-group-item-action d-flex align-items-center justify-content-between d-none" id="shop-list-item">
                        <div class="d-flex align-items-center">
                            <img src="{{ Vite::asset('resources/assets/images/logo.png') }}" alt="Logo de la société" class="branding img-fluid">
                            <div class="ms-3">
                                <p>Enseigne</p>
                                <p>Ville</p>
                                <span><i class="fa fa-location-dot me-2"></i>3.92 km</span>
                            </div>
                        </div>
                        <a href="#" title="{{ __('Itinéraire') }}" class="btn btn-primary">Itinéraire ></a>
                    </button>
                    <div class="list-group-item list-group-item-action d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center my-3">
                            <p>{{ __('Entrez une adresse pour connaître les magasins à proximité.') }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                @php
                $i = 1;
                foreach (App\Enums\SignsEnum::toStickers() as $key => $value) {
                    // Set first index to 1 because enum start at 1.
                    $stickersArray[$i] = Vite::asset('resources/assets/images/signs/' . $value);
                    $i++;
                }
                $data = [
                    'signsStickers' => $stickersArray,
                    'signsLabels' => App\Enums\SignsEnum::toLabels(),
                    'formId' => 'address-form'
                ]
                @endphp
                <div class="geocodage" data-json='@json($data)'></div>
                {{-- <div class="grey small fst-italic">
                    <p><u>{{ __('Conditions générales d\'utilisation') }}</u></p>
                    <p>{{ __('En poursuivant votre navigation sur ce site, vous acceptez l\'utilisation de cookies. Cette utilisation est nécessaire afin de vous proposer des services tels que " l\'ajout du panier " et nous permet également de mesurer l\'audience de notre services. ') }}<button>{{ __('Refuser') }}</button></p>
                </div> --}}
            </div>
        </div>
        <!-- END GRID -->
    </div>

@endsection

@push('scripts')
    <script nonce="{{ $nonce }}" src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
    integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM="
    crossorigin=""></script>
@endpush