@extends('layout.template')
@section('intitule')
    <h5 class="font-weight-medium text-uppercase mb-0">CALENDRIER PAGE </h5>
@endsection

@section('breadcrumb')
    <li class="breadcrumb-item active" aria-current="page">Dashboard GestStudent
    </li>
@endsection

@section('styles')
    <link href="{{asset('assets/libs/fullcalendar/dist/fullcalendar.min.css')}}" rel="stylesheet" />
    <link href="{{asset('assets/extra-libs/calendar/calendar.css')}}" rel="stylesheet" />

@endsection

@section('main')
    <!-- -------------------------------------------------------------- -->
            <!-- Container fluid  -->
            <!-- -------------------------------------------------------------- -->
            <div class="container-fluid page-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="">
                                <div class="row">
                                    <div class="col-lg-3 border-end pe-0">
                                        <div class="card-body border-bottom">
                                            <h4 class="card-title mt-2">Drag & Drop Event</h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <div id="calendar-events" class="">
                                                        <div class="calendar-events mb-3" data-class="bg-info"><i
                                                                class="fa fa-circle text-info me-2"></i>My event One</div>
                                                        <div class="calendar-events mb-3" data-class="bg-success"><i
                                                                class="fa fa-circle text-success me-2"></i>My event Two
                                                        </div>
                                                        <div class="calendar-events mb-3" data-class="bg-danger"><i
                                                                class="fa fa-circle text-danger me-2"></i>My event Three
                                                        </div>
                                                        <div class="calendar-events mb-3" data-class="bg-warning"><i
                                                                class="fa fa-circle text-warning me-2"></i>My event Four
                                                        </div>
                                                    </div>
                                                    <!-- checkbox -->
                                                    <div class="form-check">
                                                        <input type="checkbox" class="form-check-input"
                                                            id="drop-remove">
                                                        <label class="form-check-label" for="drop-remove">Remove
                                                            after drop</label>
                                                    </div>
                                                    <a href="#" data-bs-toggle="modal"
                                                        data-bs-target="#add-new-event"
                                                        class="btn mt-3 btn-info d-block w-100 waves-effect waves-light">
                                                        <i class="ti-plus"></i> Add New Event
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-9">
                                        <div class="card-body calender-sidebar">
                                            <div id="calendar"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- BEGIN MODAL -->
                <div class="modal" id="my-event">
                
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header d-flex align-items-center">
                                <h4 class="modal-title"><strong>Add Event</strong></h4>
                                <button id="close1-modal1" type="button" class="btn-close close-dialog" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body"></div>
                                            <div class="modal-footer">
                                            <button id="close2-modal1" type="button" class="btn btn-secondary waves-effect" data-bs-dismiss="modal">Close</button>
                                                <button
                    type="button"
                    class="btn btn-success save-event waves-effect waves-light"
                  >
                    Create event
                  </button>
                                            </div>
                        </div>
                    </div>
                    <div id="back-modal" style="z-index:-1" class="modal-backdrop bckdrop hide"></div>
                </div>
                <script>
                        document
                      .getElementById("close1-modal1")
                      .addEventListener("click", function () {
                        document.getElementById("my-event").style.display =
                          "none";
                      });
                      document
                      .getElementById("close2-modal1")
                      .addEventListener("click", function () {
                        document.getElementById("my-event").style.display =
                          "none";
                      });
                </script>
                {{-- <div id="back-modal" class="modal-backdrop bckdrop hide"></div> --}}
                {{-- <script>
                        document
                      .getElementById("close1-modal1")
                      .addEventListener("click", function () {
                        document.getElementById("back-modal").style.display =
                          "none";
                      });
                      document
                      .getElementById("close2-modal1")
                      .addEventListener("click", function () {
                        document.getElementById("back-modal").style.display =
                          "none";
                      });
                </script> --}}
                <!-- Modal Add Category -->
                <div class="modal none-border" id="add-new-event">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header d-flex align-items-center">
                                <h4 class="modal-title"><strong>Add</strong> a category</h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <label class="control-label">Category Name</label>
                                            <input class="form-control form-white" placeholder="Enter name" type="text"
                                                name="category-name" />
                                        </div>
                                        <div class="col-md-6">
                                            <label class="control-label">Choose Category Color</label>
                                            <select class="form-select form-white" data-placeholder="Choose a color..."
                                                name="category-color">
                                                <option value="success">Success</option>
                                                <option value="danger">Danger</option>
                                                <option value="info">Info</option>
                                                <option value="primary">Primary</option>
                                                <option value="warning">Warning</option>
                                                <option value="inverse">Inverse</option>
                                            </select>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger waves-effect waves-light save-category"
                                    data-bs-dismiss="modal">Save</button>
                                <button type="button" class="btn btn-secondary waves-effect"
                                    data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- END MODAL -->
            </div>
            <!-- -------------------------------------------------------------- -->
            <!-- End Container fluid  -->
            <!-- -------------------------------------------------------------- -->
        
@endsection

@section('scripts')
    <script src="{{ asset('assets/libs/moment/min/moment.min.js') }}"></script>

    <script src="{{ asset('assets/libs/fullcalendar/dist/fullcalendar.min.js') }}"></script>

    <script src="{{ asset('dist/js/pages/calendar/cal-init.js') }}"></script>

@endsection