{% 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/>


    <br/>

    <div class="alert alert-success alert-dismissible bg-success text-white border-0 fade show"
         role="alert">
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        <strong>Success - </strong> Paiement Effectué avec succès
    </div>


    <div class="row">

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

        </div>
        <div class="col-md-10">
            {#        <h1 style="font-family: 'Poppins', sans-serif">Paiement</h1> #}
            {% set item=voyage %}



            <div class="card w-100"
                 style="box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5); border-radius:10px 10px 10px 10px; padding:1px;">
                <div class="card-header"
                     style=" display: flex;align-items: center; background-color:#0a52be; height: 70px; border-radius:10px 10px 0px 0px;">
                    <i class="fas fa-credit-card font-18" style="color: #ffffff; margin-right: 20px;"></i>
                    <h3 class="mb-0 text-white">Paiement</h3></div>
                <div class="card-body">
                    <h4>Infos sur votre Billet</h4>
                    <p class="card-text"></p>


                    <div class="card border"
                         style="border-radius:10px; border:1px solid #000000; box-shadow: 0px 0px 5px 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 class="row" style="margin-top:35px;">
                        <div class="col-md-6">

                            <h5>Numéro de billet : {{ reservation.billnumber }}</h5>
                            <h5>Nom du Passager : {{ reservation.client.nom }}</h5>
                            <h5>Prenom du Passager : {{ reservation.client.prenom }}</h5>
                            <h5>Email : {{ reservation.client.email }}</h5>
                            <h5>Numéro Télephone : {{ reservation.client.telephone }}</h5>


                        </div>

                        <div class="col-md-4">
                            <h3>Votre QR CODE</h3>
                            <img src="data:image/png;base64,{{ qrCodeImage }}" alt="QR Code">
                        </div>
                    </div>






                    <br/>

                </div>
            </div>





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

        </div>
    </div>


{% endblock %}