@extends('layouts.app')

@section('title', Auth::user()->isAdmin() ? 'Todas las Citas' : 'Mis Citas')

@section('content')
@include('layouts.title-header', [
    'title' => Auth::user()->isAdmin() ? 'Todas las Citas' : 'Mis Citas', 
    'breadcrumbs' => [
        ['text' => Auth::user()->isAdmin() ? 'Dashboard' : 'Cuenta', 'url' => Auth::user()->isAdmin() ? route('dashboard') : null],
        ['text' => Auth::user()->isAdmin() ? 'Todas las Citas' : 'Mis Citas']
    ]
])

<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="fas fa-calendar me-2"></i>
                        {{ Auth::user()->isAdmin() ? 'Todas las Citas' : 'Mis Citas' }}
                    </h5>
                    <a href="{{ Auth::user()->isAdmin() ? route('admin.citas.create') : route('user.citas.create') }}" class="btn violet-red--btn">
                        <i class="fas fa-plus me-2"></i>Nueva Cita
                    </a>
                </div>

                <div class="card-body">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="fas fa-check-circle me-2"></i>
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    @if($citas->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                                                 <thead class="table-light">
                                     <tr class="align-middle">
                                         <th>Servicios</th>
                                         @if(Auth::user()->isAdmin())
                                             <th class="text-start">Cliente</th>
                                         @endif
                                         <th class="text-center">Fecha/Hora</th>
                                         <th class="text-center">Estado</th>
                                         <th class="text-center">Total</th>
                                         <th class="text-center">Imágenes</th>
                                         <th class="text-center">Acciones</th>
                                     </tr>
                                 </thead>
                                                                 <tbody>
                                     @foreach($citas as $cita)
                                         <tr class="align-middle">
                                                                                         <td class="align-middle">
                                                 @if($cita->citaServicios->count() > 0)
                                                    @php
                                                        // Organizar servicios por categoría
                                                        $serviciosPorCategoria = $cita->citaServicios->groupBy('categoria');
                                                        $serviciosManicura = $serviciosPorCategoria->get('manicura', collect());
                                                        $serviciosPedicura = $serviciosPorCategoria->get('pedicura', collect());
                                                        
                                                        // Obtener servicios principales (tipo) y adicionales
                                                        $manicuraPrincipal = $serviciosManicura->where('subcategoria', 'tipo')->first();
                                                        $manicuraAdicionales = $serviciosManicura->where('subcategoria', 'adicional');
                                                        $pedicuraPrincipal = $serviciosPedicura->where('subcategoria', 'tipo')->first();
                                                        $pedicuraAdicionales = $serviciosPedicura->where('subcategoria', 'adicional');
                                                    @endphp
                                                    
                                                                                                         <div class="d-flex flex-column gap-1">
                                                         @if($manicuraPrincipal)
                                                             <div class="d-flex align-items-center">
                                                                 <i class="fas fa-hand-sparkles text-primary me-2"></i>
                                                                 <span class="fw-bold">{{ $manicuraPrincipal->nombre_servicio }}</span>
                                                                 @if($manicuraAdicionales->count() > 0)
                                                                     <span class="badge bg-success ms-2">+{{ $manicuraAdicionales->count() }}</span>
                                                                 @endif
                                                             </div>
                                                         @endif
                                                         
                                                         @if($pedicuraPrincipal)
                                                             <div class="d-flex align-items-center">
                                                                 <i class="fas fa-shoe-prints text-info me-2"></i>
                                                                 <span class="fw-bold">{{ $pedicuraPrincipal->nombre_servicio }}</span>
                                                                 @if($pedicuraAdicionales->count() > 0)
                                                                     <span class="badge bg-success ms-2">+{{ $pedicuraAdicionales->count() }}</span>
                                                                 @endif
                                                             </div>
                                                         @endif
                                                     </div>
                                                @elseif($cita->servicios_detallados)
                                                    @php
                                                        // Para citas antiguas, usar datos JSON
                                                        $serviciosDetallados = json_decode($cita->servicios_detallados, true) ?? [];
                                                        $serviciosPorCategoria = collect($serviciosDetallados)->groupBy('categoria');
                                                        $serviciosManicura = $serviciosPorCategoria->get('manicura', collect());
                                                        $serviciosPedicura = $serviciosPorCategoria->get('pedicura', collect());
                                                        
                                                        $manicuraPrincipal = $serviciosManicura->where('subcategoria', 'tipo')->first();
                                                        $manicuraAdicionales = $serviciosManicura->where('subcategoria', 'adicional');
                                                        $pedicuraPrincipal = $serviciosPedicura->where('subcategoria', 'tipo')->first();
                                                        $pedicuraAdicionales = $serviciosPedicura->where('subcategoria', 'adicional');
                                                    @endphp
                                                    
                                                                                                         <div class="d-flex flex-column gap-1">
                                                         @if($manicuraPrincipal)
                                                             <div class="d-flex align-items-center">
                                                                 <i class="fas fa-hand-sparkles text-primary me-2"></i>
                                                                 <span class="fw-bold">{{ $manicuraPrincipal['nombre'] }}</span>
                                                                 @if($manicuraAdicionales->count() > 0)
                                                                     <span class="badge bg-success ms-2">+{{ $manicuraAdicionales->count() }}</span>
                                                                 @endif
                                                             </div>
                                                         @endif
                                                         
                                                         @if($pedicuraPrincipal)
                                                             <div class="d-flex align-items-center">
                                                                 <i class="fas fa-shoe-prints text-info me-2"></i>
                                                                 <span class="fw-bold">{{ $pedicuraPrincipal['nombre'] }}</span>
                                                                 @if($pedicuraAdicionales->count() > 0)
                                                                     <span class="badge bg-success ms-2">+{{ $pedicuraAdicionales->count() }}</span>
                                                                 @endif
                                                             </div>
                                                         @endif
                                                     </div>
                                                                                                 @elseif($cita->servicios_detallados)
                                                     @php
                                                         // Para citas antiguas, usar datos JSON
                                                         $serviciosDetallados = json_decode($cita->servicios_detallados, true) ?? [];
                                                         $serviciosPorCategoria = collect($serviciosDetallados)->groupBy('categoria');
                                                         $serviciosManicura = $serviciosPorCategoria->get('manicura', collect());
                                                         $serviciosPedicura = $serviciosPorCategoria->get('pedicura', collect());
                                                         
                                                         $manicuraPrincipal = $serviciosManicura->where('subcategoria', 'tipo')->first();
                                                         $manicuraAdicionales = $serviciosManicura->where('subcategoria', 'adicional');
                                                         $pedicuraPrincipal = $serviciosPedicura->where('subcategoria', 'tipo')->first();
                                                         $pedicuraAdicionales = $serviciosPedicura->where('subcategoria', 'adicional');
                                                     @endphp
                                                     
                                                     <div class="d-flex flex-column gap-1">
                                                         @if($manicuraPrincipal)
                                                             <div class="d-flex align-items-center">
                                                                 <i class="fas fa-hand-sparkles text-primary me-2"></i>
                                                                 <span class="fw-bold">{{ $manicuraPrincipal['nombre'] }}</span>
                                                                 @if($manicuraAdicionales->count() > 0)
                                                                     <span class="badge bg-success ms-2">+{{ $manicuraAdicionales->count() }}</span>
                                                                 @endif
                                                             </div>
                                                         @endif
                                                         
                                                         @if($pedicuraPrincipal)
                                                             <div class="d-flex align-items-center">
                                                                 <i class="fas fa-shoe-prints text-info me-2"></i>
                                                                 <span class="fw-bold">{{ $pedicuraPrincipal['nombre'] }}</span>
                                                                 @if($pedicuraAdicionales->count() > 0)
                                                                     <span class="badge bg-success ms-2">+{{ $pedicuraAdicionales->count() }}</span>
                                                                 @endif
                                                             </div>
                                                         @endif
                                                     </div>
                                                 @else
                                                     <span class="text-muted">Sin servicios</span>
                                                 @endif
                                            </td>
                                                                                         @if(Auth::user()->isAdmin())
                                                 <td class="align-middle text-start">
                                                     <div class="d-flex align-items-center">
                                                         <img class="rounded-circle me-2" 
                                                              src="{{ $cita->user->getFotoPerfilOrDefault() }}" 
                                                              alt="{{ $cita->user->full_name }}"
                                                              style="width: 30px; height: 30px; object-fit: cover;">
                                                         <div>
                                                             <div class="fw-bold">{{ $cita->user->full_name }}</div>
                                                             <small class="badge bg-primary">
                                                                 {{ $cita->user->userPoints->getBadge() ?? '👤 Nuevo' }}
                                                             </small>
                                                         </div>
                                                     </div>
                                                 </td>
                                             @endif
                                                                                         <td class="align-middle text-center">
                                                 <div class="text-center">
                                                     <div class="fw-bold text-primary">{{ \Carbon\Carbon::parse($cita->fecha_hora)->format('d/m') }}</div>
                                                     <small class="text-muted">{{ \Carbon\Carbon::parse($cita->fecha_hora)->format('H:i') }}</small>
                                                 </div>
                                             </td>
                                                                                                                                                                                      <td class="align-middle text-center">
                                                   <span class="badge  
                                                      @if($cita->estado === 'pendiente') bg-warning
                                                      @elseif($cita->estado === 'confirmado') bg-info
                                                      @elseif($cita->estado === 'completado') bg-success
                                                      @else bg-secondary
                                                      @endif">
                                                      <i class="fas 
                                                          @if($cita->estado === 'pendiente') fa-clock
                                                          @elseif($cita->estado === 'confirmado') fa-check
                                                          @elseif($cita->estado === 'completado') fa-star
                                                          @else fa-times
                                                          @endif"></i>
                                                      {{ ucfirst($cita->estado) }}
                                                  </span>
                                              </td>
                                              <td class="align-middle text-center">
                                                  <div class="text-center">
                                                      <span class="fw-bold text-primary fs-6">
                                                          ${{ number_format($cita->total_final_cita ?? 0, 2) }}
                                                      </span>
                                                  </div>
                                              </td>
                                              <td class="align-middle text-center">
                                                  @if($cita->citaImagenes->count() > 0)
                                                      <span class="badge bg-info">
                                                          <i class="fas fa-images"></i> 
                                                          {{ $cita->citaImagenes->count() }}
                                                      </span>
                                                  @else
                                                      <span class="text-muted">-</span>
                                                  @endif
                                              </td>
                                                                                         <td class="align-middle text-center">
                                                 <div class="btn-group btn-group-sm" role="group">
                                                    <a href="{{ Auth::user()->isAdmin() ? route('admin.citas.show', $cita) : route('user.citas.show', $cita) }}" 
                                                       class="btn violet-red--btn tra-black--hover" title="Ver detalles">
                                                        <i class="fas fa-eye"></i>
                                                    </a>
                                                    
                                                                                                                                                             @if(Auth::user()->isAdmin())
                                                        @if(in_array($cita->estado, ['pendiente', 'cancelado', 'confirmado', 'completado']))
                                                             <a href="{{ Auth::user()->isAdmin() ? route('admin.citas.edit', $cita) : route('user.citas.edit', $cita) }}" 
                                                                class="btn violet-red--btn tra-black--hover" title="Editar">
                                                                 <i class="fas fa-edit"></i>
                                                             </a>
                                                             
                                                             @if(in_array($cita->estado, ['pendiente', 'cancelado']))
                                                                 <button type="button" class="btn violet-red--btn tra-black--hover" 
                                                                         onclick="cambiarEstadoCita({{ $cita->id }}, 'confirmado')" title="Verificar">
                                                                     <i class="fas fa-check"></i>
                                                                 </button>
                                                             @endif
                                                             
                                                             @if(in_array($cita->estado, ['pendiente', 'confirmado']))
                                                                 <button type="button" class="btn violet-red--btn tra-black--hover" 
                                                                         onclick="cambiarEstadoCita({{ $cita->id }}, 'rechazado')" title="Rechazar">
                                                                     <i class="fas fa-times"></i>
                                                                 </button>
                                                             @endif
                                                             
                                                             @if($cita->estado === 'confirmado')
                                                                 <button type="button" class="btn violet-red--btn tra-black--hover" 
                                                                         onclick="cambiarEstadoCita({{ $cita->id }}, 'completado')" title="Completar">
                                                                     <i class="fas fa-star"></i>
                                                                 </button>
                                                             @endif
                                                             
                                                             @if($cita->estado === 'completado')
                                                                 <button type="button" class="btn violet-red--btn tra-black--hover" 
                                                                         onclick="subirImagenCita({{ $cita->id }})" title="Subir imagen del servicio">
                                                                     <i class="fas fa-camera"></i>
                                                                 </button>
                                                             @endif
                                                         @endif
                                                    @else
                                                        @if($cita->estado === 'pendiente')
                                                            <a href="{{ route('user.citas.edit', $cita) }}" 
                                                               class="btn violet-red--btn tra-black--hover" title="Editar">
                                                                <i class="fas fa-edit"></i>
                                                            </a>
                                                            
                                                            <button type="button" class="btn violet-red--btn tra-black--hover" 
                                                                    onclick="cambiarEstadoCita({{ $cita->id }}, 'cancelado')" title="Cancelar">
                                                                <i class="fas fa-times"></i>
                                                            </button>
                                                        @endif
                                                        
                                                        @if($cita->estado === 'confirmado')
                                                            <button type="button" class="btn violet-red--btn tra-black--hover" 
                                                                    onclick="cambiarEstadoCita({{ $cita->id }}, 'cancelado')" title="Cancelar">
                                                                <i class="fas fa-times"></i>
                                                            </button>
                                                        @endif
                                                        
                                                                                                                 @if($cita->estado === 'completado')
                                                             <button type="button" class="btn violet-red--btn tra-black--hover" 
                                                                     onclick="subirImagenCita({{ $cita->id }})" title="Subir imagen del servicio">
                                                                 <i class="fas fa-camera"></i>
                                                             </button>
                                                         @endif
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-center mt-4">
                            <div class="pagination-wrapper">
                                {{ $citas->links() }}
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">{{ Auth::user()->isAdmin() ? 'No hay citas registradas' : 'No tienes citas programadas' }}</h4>
                            <p class="text-muted">{{ Auth::user()->isAdmin() ? 'Los usuarios podrán crear citas desde su panel.' : '¿Quieres programar tu primera cita?' }}</p>
                            @if(!Auth::user()->isAdmin())
                                <a href="{{ route('user.citas.create') }}" class="btn violet-red--btn">
                                    <i class="fas fa-plus me-2"></i>Programar Cita
                                </a>
                            @endif
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@if(!Auth::user()->isAdmin())
<!-- Modal para confirmar cancelación -->
<div class="modal fade" id="cancelModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Cancelación</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                ¿Estás seguro de que quieres cancelar esta cita?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn violet-red--btn tra-black--hover" data-bs-dismiss="modal">No</button>
                <form id="cancelForm" method="POST" style="display: inline;">
                    @csrf
                    @method('PUT')
                    <button type="submit" class="btn violet-red--btn tra-black--hover">Sí, Cancelar</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endif

<script>


@if(Auth::user()->isAdmin())
// Función unificada para cambiar estado de citas
function cambiarEstadoCita(citaId, nuevoEstado, notas = null) {
    let confirmMessage = '';
    let actionName = '';
    
    switch(nuevoEstado) {
        case 'confirmado':
            confirmMessage = '¿Confirmar esta cita?';
            actionName = 'verificar';
            break;
        case 'cancelado':
            confirmMessage = '¿Rechazar esta cita?';
            actionName = 'rechazar';
            break;
        case 'completado':
            confirmMessage = '¿Marcar como completada esta cita?';
            actionName = 'completar';
            break;
        default:
            confirmMessage = `¿Cambiar el estado a ${nuevoEstado}?`;
            actionName = 'cambiar estado';
    }
    
    if (!confirm(confirmMessage)) {
        return;
    }

    const url = `{{ url('/admin/citas') }}/${citaId}/estado`;
    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    
    console.log(`🔍 Intentando ${actionName} cita:`, {
        citaId: citaId,
        nuevoEstado: nuevoEstado,
        url: url,
        token: token ? 'Presente' : 'Faltante'
    });

    fetch(url, {
        method: 'PUT',
        headers: {
            'X-CSRF-TOKEN': token,
            'Content-Type': 'application/json',
            'Accept': 'application/json',
        },
        body: JSON.stringify({
            estado: nuevoEstado,
            notas: notas
        })
    })
    .then(response => {
        console.log('📡 Respuesta del servidor:', {
            status: response.status,
            statusText: response.statusText,
            ok: response.ok
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('📦 Datos recibidos:', data);
        
        if (data.success) {
            // Mostrar mensaje de éxito
            alert(data.message || `Cita ${actionName} exitosamente`);
            // Recargar la página para mostrar los cambios
            location.reload();
        } else {
            alert(data.message || `Error al ${actionName} la cita`);
        }
    })
    .catch(error => {
        console.error('❌ Error completo:', error);
        alert(`Error al ${actionName} la cita`);
    });
}


  
  function subirImagenCita(citaId) {
     // Crear un input file oculto
     const input = document.createElement('input');
     input.type = 'file';
     input.accept = 'image/*';
     input.style.display = 'none';
     
     input.onchange = function(e) {
         const file = e.target.files[0];
         if (file) {
             // Mostrar confirmación
             if (!confirm('¿Subir esta imagen del servicio disfrutado?')) {
                 return;
             }
             
             // Crear FormData
             const formData = new FormData();
             formData.append('imagen', file);
             formData.append('cita_id', citaId);
             formData.append('visibilidad', 'publica');
             formData.append('_token', '{{ csrf_token() }}');
             
             // Mostrar loader
             const loader = document.createElement('div');
             loader.className = 'position-fixed top-50 start-50 translate-middle';
             loader.style.zIndex = '9999';
             loader.innerHTML = `
                 <div class="bg-white p-3 rounded shadow">
                     <div class="spinner-border text-violet-red" role="status">
                         <span class="visually-hidden">Subiendo...</span>
                     </div>
                     <span class="ms-2">Subiendo imagen...</span>
                 </div>
             `;
             document.body.appendChild(loader);
             
             // Enviar imagen
             fetch('{{ route("cita-imagenes.store") }}', {
                 method: 'POST',
                 body: formData,
                 headers: {
                     'X-Requested-With': 'XMLHttpRequest'
                 }
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
                     alert('¡Imagen subida exitosamente! Gracias por compartir tu experiencia.');
                     // Redirigir a la vista show de la cita
                     window.location.href = '{{ Auth::user()->isAdmin() ? url("/admin/citas") : url("/mis-citas") }}/' + citaId;
                 } else {
                     alert(data.message || 'Error al subir la imagen');
                 }
             })
             .catch(error => {
                 console.error('Error:', error);
                 alert('Error al subir la imagen');
             })
             .finally(() => {
                 // Remover loader
                 if (loader.parentNode) {
                     loader.remove();
                 }
             });
         }
     };
     
     // Simular click en el input
     document.body.appendChild(input);
     input.click();
     document.body.removeChild(input);
 }
 @endif
 </script>