{% extends 'mycpBundle:layout:backend.html.twig' %}
{% block title %}Administración{% endblock %}
 {% block another_in_head %}
     <link href='{{ asset('bundles/mycp/css/fullcalendar.min.css') }}' rel='stylesheet' xmlns="http://www.w3.org/1999/html"/>
     <link href='{{ asset('bundles/mycp/css/fullcalendar.print.css') }}' rel='stylesheet' media='print'/>
 {% endblock %}
{% block top_body %}
    <ul class="breadcrumb">
        <li><a href="{{ path('mycp_backend_front') }}">Administración</a> <span class="divider">/</span></li>
        <li><a href="{{ path('mycp_list_unavailabilityDetails') }}">Disponibilidad</a> <span class="divider">/</span></li>
        <li><a href="{{ path('mycp_list_rooms_unavailabilityDetails',{'id_ownership': ownership.ownid}) }}">{{ ownership.ownMcpCode }}</a><span class="divider">/</span></li>
        <li class="active">Hab. #{{ num_room }}</li>
        <li class="pull-right"><a href="{{ path('mycp_list_rooms_unavailabilityDetails',{'id_ownership': ownership.ownid}) }}"><i class="icon-hand-left"></i> Volver atrás</a></li>
    </ul>
{% endblock %}
{% block form_actions %}
    <ul class="breadcrumb">
        <li><a href="{{ path('mycp_backend_front') }}">Administración</a> <span class="divider">/</span></li>
        <li><a href="{{ path('mycp_list_unavailabilityDetails') }}">Disponibilidad</a> <span class="divider">/</span></li>
        <li><a href="{{ path('mycp_list_rooms_unavailabilityDetails',{'id_ownership': ownership.ownid}) }}">Habitaciones</a> <span class="divider">/</span></li>
        <li class="active">Hab. #{{ num_room }}</li>
        <li class="pull-right"><a href="{{ path('mycp_list_rooms_unavailabilityDetails',{'id_ownership': ownership.ownid}) }}"><i class="icon-hand-left"></i> Volver atrás</a></li>
    </ul>
{% endblock %}
{% block content %}
<h2>Habitaciones: {% include 'mycpBundle:utils:ownership_header.html.twig' with {'ownership':ownership}%}</h2><br/>
<h5>Hab. #{{num_room}} - {{room.roomType}}</h5>
<h5>Calendario (.ics): {{room.getICalUrlFromRequest(app.request)}}</h5>
<hr/>
 <a class="btn" href="{{ path('mycp_new_unavailabilityDetails', {'num_room':num_room, 'id_room': id_room}) }}"><i class="icon-plus"></i> Adicionar no disponibilidad</a>&nbsp;
 <a class="btn btn-info" href="{{room.getICalUrlFromRequest(app.request)}}" title="Descargar calendario (.ics)"><i class="icon-calendar"></i> Descargar calendario</a>
 <br/><br/>
    {% if details %}
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#calendarView" data-toggle="tab">Calendario</a>
        </li>
        <li class="">
            <a href="#listView" data-toggle="tab">Listado</a>
        </li>
    </ul>
<div class="tab-content">
    <div id="calendarView" class="tab-pane fade active in">
        <div style="width: 95%; text-align: center">
            <div id="loading" class="row-fluid">
                <img src="{{ asset('bundles/mycp/images/ajax-loader-7.gif') }}" alt="{{"Loader" | trans}}">
            </div>
            <div class="row-fluid">
                <div id='calendar' class="row_fluid"></div>
                <div class="row_fluid" style="text-align: right;padding-top: 3px">
                    <div style="text-align: center; width:100px; display:inline;" class="badge badge-warning">No disponible</div>
                    <div style="text-align: center; width:100px; display:inline;" class="badge badge-info">Reservada MyCP</div>
                </div>
            </div>
        </div>

    </div>
    <div id="listView" class="tab-pane fade active">
            <div class="alert">
                <div class="row-fluid">
                    <div class="pull-left">
                        Mostrando del {{items_per_page * current_page - items_per_page}} al {% if items_per_page * current_page >  total_items%}{{total_items }}{% else %}{{ items_per_page * current_page }}{% endif %} de {{total_items}} registros
                    </div>
                    <div class="pull-right">
                        Mostrar:
                        <a class="{% if items_per_page == 10 %}selected{% endif %}" href="{{ path('mycp_list_room_details_unavailabilityDetails',{'items_per_page':10, 'id_room':id_room, 'num_room': num_room})}}">10</a>
                        <a class="{% if items_per_page == 50 %}selected{% endif %}" href="{{ path('mycp_list_room_details_unavailabilityDetails',{'items_per_page':50, 'id_room':id_room, 'num_room': num_room})}}">50</a>
                        <a class="{% if items_per_page == 100 %}selected{% endif %}" href="{{ path('mycp_list_room_details_unavailabilityDetails',{'items_per_page':100, 'id_room':id_room, 'num_room': num_room})}}">100</a>
                    </div>
                </div>
            </div>
            <div class="paginator-cont span11">
                {{ simple_paginator_render('mycp_list_room_details_unavailabilityDetails',null,{
                'container_class': 'paginator',
                'previousPageText': '«',
                'nextPageText': '»',
                'currentClass': 'current',
                'firstPageText': 'Primera',
                'lastPageText': 'Última',
                'route_params': {'id_room':id_room, 'num_room': num_room,'items_per_page':items_per_page}
                }) }}
            </div>
            <table class="table table-striped table-hover">
                <thead>
                <tr>
                    <th>Período</th>
                    <th style="width:50%">Motivo</th>
                    <th style="text-align: right">Acciones</th>
                </tr>
                </thead>
                <tbody>
                {% for detail in details %}
                    <tr>
                        <td>{{detail.udFromDate | date('d/m/Y')}} - {{detail.udToDate | date('d/m/Y')}}</td>
                        <td>{{detail.udreason}}</td>
                        <td style="text-align: right">
                            <a class="btn btn-mini" style="margin: 0" href="{{ path('mycp_edit_unavailabilityDetails',{'id_detail':detail.udid,'num_room':num_room}) }}">Editar</a>
                            <a class="btn btn-mini btn-danger" href="{{ path('mycp_delete_unavailabilityDetails',{'id_detail':detail.udid,'num_room':num_room}) }}">Eliminar</a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <div class="paginator-cont span11">
                {{ simple_paginator_render('mycp_list_room_details_unavailabilityDetails',null,{
                'container_class': 'paginator',
                'previousPageText': '«',
                'nextPageText': '»',
                'currentClass': 'current',
                'firstPageText': 'Primera',
                'lastPageText': 'Última',
                'route_params': {'id_room':id_room, 'num_room': num_room,'items_per_page':items_per_page}
                }) }}
            </div>
    </div>
</div>
        {% else %}
            <p> <div class="alert alert-block">No hay detalles de disponibilidad almacenados.</div></p>
        {% endif %}

{% endblock %}
{% block javascripts %}
    {% if details %}
        {% javascripts
        '@mycpBundle/Resources/public/js/jquery.ui/jquery.ui.core.js'
        '@mycpBundle/Resources/public/js/jquery.ui/jquery.ui.widget.js'
        '@mycpBundle/Resources/public/js/jquery.ui/jquery.ui.mouse.js'
        '@mycpBundle/Resources/public/js/jquery.ui/jquery.ui.sortable.js'
        '@mycpBundle/Resources/public/js/moment.min.js'
        '@mycpBundle/Resources/public/js/fullcalendar.min.js'
        '@mycpBundle/Resources/public/js/fullcalendar-lang-all.js'
        filter='?uglifyjs2' %}
        <script src="{{ asset_url }}"></script>
        {% endjavascripts %}

        <script>
            $(document).ready(function () {
                $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek'
                    },
                    defaultDate: '{{ "today" | date("Y-m-d") }}',
                    editable: true,
                    selectable: true,
                    lang: 'es',
                    eventLimit: false, // allow "more" link when too many events
                    events: {
                        url: '{{ path('mycp_get_unavailability_details_json', {'idRoom': id_room}) }}',
                        error: function () {
                            $('#modal-warning').show();
                        }
                    },
                    loading: function (bool) {
                        if (bool) {
                            $('#loading').show();

                        }
                        else {
                            $('#loading').hide();
                        }
                    },
                    selectHelper: true,
                    select: function (start, end) {
                        end.add(-1, 'day');
                        $('#calendar').fullCalendar('loading', true);
                        var reason = prompt('Escriba una razón');
                        var eventData;
                        if (reason) {
                            var url = '{{ path("mycp_create_event_callback") }}';
                            $.post(
                                    url,
                                    {
                                        'idRoom':{{ id_room}},
                                        'start': start.format('DD/MM/YYYY'),
                                        'end': end.format('DD/MM/YYYY'),
                                        'reason': reason
                                    },
                                    function (data) {
                                        var response = jQuery.parseJSON(data);

                                        if (response.errorMessage !== "") {
                                            alert(response.errorMessage);
                                        }
                                        else {
                                            end.add(+1, 'day');
                                            eventData = {
                                                id: response.eventId,
                                                title: response.title,
                                                start: start,
                                                end: end,
                                                color: "#f89406",
                                                url: response.url
                                            };

                                            $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                                        }
                                    });
                        }
                        $('#calendar').fullCalendar('unselect');
                        $('#calendar').fullCalendar('loading', false);
                    },
                    eventRender: function (event, element) {
                        $(element).tooltip({title: event.title});
                    }/*,
                     eventDrop: function (event, dayDelta, minuteDelta, allDay, revertFunc) {
                     if (event.id.match("^1-") && confirm("¿Desea mover la no disponibilidad?")){
                     alert("yes");
                     }

                     },

                     eventResize: function (event, dayDelta, minuteDelta, revertFunc) {

                     if (confirm("¿Desea modificar el rango de fechas de la no disponibilidad?")) {
                     UpdateEvent(event.id, event.start, event.end);
                     }
                     else {
                     revertFunc();
                     }
                     }*/
                });

            });

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