@extends('layouts.dashboard.template')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-8">

                <x-card :title="'Citas'">
                    <x-slot:tools>
                        <a href="{{ route('realEstate.appointment.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i>
                        </a>
                    </x-slot>
                    <x-slot:body>
                        <x-table :headers="$response['headers']" :dataCell="$response['data']" :action="function ($appointment) {
                            return view('components.table.actions', [
                                'data' => $appointment,
                                'edit' => route('realEstate.appointment.edit', $appointment->id),
                                'delete' => route('realEstate.appointment.delete', $appointment->id),
                            ]);
                        }" class="table table-responsive">
                        </x-table>
                    </x-slot>
                </x-card>
            </div>
            <div class="col-4">
                {{-- Calendar --}}
                <x-card :title="'Calendario'">
                    <x-slot:body>
                        <div id="calendar"></div>
                    </x-slot>
                </x-card>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var calendarEl = document.getElementById('calendar');
            var calendar = new FullCalendar.Calendar(calendarEl, {
                headerToolbar: {
                    left: '',
                    center: 'title',
                    right: ''
                },
                initialView: 'dayGridMonth',
                height: 'auto',
                locale: 'es',
                events: [{
                    id: 1,
                    title: 'Cita de prueba',
                    start: '2024-11-01T23:00:00',
                    end: '2024-11-01T23:59:00',
                }],
                dateClick: (info) => {
                    console.log(info);
                }
            });
            calendar.render();
        });
    </script>
@endsection