@include('_layouts.breadcumb')

<hr />

<div class="pull-right form-inline">
    <div class="btn-group">
        <button class="btn btn-primary" data-calendar-nav="prev"><< Anterior</button>
        <button class="btn btn-default" data-calendar-nav="today">Hoy</button>
        <button class="btn btn-primary" data-calendar-nav="next">Siguiente >></button>
    </div>
    <div class="btn-group">
        <button class="btn btn-warning" data-calendar-view="year">Año</button>
        <button class="btn btn-warning active" data-calendar-view="month">Mes</button>
        <button class="btn btn-warning" data-calendar-view="week">Semana</button>
        <button class="btn btn-warning" data-calendar-view="day">Día</button>
    </div>
</div>

<div class="clearfix"></div>

<hr />

<div class="row">

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

        <div class="panel panel-warning">
            <div class="panel-heading">
                <div class="panel-title">
                    <h2><i class="fa fa-calendar"></i> <span id="calendar-title"></span></h2>
                </div>
            </div>
            <div class="panel-body">
                <div id="calendar"></div>
            </div>
        </div>

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

        <div class="panel panel-danger">
            <div class="panel-heading">
                <div class="panel-title">
                    <h2><i class="fa fa-list"></i> Eventos</h2>
                </div>
            </div>
            <div class="panel-body">
                <small>Listado de próximos eventos programados</small>
                <ul id="eventlist" class="list-group"></ul>
            </div>
        </div>

    </div>
</div>

<div class="clearfix"></div>

<div class="clearfix"></div>

@section('header')
    <link rel="stylesheet" href="/bower_components/bootstrap-calendar/css/calendar.min.css" />
    <style>
        .badge-important {
            background-color: #b94a48;
            color: #fff;
            text-shadow: 1px 1px 2px #333;
            font-size: 20px;
        }
        .sidebar-menu {
            z-index: 0;
        }

        #eventlist>li:nth-of-type(odd) {
            background: #fafafa;
        }
    </style>
@stop

@section('footer')
    <div class="modal fade" id="events-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">Event</h4>
                </div>
                <div class="modal-body" style="height: 400px">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="/bower_components/underscore/underscore-min.js"></script>
    <script type="text/javascript" src="/bower_components/moment/min/lang/es.js"></script>
    <script type="text/javascript" src="/bower_components/moment/min/moment.min.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap-calendar/js/language/es-MX.js"></script>
    <script type="text/javascript" src="/bower_components/bootstrap-calendar/js/calendar.min.js"></script>


    <script type="text/javascript">

        var options = {
            events_source: '/bower_components/bootstrap-calendar/events.json.php',
            view: 'year',
            tmpl_path: '/bower_components/bootstrap-calendar/tmpls/',
            tmpl_cache: false,
            day: '2016-01-01',
            modal : "#events-modal", modal_type : "ajax", modal_title : function (e) { return e.title },
            onAfterEventsLoad: function(events) {
                if(!events) {
                    return;
                }
                var list = $('#eventlist');
                list.html('');

                $.each(events, function(key, val) {
                    $(document.createElement('li')).addClass('list-group-item')
                        .html('<a href="' + val.url + '">' + val.title + '</a>')
                        .appendTo(list);
                });
            },
            onAfterViewLoad: function(view) {
                $('#calendar-title').text(this.getTitle());
                $('.btn-group button').removeClass('active');
                $('button[data-calendar-view="' + view + '"]').addClass('active');
            },
            classes: {
                months: {
                    general: 'label'
                }
            }
        };

        var calendar = $('#calendar').calendar(options);

        calendar.setLanguage('es-MX');
        calendar.view();

        $('.btn-group button[data-calendar-nav]').each(function() {
            var $this = $(this);
            $this.click(function() {
                calendar.navigate($this.data('calendar-nav'));
            });
        });

        $('.btn-group button[data-calendar-view]').each(function() {
            var $this = $(this);
            $this.click(function() {
                calendar.view($this.data('calendar-view'));
            });
        });

        $('#first_day').change(function(){
            var value = $(this).val();
            value = value.length ? parseInt(value) : null;
            calendar.setOptions({first_day: value});
            calendar.view();
        });

        $('#language').change(function(){
            calendar.setLanguage($(this).val());
            calendar.view();
        });

        $('#events-in-modal').change(function(){
            var val = $(this).is(':checked') ? $(this).val() : null;
            calendar.setOptions({modal: val});
        });
        $('#events-modal .modal-header, #events-modal .modal-footer').click(function(e){
            //e.preventDefault();
            //e.stopPropagation();
        });
    </script>
@stop