@extends('layouts.app')

@section('title', __('practical_info.page_title'))
@section('meta_description', __('practical_info.meta_description'))

@section('content')

<!--=       Section 1 - Breadcrumb / Titre de la page      =-->
<div class="edu-breadcrumb-area breadcrumb-style-2 bg-image practical-info-page-banner">
    <div class="container">
        <div class="breadcrumb-inner">
            <div class="page-title">
                <h1 class="title">{{ __('practical_info.page_title') }}</h1>
            </div>
            <ul class="edu-breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ LaravelLocalization::localizeUrl('/') }}">{{ __('navigation.home') }}</a>
                </li>
                <li class="separator"><i class="icon-angle-right"></i></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('practical_info.page_title') }}</li>
            </ul>
        </div>
    </div>
</div>

<!--=       Section 2 - Navigation de la page (style gallery EduLink)      =-->
<div class="edu-gallery-area edu-section-gap" style="padding-bottom: 0;">
    <div class="container">
        <div class="isotope-wrapper">
            <nav class="isotop-button button-transparent isotop-filter practical-info-nav" aria-label="{{ __('practical_info.page_title') }}" role="navigation">
                <a href="#section-certificates" class="section-nav-link is-checked">{{ __('practical_info.nav_certificates') }}</a>
                <a href="#section-vouchers" class="section-nav-link">{{ __('practical_info.nav_vouchers') }}</a>
                <a href="#section-attestations" class="section-nav-link">{{ __('practical_info.nav_attestations') }}</a>
                <a href="#section-hotels" class="section-nav-link">{{ __('practical_info.nav_hotels') }}</a>
                <a href="#section-general" class="section-nav-link">{{ __('practical_info.nav_general') }}</a>
            </nav>
        </div>
    </div>
</div>

<!--=       Section 3 - Certificats      =-->
<div id="section-certificates" class="section-gap-large edu-about-area about-style-7">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('practical_info.section_certificates_subtitle') }}</span>
                        <h2 class="title">{{ __('practical_info.section_certificates_title') }}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p>{{ __('practical_info.section_certificates_text') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-image-gallery" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <x-picture
                        class="main-img-1 w-100 rounded practical-info-certificates-image"
                        src="{{ asset('assets/images/Certificats.png') }}"
                        :alt="__('practical_info.section_certificates_title')"
                        loading="lazy"
                    />
                </div>
            </div>
        </div>
    </div>
</div>

<!--=       Section 4 - Chèques-formation      =-->
<div id="section-vouchers" class="section-gap-large edu-about-area about-style-7 bg-light">
    <div class="container">
        <div class="row g-5 align-items-center flex-lg-row-reverse">
            <div class="col-lg-6">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('practical_info.section_vouchers_subtitle') }}</span>
                        <h2 class="title">{{ __('practical_info.section_vouchers_title') }}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p>{{ __('practical_info.section_vouchers_text') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-image-gallery" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <x-picture
                        class="main-img-1 w-100 rounded practical-info-vouchers-image"
                        src="{{ asset('assets/images/cheques-formations.png') }}"
                        :alt="__('practical_info.section_vouchers_title')"
                        loading="lazy"
                    />
                </div>
            </div>
        </div>
    </div>
</div>

<!--=       Section 5 - Pro Q Kiné      =-->
<div id="section-attestations" class="section-gap-large edu-about-area about-style-7">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('practical_info.section_attestations_subtitle') }}</span>
                        <h2 class="title">{{ __('practical_info.section_attestations_title') }}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <p>{{ __('practical_info.section_attestations_text') }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-image-gallery practical-info-pro-q-kine-logo-wrap" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <img class="practical-info-pro-q-kine-logo" src="{{ asset('assets/images/pro-q-kine-logo.jpg') }}" alt="{{ __('practical_info.section_attestations_title') }}" loading="lazy">
                </div>
            </div>
        </div>
    </div>
</div>

<!--=       Section 6 - Hôtels à proximité      =-->
<div id="section-hotels" class="section-gap-large edu-about-area about-style-7 bg-light">
    <div class="container">
        <div class="row g-5 align-items-center flex-lg-row-reverse">
            <div class="col-lg-8">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('practical_info.section_hotels_subtitle') }}</span>
                        <h2 class="title">{{ __('practical_info.section_hotels_title') }}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                    </div>
                    <div class="row">
                        @foreach(__('practical_info.hotels') as $hotel)
                        <div class="col-lg-6">
                            <ul class="sfer-hotels-list">
                                <li class="sfer-hotels-list__item">
                                    <p class="sfer-hotels-list__name">{{ $hotel['name'] }} - {{ $hotel['area'] }}</p>
                                    <address class="sfer-hotels-list__address">
                                        {{ $hotel['street'] }}<br>
                                        {{ $hotel['postal'] }}<br>
                                        {{ $hotel['country'] }}
                                    </address>
                                </li>
                            </ul>
                        </div>
                        @endforeach 
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <div class="about-image-gallery" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <x-picture
                        class="main-img-1 w-100 rounded practical-info-hotels-image"
                        src="{{ asset('assets/images/hotels.png') }}"
                        :alt="__('practical_info.section_hotels_title')"
                        loading="lazy"
                    />
                </div>
            </div>
        </div>
    </div>
</div>

<!--=       Section 7 - Infos générales      =-->
<div id="section-general" class="section-gap-large edu-about-area about-style-7">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6">
                <div class="about-content">
                    <div class="section-title section-left" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                        <span class="pre-title">{{ __('practical_info.section_general_subtitle') }}</span>
                        <h2 class="title">{{ __('practical_info.section_general_title') }}</h2>
                        <span class="shape-line"><i class="icon-19"></i></span>
                        <ul class="sfer-general-info-list">
                            @foreach(__('practical_info.general_items') as $item)
                            <li>{{ $item }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="about-image-gallery" data-sal-delay="150" data-sal="slide-up" data-sal-duration="800">
                    <img class="main-img-1 w-100 rounded" src="{{ asset('assets/images/about/formehos.jpg') }}" alt="{{ __('practical_info.section_general_title') }}">
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const sections = document.querySelectorAll('[id^="section-"]');
    const navLinks = document.querySelectorAll('.practical-info-nav .section-nav-link');
    // Scroll fluide au clic
    navLinks.forEach(function(link) {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href');
            const target = document.querySelector(targetId);
            if (target) {
                target.scrollIntoView({ behavior: 'smooth', block: 'start' });
                history.replaceState(null, null, targetId);
            }
        });
    });
    // Mise en évidence de l'onglet actif au scroll
    function updateActiveNav() {
        const scrollY = window.scrollY;
        let current = '';
        sections.forEach(function(section) {
            const top = section.offsetTop - 120;
            const height = section.offsetHeight;
            if (scrollY >= top && scrollY < top + height) {
                current = '#' + section.id;
            }
        });
        navLinks.forEach(function(link) {
            link.classList.remove('active', 'is-checked');
            if (link.getAttribute('href') === current) {
                link.classList.add('active', 'is-checked');
            }
        });
    }
    window.addEventListener('scroll', updateActiveNav);
    updateActiveNav();
});
</script>
@endpush

@endsection