@extends('ui-common.layouts.master')
@section('title')
@lang('Company Calendar')
@endsection
@section('css')   
<!-- select2@4.1.0 -->
<link href="{{ url('css/Select2_cdn/select2.min.css') }}" rel="stylesheet" />
<!-- font-awesome-6.7.2 -->
<link href="{{ url('css/font-awesome_cdn/font-awesome.min.css') }}" rel="stylesheet" />
<!-- timepickr themes -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/classic.min.css')}}"/> <!-- 'classic' theme -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/monolith.min.css')}}"/> <!-- 'monolith' theme -->
<link rel="stylesheet" href="{{ url('css/@simonwep/pickr/themes/nano.min.css')}}"/> <!-- 'nano' theme -->
@endsection
@section('content')

<div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12 px-0 ctl-mar-bot-tim">
        <div class="card ctl-card-bor-rad ctl-pad-car-hea-bod mb-0">
            <div class="card-header ctl-bor-lne-col">
                <div class="ctl-car-clo-hdr">
                    <h3>Company Calendar</h3>
                </div>
            </div>
            <div class="card-body">
                <div id="external-events"></div>
                <div class="card-h-100">
                    <div id="calendar"></div>
                </div>
                <div class="modal fade" id="event-modal" tabindex="-1">
                    <div class="modal-dialog modal-dialog-centered">
                        <div class="modal-content border-0">
                            <div class="modal-header p-3 bg-info-subtle">
                                <h5 class="modal-title" id="modal-title">Event</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
                            </div>
                            <div class="modal-body p-4">
                                <form class="needs-validation" name="event-form" id="form-event" novalidate>
                                    <div class="text-end">
                                        <a href="#" class="btn btn-sm btn-soft-primary" id="edit-event-btn" data-id="edit-event" onclick="editEvent(this)" role="button">Edit</a>
                                    </div>
                                    <!-- <div class="event-details">
                                        <div class="d-flex mb-2">
                                            <div class="flex-grow-1 d-flex align-items-center">
                                                <div class="flex-shrink-0 me-3">
                                                    <i class="ri-calendar-event-line text-muted fs-16"></i>
                                                </div>
                                                <div class="flex-grow-1">
                                                    <h6 class="d-block fw-semibold mb-0" id="event-start-date-tag"></h6>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="flex-shrink-0 me-3">
                                                <i class="ri-time-line text-muted fs-16"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="d-block fw-semibold mb-0"><span id="event-timepicker1-tag"></span> - <span id="event-timepicker2-tag"></span></h6>
                                            </div>
                                        </div>
                                        <div class="d-flex align-items-center mb-2">
                                            <div class="flex-shrink-0 me-3">
                                                <i class="ri-map-pin-line text-muted fs-16"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <h6 class="d-block fw-semibold mb-0"> <span id="event-location-tag"></span></h6>
                                            </div>
                                        </div>
                                        <div class="d-flex mb-3">
                                            <div class="flex-shrink-0 me-3">
                                                <i class="ri-discuss-line text-muted fs-16"></i>
                                            </div>
                                            <div class="flex-grow-1">
                                                <p class="d-block text-muted mb-0" id="event-description-tag"></p>
                                            </div>
                                        </div>
                                    </div> -->
                                    <div class="row event-form">
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Type</label>
                                                <select class="form-select d-none" name="category" id="event-category" required>
                                                    <option value="bg-danger-subtle">Danger</option>
                                                    <option value="bg-success-subtle">Success</option>
                                                    <option value="bg-primary-subtle">Primary</option>
                                                    <option value="bg-info-subtle">Info</option>
                                                    <option value="bg-dark-subtle">Dark</option>
                                                    <option value="bg-warning-subtle">Warning</option>
                                                </select>
                                                <div class="invalid-feedback">Please select a valid event category</div>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Event Name</label>
                                                <input class="form-control d-none" placeholder="Enter event name" type="text" name="title" id="event-title" required value="" />
                                                <div class="invalid-feedback">Please provide a valid event name</div>
                                            </div>
                                        </div>
                                        
                                        <!--end col-->
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label>Event Date</label>
                                                <div class="input-group d-none">
                                                    <input type="text" id="event-start-date" class="form-control flatpickr flatpickr-input" placeholder="Select date" readonly required>
                                                    <span class="input-group-text"><i class="ri-calendar-event-line"></i></span>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-12" id="event-time">
                                            <div class="row">
                                                <div class="col-6">
                                                    <div class="mb-3">
                                                        <label class="form-label">Start Time</label>
                                                        <div class="input-group d-none">
                                                            <input id="timepicker1" type="text" class="form-control flatpickr flatpickr-input" placeholder="Select start time" readonly>
                                                            <span class="input-group-text"><i class="ri-time-line"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-6">
                                                    <div class="mb-3">
                                                        <label class="form-label">End Time</label>
                                                        <div class="input-group d-none">
                                                            <input id="timepicker2" type="text" class="form-control flatpickr flatpickr-input" placeholder="Select end time" readonly>
                                                            <span class="input-group-text"><i class="ri-time-line"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label for="event-location">Location</label>
                                                <div>
                                                    <input type="text" class="form-control d-none" name="event-location" id="event-location" placeholder="Event location">
                                                </div>
                                            </div>
                                        </div>
                                        <!--end col-->
                                        <input type="hidden" id="eventid" name="eventid" value="" />
                                        <div class="col-12">
                                            <div class="mb-3">
                                                <label class="form-label">Description</label>
                                                <textarea class="form-control d-none" id="event-description" placeholder="Enter a description" rows="3" spellcheck="false"></textarea>
                                            </div>
                                        </div>
                                        <!--end col-->
                                    </div>
                                    <!--end row-->
                                    <div class="hstack gap-2 justify-content-end">
                                        <button type="button" class="btn btn-soft-danger" id="btn-delete-event"><i class="ri-close-line align-bottom"></i> Delete</button>
                                        <button type="submit" class="btn btn-success" id="btn-save-event">Add Event</button>
                                    </div>
                                </form>
                            </div>
                        </div> <!-- end modal-content-->
                    </div> <!-- end modal dialog-->
                </div>
            </div>
        </div>
    </div>
</div>


@endsection
@section('script')   
<script src="{{ url('js/jquery-3.6.0_cdn/jquery.min.js') }}"></script>
<script src="http://sat.localhost/ets-saas/public/js/app.js"></script>
<script src="{{ url('js/select2@4.1.0/select2.min.js') }}"></script>
<script src="{{ url('js/libs/flatpickr/flatpickr.min.js') }}"></script>
<script src="{{ url('js/jquery-validation/jquery.validate.min.js') }}"></script>
<script src="{{ url('assets/libs/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<!-- calendar min js -->
<script src="{{ url('assets/libs/fullcalendar/index.global.min.js') }}"></script>
<!-- Calendar init -->
<script src="{{ url('assets/js/pages/calendar.init.js') }}"></script>

@endsection