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

{% block title %}  Détail service  {% endblock %}

{% block content %}
<!-- ============================================== HEADER : END ============================================== -->
<div class="breadcrumb">
    <div class="breadcrumb-inner">
        <ul class="list-inline list-unstyled">
            <li><a href="{{ path('frontend_home_index') }}">Accueil</a></li>
            <li><a href="{{ path('frontend_article_service_index') }}">Article et Service</a></li>
            <li class="active">Détail Service</li>
        </ul>
    </div>
    <!-- /.breadcrumb-inner -->
</div>

<style>
    .img-resp{
        max-width: 402px;
        max-height: 380px;
    }
</style>

<!-- /.breadcrumb -->
<div class="body-content outer-bottom-xs">
    <div class='row single-product'>
        <!-- ============================================== Testimonials: END ============================================== -->
        <!-- /.sidebar -->
        
        <div class="detail-block">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 gallery-holder">
                    <div class="product-item-holder size-big single-product-gallery small-gallery">
                        <div id="owl-single-product">
                            <!-- /.single-product-gallery-item -->
                            {% for key,image in service.getAllImage() %}
                                <div class="single-product-gallery-item" id="slide{{key}}">
                                    <a data-lightbox="image-{{key}}" data-title="Gallery" href="{{ asset('uploads/images/services/' ~ image ) }}">
                                        <img class="img-responsive img-resp" alt="" src="{{ asset('uploads/images/services/' ~ image) }}" data-echo="{{ asset('uploads/images/services/' ~ image ) }}" />
                                    </a>
                                </div>
                            {% endfor %}
                            <!-- /.single-product-gallery-item -->
                        </div>
                        <!-- /.single-product-slider -->
                        <div class="single-product-gallery-thumbs gallery-thumbs">
                            <div id="owl-single-product-thumbnails">
                                {% for key,image in service.getAllImage() %}
                                <div class="item {% if key == 1 %} active {% endif %}">
                                    <a class="horizontal-thumb" data-target="#owl-single-product" data-slide="{{ key }}" href="#slide{{ key }}">
                                        <img class="img-responsive" alt="" src="{{ asset('uploads/images/services/' ~ image) }}" data-echo="{{ asset('uploads/images/services/' ~ image) }}" />
                                    </a>
                                </div>
                                {% endfor %}
                            </div>
                            <!-- /#owl-single-product-thumbnails -->
                        </div>
                        <!-- /.gallery-thumbs -->
                    </div>
                    <!-- /.single-product-gallery -->
                </div>
                <!-- /.gallery-holder -->   
                <div class='col-sm-12 col-md-8 col-lg-8 product-info-block'>
                    <div class="product-info">
                        <h1 class="name">{{ service.getTitre() }}</h1>
                        <div class="rating-reviews m-t-20">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="pull-left">
                                        <div class="rating rateit-small"></div>
                                    </div>
                                    <div class="pull-left">
                                        <div class="reviews">
                                            <a href="#" class="lnk">(13 Reviews)</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.row -->		
                        </div>
                        <!-- /.rating-reviews -->
                        <div class="stock-container info-container m-t-10">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="pull-left">
                                        <div class="stock-box">
                                            <span class="label">Rendez-vous Disponible: </span>
                                        </div>
                                    </div>
                                    <div class="pull-left">
                                        <div class="stock-box">
                                            <span class="value">{{ service.getServiceRdvReservations()|length }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- /.row -->	
                        </div>
                        <!-- /.stock-container -->
                        <div class="price-container info-container m-t-30">
                            <div class="row">
                                <div class="col-sm-6 col-xs-6">
                                    <div class="price-box">
                                        <span class="price">{{ service.getPrixPromo() }} DT</span>
                                        <span class="price-strike">{{ service.getPrixMarche() }} DT</span>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xs-6">
                                    <div class="favorite-button m-t-5">
                                        <a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="Wishlist" href="#">
                                            <i class="fa fa-heart"></i>
                                        </a>
                                        <a class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="E-mail" href="#">
                                            <i class="fa fa-envelope"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /.price-container -->
                        <div class="quantity-container info-container">
                            <div class="row">
                                <div class="col-md-3 col-md-offset-3">
                                    <div class="add-btn">
                                        <button class="btn btn-primary"  id="btn-show-rdv" data-toggle="modal" data-target="#modal-rdv">
                                            <i class="fa-regular fa-calendar-check"></i>
                                            Prendre un rendrez-vous
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- /.row -->
                        </div>
                        <!-- /.quantity-container -->
                    </div>
                    <!-- /.product-info -->
                </div>
                <!-- /.col-sm-7 -->
            </div>
            <!-- /.row -->
            
        </div>
        
    </div>
    <!-- /.row -->
</div>
<!-- /.body-content -->


<div class="blog-page">
    <div class="blog-review wow fadeInUp">
        <div class="row">
            <div class="col-md-12">
                <div class="description-container m-t-20">
                    {{ service.getDescription()|raw }}
                    <!-- /.description-container -->
                </div>
            </div>
        </div>
    </div>
</div>
<br><br>




{% set comments = service.getCommentServices() %}
{% include 'frontend/comment/comments.html.twig' %}

{{ render(controller(
        'App\\Controller\\Frontend\\CommentController::service_add',
        { 'id': service.getId() }
    )) }}

<div class="modal fade" id="modal-rdv" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body" id="modal-body-rdv">
                <table class="table table-bordered" id="dataTablesRdv" width="100%" cellspacing="0">
                    <thead>
                        <tr><th>#</th><th>Nom</th></tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block javascripts %}
    <script>
        var pathGetListRDV = "{{ path('frontend_service_get_list_rdv', {id:service.id}) }}";
        var pathSelectRDV = "{{ path('frontend_service_select_rdv') }}";
    </script>
    {{ parent() }}
    {{ encore_entry_script_tags('app_frontend_article_service') }}
{% endblock %}