@extends('layouts.main')

@section('content')
    <!-- BACKGROUND SVG SILHOUETTE -->
    <div id="background">
        <br />
<b>Warning</b>:  include(./svg/background.svg): Failed to open stream: No such file or directory in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>6</b><br />
<br />
<b>Warning</b>:  include(./svg/background.svg): Failed to open stream: No such file or directory in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>6</b><br />
<br />
<b>Warning</b>:  include(): Failed opening './svg/background.svg' for inclusion (include_path='.:/usr/local/php8.3/lib/php') in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>6</b><br />
    </div>
    <!-- END OF BACKGROUND SVG SILHOUETTE -->

    <nav id="side-nav">
        <ul>
            <li class="lps-path" data-target="#section-home"><span>Accueil</span><i class="fa-sharp fa-light fa-fireplace"></i></li>
            <li class="lps-path" data-target="#section-medicaux"><span>Médicaux</span><i class="fa-sharp fa-light fa-first-aid"></i></li>
            <li class="lps-path" data-target="#section-esthetiques"><span>Ésthétiques</span><i class="fa-sharp fa-light fa-spa"></i></li>
            <li class="lps-path" data-target="#section-tarifs"><span>Tarifs</span><i class="fa-sharp fa-light fa-list"></i></li>
            <li class="lps-path" data-target="#section-centre"><span>Centre</span><i class="fa-sharp fa-light fa-house-flood"></i></li>
        </ul>
    </nav>

    <!-- HOME CONTENT AND SECTIONS -->
    <div class="mobile-menu-effect">
        <!-- SECTION HOME -->
        <section id="section-home" class="main home full-screen">
            <div class="logo-ext">
                <div class="logo-int">
                    <svg class="logo-part logo-part-svg" width="200" height="200" viewBox="0 0 200 200">
                        <!-- Haut gauche -->
                        <path id="medicaux" class="lps-path top-left" data-logo=".logo-part-gold" data-target="#section-medicaux" data-bgcolor="#E9CE8E" data-rotate="-180" data-translateX="-80" data-translateY="-80" d="M 100 100 L 0 100 A 100 100 0 0 1 100 0 Z" fill="#E9CE8E" id="top-left"/>
                        <g style="transform: rotate(-90deg);transform-origin: 50% 50%;"><text class="text-svg" fill="#E9CE8E" data-translatex="185" data-translatey="-129" data-translateyo="-85" data-dir="left" data-rotate="-90">Soins</text></g>
                        <text class="text-svg" fill="#E9CE8E" data-translatex="-110" data-translatey="-129" data-translateyo="-85" data-dir="up" data-rotate="0">Médicaux</text>

                        <!-- <text class="sub-text-svg" fill="#FFFFFF" style="transform: translate(-110px, -85px);"></text> -->

                        <!-- Haut droit -->
                        <path id="esthetiques" class="lps-path top-right" data-logo=".logo-part-gold" data-target="#section-esthetiques" data-bgcolor="#E9CE8E" data-rotate="180" data-translateX="80" data-translateY="-80" d="M 100 100 L 100 0 A 100 100 0 0 1 200 100 Z" fill="#FFFFFF" id="top-right"/>
                        <g style="transform: rotate(90deg);transform-origin: 50% 50%;"><text class="text-svg" fill="#E9CE8E" data-translatex="-80" data-translatey="-129" data-translateyo="-85" data-dir="right" data-rotate="90" >Soins</text></g>
                        <text class="text-svg" fill="#E9CE8E" data-translatex="132" data-translatey="-129" data-translateyo="-85" data-dir="up" data-rotate="0">Esthétiques</text>
                    
                        <!-- <text class="sub-text-svg" fill="#FFFFFF" style="transform: translate(145px, -85px);"></text> -->
                        
                        <!-- Bas droit -->
                        <path id="tarifs" class="lps-path bottom-right" data-logo=".logo-part-green" data-target="#section-tarifs" data-bgcolor="#E9CE8E" data-rotate="180" data-translateX="80" data-translateY="80" d="M 100 100 L 200 100 A 100 100 0 0 1 100 200 Z" fill="#FFFFFF" id="bottom-right"/>
                        <g style="transform: rotate(90deg);transform-origin: 50% 50%;"><text class="text-svg" fill="#E9CE8E" data-translatex="195" data-translatey="-129" data-translateyo="-85" data-translatey="-85"  data-dir="right" data-rotate="90">Nos</text></g>
                        <text class="text-svg" fill="#E9CE8E" data-translatex="180" data-translatey="350" data-translateyo="325" data-dir="down" data-rotate="0">Tarifs</text>

                        <!-- Bas gauche -->
                        <path id="centre" class="lps-path bottom-left" data-logo=".logo-part-gold" data-target="#section-centre" data-bgcolor="#E9CE8E" data-rotate="-180" data-translateX="-80" data-translateY="80" d="M 100 100 L 100 200 A 100 100 0 0 1 0 100 Z" fill="#FFFFFF" id="bottom-left"/>
                        <g style="transform: rotate(-90deg);transform-origin: 50% 50%;"><text class="text-svg" fill="#E9CE8E" data-translatex="-80" data-translatey="-129" data-translateyo="-85" data-dir="left"  data-rotate="-90">Notre</text></g>
                        <text class="text-svg" fill="#E9CE8E" data-translatex="-90" data-translatey="350" data-translateyo="325" data-dir="down"  data-rotate="0">Centre</text>
                    </svg>

                    <img class="logo-part logo-letter logo-part-gold" src="./images/logo_c.png" />
                    <img class="logo-part logo-letter logo-part-gold" src="./images/logo_d.png" />
                    <img class="logo-part logo-letter logo-part-gold" src="./images/logo_l.png" />
                    <img class="logo-part logo-letter logo-part-gold" src="./images/logo_m.png" />

                    <img class="logo-part logo-letter logo-part-green" src="./images/logo_c_g.png" />
                    <img class="logo-part logo-letter logo-part-green" src="./images/logo_d_g.png" />
                    <img class="logo-part logo-letter logo-part-green" src="./images/logo_l_g.png" />
                    <img class="logo-part logo-letter logo-part-green" src="./images/logo_m_g.png" />
                </div>
            </div>

            <div id="tagline">
                <h2>L'EXPERTISE DU<br><span style="font-family:'Dihjauti S', sans-serif">DRAINAGE LYMPHATIQUE</span><br>À PARIS</h2>
                <button class="rdv-button" style="margin-bottom:1em;"><a href="https://www.doctolib.fr/cabinet-pluridisciplinaire/paris/la-clinique-du-drainage-cdlm" target="_blank">JE PRENDS RENDEZ-VOUS</a></button>
            </div>
        </section>
        <!-- END OF SECTION HOME -->

        <!-- SECTION MEDICAL -->
        <section id="section-medicaux" class="main medicaux full-screen">
            <h1>NOS SOINS<br><span>MEDICAUX</span></h1>
            @if (count($categories[1]['subcategories']) > 1)
                <div style="max-width:600px;margin:auto;display: flex;justify-content: center;align-items: center;gap:0.5em;margin-bottom: 2em;">
                    @foreach ($categories[1]['subcategories'] as $j => $subcategory)
                        <button data-soin-type="{{ Illuminate\Support\Str::slug($categories[1]['name']) }}" id="{{ Illuminate\Support\Str::slug($subcategory['name']) }}" @class(['soins-button', 'active' => $j == 0])>{{ $subcategory['name'] }}</button>
                    @endforeach
                </div>
            @endif

            <!-- TABLE DE REDIRECTION A CREER POUR QUAND ON CHANGE LES SLUGS -->
            <div class="my-list">
                @foreach ($categories[1]['subcategories'] as $subcategory)
                    <ul class="ul-list-soins" data-soin-type="{{ Illuminate\Support\Str::slug($categories[1]['name']) }}" id="list-{{ Illuminate\Support\Str::slug($subcategory['name']) }}">
                        @foreach ($subcategory['symptoms'] as $symptom)
                            <li class="encart-symptom" style="background-image:url({{ asset($symptom->getFirstMediaUrl('thumbnails', 'thumb')) }});background-size:cover;background-position:center center;">
                                <a target="_blank" href="/{{ app()->getLocale() }}/soins/{{ $categories[1]['slug'] }}/{{ $subcategory['slug'] }}/{{ $symptom['slug'] }}">
                                    <!-- <div class="background-effect"></div> -->
                                    <div class="soin-info-elem">
                                        <h3>{{ $symptom['name'] }}</h3>
                                        <p>{{ $symptom['short_description'] ?? 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt recusandae odit inventore eaque quibusdam laudantium.' }}</p>
                                        <div class="behind-cta"><br />
<b>Warning</b>:  include(./svg/background-button.svg): Failed to open stream: No such file or directory in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>93</b><br />
<br />
<b>Warning</b>:  include(./svg/background-button.svg): Failed to open stream: No such file or directory in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>93</b><br />
<br />
<b>Warning</b>:  include(): Failed opening './svg/background-button.svg' for inclusion (include_path='.:/usr/local/php8.3/lib/php') in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>93</b><br />
</div>
                                        <button class="cta">J'ai ce symptôme&nbsp;<i class="fa-light fa-files-medical"></i></button>
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endforeach
            </div>
        </section>
        <!-- END OF SECTION MEDICAL -->

        <!-- SECTION AESTHTICS -->
        <section id="section-esthetiques" class="main esthetiques full-screen">
            <h1>NOS SOINS<br><span>ÉSTHÉTIQUES</span></h1>
            @if (count($categories[0]['subcategories']) > 1)
                <div style="max-width:600px;margin:auto;display: flex;justify-content: center;align-items: center;gap:0.5em;margin-bottom: 2em;">
                    @foreach ($categories[0]['subcategories'] as $j => $subcategory)
                        <button data-soin-type="{{ Illuminate\Support\Str::slug($categories[0]['name']) }}" id="{{ Illuminate\Support\Str::slug($subcategory['name']) }}" @class(['soins-button', 'active' => $j == 0])>{{ $subcategory['name'] }}</button>
                    @endforeach
                </div>
            @endif
            <!-- TABLE DE REDIRECTION A CREER POUR QUAND ON CHANGE LES SLUGS -->
            <div class="my-list">
                @foreach ($categories[0]['subcategories'] as $subcategory)
                    <ul class="ul-list-soins aes" data-soin-type="{{ Illuminate\Support\Str::slug($categories[0]['name']) }}" id="list-{{ Illuminate\Support\Str::slug($subcategory['name']) }}">
                        @foreach ($subcategory['symptoms'] as $symptom)
                            <li class="encart-symptom" style="background-image:url({{ asset($symptom['thumbnail']) }});background-size:cover;background-position:center center;">
                                <a target="_blank" href="/{{ app()->getLocale() }}/soins/{{ $categories[0]['slug'] }}/{{ $subcategory['slug'] }}/{{ $symptom['slug'] }}">
                                    <!-- <div class="background-effect"></div> -->
                                    <div class="soin-info-elem">
                                        <h3>{{ $symptom['name'] }}</h3>
                                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste sunt recusandae odit inventore eaque quibusdam laudantium.</p>
                                        <div class="behind-cta"><br />
<b>Warning</b>:  include(./svg/background-button.svg): Failed to open stream: No such file or directory in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>126</b><br />
<br />
<b>Warning</b>:  include(./svg/background-button.svg): Failed to open stream: No such file or directory in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>126</b><br />
<br />
<b>Warning</b>:  include(): Failed opening './svg/background-button.svg' for inclusion (include_path='.:/usr/local/php8.3/lib/php') in <b>/home/itsmeny/cdlm/resources/views/welcome.blade.php</b> on line <b>126</b><br />
</div>
                                        <button class="cta">J'ai ce symptôme&nbsp;<i class="fa-light fa-files-medical"></i></button>
                                    </div>
                                </a>
                            </li>
                        @endforeach
                    </ul>
                @endforeach
            </div>
        </section>
        <!-- END OF SECTION AESTHTICS -->

        <!-- SECTION TARIFS -->
        <section id="section-tarifs" class="main tarifs full-screen">
            <h1>NOS <span>TARIFS</span></h1>
        </section>
        <!-- END OF SECTION TARIFS -->

        <!-- SECTION OUR CENTER -->
        <section id="section-centre" class="main our-center full-screen">
            <h1>NOTRE <span>CENTRE</span></h1>

            <div class="our-center-content">{!! $center->content !!}</div>
        </section>
        <!-- END OF OUR CENTER -->
    </div>
@endsection