@extends('layouts.app')
@section('content')
    <link href="{{ asset('includes/css/main.css') }}" rel='stylesheet' />
    <link href="{{ asset('includes/css/main.min.css') }}" rel='stylesheet' />
    @include('layouts.top-header', [
        'title' => __('Calendar'),
        'class' => 'col-lg-7',
    ])

    <div class="container-fluid mt--6 mb-5">
        <div class="row">
            <div class="col">
                <div class="card px-4 pb-4">
                    <!-- Card header -->
                    <div class="mt-3 mb-4 border-0">
                        <span class="h3">{{ __('Calendar') }}</span>
                    </div>
                    <div class="d-flex mb-3 justify-content-start justify-content-md-end">
                        <button class="btn btn-primary rtl-mr addbtn float-right p-2 add_user" id="add_user"><i class="fas fa-plus mr-1"></i>{{ __('Add New Client') }}</button>
                        <button class="btn btn-primary addbtn float-right p-2 add_appointment mt-sm-0 mr-md-3" id="add_appointment"><i class="fas fa-plus mr-1"></i>{{ __('Add Appointment') }}</button>
                    </div>
                    <div>
                        <div class="statusRow text-center ml-1 d-flex flex-wrap">
                            <div class="completedBox p-1 px-2 mr-2 mb-2 rounded"><span>{{ __('Completed') }}</span></div>
                            <div class="pendingBox p-1 px-2 mr-2 mb-2 rounded"><span>{{ __('Pending') }}</span></div>
                            <div class="approvedBox p-1 px-2 mr-2 mb-2 rounded"><span>{{ __('Approved') }}</span></div>
                            <div class="cancelBox p-1 px-2 mr-2 mb-2 rounded"><span>{{ __('Cancel') }}</span></div>
                        </div>
                    </div>
                    <div class="mt-3">
                        <div id='calendar'></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('owner.booking.create')
    @include('owner.booking.show')
    @include('owner.user.create')

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                // TODO: Add dynamic locale
                locale: '{{ $languageCode }}',
                initialView: 'dayGridMonth',
                events: [
                    @foreach ($booking as $appointment)
                        {
                            title: '{{ $appointment->user->name }}',
                            start: '{{ $appointment->start }}',
                            color: '{{ $appointment->textColor }}',
                            eventColor: '{{ $appointment->bgColor }}'
                        },
                    @endforeach
                ],
            });
            calendar.render();
        });
    </script>
@endsection