@extends('layouts.master')

@section('title', 'Calendario Eventos')

@section('content')
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10">
                    <h1 class="m-0 text-dark">Calendario de Eventos<small></small></h1>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
                    <button type="button" class="btn btn-outline-secondary btn-block" data-toggle="modal" data-target="#ayudaModal">Ayuda</button>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="card">
                        <div class="card-header ui-sortable-handle bg-dark text-light">
                            <h3 class="card-title">
                                <i class="fa-solid fa-calendar mr-1"></i>
                                Calendario
                            </h3>
                        </div>
                        <div class="card-body">

                            <!-- jQuery -->
                            <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
                            <!-- BS JavaScript -->
                            <script type="text/javascript" src="js/bootstrap.js"></script>

                            <script>
                            document.addEventListener('DOMContentLoaded', function() {
                                var calendarEl = document.getElementById('calendar');
                                var calendar = new FullCalendar.Calendar(calendarEl, {
                                    initialView: 'dayGridMonth',
                                    locale: 'es',
                                    //monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
                                    //monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
                                    //dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
                                    //dayNamesShort: ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'],
                                    headerToolbar: {
                                        left: 'dayGridMonth,timeGridWeek',
                                        center: 'title',
                                        right: 'prev,next today'
                                    },
                                    buttonText: {month: 'Mes', day: 'Dia', week: 'Semana', today: 'Hoy'},
                                    events: [
                                        @foreach ($eventos as $evento)
                                        {
                                            title  : '{{$evento->nombre}}',
                                            start  : '{{date('Y-m-d',strtotime($evento->fecha))}}',
                                            end    : '{{date('Y-m-d',strtotime($evento->fecha))}}',

                                            id    : {{$evento->id}}
                                        },
                                        @endforeach
                                    ],
                                    eventClick: function(info) {
                                        $('#evento'+info.event.id).modal('show');
                                    },
                                });

                                calendar.render();
                            });

                            </script>
                            <div id='calendar'></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    @foreach ($eventos as $evento)
        <div class="modal fade" id="evento{{$evento->id}}" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ $evento->nombre }} <small>{{date('d/m/Y',strtotime($evento->fecha))}}</small></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <strong><i class="fa-solid fa-signature mr-1"></i> Nombre</strong>
                        <p class="text-muted">{{ $evento->nombre }}</p>
                        <hr>
                        <strong><i class="fa-solid fa-calendar mr-1"></i> Fecha y Hora</strong>
                        <p class="text-muted">{{ date('d/m/y - H:i', strtotime($evento->fecha)) }}</p>
                        <hr>
                        <strong><i class="fa-solid fa-users mr-1"></i> Capacidad</strong>
                        <p class="text-muted">{{ $evento->entradasCantidadTotal() }}</p>
                        <hr>
                        <strong><i class="fa-solid fa-id-card mr-1"></i> Documento</strong>
                        <p class="text-muted">{{ $evento->documento ? "Si" : "No"}}</p>
                        <hr>
                        <strong><i class="fa-solid fa-hand-holding-dollar mr-1"></i> Seña</strong>
                        <p class="text-muted">$ {{ number_format($evento->sena, 0, ',', '.') }}</p>
                        <hr>
                        <strong><i class="fa-solid fa-percent mr-1"></i> Porcentaje</strong>
                        <p class="text-muted">{{ $evento->porcentaje }}</p>
                        <hr>
                        <strong><i class="fa-solid fa-hashtag mr-1"></i> Hash URL</strong>
                        <p class="text-muted">
                            {{ $evento->hash }}
                            <br>
                            <a href="{{ url($evento->hash) }}" target='_blank' style="color:inherit;">{{ url($evento->hash) }}</a>
                        </p>
                        <hr>
                        @if(count($evento->entradas))
                            <strong><i class="fa-solid fa-ticket mr-1"></i> Entradas</strong>
                            <p class="text-muted">
                                @foreach ($evento->entradas as $key => $entrada)
                                    {{ $entrada->nombre }} - $ {{ number_format($entrada->valor, 0, ',', '.') }}<br>
                                @endforeach
                            </p>
                            <hr>
                        @endif
                        @if($evento->imagen)
                            <strong><i class="fa-solid fa-image mr-1"></i> Imagen</strong>
                            <p align="center" class="text-muted"><a href="{{URL::asset($evento->imagen)}}" target='_blank' style="color:inherit;"><img src="{{URL::asset($evento->imagen)}}" class="img-fluid mb-2" alt="" style="width:150px !important"></a></p>
                            <hr>
                        @endif
                        <div class="row">
                            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                                <button type="button" class="btn btn-secondary btn-block" data-dismiss="modal">Cerrar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endforeach

@endsection

@section('javascript')
@endsection