@extends('layouts.master')

@section('title')
    NH Gooi - Nieuws
@endsection

@section('page_container_class')
    news
@endsection

@push('scripts')
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        .input-group-text svg {
            width: 24px;
            height:24px;
            fill: #0f259d
        }
        .datepicker {
            border: 1px solid lightgray;
            border-radius: 4px;
            padding: 5px;
        }
        .daterangepicker .drp-buttons .btn {
            border: none;
            padding: 10px 39px 10px 39px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }
        .daterangepicker.show-calendar .drp-buttons {
            display: flex;
        }
        .daterangepicker .drp-selected {
            display: none;
        }
    </style>
    <script>
      $(function() {
        $('input[name="daterange"]').daterangepicker({
          opens: 'left',
          autoUpdateInput: false,
          locale: {
            cancelLabel: 'Annuleer',
            applyLabel: 'Filteren',
            "daysOfWeek": [
              "Zo",
              "Ma",
              "Di",
              "Wo",
              "Do",
              "Vr",
              "Za"
            ],
            "monthNames": [
              "Januari",
              "Februari",
              "Maart",
              "April",
              "Mei",
              "Juni",
              "Juli",
              "Augustus",
              "September",
              "Oktober",
              "November",
              "December"
            ],
            "firstDay": 1
          }
        }, function(start, end, label) {
          $('input[name="daterange"]').val(start.format('DD-MM-YYYY') + ' - ' + end.format('DD-MM-YYYY'));
          var $moreNews = $('.content_container #meer-nieuws');
          var options = $('#meer-nieuws').data('loadmorenews');
          options.dateStart = start.format('YYYY-MM-DD');
          options.dateEnd = end.format('YYYY-MM-DD');
          options.nextPage = 1;
          $('.content_container #items-more-news li').remove();
          $('.content_container #items-more-news').append('<li class="loader"><span class="fas fa-spinner fa-spin"></span> Laden...</li>');
          $moreNews.loadMoreNews(options);
          $moreNews.click();
        });
      });
    </script>
@endpush

@section('content')
    <div class="clearfix">
        {{-- body --}}
        <div class="grey_background">
            <div class="body_container row">
                @if(!isset($disableBanners) || !$disableBanners)
                    <div class="col-12">
                        <ins data-revive-zoneid="5" data-revive-id="{{ env('REVIVE_ID') }}"></ins>
                    </div>
                @endif
                <div class="col-12 col-md content_container">
                    <div class="row">
                        <div class="col-md-12 col-12">
                            <div class="d-flex">
                                <h4 class="box_header flex-grow-1"><span>Meer nieuws</span></h4>
                                <h4 class="box_header ms-auto">
                                    <div class="d-flex">
                                        <div class="input-group-text me-sm-2" id="basic-addon1">{!!file_get_contents(__DIR__ . '/../../../public/images/icons/calendar.svg')!!}</div>
                                        <input class="datepicker" type="text" name="daterange" placeholder="Selecteer datum" value=""/>
                                    </div>
                                </h4>
                            </div>
                            <div class="box" style="width: CALC(100% - 55px);">
                                @include('partial/newslist_small', ['id' => 'items-more-news', 'news' => $news])
                            </div>
                        </div>
                    </div>
                    <div class="row mb-4">
                        <div class="col-12">
                            <a class="btn auto_width" id="meer-nieuws" href="#"
                               data-loadmorenews='{"container":["#items-more-news"], "nextPage":3}'>
                                <span class="fas fa-spinner fa-spin" id="loading"></span>
                                Klik hier voor meer nieuws
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-md-auto sidebar">
                    @include('widgets/nhgooiradiotv', ['headerClass' => 'small'])

                    @include('widgets.banner_sidebar')

                    @include('widgets/contact', [])

                    <div class="podcast_items">
                        <h4 class="box_header small"><span>Fragment gemist</span></h4>
                        <div class="box">
                            @include('partial/podcastitems', ['showTime' => false, 'showImage' => false, 'podcasts' => $podcasts, 'isPodcast' => false])
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection