@extends('Shared.Layouts.BilettmLayout',['folder' => 'mobile'])
@section('after_styles')
    <link href="{{asset('vendor/gijgo/gijgo.min.css')}}" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="{{asset('vendor/slick-carousel/slick/slick.css')}}">
    <link rel="stylesheet" href="{{asset('vendor/owlcarousel/assets/owl.carousel.min.css')}}">
    <link rel="stylesheet" href="{{asset('vendor/owlcarousel/assets/owl.theme.default.min.css')}}">
    <link  rel="stylesheet" href="{{asset('vendor/jquery-ui/themes/base/jquery-ui.min.css')}}">
@endsection

@push('after_styles')
    <style>
        .gj-picker-bootstrap{
            left: 50% !important;
            transform: translateX(-50%) !important;
        }
    </style>
@endpush

@section('content')
    <div class="row mt-2">
        @include("Shared.Partials.FilterMenu")
    </div>
    @foreach($category->children as $cat)
        @php
            $cat_events = $events->where('sub_category_id',$cat->id);
        @endphp
        <div class="section-section py-3">
            <div class="col-12 d-flex justify-content-between" style="margin-bottom: 20px">
                <h5 >{{$cat->title}}
                    <div class="title-bottom-line"></div>
                </h5>
                @if($cat_events->count() == $cat->events_limit)
                <a class="red_button" href="{{$cat->url}}">{{__("ClientSide.rep")}}</a>
                @endif
            </div>

            <div class="owl-carousel owl-theme" id="section-slider{{$loop->iteration}}">
                @foreach($cat_events as $event)
                    @include('mobile.Partials.EventListItem')
                @endforeach
            </div>
        </div>

    @endforeach

@endsection
@section('after_scripts')

    <script src="{{asset('vendor/gijgo/gijgo.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('vendor/slick-carousel/slick/slick.js')}}"></script>
    <script src="{{asset('vendor/owlcarousel/owl.carousel.min.js')}}"></script>
    <script>
        {{--$('#datepicker').datepicker({--}}
            {{--uiLibrary: 'bootstrap4',--}}
            {{--icons: {--}}
                {{--rightIcon: '{{__("ClientSide.date")}} <i class="fa fa-caret-down"></i>'--}}
            {{--}--}}
        {{--});--}}

        var date = new Date();
        date.setDate(date.getDate());
        $('#datepicker').datepicker({
            uiLibrary: 'bootstrap4',
            startDate: date,
            format: 'yyyy-mm-dd',
            icons: {
                {{--rightIcon: '{{__("ClientSide.date")}} <i class="fa fa-caret-down"></i>'--}}
                rightIcon: '<i class="fa fa-calendar" style="padding: 7px;background-color: #d33d33;color: #ffffff;border-radius: 5px;margin: -10px;margin-left: 95px;"></i>'
            }
        });

        $('.owl-carousel').owlCarousel({
            stagePadding: 70,
            loop:true,
            margin:10,
            nav:true,
            responsive:{
                0:{
                    items:1
                },
                600:{
                    items:3
                },
                1000:{
                    items:5
                }
            }
        });
    </script>
@endsection