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

{% block title %}Reservation{% endblock %}
{% block stylesheets %}
    {{ encore_entry_link_tags('app_table') }}

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


    <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=transit %}

            <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>






{#            {{ include('reservation/_formInfoPaiement.html.twig') }}#}




            <div id="validation">


                {{ form_start(form) }}


                <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:#0a53be; height: 70px; border-radius:10px 10px 0px 0px;">
                        <i class="fas fa-user font-18" style="color: #ffffff; margin-right: 20px;"></i>
                        <h3 class="mb-0 text-white">Informations</h3></div>
                    <div class="card-body">
                        <p class="card-text">Deatils du passager trouvé dans le système</p>
                        <h3>Code client : {{ client.code }}</h3>


                        <div class="row" style="margin-top:35px;">
                            <div class="col-md-4">

                            {#    {{ form_label(form.nom, 'Nom du passager: ') }}
                                {{ form_widget(form.nom, {'attr': {'class': 'form-control form-control-lg','style': 'border: 1px solid #000000;'}}) }}
#}
                                  <label>Nom du passager</label>
                        <input style="border: 1px solid #000000;" type="text" id="example-input-large" value="{{ client.nom }}" disabled
                               name="example-input-large" class="form-control form-control-lg"
                               placeholder="Nom">
                            </div>
                            <div class="col-md-4">

                             {#   {{ form_label(form.prenom, 'Prenom du passager: ') }}
                                {{ form_widget(form.prenom, {'attr': {'class': 'form-control form-control-lg','style': 'border: 1px solid #000000;'}}) }}
#}

                                <label>Prenom du passager</label>
                                <input style="border: 1px solid #000000;" type="text" id="example-input-large" value="{{ client.prenom }}" disabled
                                       name="example-input-large" class="form-control form-control-lg"
                                       placeholder="Prenom">
                            </div>
                            <div class="row" style="margin-top:35px;">

                                {# Dropdown sièges dispo #}
                                <div class="col-md-4">
                                    {{ form_label(form.vehiculesiege, 'Siège: ') }}
                                    {{ form_widget(form.vehiculesiege, {'attr': {'class': 'form-control form-control-lg'}}) }}
                                    {{ form_errors(form.vehiculesiege) }}
                                </div>
                            </div>

                        </div>


                        <br/>
                        <div style="display: flex; margin: 30px">
                            <i class="fas fa-credit-card font-18" style=" margin-right: 20px;"></i>
                            <h3 class="card-title">Moyen de paiement</h3>
                        </div>
                        <div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input danger check-outline outline-danger" type="radio"
                                       id="danger-outline-radio" name="radio-danger" value="option1">
                                <label class="form-check-label" for="danger-outline-radio">CASH</label>
                            </div>

                            <div class="form-check form-check-inline" >
                                <input class="form-check-input danger check-outline outline-danger" type="radio"
                                       id="danger-outline-radio" name="radio-danger" value="option2" disabled>
                                <label class="form-check-label" for="danger-outline-radio">AIRTEL MONEY</label>
                            </div>

                            <div class="form-check form-check-inline">
                                <input class="form-check-input danger check-outline outline-danger" type="radio"
                                       id="danger-outline-radio" name="radio-danger" value="option3" disabled>
                                <label class="form-check-label" for="danger-outline-radio">VISA</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input data-bs-target="#multiCollapseExample2" class="form-check-input danger check-outline outline-danger" type="radio"
                                       id="danger-outline-radio" name="radio-danger" value="option4" disabled>
                                <label  class="form-check-label" for="danger-outline-radio">MASTER CARD</label>
                            </div>

                        </div>


                        <div class="row" style="margin-top:35px; margin-bottom: 35px;">

                            <div class="col-md-4">
                              {#  {{ form_label(form.email, 'Adresse e-mail: ') }}
                                {{ form_widget(form.email, {'attr': {'class': 'form-control form-control-lg','style': 'border: 1px solid #000000;'}}) }}

#}
                                <label>Adresse e-mail</label>
                                <input style="border: 1px solid #000000;" type="text" id="example-input-large" value="{{ client.email }}" disabled
                                       name="example-input-large" class="form-control form-control-lg"
                                       placeholder="Prenom">

                            </div>

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

                            {#    {{ form_label(form.telephone, 'Numéro de Télephone * ') }}
                                {{ form_widget(form.telephone, {'attr': {'class': 'form-control form-control-lg','style': 'border: 1px solid #000000;'}}) }}#}

                                <label>Numéro de Télephone *</label>
                    <input style="border: 1px solid #000000;" type="text" id="example-input-large" value="{{ client.email }}" disabled
                           name="example-input-large" class="form-control form-control-lg"
                           placeholder="Ex : 0999900000">
                            </div>

                        </div>

                        {#  <div class="form-check form-check-inline" style="margin-bottom:35px">
                <input class="form-check-input secondary check-light-secondary" type="checkbox" id="secondary-light-check" value="option1">
                <label class="form-check-label" for="secondary-light-check">
                    Je souhaite recevoir les dernières offres. Je peux à tout moment me désabonner de tout ou partie des communications.</label>
            </div>
                        #}
                        <div style="text-align: right;">

                            <button type="submit" class="btn btn-dark btn-lg mb-0 mb-sm-2"><i
                                        class="fas fa-credit-card"> </i>
                                Payer
                            </button>

                            {#
                            <a href="" class="btn btn-dark btn-lg mb-0 mb-sm-2"><i class="fas fa-credit-card"></i> Payer</a>
                            #}
                        </div>

                    </div>
                </div>





               {{ form_end(form) }}

            </div>



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

        </div>
    </div>


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

    {{ encore_entry_script_tags('apps_table') }}


    <script type="text/javascript">
        $('#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 %}