@extends('layouts.app')

@section('content')
@include('layouts.title-header', [
    'title' => 'Detalle de Cita', 
    'breadcrumbs' => [
        ['text' => 'Dashboard', 'url' => '/dashboard'],
        ['text' => Auth::user()->isAdmin() ? 'Todas las Citas' : 'Mis Citas', 'url' => Auth::user()->isAdmin() ? route('admin.citas.index') : route('user.citas.index')],
        ['text' => 'Detalle de Cita']
    ]
])

<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                     <h4 class="mb-0">
                        <i class="fas fa-calendar-check me-2"></i>
                        Detalle de Cita
                    </h4>
                     <div class="d-flex gap-2">
                         @if(Auth::user()->isAdmin())
                             @if(in_array($cita->estado, ['pendiente', 'cancelado', 'confirmado']))
                                 <a href="{{ route('admin.citas.edit', $cita) }}" 
                                    class="btn btn-sm 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 btn-sm 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 btn-sm 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 btn-sm 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 btn-sm 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 btn-sm violet-red--btn tra-black--hover" title="Editar">
                                     <i class="fas fa-edit"></i>
                                 </a>
                                 
                                 <button type="button" class="btn btn-sm 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 btn-sm 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 btn-sm violet-red--btn tra-black--hover" 
                                         onclick="subirImagenCita({{ $cita->id }})" title="Subir imagen del servicio">
                                     <i class="fas fa-camera"></i>
                                 </button>
                             @endif
                         @endif
                    <a href="{{ Auth::user()->isAdmin() ? route('admin.citas.index') : route('user.citas.index') }}" class="btn btn-sm violet-red--btn tra-black--hover">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                     </div>
                </div>
                <div class="card-body">
                    <div class="row">
                                                 <!-- Columna izquierda: Información General -->
                         <div class="col-md-4">
                            <!-- Información General -->
                             <div class="card sticky-top" style="top: 20px;">
                                 <div class="card-header bg-violet-red text-white">
                                     <h5 class="mb-0">
                                    <i class="fas fa-info-circle me-2"></i>
                                    Información General
                                </h5>
                                 </div>
                                 <div class="card-body">
                                     <!-- Información de la cita -->
                                     <div class="mb-3">
                                         <div class="d-flex justify-content-between align-items-center mb-2">
                                             <small class="text-muted">Cita #{{ $cita->id }}</small>
                                             <small class="text-muted">{{ $cita->fecha_hora->format('d/m/Y H:i') }}</small>
                                         </div>
                                         <hr class="my-2">
                                     </div>
                                     
                                     <!-- Detalles de la cita -->
                                     <div class="mb-3">
                                         <div class="d-flex justify-content-between mb-2">
                                             <span><strong>Estado:</strong></span>
                                                <span class="badge bg-{{ $cita->estado_color }}">{{ $cita->estado_texto }}</span>
                                         </div>
                                            @if(Auth::user()->isAdmin())
                                             <div class="d-flex justify-content-between mb-2">
                                                 <span><strong>Cliente:</strong></span>
                                                    <span>{{ $cita->user->full_name }}</span>
                                             </div>
                                             <div class="d-flex justify-content-between mb-2">
                                                 <span><strong>Email:</strong></span>
                                                 <span class="small">{{ $cita->user->email }}</span>
                                             </div>
                                             <div class="d-flex justify-content-between mb-2">
                                                 <span><strong>Teléfono:</strong></span>
                                                 <span class="small">{{ $cita->user->telefono ?? 'No especificado' }}</span>
                                             </div>
                                             <div class="d-flex justify-content-between mb-2">
                                                 <span><strong>Fecha de registro:</strong></span>
                                                 <span class="small">{{ $cita->user->created_at->format('d/m/Y') }}</span>
                                             </div>
                                             <div class="d-flex justify-content-between mb-2">
                                                 <span><strong>Puntos actuales:</strong></span>
                                                 <span class="badge bg-info">{{ $cita->user->userPoints->puntos ?? 0 }} pts</span>
                                             </div>
                                             <div class="d-flex justify-content-between mb-2">
                                                 <span><strong>Nivel actual:</strong></span>
                                                 <span class="badge bg-primary">{{ $cita->user->userPoints->getBadge() ?? '👤 Nuevo' }}</span>
                                             </div>
                                             <div class="d-flex justify-content-between mb-2">
                                                 <span><strong>Total de citas:</strong></span>
                                                 <span class="badge bg-secondary">{{ $cita->user->citas->count() }}</span>
                                             </div>
                                             <div class="d-flex justify-content-between mb-2">
                                                 <span><strong>Citas completadas:</strong></span>
                                                 <span class="badge bg-success">{{ $cita->user->citas->where('estado', 'completado')->count() }}</span>
                                             </div>
                                            @endif
                                         <div class="d-flex justify-content-between mb-2">
                                             <span><strong>Nivel del Usuario:</strong></span>
                                                <span>{{ $cita->nivel_usuario ?? 'No especificado' }}</span>
                                </div>
                            </div>
                            
                                     @if($cita->notas)
                                         <div class="border-top pt-3">
                                             <h6 class="text-muted">
                                                 <i class="fas fa-sticky-note me-2"></i>
                                                 Notas:
                                             </h6>
                                             <div class="small">
                                                 <p class="mb-0">{{ $cita->notas }}</p>
                                             </div>
                                         </div>
                                     @endif
                                </div>
                            </div>
                            
                             <!-- Imágenes - Ahora en la misma columna que Información General -->
                             @if($cita->estado === 'completado')
                                 <div class="card mt-3">
                                     <div class="card-header bg-violet-red text-white d-flex justify-content-between align-items-center">
                                         <h5 class="mb-0">
                                             <i class="fas fa-images me-2"></i>
                                             Imágenes
                                </h5>
                                         <input type="file" id="imagen-upload-add" accept="image/*" style="display: none;">
                                         <button type="button" class="btn violet-red--btn tra-black--hover" onclick="document.getElementById('imagen-upload-add').click();">
                                             <i class="fas fa-upload me-1"></i>Subir
                                         </button>
                                     </div>
                                     <div class="card-body">
                                     @php
                                         $pubDescCita = trim((string) ($cita->publicacion_descripcion ?? ''));
                                         $altCitaImg = $pubDescCita !== '' ? \Illuminate\Support\Str::limit($pubDescCita, 120) : 'Imagen de la cita';
                                     @endphp
                                     @if($pubDescCita !== '')
                                     <div class="alert alert-light border small mb-3"><strong>Descripción de la publicación:</strong> {{ $cita->publicacion_descripcion }}</div>
                                     @endif
                                                                          @if($cita->citaImagenes && $cita->citaImagenes->count() > 0)
                                    <div class="row">
                                                 @foreach($cita->citaImagenes as $imagen)
                                            <div class="col-md-6 mb-3">
                                                        <div class="card h-100">
                                                            <img src="{{ asset('storage/' . $imagen->ruta_imagen) }}" 
                                                                 class="card-img-top" 
                                                                 alt="{{ $altCitaImg }}"
                                                                 style="height: 200px; object-fit: cover;">
                                                    <div class="card-body">
                                                                <div class="d-flex justify-content-between align-items-center">
                                                                    <small class="text-muted">{{ $imagen->created_at->format('d/m/Y H:i') }}</small>
                                                                    @if($imagen->es_destacada)
                                                                        <span class="badge bg-warning">
                                                                            <i class="fas fa-star me-1"></i>Destacada
                                                                        </span>
                                                                    @endif
                                                            </div>
                                                                                                                             <div class="mt-2 d-flex gap-1">
                                                                    <button type="button" class="btn violet-red--btn tra-black--hover toggle-destacada" 
                                                                            data-imagen-id="{{ $imagen->id }}" 
                                                                            data-destacada="{{ $imagen->es_destacada ? '1' : '0' }}"
                                                                            title="{{ $imagen->es_destacada ? 'Quitar destacada' : 'Marcar como destacada' }}">
                                                                        <i class="fas fa-star{{ $imagen->es_destacada ? '' : '-o' }}"></i>
                                                                    </button>
                                                                    
                                                                    @if(Auth::user()->isAdmin())
                                                                        <button type="button" class="btn violet-red--btn tra-black--hover delete-imagen" 
                                                                                data-imagen-id="{{ $imagen->id }}"
                                                                                title="Eliminar imagen">
                                                                            <i class="fas fa-trash"></i>
                                                                        </button>
                                                                    @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                             <div class="text-center py-4">
                                                 <i class="fas fa-images fa-3x text-muted mb-3"></i>
                                                 <p class="text-muted mb-3">No hay imágenes subidas para esta cita</p>
                                                 <div class="upload-container">
                                                     <input type="file" id="imagen-upload-empty" accept="image/*" style="display: none;">
                                                     <button type="button" class="btn violet-red--btn tra-black--hover" onclick="document.getElementById('imagen-upload-empty').click();">
                                                         <i class="fas fa-upload me-2"></i>Subir Imagen
                                                     </button>
                                                 </div>
                                             </div>
                                         @endif
                                     </div>
                                    </div>
                                @endif
                            </div>
                            
                            <!-- Manos y Pies -->
                            @if($cita->citaOpcionesUnas && $cita->citaOpcionesUnas->count() > 0)
                                <div class="col-md-4">
                                    <div class="card sticky-top" style="top: 20px;">
                                        <div class="card-header bg-violet-red text-white">
                                            <h5 class="mb-0">
                                        <i class="fas fa-hand-sparkles me-2"></i>
                                                Manos y Pies
                                    </h5>
                                                    </div>
                                                    <div class="card-body">
                                            @php
                                                // Función helper para obtener coordenadas de uñas
                                                function getCoordenadasUña($tipoMano, $dedo) {
                                                    $coordenadas = [
                                                        'izquierda' => [
                                                            'indice' => ['x' => 639, 'y' => 535, 'width' => 100, 'height' => 230, 'transform' => 'rotate(175, 650, 555)'],
                                                            'medio' => ['x' => 656, 'y' => 678, 'width' => 110, 'height' => 230, 'transform' => 'rotate(162, 615, 687.5)'],
                                                            'anular' => ['x' => 520, 'y' => 380, 'width' => 110, 'height' => 230, 'transform' => 'rotate(156, 467.5, 605)'],
                                                            'meñique' => ['x' => 665, 'y' => 376, 'width' => 88, 'height' => 190, 'transform' => 'rotate(156, 467.5, 605)'],
                                                            'menique' => ['x' => 665, 'y' => 376, 'width' => 88, 'height' => 190, 'transform' => 'rotate(156, 467.5, 605)'],
                                                            'pulgar' => ['x' => 613, 'y' => 465, 'width' => 140, 'height' => 230, 'transform' => 'rotate(-80, 685, 625)'],
                                                        ],
                                                        'derecha' => [
                                                            'indice' => ['x' => 40, 'y' => 510, 'width' => 100, 'height' => 230, 'transform' => 'rotate(175, 350, 555)'],
                                                            'medio' => ['x' => 205, 'y' => 608, 'width' => 110, 'height' => 230, 'transform' => 'rotate(162, 385, 687.5)'],
                                                            'anular' => ['x' => 645, 'y' => 405, 'width' => 110, 'height' => 230, 'transform' => 'rotate(156, 532.5, 605)'],
                                                            'meñique' => ['x' => 790, 'y' => 401, 'width' => 88, 'height' => 190, 'transform' => 'rotate(156, 532.5, 605)'],
                                                            'menique' => ['x' => 790, 'y' => 401, 'width' => 88, 'height' => 190, 'transform' => 'rotate(156, 532.5, 605)'],
                                                            'pulgar' => ['x' => 308, 'y' => 830, 'width' => 140, 'height' => 230, 'transform' => 'rotate(-80, 315, 625)'],
                                                        ]
                                                    ];

                                                    return $coordenadas[$tipoMano][$dedo] ?? ['x' => 0, 'y' => 0, 'width' => 100, 'height' => 100, 'transform' => ''];
                                                }
                                                
                                                // Organizar opciones por tipo de mano/pie
                                                $opcionesOrganizadas = $cita->citaOpcionesUnas->groupBy('tipo_mano');
                                            @endphp
                                            
                                            <div class="row">
                                                @php
                                                    // Definir el orden correcto para mostrar las cards
                                                    $ordenCorrecto = ['izquierda', 'derecha', 'pie_izquierdo', 'pie_derecho'];
                                                @endphp
                                                
                                                @foreach($ordenCorrecto as $tipoMano)
                                                    @if(isset($opcionesOrganizadas[$tipoMano]))
                                                        @php $opciones = $opcionesOrganizadas[$tipoMano]; @endphp
                                                        <div class="col-md-6 mb-3">
                                                <div class="card">
                                                    <div class="card-header">
                                                                    <strong>
                                                                        @switch($tipoMano)
                                                                            @case('izquierda')
                                                                                <i class="fas fa-hand-paper me-2"></i>Mano Izquierda
                                                                                @break
                                                                            @case('derecha')
                                                                                <i class="fas fa-hand-paper me-2"></i>Mano Derecha
                                                                                @break
                                                                            @case('pie_izquierdo')
                                                                                <i class="fas fa-shoe-prints me-2"></i>Pie Izquierdo
                                                                                @break
                                                                            @case('pie_derecho')
                                                                                <i class="fas fa-shoe-prints me-2"></i>Pie Derecho
                                                                                @break
                                                                            @default
                                                                                {{ ucfirst($tipoMano) }}
                                                                        @endswitch
                                                                    </strong>
                                                    </div>
                                                    <div class="card-body">
                                                                    <div class="manos-container">
                                                                        <div class="mano">
                                                                            <div class="svg-container">
                                                                                @if($tipoMano === 'izquierda' || $tipoMano === 'derecha')
                                                                                    <!-- SVG para manos -->
                                                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" style="{{ $tipoMano === 'izquierda' ? 'transform: scaleX(-1);' : '' }}">
                                                                                        <g id="Mano">
                                                                                            <image width="1000" height="1000" xlink:href="{{ asset('imagenes/unas/modelos/unasmano1.png') }}"/>
                                                                                        </g>
                                                                                        
                                                                                        @foreach($opciones as $opcion)
                                                                                            @php
                                                                                                $imagenUña = $opcion->servicio->imagen ?? asset('imagenes/unas/default.png');
                                                                                                $coordenadas = getCoordenadasUña($tipoMano, $opcion->dedo);
                                                                                            @endphp
                                                                                            <image x="{{ $coordenadas['x'] }}" y="{{ $coordenadas['y'] }}" 
                                                                                                   width="{{ $coordenadas['width'] }}" height="{{ $coordenadas['height'] }}" 
                                                                                                   xlink:href="{{ asset($imagenUña) }}" 
                                                                                                   transform="{{ $coordenadas['transform'] }}" 
                                                                                                   preserveAspectRatio="none"/>
                                                        @endforeach
                                                                                    </svg>
                                                                                @else
                                                                                    <!-- SVG para pies -->
                                                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 753" style="{{ $tipoMano === 'pie_izquierdo' ? '' : 'transform: scaleX(-1);' }}">
                                                                                        <g id="Pie">
                                                                                            <image width="1200" height="753" xlink:href="{{ asset('imagenes/unas/modelos/unaspies1.png') }}"/>
                                                                                        </g>
                                                                                        <g id="Dedos">
                                                                                            <polygon id="Pulgar" class="cls-1" points="803.5 259 815.5 272 839.5 284 874.5 284 910.5 284 946.5 284 969.5 271.5 988.5 254 993.5 241 993.5 195 993.5 127 979.5 99 944.5 81 918.5 75 879.5 75 840.5 84 813.5 98 796.5 121 790.5 141 796.5 240 803.5 259"/>
                                                                                        </g>
                                                                                        
                                                                                        @foreach($opciones as $opcion)
                                                                                            @php
                                                                                                $imagenUña = asset($opcion->servicio->imagen) ?? asset('imagenes/unas/default.png');
                                                                                            @endphp
                                                                                            <image x="790" y="75" width="210" height="210" 
                                                                                                   xlink:href="{{ asset($imagenUña) }}" 
                                                                                                   preserveAspectRatio="none"/>
                                                        @endforeach
                                                                                    </svg>
                                        @endif
                                                    </div>
                                                                            <div class="seleccion-info mt-3">
                                                                                <div class="small">
                                                                                    @foreach($opciones as $opcion)
                                                                                        <div class="d-flex justify-content-start mb-1 text-start">
                                                                                            <span class="me-2">
                                                                                                <i class="fas fa-check-circle text-success"></i>
                                                                                            </span>
                                                                                            <span>{{ ucfirst($opcion->dedo) }}: {{ $opcion->servicio->nombre }}</span>
                                                            </div>
                                                        @endforeach
                                                    </div>
                                                </div>
                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                                    @endif
                                        @endforeach
                                    </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        
                                                 <!-- Columna derecha: Resumen de la cita -->
                        <div class="col-md-4">
                             <!-- Resumen de la cita -->
                            <div class="card sticky-top" style="top: 20px;">
                                <div class="card-header bg-violet-red text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-receipt me-2"></i>
                                         Resumen de la Cita
                                    </h5>
                                </div>
                                <div class="card-body">
                                     <!-- Información de la cita -->
                                    <div class="mb-3">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                             <small class="text-muted">Cita #{{ $cita->id }}</small>
                                            <small class="text-muted">{{ $cita->fecha_factura ? $cita->fecha_factura->format('d/m/Y H:i') : $cita->fecha_hora->format('d/m/Y H:i') }}</small>
                                        </div>
                                        <hr class="my-2">
                                    </div>
                                    
                                    <!-- Servicios seleccionados -->
                                    <div class="mb-3">
                                        <h6 class="text-muted">Servicios seleccionados:</h6>
                                        <div class="small">
                                             @if($cita->citaServicios && $cita->citaServicios->count() > 0)
                                                @php
                                                    // Organizar servicios por categoría y subcategoría
                                                     $serviciosOrganizados = $cita->citaServicios->groupBy('categoria');
                                                @endphp
                                                
                                                                                                  @foreach($serviciosOrganizados as $categoria => $serviciosCategoria)
                                                    <div class="mb-3">
                                                        <strong>{{ ucfirst($categoria) }}:</strong>
                                                        
                                                         <!-- Servicios principales de la categoría -->
                                                         @foreach($serviciosCategoria as $servicio)
                                                             @if($servicio->subcategoria !== 'adicional')
                                                                    <div class="d-flex justify-content-between small mb-1 ms-3">
                                                                     <span>{{ $servicio->nombre_servicio }}</span>
                                                                     <span>${{ number_format($servicio->precio_total, 2) }}</span>
                                                                    </div>
                                                                    @endif
                                                                @endforeach
                                                         
                                                                                                                     <!-- Mostrar opciones de uñas para esta categoría -->
                                                                                                                       @if($cita->citaOpcionesUnas && $cita->citaOpcionesUnas->count() > 0)
                                                             @php
                                                                 // Filtrar opciones por categoría, pero manejar pies correctamente
                                                                 $opcionesCategoria = $cita->citaOpcionesUnas->filter(function($opcion) use ($categoria) {
                                                                     if ($categoria === 'pedicura') {
                                                                         // Para pedicura, incluir servicios de pies independientemente de su categoría
                                                                         return $opcion->tipo_mano === 'pie_izquierdo' || $opcion->tipo_mano === 'pie_derecho';
                                                                     } else {
                                                                         // Para otras categorías (como manicura), excluir servicios de pies y usar la lógica original
                                                                         return $opcion->servicio && 
                                                                                $opcion->servicio->categoria === $categoria && 
                                                                                $opcion->tipo_mano !== 'pie_izquierdo' && 
                                                                                $opcion->tipo_mano !== 'pie_derecho';
                                                                     }
                                                                 })->groupBy('tipo_mano');
                                                             @endphp
                                                           
                                                             @foreach($opcionesCategoria as $tipoMano => $opciones)
                                                                 <div class="small mb-1 ms-3">
                                                                     <strong>
                                                                         @switch($tipoMano)
                                                                             @case('izquierda')
                                                                                 Mano Izquierda:
                                                                                 @break
                                                                             @case('derecha')
                                                                                 Mano Derecha:
                                                                                 @break
                                                                             @case('pie_izquierdo')
                                                                                 Pie Izquierdo:
                                                                                 @break
                                                                             @case('pie_derecho')
                                                                                 Pie Derecho:
                                                                                 @break
                                                                             @default
                                                                                 {{ ucfirst($tipoMano) }}:
                                                                         @endswitch
                                                                     </strong>
                                                                            </div>
                                                                 @foreach($opciones as $opcion)
                                                                            <div class="d-flex justify-content-between small mb-1 ms-5">
                                                                         <span>{{ ucfirst($opcion->dedo) }}: {{ $opcion->servicio->nombre ?? 'Servicio no encontrado' }}</span>
                                                                         <span>${{ number_format($opcion->precio_aplicado, 2) }}</span>
                                                                            </div>
                                                                        @endforeach
                                                                        @endforeach
                                                                    @endif
                                                                    
                                                         <!-- Mostrar servicios adicionales de esta categoría -->
                                                         @php
                                                             $serviciosAdicionalesCategoria = $serviciosCategoria->where('subcategoria', 'adicional');
                                                         @endphp
                                                         @if($serviciosAdicionalesCategoria->count() > 0)
                                                             <div class="small mb-1 ms-3">
                                                                 <strong>Servicios adicionales:</strong>
                                                                            </div>
                                                             @foreach($serviciosAdicionalesCategoria as $servicio)
                                                                    <div class="d-flex justify-content-between small mb-1 ms-5">
                                                                     <span>{{ $servicio->nombre_servicio }}</span>
                                                                     <span>${{ number_format($servicio->precio_total, 2) }}</span>
                                                                    </div>
                                                                @endforeach
                                                            @endif
                                                    </div>
                                                @endforeach
                                            @else
                                                <em class="text-muted">No hay servicios detallados</em>
                                            @endif
                                        </div>
                                    </div>
                                    
                                     <!-- Resumen de precios -->
                                    <div class="border-top pt-3">
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Subtotal:</span>
                                             <span>${{ number_format($cita->subtotal_servicios ?? 0, 2) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-2">
                                            <span>Descuentos:</span>
                                             <span class="text-success">-${{ number_format($cita->citaDescuentos->sum('monto_aplicado'), 2) }}</span>
                                        </div>
                                        <div class="d-flex justify-content-between mb-3 border-top pt-2">
                                            <strong>Total final:</strong>
                                             <strong class="text-success">${{ number_format($cita->total_final_cita ?? 0, 2) }}</strong>
                                        </div>
                                        
                                         <!-- Sección de descuentos aplicados -->
                                         @if($cita->citaDescuentos && $cita->citaDescuentos->count() > 0)
                                            <div class="mt-3">
                                                <h6 class="text-success">
                                                    <i class="fas fa-tags me-2"></i>
                                                    Descuentos aplicados:
                                                </h6>
                                                <div class="small">
                                                     @foreach($cita->citaDescuentos as $descuento)
                                                        <div class="d-flex justify-content-between mb-1">
                                                             <span>{{ $descuento->nombre_descuento }}</span>
                                                             <span class="text-success">-${{ number_format($descuento->monto_aplicado, 2) }}</span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                        
                                         
 
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Botones de acción -->
                            <div class="card mt-3">
                                <div class="card-body">
                                    <div class="d-grid gap-2">
 
                                        
                                        @if(Auth::user()->isAdmin())
                                            <form action="{{ route('admin.citas.destroy', $cita) }}" method="POST" onsubmit="return confirm('¿Estás seguro de eliminar esta cita?');" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                 <button type="submit" class="btn violet-red--btn tra-black--hover w-100">
                                                    <i class="fas fa-trash me-2"></i>Eliminar
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
@endsection

@push('styles')
<style>
    /* Estilos para las manos interactivas */
    .manos-container {
        display: flex;
        justify-content: center;
        gap: 20px;
    }

    .mano {
        text-align: center;
        flex: 1;
    }

    .svg-container {
        border: 2px solid #ddd;
        border-radius: 10px;
        padding: 10px;
        background: #f9f9f9;
        position: relative;
        max-width: 300px;
        margin: 0 auto;
    }

    svg {
        max-width: 100%;
        height: auto;
    }

    /* Ocultar las uñas verdes originales */
    #Pulgar, #Indice, #Medio, #Anular, #Meñique {
        fill: transparent;
        stroke: none;
    }
    
    /* Ocultar el pulgar verde en los pies */
    svg[viewBox="0 0 1200 753"] #Pulgar {
        fill: transparent;
        stroke: none;
    }
    
    .seleccion-info {
        margin-top: 15px;
        text-align: left;
    }
    
    .seleccion-info h6 {
        color: #6f42c1;
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    .cls-1 {
        fill: none;
        stroke: #ddd;
        stroke-width: 1;
    }
    
    /* Estilos para las imágenes de la cita */
    .card-img-top {
        transition: transform 0.3s ease;
    }
    
    .card-img-top:hover {
        transform: scale(1.05);
    }
    
    .btn-outline-violet-red {
        color: #6f42c1;
        border-color: #6f42c1;
    }
    
         .btn-outline-violet-red:hover {
         color: #fff;
         background-color: #6f42c1;
         border-color: #6f42c1;
     }
     
     /* Estilos para el loader */
     .upload-loader {
         display: none;
         text-align: center;
         padding: 20px;
     }
     
     .upload-loader.show {
         display: block;
     }
     
     .spinner-border-sm {
         width: 1rem;
         height: 1rem;
     }
 </style>
 @endpush

 @section('scripts')
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         const citaId = {{ $cita->id }};
         const isAdmin = {{ Auth::user()->isAdmin() ? 'true' : 'false' }};
         
                   // Elementos del DOM
          const imagenUploadEmpty = document.getElementById('imagen-upload-empty');
          const imagenUploadAdd = document.getElementById('imagen-upload-add');
          const imagenesContainer = document.querySelector('.card-body .row');
          const uploadContainer = document.querySelector('.upload-container');
          
          // Event listeners para subida de imágenes
          if (imagenUploadEmpty) {
              console.log('Event listener añadido para imagen-upload-empty');
              imagenUploadEmpty.addEventListener('change', function(e) {
                  console.log('Archivo seleccionado en empty:', e.target.files[0]);
                  const file = e.target.files[0];
                  if (file) {
                      subirImagen(file, imagenUploadEmpty);
                  }
              });
          }
          
          if (imagenUploadAdd) {
              console.log('Event listener añadido para imagen-upload-add');
              imagenUploadAdd.addEventListener('change', function(e) {
                  console.log('Archivo seleccionado en add:', e.target.files[0]);
                  const file = e.target.files[0];
                  if (file) {
                      subirImagen(file, imagenUploadAdd);
                  }
              });
          }
         
                             // Función para subir imagen
          function subirImagen(file, inputElement) {
              console.log('Iniciando subida de imagen:', file.name);
              const formData = new FormData();
              formData.append('imagen', file);
              formData.append('cita_id', citaId);
              formData.append('visibilidad', 'publica');
              formData.append('_token', '{{ csrf_token() }}');
              
              console.log('FormData preparado, iniciando fetch...');
              // Mostrar loader
              mostrarLoader();
             
                           fetch('{{ route("cita-imagenes.store") }}', {
                 method: 'POST',
                 body: formData,
                 headers: {
                     'X-Requested-With': 'XMLHttpRequest'
                 }
             })
             .then(response => {
                 console.log('Respuesta recibida:', response);
                 return response.json();
             })
             .then(data => {
                 console.log('Datos recibidos:', data);
                 if (data.success) {
                     // Ocultar mensaje de "no hay imágenes" si existe
                     const noImagesMessage = document.querySelector('.text-center.py-4');
                     if (noImagesMessage) {
                         noImagesMessage.style.display = 'none';
                     }
                     
                     // Añadir nueva imagen al contenedor
                     if (imagenesContainer) {
                         imagenesContainer.innerHTML += crearImagenHTML(data.imagen);
                     } else {
                         // Si no hay contenedor de imágenes, crear uno
                         const cardBody = document.querySelector('.card-body');
                         cardBody.innerHTML = crearContenedorImagenesHTML([data.imagen]);
                     }
                     
                                           // Limpiar input
                      inputElement.value = '';
                     
                     // Mostrar mensaje de éxito
                     mostrarMensaje('Imagen subida exitosamente', 'success');
                 } else {
                     mostrarMensaje(data.message || 'Error al subir la imagen', 'error');
                 }
             })
             .catch(error => {
                 console.error('Error:', error);
                 mostrarMensaje('Error al subir la imagen', 'error');
             })
             .finally(() => {
                 ocultarLoader();
             });
         }
         
         // Función para crear HTML de imagen
         function crearImagenHTML(imagen) {
             const fecha = new Date(imagen.created_at).toLocaleDateString('es-ES') + ' ' + 
                          new Date(imagen.created_at).toLocaleTimeString('es-ES', {hour: '2-digit', minute:'2-digit'});
             
             return `
                 <div class="col-md-6 mb-3" id="imagen-${imagen.id}">
                     <div class="card h-100">
                         <img src="/storage/${imagen.ruta_imagen}" 
                              class="card-img-top" 
                              alt="Imagen de la cita"
                              style="height: 200px; object-fit: cover;">
                         <div class="card-body">
                             <div class="d-flex justify-content-between align-items-center">
                                 <small class="text-muted">${fecha}</small>
                                 ${imagen.es_destacada ? `
                                     <span class="badge bg-warning">
                                         <i class="fas fa-star me-1"></i>Destacada
                                     </span>
                                 ` : ''}
                             </div>
                             <div class="mt-2 d-flex gap-1">
                                 <button type="button" class="btn btn-sm btn-outline-warning toggle-destacada" 
                                         data-imagen-id="${imagen.id}" 
                                         data-destacada="${imagen.es_destacada ? '1' : '0'}"
                                         title="${imagen.es_destacada ? 'Quitar destacada' : 'Marcar como destacada'}">
                                     <i class="fas fa-star${imagen.es_destacada ? '' : '-o'}"></i>
                                 </button>
                                 
                                 ${isAdmin ? `
                                     <button type="button" class="btn btn-sm btn-outline-danger delete-imagen" 
                                             data-imagen-id="${imagen.id}"
                                             title="Eliminar imagen">
                                         <i class="fas fa-trash"></i>
                                     </button>
                                 ` : ''}
                             </div>
                         </div>
                     </div>
                 </div>
             `;
         }
         
         // Función para crear contenedor de imágenes completo
         function crearContenedorImagenesHTML(imagenes) {
             let html = '<div class="row">';
             imagenes.forEach(imagen => {
                 html += crearImagenHTML(imagen);
             });
             html += '</div>';
             return html;
         }
         
         // Event delegation para botones dinámicos
         document.addEventListener('click', function(e) {
             if (e.target.closest('.toggle-destacada')) {
                 const button = e.target.closest('.toggle-destacada');
                 const imagenId = button.dataset.imagenId;
                 const destacadaActual = button.dataset.destacada === '1';
                 
                 toggleDestacada(imagenId, !destacadaActual, button);
             }
             
             if (e.target.closest('.delete-imagen')) {
                 const button = e.target.closest('.delete-imagen');
                 const imagenId = button.dataset.imagenId;
                 
                 if (confirm('¿Estás seguro de eliminar esta imagen?')) {
                     eliminarImagen(imagenId, button);
                 }
             }
         });
         
         // Función para alternar destacada
         function toggleDestacada(imagenId, nuevaDestacada, button) {
                           const url = nuevaDestacada ? 
                  `/cita-imagenes/${imagenId}/destacar` : 
                  `/cita-imagenes/${imagenId}/quitar-destacada`;
             
             fetch(url, {
                 method: 'POST',
                 headers: {
                     'X-CSRF-TOKEN': '{{ csrf_token() }}',
                     'X-Requested-With': 'XMLHttpRequest'
                 }
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
                     // Actualizar botón
                     button.dataset.destacada = nuevaDestacada ? '1' : '0';
                     const icon = button.querySelector('i');
                     icon.className = `fas fa-star${nuevaDestacada ? '' : '-o'}`;
                     button.title = nuevaDestacada ? 'Quitar destacada' : 'Marcar como destacada';
                     
                     // Actualizar badge de destacada
                     const card = button.closest('.card');
                     const badgeContainer = card.querySelector('.d-flex.justify-content-between');
                     let badge = badgeContainer.querySelector('.badge');
                     
                     if (nuevaDestacada) {
                         if (!badge) {
                             badgeContainer.innerHTML += `
                                 <span class="badge bg-warning">
                                     <i class="fas fa-star me-1"></i>Destacada
                                 </span>
                             `;
                         }
                     } else {
                         if (badge) {
                             badge.remove();
                         }
                     }
                     
                     mostrarMensaje(nuevaDestacada ? 'Imagen marcada como destacada' : 'Destacada removida', 'success');
                 } else {
                     mostrarMensaje(data.message || 'Error al cambiar destacada', 'error');
                 }
             })
             .catch(error => {
                 console.error('Error:', error);
                 mostrarMensaje('Error al cambiar destacada', 'error');
             });
         }
         
         // Función para eliminar imagen
         function eliminarImagen(imagenId, button) {
                           fetch(`/cita-imagenes/${imagenId}`, {
                 method: 'DELETE',
                 headers: {
                     'X-CSRF-TOKEN': '{{ csrf_token() }}',
                     'X-Requested-With': 'XMLHttpRequest'
                 }
             })
             .then(response => response.json())
             .then(data => {
                 if (data.success) {
                     // Eliminar elemento del DOM
                     const imagenElement = document.getElementById(`imagen-${imagenId}`);
                     if (imagenElement) {
                         imagenElement.remove();
                     }
                     
                     // Verificar si no quedan imágenes
                     const imagenesRestantes = document.querySelectorAll('.col-md-6.mb-3');
                     if (imagenesRestantes.length === 0) {
                         // Mostrar mensaje de "no hay imágenes"
                         const cardBody = document.querySelector('.card-body');
                                                   cardBody.innerHTML = `
                              <div class="text-center py-4">
                                  <i class="fas fa-images fa-3x text-muted mb-3"></i>
                                  <p class="text-muted mb-3">No hay imágenes subidas para esta cita</p>
                                  <div class="upload-container">
                                      <input type="file" id="imagen-upload-empty" accept="image/*" style="display: none;">
                                      <button type="button" class="btn violet-red--btn tra-black--hover" onclick="document.getElementById('imagen-upload-empty').click();">
                                          <i class="fas fa-upload me-2"></i>Subir Imagen
                                      </button>
                                  </div>
                              </div>
                          `;
                         
                                                   // Re-asignar event listener
                          const newImagenUpload = document.getElementById('imagen-upload-empty');
                          if (newImagenUpload) {
                              newImagenUpload.addEventListener('change', function(e) {
                                  const file = e.target.files[0];
                                  if (file) {
                                      subirImagen(file, newImagenUpload);
                                  }
                              });
                          }
                     }
                     
                     mostrarMensaje('Imagen eliminada exitosamente', 'success');
                 } else {
                     mostrarMensaje(data.message || 'Error al eliminar imagen', 'error');
                 }
             })
             .catch(error => {
                 console.error('Error:', error);
                 mostrarMensaje('Error al eliminar imagen', 'error');
             });
         }
         
         // Funciones auxiliares
         function mostrarLoader() {
             const loader = document.createElement('div');
             loader.className = 'upload-loader show';
             loader.innerHTML = `
                 <div class="spinner-border spinner-border-sm text-violet-red me-2" role="status">
                     <span class="visually-hidden">Subiendo...</span>
                 </div>
                 <span>Subiendo imagen...</span>
             `;
             
             const cardBody = document.querySelector('.card-body');
             cardBody.appendChild(loader);
         }
         
         function ocultarLoader() {
             const loader = document.querySelector('.upload-loader');
             if (loader) {
                 loader.remove();
             }
         }
         
         function mostrarMensaje(mensaje, tipo) {
             // Crear toast o alert temporal
             const alertDiv = document.createElement('div');
             alertDiv.className = `alert alert-${tipo === 'success' ? 'success' : 'danger'} alert-dismissible fade show position-fixed`;
             alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
             alertDiv.innerHTML = `
                 ${mensaje}
                 <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
             `;
             
             document.body.appendChild(alertDiv);
             
             // Auto-remover después de 3 segundos
             setTimeout(() => {
                 if (alertDiv.parentNode) {
                     alertDiv.remove();
                 }
             }, 3000);
         }
     });
     
          @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`);
         });
     }
     

 @endif
  
  @if(!Auth::user()->isAdmin())

  
  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.');
                      location.reload();
                  } 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>
@endsection