@extends("promoters.layout")

@section("css")
    <link rel="stylesheet" href="{{ asset("assets/css/bootstrap-datepicker3.min.css") }}">
    {{-- <link rel="stylesheet" href="{{ asset("assets/css/style.css") }}"> --}}
@endsection

@section("js")
    <script src="{{ asset("assets/js/bootstrap-datepicker.min.js") }}"></script>
    <script src="{{ asset("assets/vendor/bootstrap/js/bootstrap.bundle.min-2.js") }}"></script>
    <script src="{{ asset("assets/js/events/main.js") }}"></script>
@endsection

@section("pageContent")


<div id="layoutSidenav_content">
    <main>
        @include("includes.wizards.header")

        <div class="container-xl px-4 mt-n10">
            <!-- Wizard card example with navigation-->
            <div class="card">
                <div class="card-header border-bottom">
                    <!-- Wizard navigation-->
                    <div class="nav nav-pills nav-justified flex-column flex-xl-row nav-wizard" id="cardTab"
                        role="tablist">
                        <!-- Wizard navigation item 1-->
                        <a class="nav-item nav-link active" id="wizard1-tab" href="#wizard1" data-bs-toggle="tab"
                            role="tab" aria-controls="wizard1" aria-selected="true">
                            <div class="wizard-step-icon">1</div>
                            <div class="wizard-step-text">
                                <div class="wizard-step-text-name">Réseaux sociaux</div>
                                <div class="wizard-step-text-details">Ajouter les liens vers vos réseaux sociaux</div>
                            </div>
                        </a>
                        <!-- Wizard navigation item 2-->
                        <a class="nav-item nav-link" id="wizard2-tab" href="#wizard2" data-bs-toggle="tab" role="tab"
                            aria-controls="wizard2" aria-selected="true">
                            <div class="wizard-step-icon">2</div>
                            <div class="wizard-step-text">
                                <div class="wizard-step-text-name">Chronogramme</div>
                                <div class="wizard-step-text-details">Ajouter plus de détails sur les journées</div>
                            </div>
                        </a>
                        <!-- Wizard navigation item 3-->
                        <a class="nav-item nav-link" id="wizard3-tab" href="#wizard3" data-bs-toggle="tab" role="tab"
                            aria-controls="wizard3" aria-selected="true">
                            <div class="wizard-step-icon">3</div>
                            <div class="wizard-step-text">
                                <div class="wizard-step-text-name">Tickets</div>
                                <div class="wizard-step-text-details">Personnaliser vos tickets</div>
                            </div>
                        </a>
                        <!-- Wizard navigation item 4-->
                        <a class="nav-item nav-link" id="wizard4-tab" href="#wizard4" data-bs-toggle="tab" role="tab"
                            aria-controls="wizard4" aria-selected="true">
                            <div class="wizard-step-icon">4</div>
                            <div class="wizard-step-text">
                                <div class="wizard-step-text-name">Sponsors</div>
                                <div class="wizard-step-text-details">Déclarer vos sponsors</div>
                            </div>
                        </a>
                        <!-- Wizard navigation item 5-->
                        <a class="nav-item nav-link" id="wizard4-tab" href="#wizard5" data-bs-toggle="tab" role="tab"
                            aria-controls="wizard5" aria-selected="true">
                            <div class="wizard-step-icon">5</div>
                            <div class="wizard-step-text">
                                <div class="wizard-step-text-name">Organisateur</div>
                                <div class="wizard-step-text-details">Donner plus d'infos sur l'organisateur</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="cardTabContent">
                        @include("includes.wizards.social-link")

                        @include("includes.wizards.chronogramme")

                        @include("includes.wizards.ticket")

                        @include("includes.wizards.sponsor")

                        @include("includes.wizards.organizer")
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

@endsection