@extends('frontend.jpt.layout.mainlayout')
@section('content')
    <section class="cover-background full-screens py-0 md-h-250px sm-h-250px"
        style="background-image:url({{ URL::asset('/assets/frontend/jpt/img/banner-3.jpg') }});">
        {{-- <div class="opacity-very-light bg-black"></div> --}}
        <div class="opacity-light bg-black"></div>
        <div class="container h-100">
            <div class="row align-items-center justify-content-center h-300px sm-h-300px">
                <div class="col-xl-10 col-lg-10 col-md-10 position-relative z-index-1 mt-5">
                    <div class="d-flex justify-content-center">
                        <h3 class="alt-font text-white fw-500 text-center letter-spacing-4px pt-2 mt-5">PROGRAMME
                        </h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="pt-4 pb-4 bg-light-gray" id="programme">
        <div class="container">
            <div class="d-flex justify-content-center mb-4">
                <div class="row">
                    <div class="col-12 text-center mb-2 mb-md-0 col-md-auto">
                        <a href="{{ URL::asset('/assets/frontend/jpt/docs/JPT 2026 - Programme.pdf') }}"
                            class="btn btn-extra-large btn-rounded me-md-2 ls-0px mt-15px mb-15px btn-base-color no-hover-change text-nowrap"
                            download>
                            <span>
                                <span class="btn-text">Télécharger le programme</span>
                            </span>
                        </a>
                    </div>
                </div>
            </div>

            <div class="row justify-content-center">
                <div class="col-lg-10 mb-5">
                    <div class="bg-white box-shadow-large border-radius-8px p-4">
                        <div class="d-flex align-items-center justify-content-between mt-1 mb-3">
                            <div>
                                <h6 class="alt-font fw-500 text-blue mb-1">
                                    <i class="fas fa-calendar-day me-2"></i> Jour 1 : Vendredi 23 Janvier 2026
                                </h6>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">10h00 <span class="text-red">-
                                            11h00</span></span>
                                </div>
                                <div>
                                    <span class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                        Plénière</span>
                                    <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                        Ouverture
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">11h00 - 12h00</span>
                                </div>
                                <div>
                                    <span class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                        de
                                        Conférence</span>
                                    <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                        Panel 1 : L'avenir du marché parapharmaceutique en Tunisie : enjeux, régulation et
                                        perspectives
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">12h00 - 13h00</span>
                                </div>
                                <div>
                                    <span class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                        de
                                        Conférence</span>
                                    <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                        Symposium PROCHIDIA
                                    </h6>
                                    <h6 class="text-green fw-500 mb-2 h7">
                                        Peaux déshydratées : comprendre et conseiller la bonne hydratation avec Uriage
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">14h00 - 15h00</span>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="mb-4">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de
                                            Conférence</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Conférences pratiques
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            Techniques avancées de vente et communication efficace en parapharmacie
                                        </h6>
                                    </div>
                                    <div class="pt-0">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de
                                            Workshops</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Workshop 2M Pharma
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            Masterclass Diagnostic : Décodez la Peau, Révélez l'Éclat
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">15h00 - 16h00</span>
                                </div>
                                <div>
                                    <span class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                        de
                                        Conférence</span>
                                    <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                        Symposium SVR
                                    </h6>
                                    <h6 class="text-green fw-500 mb-2 h7">
                                        Les astuces SVR pour améliorer ses ventes
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="mb-0">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">16h00 - 17h00</span>
                                </div>
                                <div>
                                    <span class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                        de
                                        Conférence</span>
                                    <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                        Symposium DAYLONG
                                    </h6>
                                    <h6 class="text-green fw-500 mb-2 h7">
                                        Du digital à la dermoprotection
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-10 mb-5">
                    <div class="bg-white box-shadow-large border-radius-8px p-4">
                        <div class="d-flex align-items-center justify-content-between mt-1 mb-3">
                            <div>
                                <h6 class="alt-font fw-500 text-blue mb-1">
                                    <i class="fas fa-calendar-day me-2"></i> Jour 2 : Samedi 24 Janvier 2026
                                </h6>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">10h00 - 11h00</span>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="mb-4">
                                        <span class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">
                                            Salle de
                                            Conférence</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Panel 2 : Encadrement du e-commerce parapharmaceutique dans l’écosystème digital
                                        </h6>
                                    </div>
                                    <div class="pt-0">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de
                                            Workshops</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Workshop OLEACARE
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            slowbeauty : L'excellence de la dermo-cosmétique propre en Tunisie
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">11h00 - 12h00</span>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="mb-4">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de
                                            Conférence</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Symposium ARGANIA
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            Anti-Âge 2.0 : quand Avène redéfinit les standards
                                        </h6>
                                    </div>
                                    <div class="pt-0">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de
                                            Workshops</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Workshop SVR
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            Le merchandising efficace pour accélérer ses ventes
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">12h00 - 13h00</span>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="mb-4">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de
                                            Conférence</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Symposium 2M PHARMA
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            La Science du Glow, l'Art de l'Invisible
                                        </h6>
                                    </div>
                                    <div class="pt-0">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de Workshops</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Workshop LIPP
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            Anthelios & Capital Soleil - Références de la photoprotection au service du
                                            conseil
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">13h00 - 14h00</span>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="mb-4">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de Conférence</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Symposium New Medica
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            Le protocole anti tache nouvelle génération
                                        </h6>
                                    </div>
                                    <div class="pt-0">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de Workshops</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Workshop COSMEDIS
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            Topicrem, la star de l'hydratation est de retour
                                        </h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">14h00 - 15h00</span>
                                </div>
                                <div class="flex-grow-1">
                                    <div class="mb-4">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de Conférence</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Conférences pratiques
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            Gestion de stock et marketing appliqué à la Parapharmacie
                                            </p>
                                    </div>
                                    <div class="pt-0">
                                        <span
                                            class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                            de Workshops</span>
                                        <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                            Workshop PHARMACHIMIQUE
                                        </h6>
                                        <h6 class="text-green fw-500 mb-2 h7">
                                            L'hydratation et la rougeur Oculaire grâce à l'acide hyaluronique et le Bleu de
                                            Méthylène
                                        </h6>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="mb-4">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1">15h00 - 16h00</span>
                                </div>
                                <div>
                                    <span class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                        de
                                        Workshops</span>
                                    <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                        Workshop ARGANIA
                                    </h6>
                                    <h6 class="text-green fw-500 mb-2 h7">
                                        HYDRATATION avec URIAGE
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="mb-0">
                            <div class="d-flex align-items-start flex-md-row flex-column">
                                <div class="mb-2 mb-md-0 me-md-3">
                                    <span class="badge bg-red text-white fw-500 px-3 py-1"><span class="text-red">16h00
                                            -</span>
                                        17h00</span>
                                </div>
                                <div>
                                    <span class="badge bg-majorelle text-white fw-500 px-3 py-1 mb-2 d-inline-block">Salle
                                        Plénière</span>
                                    <h6 class="text-dark-gray fw-500 mt-0 mb-1">
                                        Clôture
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection