@extends('layout.main')

@section('title', __('strings.common.calendar'))

<!-- ======================================================= -->
@section('content')

    <section id="calendar">
        <div class="main-content">

            <div class="container">
                <aside class="filters">
                    <div class="main-title">
                        <h1>{{ __('strings.common.calendar') }}</h1>
                    </div>

                    <a class="show-filters floating-circle right">{{ __('strings.common.filter') }}<br><i class="sort down icon"></i></a>

                    <form class="ui form" action="">

                        <div class="ui grid">
                            <div class="sixteen wide column">
                                <div class="field">
                                    <label>{{ __('strings.common.filter_by_event') }}</label>
                                    <select name="event_id" id="event_id" class="ui fluid search dropdown">
                                        <option value="all">{{ __('strings.common.all') }}</option>
                                        @foreach ($events as $event)
                                            <option {{ $filter_event == $event->id ? 'selected' : '' }} value="{{ $event->id }}">{{ $event->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="sixteen wide column">
                                <div class="field">
                                    <label>{{ __('strings.common.filter_by_category') }}</label>
                                    <select name="category_id" id="category_id" class="ui fluid search dropdown">
                                        <option value="all">{{ __('strings.common.all') }}</option>
                                        @foreach ($categories as $category)
                                            <option {{ $filter_category == $category->id ? 'selected' : '' }} value="{{ $category->id }}">{{ App::getLocale() == "es" ? $category->name : $category->name_en }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            {{-- <div class="sixteen wide column">
                                <div class="field">
                                    <label>{{ __('strings.common.filter_by_venue') }}</label>
                                    <select name="venue_id" class="ui fluid dropdown">
                                        <option value="all">{{ __('strings.common.all') }}</option>
                                        @foreach ($venues as $venue)
                                            <option {{ $filter_venue == $venue->id ? 'selected' : '' }} value="{{ $venue->id }}">{{ $venue->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div> --}}

                            <div class="sixteen wide column">
                                <div class="new datetimeinput">
                                    <div class="field">
                                        <label>{{ __('strings.common.filter_by_date') }}</label>
                                        <input class="datetimepicker" name="date" type="text" placeholder="{{ __('strings.common.all_dates') }}" value="{{ $filter_date ? $filter_date : '' }}">
                                    </div>
                                </div>
                            </div>
                            <div class="eight wide column buttons">
                                <input type="submit" class="btn" value="{{ __('strings.common.filter') }}">
                            </div>
                            <div class="eight wide column buttons">
                                <input type="button" class="btn reset" value="{{ __('strings.common.reset') }}">
                            </div>
                        </div>

                    </form>
                </aside>

                <div class="table-container">
                    <table class="ui padded table calendar">
                        @if(count($calendar) < 1)
                            <tr><td>{{ __('strings.common.no_dates_yet') }}</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 style="min-width: 75px;"><strong>{{ $schedule->hour }}</strong></td>
                                        <td>
                                            <a href="{{ route('event', ['lang' => App::getLocale(), 'id' => $schedule->event_id]) }}"><strong>{!! $schedule->event !!}</strong></a>
                                            <div class="ficha" style="max-width: 410px;">{!! nl2br($schedule->ficha) !!}</div>
                                        </td>
                                        <td>
                                            @if ($schedule->tickets || $schedule->tickets == 'GRATIS')
                                                {{ $schedule->venue }}
                                            @else
                                                Proximamente
                                            @endif
                                        </td>
                                        <td>
                                            {{-- <div class="note">{{ $schedule->is_press }}</div> --}}
                                        </td>
                                        <td style="min-width: 80px;">
                                            {{-- <div class="badge">{{ $schedule->sub == 'sub | no_sub' ? '' : $schedule->sub}}</div> --}}
                                        </td>

                                        <td>
                                        @if ( $schedule->tickets && $schedule->tickets != 'GRATIS' )
                                            <a class="fbtn" target="_blank" href="{{$schedule->tickets}}"><div onclick="irABoletos('{{ $schedule->event }}')" class="badge"><i class="fas fa-ticket-alt"></i> Boletos</div></a>
                                        @elseif ($schedule->tickets == 'GRATIS')
                                            <a class="fbtn" target="_blank"><div class="badge"><i class="fas fa-ticket-alt"></i> Gratis</div></a>
                                          @else
                                            <a class="fbtn" target="_blank"><div class="badge"><i class="fas fa-ticket-alt"></i> Proximamente</div></a>
                                        @endif
                                            <style type="text/css">
                                                .fbtn {
                                                    box-shadow: 0 0 2px #aaa;
                                                }
                                                  .fbtn:hover {
                                                    color: #fff;
                                                    filter: brightness(120%);
                                                  }
                                            </style>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        @endforeach
                    </table>
                    {{ $dates->appends(request()->input())->links() }}
                    {{-- {{ $dates->appends(['event_id' => $filter_event, 'venue_id' => $filter_venue, 'date' => $filter_date ])->links() }} --}}
                </div>

            </div>

        </div>

    </section>

@endsection


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


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
    function irABoletos(name){
        fbq('trackCustom', 'clicBoleto', {content_name: name});
      //console.log(name);
      
    }
        jQuery(function( $ ) {
            /// Init modals
            $('.ui.modal').modal();

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

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

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

            $('.show-filters').on('click', function() {
                $("#calendar aside form").slideToggle();
            });

            $(".reset").on('click', function() {
                $(".loader").css("display", "flex").hide().fadeIn();
                window.location.href = '{{ route('calendar') }}';
            });

            /// Datetime picker plugin <<===============
            $(".datetimepicker").flatpickr();
        });
    </script>
@endpush

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

@push('head_styles')
    <link rel="stylesheet" href="{{ asset('css/calendar.min.css?v=36') }}">
    <style>
        .ficha {
            font-size: 0.8rem;
            line-height: 1.2;
            color: #777;
        }
        @media ( max-width: 1080px ) {
            .buttons {
                width: 100% !important;
            }
            .ui.grid>[class*="eight wide column"].buttons {
                width: 100% !important;
            }
        }
    </style>
@endpush