<x-app-layout :assets="$assets ?? []">
    @push('scripts')
        <script src="{{asset('vendor/moment.min.js')}}"></script>
        <script src="{{asset('js/plugins/calender.js')}}"></script>
        <script src="{{ asset('vendor/fullcalendar/core/main.js') }}"></script>
        <script src="{{ asset('vendor/fullcalendar/daygrid/main.js') }}"></script>
        <script src="{{ asset('vendor/fullcalendar/timegrid/main.js') }}"></script>
        <script src="{{ asset('vendor/fullcalendar/list/main.js') }}"></script>
        <script src="{{ asset('vendor/fullcalendar/interaction/main.js') }}"></script>
    @endpush

    <div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body d-flex justify-content-between align-items-center">
                        <div class="card-title mb-0">
                            <h2 class="mb-0">Appointments</h2>
                        </div>
                    </div>
                    <div id="appointmentCalendar" class="calendar-s card-body"></div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
