{% extends 'b_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>
                            <h5>Numéro de siege : {{ reservation.vehiculesiege.numerosiege }}</h5>


                        </div>

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

                            <hr/>
                        </div>

                        <hr/>
                        <button class="btn btn-dark btn-lg mb-0 mb-sm-2" onclick="PrintDiv()"><i
                                    class="fas fa-print"> </i>
                            Imprimer le ticket
                        </button>

                      {#  <a class="btn btn-rounded btn-primary"
                           href="{{ path('app_reservation_tansit_index', {'id': item.id}) }}"><i
                                    class=" fas fa-book"></i> </a>#}
                    </div>


                    <br/>

                </div>
            </div>


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

        </div>
    </div>


    <div id="divToPrint" style="display:none;">
        <div style="width:400px;background-color:#e7e0e0;  padding:10px;">
            <div>
                <table>
                    <tr>
                        <td style="width: 220px;">

                        </td>

                        <td><br/>
                            Date :{{ reservation.datereservation ? reservation.datereservation|date('d-m-Y') : '' }}
                        </td>

                    </tr>

                </table>

            </div>
            <div>
                <table>

                    <tr>
                        <td>
                            <img src="{{ asset('build/logoole.png') }}" style=" max-height: 150px; max-width: 150px;" class="dark-logo thumbnail img-responsive"
                                 class="dark-logo"/>
                        </td>

                        <td><br/>
                        </td>

                    </tr>

                </table>

            </div>
            <hr/>
            <div>
                <table>
                    <tr>
                        <td style="">Téléphone :</td>

                        <td>081000000</td>

                    </tr>
                    <tr>
                        <td style="">Depart :</td>

                        <td>{{ voyage.datedepart ? voyage.datedepart|date('d-m-Y') : '' }} à {{ item.heuredepart }}</td>


                    </tr>
                    <tr>
                        <td style="">Arrivée :</td>

                        <td>{{ voyage.datearrive ? voyage.datearrive|date('d-m-Y') : '' }} à {{ item.heurearrive }}</td>

                    </tr>
                </table>

            </div>

            <hr/>
            <div>
                <table>
                    <tr>
                        <td style="">Ville de depart :</td>

                        <td>{{ item.ville.nom }}</td>

                    </tr>
                    <tr>
                        <td style="">Ville d'arrivée :</td>

                        <td>{{ item.villearrive.nom }}</td>


                    </tr>

                </table>

            </div>

            <div>





{#
                <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>#}


                <table class="" style="width: 400px; border: 1px solid black;
            border-collapse: collapse;">


                    <tbody>

                        <tr>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">Numéro de billet</td>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;"><h3>{{ reservation.billnumber }}</h3></td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">Nom du Passager</td>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">{{ reservation.client.nom }}</td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">Prenom du Passager</td>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">{{ reservation.client.prenom }}</td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">Email</td>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">{{ reservation.client.email }}</td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">Numéro Télephone</td>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">{{ reservation.client.telephone }}</td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">Prix</td>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;"><h3>{{ item.prix }}</h3></td>
                        </tr>
                        <tr>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;">Numéro siège</td>
                            <td style="border-bottom: 0.5px solid #000000;border-left: 0.2px solid #000000;"><h3>{{ reservation.vehiculesiege.numerosiege }}</h3></td>
                        </tr>

                    </tbody>
                </table>





            </div>

            <div>
                <h5>Votre QR CODE</h5>
                <img src="data:image/png;base64,{{ qrCodeImage }}" alt="QR Code">
            </div>
        </div>
    </div>





{% endblock %}
{% block javascripts %}
    <!-- DataTables -->

    {{ encore_entry_script_tags('apps_table') }}


    <script type="text/javascript">


        function PrintDiv() {
            var divToPrint = document.getElementById('divToPrint');
            var popupWin = window.open('', '_blank', 'width=800,height=800');
            popupWin.document.open();
            popupWin.document.write('<html><body onload="window.print()">' + divToPrint.innerHTML + '</html>');
            popupWin.document.close();
        }


        $('#file_export').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass('btn btn-primary mr-1');

        // Récupérer l'élément input
        var inputElement = document.querySelector('.custom-time-input');
        var inputElements = document.querySelector('.custom-time-inputs');

        // Ajouter l'attribut type="time"
        inputElement.setAttribute('type', 'time');
        inputElements.setAttribute('type', 'time');

    </script>

{% endblock %}