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


            <div class="col py-2 px-3 ">
                <button style="float: right;" type="button"
                        class="btn btn-light-primary   btn-lg px-4 fs-4 font-weight-medium" data-bs-toggle="modal"
                        data-bs-target="#ajouter"><i class="fas fa-search"> </i> Client existant
                </button>
            </div>
            <hr/>
            <br/>

            <!-- Primary header modal -->
            <!-- Primary Header Modal -->
            <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">Client existant ?
                            </h4>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <h5 class="mt-0">Code du client</h5>

                            {{ render(
                                controller(
                                    'App\\Controller\\ReservationController::indexInfoPaiementClientSearch',{'id':item.id}
                                )
                            ) }}

                        </div>

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


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


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