# 📅 Sistema de Calendario de Citas - AutoService Manager

## 🎨 Características Principales

### ✨ Nuevo Diseño Moderno
- **Tema oscuro profesional** inspirado en aplicaciones modernas
- **Animaciones fluidas** y transiciones suaves
- **Interfaz responsiva** que se adapta a cualquier dispositivo
- **Iconografía consistente** usando Bootstrap Icons

### 📊 Panel de Analytics
El sistema ahora incluye un dashboard con métricas clave:
- **Porcentaje de cumplimiento** - Citas completadas vs total
- **Total de citas del mes** - Con contador de pendientes
- **Citas completadas** - Con indicador de citas en proceso
- **Citas canceladas** - Con porcentaje respecto al total

### 📆 Calendario Interactivo
Características del calendario:
- **Vista mensual, semanal y diaria** - Cambia entre vistas fácilmente
- **Color por estado** - Identificación visual inmediata:
  - 🟠 Naranja: Pendiente
  - 🔵 Azul: En proceso
  - 🟢 Verde: Completada
  - 🔴 Rojo: Cancelada
- **Click en fechas** - Crea citas rápidamente
- **Click en eventos** - Ve los detalles completos
- **Filtro por mecánico** - Visualiza la carga de trabajo
- **Búsqueda en tiempo real** - Encuentra citas específicas

### 📋 Panel Lateral de Próximas Citas
- Muestra las **5 próximas citas**
- Información resumida: cliente, vehículo, servicio, mecánico
- Click para ver detalles completos
- Estado visual con badges de color

### 🔍 Vista Detallada de Citas
Página de detalles completamente rediseñada:
- **Header atractivo** con gradiente y estado destacado
- **Información organizada** en secciones:
  - Datos del cliente con teléfono clickeable
  - Información completa del vehículo
  - Detalles del servicio con costo destacado
  - Mecánico asignado con contacto
- **Observaciones** en sección separada
- **Botones de acción** para editar, ver calendario o eliminar

---

## 📁 Archivos Incluidos

### 1. `citas_index_new.php`
**Archivo principal del calendario**
- Reemplaza tu actual `citas/index.php`
- Incluye todo el código HTML, CSS y JavaScript
- Panel de analytics integrado
- Calendario FullCalendar configurado

### 2. `calendario_data.php`
**Endpoint de datos para el calendario**
- Colócalo en la carpeta `citas/`
- Retorna las citas en formato JSON
- Soporta filtros por mecánico y búsqueda
- Asigna colores según el estado

### 3. `ver_new.php`
**Vista detallada de citas**
- Reemplaza tu actual `citas/ver.php`
- Diseño moderno tipo tarjeta
- Información organizada en secciones
- Acciones rápidas disponibles

### 4. `update_citas_table.sql`
**Script de base de datos**
- Crea/actualiza la tabla `citas`
- Inserta 15 citas de ejemplo
- Crea índices para mejor rendimiento
- Crea vistas útiles para consultas

---

## 🚀 Instalación

### Paso 1: Actualizar la Base de Datos
```sql
-- Ejecuta este archivo en tu MySQL
source /ruta/a/update_citas_table.sql;

-- O copia y pega el contenido en phpMyAdmin
```

### Paso 2: Reemplazar Archivos PHP

1. **Hacer backup** de tus archivos actuales:
```bash
cp citas/index.php citas/index_backup.php
cp citas/ver.php citas/ver_backup.php
```

2. **Reemplazar con los nuevos archivos**:
```bash
# Renombrar el nuevo index
mv citas_index_new.php citas/index.php

# Renombrar el nuevo ver
mv ver_new.php citas/ver.php

# Copiar calendario_data
cp calendario_data.php citas/calendario_data.php
```

### Paso 3: Verificar Conexión
Asegúrate de que tu archivo `conexion.php` esté correctamente configurado:
```php
$conexion = mysqli_connect("localhost:3308", "root", "", "autoservice_manager");
mysqli_set_charset($conexion, "utf8");
```

### Paso 4: Probar el Sistema
1. Abre en tu navegador: `http://localhost/autoservice/citas/index.php`
2. Deberías ver:
   - Panel de analytics con estadísticas
   - Calendario con citas de ejemplo
   - Panel lateral con próximas citas
3. Prueba hacer click en:
   - Una cita del calendario (ver detalles)
   - Una fecha vacía (crear nueva cita)
   - Los botones de cambio de vista

---

## 🎯 Uso del Sistema

### Ver Citas en el Calendario
1. Las citas aparecen coloreadas según su estado
2. Pasa el mouse sobre una cita para preview
3. Click para ver detalles completos

### Crear Nueva Cita
**Opción 1:** Click en el botón "Nueva Cita"
**Opción 2:** Click en una fecha vacía del calendario

### Filtrar Citas
- Usa el dropdown "Todos los mecánicos" para filtrar por mecánico
- Usa la barra de búsqueda para buscar por cliente, vehículo, etc.

### Cambiar Vista del Calendario
- **Mes**: Vista general del mes
- **Semana**: Vista detallada por semana con horas
- **Día**: Vista de un solo día

### Ver Detalles de una Cita
Click en cualquier cita del calendario o del panel lateral para ver:
- Información completa del cliente
- Detalles del vehículo
- Servicio solicitado con costo
- Mecánico asignado
- Observaciones
- Acciones disponibles (editar, eliminar)

---

## 🎨 Personalización

### Cambiar Colores
Edita las variables CSS en `citas/index.php`:
```css
:root {
    --bg-dark: #0a0a0f;           /* Fondo principal */
    --bg-card: #13131a;           /* Fondo de tarjetas */
    --accent-purple: #8b6cff;     /* Color principal */
    --accent-blue: #4dd0e1;       /* Color secundario */
    --accent-green: #4caf50;      /* Color éxito */
    --accent-orange: #ff9800;     /* Color advertencia */
    --accent-red: #ff6b81;        /* Color peligro */
}
```

### Cambiar Estados de Citas
Para agregar o modificar estados, edita en `calendario_data.php`:
```php
switch ($cita['estado']) {
    case 'Pendiente':
        $color = '#ff9800';
        break;
    // Agrega más casos aquí
}
```

---

## 📊 Vistas de Base de Datos Creadas

### 1. `vista_citas_completas`
Consulta todas las citas con información completa:
```sql
SELECT * FROM vista_citas_completas;
```

### 2. `vista_citas_pendientes`
Solo citas pendientes futuras:
```sql
SELECT * FROM vista_citas_pendientes;
```

### 3. `vista_estadisticas_mensuales`
Estadísticas agrupadas por mes:
```sql
SELECT * FROM vista_estadisticas_mensuales 
WHERE mes = '2025-02';
```

---

## 🔧 Solución de Problemas

### El calendario no muestra citas
1. Verifica que `calendario_data.php` esté en `citas/`
2. Abre en el navegador: `http://localhost/autoservice/citas/calendario_data.php`
3. Deberías ver un JSON con las citas
4. Verifica errores de PHP en la consola

### Los estilos no se ven
1. Verifica que Bootstrap Icons esté cargando:
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
```
2. Verifica que FullCalendar esté cargando:
```html
<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>
```

### Error de conexión a base de datos
Verifica en `conexion.php`:
- Puerto correcto (3308 o 3306)
- Credenciales correctas
- Base de datos existe

### Las citas no aparecen en colores
Verifica que el campo `estado` en la tabla tenga valores exactos:
- "Pendiente" (no "pendiente" o "PENDIENTE")
- "En proceso"
- "Completada"
- "Cancelada"

---

## 📱 Características Responsivas

El sistema está optimizado para:
- ✅ Desktop (1920px+)
- ✅ Laptop (1366px)
- ✅ Tablet (768px)
- ✅ Mobile (375px)

En dispositivos móviles:
- El sidebar se oculta
- El calendario se adapta
- Las tarjetas se apilan verticalmente
- Los botones ocupan todo el ancho

---

## 🚀 Próximas Mejoras Sugeridas

1. **Drag & Drop** - Arrastrar citas para reprogramar
2. **Notificaciones** - Alertas de citas próximas
3. **PDF Export** - Generar reportes en PDF
4. **Email** - Enviar confirmaciones por correo
5. **WhatsApp** - Integración para recordatorios
6. **Calendario Google** - Sincronización bidireccional

---

## 📝 Notas Importantes

- ⚠️ Haz **backup** antes de reemplazar archivos
- 🔒 El sistema requiere **sesión activa** (`$_SESSION['idUsuario']`)
- 🎨 Los colores son **personalizables** vía CSS variables
- 📊 Las estadísticas se calculan **en tiempo real**
- 🔍 La búsqueda funciona en **cliente, vehículo y servicio**

---

## 📞 Soporte

Si encuentras algún problema:
1. Revisa la sección de **Solución de Problemas**
2. Verifica los **errores en consola** del navegador
3. Revisa los **logs de PHP** en tu servidor
4. Asegúrate de tener la **versión correcta de PHP** (7.4+)

---

## 📄 Licencia

Este código es parte del proyecto AutoService Manager y está disponible para uso educativo y comercial.

---

**¡Disfruta de tu nuevo sistema de calendario! 🎉**
