@extends('layout.admin')

@section('title', 'Programa')

<!-- ======================================================= -->

@section('content')

<!-- ======================================================= -->
<section id="calendar-section" class="main-section admin-section">
    <div class="heading left-align">
        <h1>Programa</h1>
        <h3>Gestión de actividades para el FICG.</h3>
    </div>

    {{-- List all in the calendar --}}
    {{ $dates->appends(request()->input())->links() }}
    <table class="ui padded table calendar">
        @if(count($calendar) < 1)
            <tr><td>No hay fechas aún</td></tr>
        @endif
        @foreach ($calendar as $day)
            <thead>
                <tr>
                    <th colspan="6">{{ $day[0]->date }}</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($day as $schedule)
                    <tr>
                        <td class="actions column">
                            <a class="action edit" mtrigger="modal-object-{{ $schedule->date_id }}"><i class="far fa-edit"></i></a>
                            <a class="action erase" objectid="{{ $schedule->date_id }}"><i class="fas fa-backspace"></i></a>
                        </td>
                        <td><strong>{{ $schedule->hour }}</strong></td>
                        <td>{!! $schedule->event !!}</td>
                        <td>{{ $schedule->venue }}</td>
                        <td>
                            <div class="note">{{ $schedule->is_press }}</div>
                        </td>
                        <td>
                            <div class="badge">{{ $schedule->sub }}</div>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        @endforeach
    </table>
        {{ $dates->appends(request()->input())->links() }}

    {{-- ========================= --}}
    {{-- Add new entry to calendar --}}
    <div id="new-modal-object" class="ui modal object">
        <div class="header">Agregar al programa</div>
        <div class="scrolling content">
            <form class="row" action="{{ route('date.store') }}" method="post" enctype="multipart/form-data">
                @csrf
                <div class="block">
                    <div class="ui grid">

                        <div class="eight wide column">
                            <div class="ui labeled input">
                                <div class="ui label">Evento:</div>
                                <select name="event_id" id="event_id" class="ui fluid search dropdown" required>
                                    @foreach ($events as $event)
                                        <option value="{{ $event->id }}">{{ $event->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="eight wide column">
                            <div class="ui labeled input">
                                <div class="ui label">Sede:</div>
                                <select name="venue_id" class="ui fluid dropdown">
                                    @foreach ($venues as $venue)
                                        <option value="{{ $venue->id }}">{{ $venue->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="eight wide column">
                            <div class="new datetimeinput">
                                <div class="ui labeled input">
                                    <div class="ui label">Fecha:</div>
                                    <input class="datetimepicker" name="date" type="text" placeholder="aaaa-mm-dd hh:mm:ss" value="" required>
                                </div>
                            </div>
                        </div>

                        <div class="eight wide column">
                            <div class="ui labeled input">
                                <div class="ui label">Audio / Subtítulos:</div>
                                <select name="sub" class="ui fluid dropdown">
                                    <option value="null">No aplica</option>
                                    <option value="sub | es">Subtitulada a Español</option>
                                    <option value="sub | en">Subtitulada a Inglés</option>
                                    <option value="dob | es">Doblada a Español</option>
                                    <option value="dub | en">Doblada a Español</option>
                                    <option value="sub | en, es">Subtitulada Español e Inglés</option>
                                </select>
                            </div>
                        </div>

                        <div class="sixteen wide column">
                            <div class="ui labeled input">
                                <div class="ui label">Tickets URL:</div>
                                <input name="tickets" type="text" placeholder="https://www.eventbrite.com.mx/e/my-event-123">
                            </div>
                        </div>

                        <div class="inline field">
                            <div class="ui toggle checkbox field-block" style="margin: 15px 0px 15px;box-shadow: none;">
                                <input name="is_press" type="checkbox" tabindex="0" class="hidden">
                                <label>¿Función de prensa?</label>
                            </div>
                        </div>

                    </div>
                    <div class="space-before center-align" style="margin: 15px 0px 5px;">
                        <button class="ui button primary" type="submit">Guardar</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    {{-- Add new entry to calendar --}}
    @foreach ($dates as $date)
        <div id="modal-object-{{ $date->id }}" class="ui modal object">
            <div class="header">Editar este evento</div>
            <div class="scrolling content">
                <form class="row" action="{{ route('date.update') }}" method="post" enctype="multipart/form-data">
                    @method('PUT')
                    @csrf
                    <input type="hidden" name="id" value="{{ $date->id }}">
                    <input type="hidden" name="page" value="{{ request()->page }}">

                    <div class="block">
                        <div class="ui grid">

                            <div class="eight wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">Evento:</div>
                                    <select name="event_id" class="ui fluid search dropdown" required>
                                        @foreach ($events as $event)
                                            <option {{ $date->event->id == $event->id ? 'selected':'' }} value="{{ $event->id }}">{{ $event->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="eight wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">Sede:</div>
                                    <select name="venue_id" class="ui fluid dropdown">
                                        @foreach ($venues as $venue)
                                            <option {{ $date->venue->id == $venue->id ? 'selected':'' }} value="{{ $venue->id }}">{{ $venue->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="eight wide column">
                                <div class="new datetimeinput">
                                    <div class="ui labeled input">
                                        <div class="ui label">Fecha:</div>
                                        <input class="datetimepicker" name="date" type="text" placeholder="aaaa-mm-dd hh:mm:ss" value="{{ $date->date }}" required>
                                    </div>
                                </div>
                            </div>

                            <div class="eight wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">Audio / Subtítulos:</div>
                                    <select name="sub" class="ui fluid dropdown">
                                        <option value="null">No aplica</option>
                                        <option {{ $date->sub ==  'sub | es' ? 'selected':'' }} value="sub | es">Subtitulada a Español</option>
                                        <option {{ $date->sub ==  'sub | en' ? 'selected':'' }} value="sub | en">Subtitulada a Inglés</option>
                                        <option {{ $date->sub ==  'dob | es' ? 'selected':'' }} value="dob | es">Doblada a Español</option>
                                        <option {{ $date->sub ==  'dub | en' ? 'selected':'' }} value="dub | en">Doblada a Inglés</option>
                                        <option {{ $date->sub ==  'sub | en, es' ? 'selected':'' }} value="sub | en, es">Subtitulada Español e Inglés</option>
                                    </select>
                                </div>
                            </div>

                            <div class="sixteen wide column">
                                <div class="ui labeled input">
                                    <div class="ui label">Tickets URL:</div>
                                    <input name="tickets" type="text" placeholder="https://www.eventbrite.com.mx/e/my-event-123" value="{{ $date->tickets }}">
                                </div>
                            </div>

                            <div class="inline field">
                                <div class="ui toggle checkbox field-block" style="margin: 15px 0px 15px;box-shadow: none;">
                                    <input name="is_press" type="checkbox" tabindex="0" class="hidden" {{ $date->is_press ? 'checked':'' }}>
                                    <label>¿Función de prensa?</label>
                                </div>
                            </div>

                        </div>
                        <div class="space-before center-align" style="margin: 15px 0px 5px;">
                            <button class="ui button primary" type="submit">Actualizar</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    @endforeach
    {{-- ========================= --}}
    <div id="erase-modal" class="ui mini modal">
        <div class="header">¿Borrar?</div>
        <div class="content">
            <p style="color: #000;">¿Confirmas el borrado permanente de este objeto?</p>
        </div>
        <div class="actions">
            <div class="ui negative button primary">
                No
            </div>
            <div class="ui positive button red">
                Yes
            </div>
        </div>
    </div>

    <form id="erase-form" method="post" action="{{ route('date.destroy') }}">
        @csrf
        <input type="hidden" name="_method" value="DELETE">
        <input class="erase-field" type="hidden" name="id" value="">
    </form>
    {{-- ========================= --}}
</section>

<a class="addobject floating-circle right bottom"><i class="fas fa-plus" style="top: 1px;"></i></a>

@endsection

<!-- ======================================================* -->

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
        jQuery(function( $ ) {
            /// Init modals
            $('.ui.modal').modal();

            /// Init dropdowns
            $('.ui.dropdown').dropdown();

            /// Init checkbox
            $('.ui.checkbox').checkbox();

            /// Add new
            $('.addobject').on('click', function() {
                $('#new-modal-object').modal('show');
            });

            /// Manage click on objects
            $('#calendar-section .action.edit').on('click', function(){
                var modal = '#' + $(this).attr('mtrigger');
                console.log('Here...' + modal);
                $(modal).modal('show');
            });

            /// Showing loading indicator
            $('form').on('submit', function(){
                $(".loader").css("display", "flex").hide().fadeIn();
                return true;
            });

            /// Erase object
            $('#calendar-section .action.erase').on('click', function(e) {
                e.preventDefault();
                var id = $(this).attr('objectid');

                $('#erase-form .erase-field').val(id);

                $('#erase-modal').modal({
                    onApprove: function() {
                        $('#erase-form').submit();
                    }
                }).modal('show');
                return false;
            });

            /// Datetime picker plugin <<===============
            $(".datetimepicker").flatpickr({
                enableTime: true,
                time_24hr: true
            });
        });
    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <link rel="stylesheet" href="{{ asset('css/calendar.min.css') }}">
@endpush