@extends('layouts.vertical')

@section('css')
<link href="{{ Helper::assets('assets/libs/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/datatables/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/fullcalendar-core/main.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/fullcalendar-daygrid/main.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/fullcalendar-bootstrap/main.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/sweetalert/sweetalert.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ Helper::assets('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@php
    $month = date('F Y');
    if(app('request')->input('month')){
        $month = app('request')->input('month');
    }
@endphp

@section('breadcrumb')
<div class="row page-title align-items-center">
    <div class="col-sm-6 col-xl-6">
        <h4 class="mb-1 mt-0 font-weight-medium">Event Calendar</h4>
        <p class="font-size-14 text-muted mt-2">Add events and make visible to parents or educators using the TeachKloud app.</p>
    </div>
    <div class="col-sm-6 col-xl-6">
        <div class="form-inline float-sm-right mt-3 mt-sm-0">
            <a href="{{ route('events.create') }}" class="btn btn-success add-event-btn">Add new event</a>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card no-loader">
            <div class="card-body">
                <div class="no-event" style="display: none">
                    <p class="font-size-18">No events have been added. Select add new event to begin.</p>

                    <a href="{{ route('events.create') }}" class="btn btn-success">Add new event</a>
                </div>

                <div class="has-events">
                    <div class="row justify-content-between">
                        <div class="col-md-auto">
                            <div class="row form-group">
                                <label class="col-auto col-form-label font-weight-medium">Select month</label>
                                <div class="col-xl-6 col-md mb-6 mb-md-0">
                                    <span class="flatpickr-arrow"></span>
                                    <input type="text" class="form-control" id="month" name="month" value="{{$month}}">
                                </div>
                            </div>
                        </div>
    
                        <div class="col-md-auto">
                            <div class="btn-group" role="group" aria-label="Basic example">
                                <button id="calendarView" type="button" class="btn btn-pink">Calendar</button>
                                <button id="listView" type="button" class="btn btn-light-pink">List</button>
                            </div>
                        </div>
                    </div>
                    <div id="calendar"></div>
    
                    <div id="list" style="display: none">
                        <div id="demoCard" style="display: none" class="col-md-6 col-xl-4 mb-4">
                            <div class="card border h-100 mb-0 position-relative">
                                <img src="" class="card-img-top rounded-top event-image" alt="Card image cap">
                                <div class="card-body p-3 d-flex flex-column">
                                    <h5 class="card-title"></h5>
                                    <p class="card-text start-time"></p>
                                    <p class="card-text location flex-grow-1 two-line-desc"></p>
                                    <a class="font-weight-semibold view-event" data-event="" href="javascript:void(0);">View more details</a>
                                </div>

                                <div class="dropdown card-dropdown position-absolute">
                                    <button type="button" class="card-dropdown-btn btn btn-light p-1 rounded-circle d-flex align-items-center justify-content-center dropdown-toggle" data-toggle="dropdown">
                                        <svg width="16.393" height="4.848" viewBox="0 0 15.393 3.848"><g><g><path fill="#b2b2b2" d="M1.924 153a1.924 1.924 0 1 0 1.924 1.924A1.93 1.93 0 0 0 1.924 153zm11.545 0a1.924 1.924 0 1 0 1.924 1.924A1.93 1.93 0 0 0 13.469 153zM7.7 153a1.924 1.924 0 1 0 1.924 1.924A1.93 1.93 0 0 0 7.7 153z" transform="translate(-5.438 -150.36) translate(5.438 150.36) translate(0 -153)"/></g></g></svg>
                                    </button>
                                    <div class="dropdown-menu mt-2" aria-labelledby="dropdownMenuButton">
                                        <a class="dropdown-item edit-event" href="#">Edit details</a>
                                        <div class="dropdown-divider"></div>
                                        <button type="button" class="dropdown-item text-danger remove-event" data-id="" data-name="">Remove event</button>
                                    </div>
                                </div>
                            </div>
                        </div>
    
                        <div class="event-loader pt-3" style="display:none;">Loading...</div>

                        <div class="row" id="events">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal modal-medium fade" id="eventModal" role="dialog" aria-labelledby="" aria-modal="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header pb-0">
                <h5 class="event-name font-size-22 font-weight-bold"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body pt-0 pb-4">
                <p class="mb-3">Posted on <span class="posted-on"></span></p>

                <img height="200" class="event-image rounded-lg" src="" alt="">

                <h6 class="font-size-16 my-4">Event details</h6>

                <h6 class="text-success">Date and time:</h6>
                <p class="font-size-15 mb-3 date-time"></p>

                <h6 class="text-success">Location:</h6>
                <p class="font-size-15 mb-3 location"></p>

                <h6 class="text-success description-title">Description:</h6>
                <p class="font-size-15 mb-3 description" style="white-space: pre-line"></p>

                <h6 class="text-success">This event is for:</h6>
                <p class="font-size-15 event-for"></p>

                <div class="d-flex mt-3 mb-2">
                    <a href="" class="btn btn-success mr-2 edit-event">Edit</a>
                    <button type="button" class="btn btn-danger remove-event" data-id="" data-name="">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script-bottom')
<script defer src="{{ Helper::assets('assets/libs/moment/moment.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/fullcalendar-core/main.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/fullcalendar-bootstrap/main.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/fullcalendar-daygrid/main.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/fullcalendar-interaction/main.min.js') }}" type="text/javascript"></script>
<script defer src="{{ Helper::assets('assets/libs/sweetalert/sweetalert.min.js') }}" type="text/javascript"></script>
<script>
    var eventListUrl = "{{ route('events.list') }}";
    var removeUrl = "{{ route('events.delete') }}";
    var editUrl = "{{ route('events') }}/edit/{id}";
</script>
<script defer src="{{ Helper::assets('assets/js/pages/events.js') }}?{{time()}}" type="text/javascript"></script>
@endsection