@extends('layouts.app')
@section('content')
    <div class="content-heading">
        <div>Full Calendar<small>Drag and Drop events and tasks</small></div>
    </div><!-- START row-->
    <div class="calendar-app">
        <div class="row">
            <div class="col-xl-3 col-lg-4">
                <div class="row">
                    <div class="col-lg-12 col-md-6 col-12">
                        <!-- START card-->
                        <div class="card card-default">
                            <div class="card-header">
                                <h4 class="card-title">Draggable Events</h4>
                            </div><!-- Default external events list-->
                            <div class="card-body">
                                <div class="external-events" id="external-events-list">
                                    <div class="fce-event bg-green">Lunch</div>
                                    <div class="fce-event bg-danger">Go home</div>
                                    <div class="fce-event bg-info">Do homework</div>
                                    <div class="fce-event bg-warning">Work on UI design</div>
                                    <div class="fce-event bg-inverse">Sleep tight</div>
                                </div>
                                <div class="custom-control custom-checkbox mt-3"><input class="custom-control-input" id="drop-remove" type="checkbox"><label class="custom-control-label" for="drop-remove">Remove after Drop</label></div>
                            </div>
                        </div><!-- END card-->
                    </div>
                    <div class="col-lg-12 col-md-6 col-12">
                        <!-- START card-->
                        <div class="card card-default">
                            <div class="card-header">
                                <h3 class="card-title">Create Event</h3>
                            </div>
                            <div class="card-body">
                                <div class="input-group mb-2"><input class="form-control" id="external-event-name" type="text" placeholder="Event name...">
                                    <div class="input-group-btn"><button class="btn btn-secondary" id="external-event-add-btn" type="button">Add</button></div>
                                </div>
                                <p class="text-muted"><small>Choose a Color</small></p>
                                <ul class="list-inline" id="external-event-color-selector">
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-danger circle-xl selected"></div>
                                    </li>
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-primary circle-xl"></div>
                                    </li>
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-info circle-xl"></div>
                                    </li>
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-success circle-xl"></div>
                                    </li>
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-warning circle-xl"></div>
                                    </li>
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-green circle-xl"></div>
                                    </li>
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-pink circle-xl"></div>
                                    </li>
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-inverse circle-xl"></div>
                                    </li>
                                    <li class="list-inline-item p-0">
                                        <div class="circle bg-purple circle-xl"></div>
                                    </li>
                                </ul>
                            </div>
                        </div><!-- END card-->
                    </div>
                </div>
            </div>
            <div class="col-xl-9 col-lg-8">
                <!-- START card-->
                <div class="card card-default">
                    <div class="card-body">
                        <!-- START calendar-->
                        <div id="calendar"></div><!-- END calendar-->
                    </div>
                </div><!-- END card-->
            </div>
        </div><!-- END row-->
    </div>
@endsection


@section('styles')@endsection
@section('scripts')
    <script src="{{ mix('/js/calendar.js') }}"></script>
@endsection