{% extends 'bb_index.html.twig' %}

{% block title %}{% endblock %}

{% block body %}



    <div class="card-header"
         style="box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">


        <div class="row">
            <div class="col-md-3" style="display: flex; align-items: center;">
                <span class="center-icon"><i style="color: #ffffff;" class="fa fa-search"></i></span>
                <span style="margin-right: 10px"><h5>Recherche</h5></span>
                <hr style="width: 100px; border: 1px solid #000000"/>
            </div>

            <div class="col-md-4" style="display: flex; align-items: center;">
                <span class="center-icon"><i style="color: #ffffff;" class="fa fa-bus"></i></span>
                <span style="margin-right: 10px"><h5>Voyages dispo</h5></span>
                <hr style="width: 100px; border: 1px solid #000000"/>
            </div>
            <div class="col-md-3" style="display: flex; align-items: center;">
                <span class="center-icon"><i style="color: #ffffff;" class="fas fa-file"></i></span>
                <span style="margin-right: 10px"><h5>Options</h5></span>
                <hr style="width: 100px; border: 1px solid #000000"/>
            </div>
            <div class="col-md-2" style="display: flex; align-items: center;">
                <span class="center-icon"><i style="color: #ffffff;" class="fas fa-credit-card"></i></span>
                <span style="margin-right: 10px"><h5>Paiement</h5></span>
            </div>
        </div>

    </div>

    <br/>    <br/>

    <div class="row">
        <div class="col-md-1">

        </div>
        <div class="col-md-10">


            <h1 style="font-family: 'Poppins', sans-serif">Voyages diponibles </h1>
            <br/>


            {% set items=voyages %}

            {% for item in items %}
                {#        <hr/> #}
                {#        <div class="row" style="border:0.5px solid #343a40; padding:20px;"> #}
                {#
                <div class="row">


                    <div class="col-md-3">
                        <h4><i class="far fa-clock"></i> Départ : <span class="badge bg-secondary">{{ item.heuredepart }}</span>
                        </h4>
                        <h3><span class=" ">{{ item.ville.nom }}</span></h3>
                    </div>
                    <div class="col-md-3">
                        <div class="row">

                            <div class="col-9 col-xl-7 d-flex align-items-center justify-content-end text-end">
                                <div>
                                    <h1>{{ item.prix }} $</h1>
                                    <h6>{{ item.datedepart ? item.datedepart|date('d-m-Y') : '' }}</h6>

                                </div>
                            </div>
                        </div>
                        <div class="progress mt-3">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 100%; height: 6px;"
                                 aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <h4><i class="far fa-clock"></i> Arrivée : <span
                                    class="badge bg-secondary">{{ item.heurearrive }}</span></h4>
                        <h3><span class=" ">{{ item.villearrive.nom }}</span></h3>
                    </div>
                    <div class="col-md-3">

                        <button style="float: right;" type="button" class="btn waves-effect waves-light btn-lg btn-success"><i
                                    class="fab fa-cc-visa"></i> Payer
                        </button>
                        <button style="float: right;" type="button"
                                class="btn btn-light-secondary   btn-lg px-4 fs-4 font-weight-medium" data-bs-toggle="modal"
                                data-bs-target="#ajouter"><i class="fas fa-plus"> </i> Voir les details
                        </button>
                    </div>

                </div>
                #}
                {#        fas fa-angle-double-up #}

                <div class="card border"
                     style="border-radius:20px; border:1px solid #000000; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);">
                    <!----><!----><!---->
                    <div class="card-header d-sm-flex justify-content-sm-between align-items-center"
                         style="border-radius:30px 30px 0px 0px">
                        <div class="d-flex align-items-center mb-2 mb-sm-3">{# <img
                            src="{{ asset('build/trdb.png') }}" style="width: 4%;
                                            height: 4%;"
                            class="w-30px me-2" alt=""> #}<h4 class="fw-normal mb-3"> Départ
                                : {{ item.datedepart ? item.datedepart|date('d-m-Y') : '' }}</h4></div>
                        <h4 class="fw-normal mb-2"><span
                                    class="text-body">Arrivée : {{ item.datearrive ? item.datearrive|date('d-m-Y') : '' }}</span>
                        </h4></div>
                    <div class="card-body p-4 pb-0"><!----><!---->
                        <div class="row g-4">
                            <div class="col-sm-3 col-md-3"><h2 style="font-family: Impact;">{{ item.heuredepart }}</h2>
                                <h4 class="mb-0">{{ item.ville.nom }}</h4></div>
                            <div class="col-sm-4 col-md-3 my-sm-auto text-center" style="/*margin-left: -150px;   */">
                                <h3>9hr
                                    50min</h3>
                                <div class="position-relative my-4">
                                    <hr class="bg-primary opacity-5 position-relative" style="">
                                    <div class="icon-md bg-primary text-white rounded-circle position-absolute top-50 start-50 translate-middle">
                                        {# <svg class="svg-inline--fa fa-bus fa-fw rtl-flip" aria-hidden="true" focusable="false"
                                     data-prefix="fas" data-icon="plane" role="img" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 576 512">
                                    <path class="" fill="currentColor"
                                          d="M482.3 192c34.2 0 93.7 29 93.7 64c0 36-59.5 64-93.7 64l-116.6 0L265.2 495.9c-5.7 10-16.3 16.1-27.8 16.1l-56.2 0c-10.6 0-18.3-10.2-15.4-20.4l49-171.6L112 320 68.8 377.6c-3 4-7.8 6.4-12.8 6.4l-42 0c-7.8 0-14-6.3-14-14c0-1.3 .2-2.6 .5-3.9L32 256 .5 145.9c-.4-1.3-.5-2.6-.5-3.9c0-7.8 6.3-14 14-14l42 0c5 0 9.8 2.4 12.8 6.4L112 192l102.9 0-49-171.6C162.9 10.2 170.6 0 181.2 0l56.2 0c11.5 0 22.1 6.2 27.8 16.1L365.7 192l116.6 0z"></path>


                                </svg> #}


                                        <i class="fas fa-bus font-24"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4 col-md-3"><h2 style="font-family: Impact;">{{ item.heurearrive }}</h2>
                                <h4 class="mb-0">{{ item.villearrive.nom }}</h4></div>
                            <div class="col-md-3 text-md-end"><h2 style="font-family: Impact;">$ {{ item.prix }}</h2>

                                <a href="{{ path('app_home_info_paiement',{'id':item.id}) }}"
                                   class="btn btn-dark btn-lg mb-0 mb-sm-2"><i
                                            class="fab fa-cc-visa"></i> Payer</a>

                                <br/>
                                <button class="btn btn-md btn-link text-decoration-underline p-0 mb-0 collapsed"
                                        type="button"
                                        aria-controls="flightdetail" aria-expanded="false">
                                    <svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" role="img"
                                         focusable="false" class="ms-1 mb-1">
                                        <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"></path>
                                        <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"></path>
                                    </svg>
                                    Voir Details
                                </button>

                                {# <button style="float: right; margin-bottom: 10%;" type="button"
                                class="btn btn-primary    px-4 fs-4 font-weight-medium" data-bs-toggle="modal"
                                data-bs-target="#ajouter"><i class="fas fa-eye"> </i> Voir les details
                        </button> #}
                            </div>
                        </div>
                    </div>

                </div>






                <div id="ajouter" class="modal fade" tabindex="-1"
                     aria-labelledby="primary-header-modalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header modal-colored-header bg-primary text-white">
                                <h4 class="modal-title" id="primary-header-modalLabel">
                                </h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <h5 class="mt-0">Details sur le vol {{ item.ville.nom }}
                                    - {{ item.villearrive.nom }} </h5>
                                {{ render(
                                    controller(
                                        'App\\Controller\\HomeController::indexResultDeatailSearch',{'id':item.id}
                                    )
                                ) }}
                            </div>

                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->


            {% else %}

                <h3>Aucun resultat trouvé</h3>

            {% endfor %}


        </div>
        <div class="col-md-1">

        </div>
    </div>


    {#    <a href="{{ path('app_ville_index') }}">back to list</a> #}
{% endblock %}