@extends('admin.layouts.app')
@section('title','Calender')
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.css' rel='stylesheet'/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css"/>
<meta name="csrf-token" content="{{ csrf_token() }}">
<style>
    #calendar {
        margin-top: 10px;
    }
</style>

@section('section')
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>Calendar</h1>
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{url('admin/dashboard')}}">Home</a></li>
                            <li class="breadcrumb-item active">Calendar</li>
                        </ol>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content-header -->

        <section class="content">
            <div class="container-fluid">
                <div class="card card-primary">
                    <div class="card-body">
                        <div id='calendar'></div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <!-- Update Modal -->
    <div class="modal fade" id="schedule-update">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Update Your Schedule</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form method="POST" action="{{route('calendarStore')}}">
                        @csrf
                        <div class="form-group">
                            <label>Current Date</label>
                            <input type="date" class="form-control" id="date" name="date">
                        </div>
                        <div class="form-group">
                            <label>Start Time</label>
                            <input type="time" class="form-control" id="start_time" name="start_time">
                        </div>

                        <div class="form-group">
                            <label>End Time</label>
                            <input type="time" class="form-control" id="end_time" name="end_time">
                        </div>

                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Update Schedule</button>
                </div>

            </div>
            </form>
        </div>
    </div>
    <!-- End Update Modal -->

    <!-- Add Modal -->
    <div class="modal fade" id="schedule-add">
        <div class="modal-dialog">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Add Your Schedule</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <form method="POST" action="{{route('calendarStore')}}">
                        @csrf
                        <div class="form-group">
                            <label>Current Date</label>
                            <input type="date" class="form-control" id="add_date" name="date">
                        </div>
                        <div class="form-group">
                            <label>Start Time</label>
                            <input type="time" class="form-control" id="add_start_time" name="start_time">
                        </div>

                        <div class="form-group">
                            <label>End Time</label>
                            <input type="time" class="form-control" id="add_end_time" name="end_time">
                        </div>

                </div>
                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Add Schedule</button>
                </div>

            </div>
            </form>
        </div>
    </div>
    <!-- End Add Modal -->

@endsection
@section('script')
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <script src='https://fullcalendar.io/js/fullcalendar-2.4.0/lib/moment.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.4.0/fullcalendar.min.js'></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $('#calendar').fullCalendar({
            header: {
                left: 'title',
            },
            events: [{
                title: 'Schedule 1',
                start: '2018-02-21'
            },
                {
                    title: 'Schedule 2',
                    start: '2018-02-11'
                },
                {
                    title: 'Schedule 3',
                    start: '2018-03-01'
                },
                {
                    title: 'Schedule 4',
                    start: '2018-03-12'
                }
            ],
            events: [
                    @foreach($events as $event)
                {
                    id: '{{ $event['id'] }}',
                    title: '{{ $event['title'] }}',
                    start: "{{ $event['start'] }}",
                },
                @endforeach
            ],
            eventClick: function (event) {
                $('#schedule-update').modal('show');
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                var calendar_id = event.id;
                $.ajax({
                    url: '{{route('calendar.edit')}}',
                    type: "post",
                    dataType: "json",
                    data: {id: calendar_id},
                    success: function (data) {
                        $('#date').val(data.date);
                        $('#start_time').val(data.start_time);
                        $('#end_time').val(data.end_time);
                    }
                })
            },
            dayClick: function (date, jsEvent, view) {
                $('#schedule-add').modal('show');
                $('#add_date').val(moment(date).format('YYYY-MM-DD'));
            }
        });

        $('#start_time').timepicker({
            uiLibrary: 'bootstrap4'
        });

        $('#end_time').timepicker({
            uiLibrary: 'bootstrap4'
        });
        $('#add_start_time').timepicker({
            uiLibrary: 'bootstrap4'
        });
        $('#add_end_time').timepicker({
            uiLibrary: 'bootstrap4'
        });
    </script>
@endsection