@extends('layouts.app')
@section('head')
    <script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.8/index.global.min.js"></script>
    <style>
        #calendar { min-height: 600px; }
        .fc-event { cursor: pointer; }
    </style>
@endsection
@section('content')
    <div class="row">
        <div class="col-md-9">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title mb-0">Agenda</h4>
                    @can('agenda-crear')
                        <button class="btn btn-primary btn-sm" id="btn-nuevo-evento">
                            <i class="fas fa-plus"></i> Nuevo Evento
                        </button>
                    @endcan
                </div>
                <div class="card-body">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">Proximos Eventos</h5>
                </div>
                <div class="card-body p-0">
                    <div id="proximos-eventos" class="list-group list-group-flush">
                        <div class="list-group-item text-center text-muted py-3">Cargando...</div>
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="card-title mb-0">Filtros</h5>
                </div>
                <div class="card-body">
                    <label class="form-label fw-bold">Tipo</label>
                    <div class="form-check">
                        <input class="form-check-input filtro-tipo" type="checkbox" value="reunion" id="filtroReunion" checked>
                        <label class="form-check-label" for="filtroReunion">Reunion</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input filtro-tipo" type="checkbox" value="seguimiento" id="filtroSeguimiento" checked>
                        <label class="form-check-label" for="filtroSeguimiento">Seguimiento</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input filtro-tipo" type="checkbox" value="recordatorio" id="filtroRecordatorio" checked>
                        <label class="form-check-label" for="filtroRecordatorio">Recordatorio</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input filtro-tipo" type="checkbox" value="otro" id="filtroOtro" checked>
                        <label class="form-check-label" for="filtroOtro">Otro</label>
                    </div>
                    <hr>
                    <label class="form-label fw-bold">Usuario</label>
                    <select class="form-select form-select-sm" id="filtroUsuario">
                        <option value="">Todos</option>
                        @foreach ($usuarios as $usuario)
                            <option value="{{ $usuario->id }}">{{ $usuario->getFullName() }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal Evento -->
    <div class="modal fade" id="eventoModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventoModalLabel">Nuevo Evento</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="form-evento">
                    <div class="modal-body">
                        <input type="hidden" id="evento_id" name="evento_id">
                        <div class="mb-3">
                            <label for="titulo" class="form-label">Titulo</label>
                            <input type="text" class="form-control" id="titulo" name="titulo" required>
                        </div>
                        <div class="mb-3">
                            <label for="descripcion" class="form-label">Descripcion</label>
                            <textarea class="form-control" id="descripcion" name="descripcion" rows="2"></textarea>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="fecha_inicio" class="form-label">Fecha Inicio</label>
                                <input type="datetime-local" class="form-control" id="fecha_inicio" name="fecha_inicio" required>
                            </div>
                            <div class="col-md-6">
                                <label for="fecha_fin" class="form-label">Fecha Fin</label>
                                <input type="datetime-local" class="form-control" id="fecha_fin" name="fecha_fin">
                            </div>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="todo_el_dia" name="todo_el_dia">
                            <label class="form-check-label" for="todo_el_dia">Todo el dia</label>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="tipo" class="form-label">Tipo</label>
                                <select class="form-select" id="tipo" name="tipo" required>
                                    <option value="reunion">Reunion</option>
                                    <option value="seguimiento">Seguimiento</option>
                                    <option value="recordatorio">Recordatorio</option>
                                    <option value="otro">Otro</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="color" class="form-label">Color</label>
                                <input type="color" class="form-control form-control-color w-100" id="color" name="color" value="#3788d8">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="evento_user_id" class="form-label">Asignado a</label>
                            <select class="form-select" id="evento_user_id" name="user_id" required>
                                @foreach ($usuarios as $usuario)
                                    <option value="{{ $usuario->id }}" {{ $usuario->id == auth()->id() ? 'selected' : '' }}>{{ $usuario->getFullName() }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label for="vinculable_type" class="form-label">Vincular a</label>
                                <select class="form-select" id="vinculable_type" name="vinculable_type">
                                    <option value="">Ninguno</option>
                                    <option value="App\Models\Cliente">Cliente</option>
                                    <option value="App\Models\Proyecto">Proyecto</option>
                                    <option value="App\Models\Ticket">Ticket</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="vinculable_id" class="form-label">Seleccionar</label>
                                <select class="form-select" id="vinculable_id" name="vinculable_id" disabled>
                                    <option value="">--</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger" id="btn-eliminar-evento" style="display:none;">Eliminar</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-primary" id="btn-guardar-evento">Guardar</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
@push('javascript')
    <script src="{{ asset('js/scripts/agenda/calendario.js') }}"></script>
@endpush