{% extends "YOUCommercantBundle::min.html.twig" %}

{% block container %}

    <style>
        .main-content {
            margin:0!important;
        }

        #list {
            padding:0;
            margin:0;
            list-style:none;
            float:left;
            width:200px;
            height:400px;
            overflow-y:auto;
            overflow-x:hidden;
            background:#fff;
        }
        #list a{
            display: block;
            padding:8px 5px;
            background:#ffffff;
            border-bottom: 1px solid #eee;
        }
        #list a.current {
            color:#fff;
            background:#99cc33;
        }
        #list a i{
            float:right;
            margin-top:3px;
        }
        #list a.create {
            text-align: center;
            font-weight: bold;
        }
        #list a:hover{
            background: #eee;
        }
        #horaire {
            width: 800px;
            height:400px;
        }
        #content {
            height:400px;
            width: 599px;
            border-left:1px solid #eee;
            overflow-y:auto;
            overflow-x:hidden;
            background:#fff;
            margin:0;
        }

        #ajout_categorie {
            float:left;
        }
        #submittarifs {
            float:right;
        }

        #horaire label {
            position:relative;
            top:2px;
        }

        select {
            width:60px;
            margin:0 5px!important;

        }
        .formName {
            float:left;
        }
        .formName label{
            display:inline-block;
            width:100px;
            text-align: left;
            padding-right:5px;
            top:-4px!important;
        }
        .formName input {
            width:175px;
            margin-top: 1px;
        }

        #horaire table td {
            height:28px;
            padding:5px 10px;
            line-height: 28px;
        }
        #horaire table td.jour {
            width:80px;
            text-align: right;
        }
        #horaire thead td {
            text-align: center;
        }
        #save_add {
            margin:0;
            padding:20px;
            height:30px;
        }
        #hidden_form {
            display: none;
        }
        .tranchehoraire {
            float:left;
            clear:both;
            margin-bottom: 5px;
        }
        .tranchehoraire div{
            display:inline-block;
        }
        .tranchehoraire label{
            display:inline-block;
            margin:0 5px;
        }
        #horaire .btn.btn-danger{
            float:left;
        }
        .btn_ajout_tranche {
            float:right;
        }
        p.info {
            margin:0;
            padding:5px 0 20px 0;
        }
        p.ferme {
            color:orange;
            float:left;
        }

        .afficher .day {
            padding-top: 5px;
            clear: both;
            width:300px;
        }
        .afficher .day .name {
            width:100px;
            float:left;
            text-align: right;
            clear: both;
            font-weight:bold;
        }
        .afficher .day .value {
            float:right;
            width:175px;
        }
        .horaire-name {
            font-size:16px;
            padding:15px;
        }
        .afficher .btn {
            float:right;
        }
    </style>

    <div id="horaire" class="row-fluid">
        <ul id="list" class="span4">

            {% for item in liste %}
                {% if current is defined and current == item.id %}


                    <script>

                        var html = "";
                        html += '<p class="horaire-name">Horaire : {{ horaire.name }}</p>';

                        {% for key,day in daylist %}
                            {% set nb = 0 %}
                            html +='<p class="day"><span>{{ day }} :</span>';
                            {% for item in horaire.tranches %}
                                {% if item.day == key %}
                                    {% if nb > 0 %}
                                        html += '/';
                                    {% endif %}
                                    html += ' {{ item.startH|totime }}h{{ item.startM|totime }} à {{ item.endH|totime }}h{{ item.endM|totime }} ';
                                    {% set nb = nb+1 %}
                                {% endif %}
                            {%  endfor %}
                            {% if nb == 0 %}
                                html += '<span class="ferme">Fermé</span>';
                            {% endif %}
                            html += '</p>';
                        {% endfor %}


                        parent.nino_Popup.setValue({id:{{ item.id }},name:"{{ item.name }}",html:html});


                    </script>



                    <li><a class="current" href="{{  path('you_commercant_horaire_afficher',{id:item.id}) }}">{{  item.name }} <i class="icon-chevron-right"></i></a></li>
                {% else %}
                    <li><a href="{{  path('you_commercant_horaire_afficher',{id:item.id}) }}">{{  item.name }} <i class="icon-chevron-right"></i></a></li>
                {% endif %}
            {% endfor %}
            <li><a class="create" href="{{  path('you_commercant_horaire_creer') }}">Créer un horaire</a></li>

        </ul>
        <div id="content" class="span8">
            {%  block content %}

            {%  endblock %}
        </div>
    </div>
    <script>

        {% if current is not defined %}
        parent.nino_Popup.setValue({id:false,name:false});
        {% endif %}

    </script>
{%  endblock %}