@extends('layouts.app')

@section('content')
@include('layouts.title-header', [
    'title' => 'Editar Cita',
    'breadcrumbs' => [
        ['text' => 'Dashboard', 'url' => '/dashboard'],
        ['text' => 'Editar Cita']
    ]
])

<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Editar Cita #{{ $cita->id }}</h4>
                </div>
                <div class="card-body">
                    @include('citas.partials.wizard_form', [
                        'formAction' => Auth::user()->isAdmin() ? route('admin.citas.update', $cita) : route('user.citas.update', $cita),
                        'formMethod' => 'PUT',
                        'showAdminCliente' => Auth::user()->isAdmin(),
                        'usuarios' => $usuarios ?? [],
                        'showAdminEstado' => Auth::user()->isAdmin(),
                        'cancelUrl' => Auth::user()->isAdmin() ? route('admin.citas.index') : route('user.citas.index'),
                        'submitLabel' => 'Guardar cambios',
                        'serviciosCompletosValue' => old('servicios_completos', json_encode($datosCita ?? [])),
                        'fechaCitaDefault' => $cita->fecha_hora?->format('Y-m-d\\TH:i'),
                        'showDebug' => Auth::user()->isAdmin(),
                    ])

                    @include('citas.partials.wizard_modal')
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="{{ asset('js/cita-resumen-render.js') }}" defer></script>
<script src="{{ asset('js/cita-wizard.js') }}" defer></script>
@endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('css/cita.css') }}">
@endsection

@extends('layouts.app')

@section('content')
@include('layouts.title-header', [
    'title' => 'Editar Cita', 
    'breadcrumbs' => [
        ['text' => 'Dashboard', 'url' => '/dashboard'],
        ['text' => 'Editar Cita']
    ]
])

<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h4>Editar Cita #{{ $cita->id }}</h4>
                </div>
                <div class="card-body">
                    <form method="POST" action="{{ Auth::user()->isAdmin() ? route('admin.citas.update', $cita) : route('user.citas.update', $cita) }}">
                        @csrf
                        @method('PUT')
                        
                        @if(Auth::user()->isAdmin())
                            <div class="mb-3">
                                <label for="user_id" class="form-label">Cliente</label>
                                <select class="form-select @error('user_id') is-invalid @enderror" id="user_id" name="user_id" required>
                                    <option value="">Seleccionar cliente</option>
                                    @foreach($usuarios as $usuario)
                                        <option value="{{ $usuario->id }}" {{ old('user_id', $cita->user_id) == $usuario->id ? 'selected' : '' }}>
                                            {{ $usuario->nombre }} {{ $usuario->apellido }} ({{ $usuario->email }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        @endif
                        
                        <div class="mb-4">
                            <label class="form-label">Servicios *</label>
                            @error('servicios')
                                <div class="alert alert-danger">{{ $message }}</div>
                            @enderror
                            
                            <!-- Campo para datos de la cita existente -->
                        <input type="hidden" id="datos_cita_existente" value="{{ json_encode($datosCita) }}">
                        
                        <!-- El campo servicios_completos ya existe y se preserva automáticamente con old() -->
                            
                            <div class="row">
                                <!-- Columna izquierda: Pestañas y contenido -->
                                <div class="col-md-8">
                                    <!-- Pestañas para categorías -->
                                    <ul class="nav nav-tabs" id="serviciosTabs" role="tablist">
                                        @foreach($serviciosOrganizados as $categoria => $serviciosCategoria)
                                            <li class="nav-item" role="presentation">
                                                <button class="nav-link {{ $loop->first ? 'active' : '' }}" 
                                                        id="{{ $categoria }}-tab" 
                                                        data-bs-toggle="tab" 
                                                        data-bs-target="#{{ $categoria }}-content" 
                                                        type="button" 
                                                        role="tab">
                                                    @if($categoria === 'manicura')
                                                        <i class="fas fa-hand-sparkles me-2"></i>
                                                        Manicura
                                                    @elseif($categoria === 'pedicura')
                                                        <i class="fas fa-shoe-prints me-2"></i>
                                                        Pedicura
                                                    @else
                                                        <i class="fas fa-star me-2"></i>
                                                        {{ ucfirst($categoria) }}
                                                    @endif
                                                </button>
                                            </li>
                                        @endforeach
                                    </ul>
                                    
                                    <!-- Contenido de las pestañas -->
                                    <div class="tab-content mt-3" id="serviciosTabsContent">
                                        @foreach($serviciosOrganizados as $categoria => $serviciosCategoria)
                                            <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" 
                                                 id="{{ $categoria }}-content" 
                                                 role="tabpanel">
                                                
                                                <!-- Tipos de servicio -->
                                                @if($serviciosCategoria['tipos']->count() > 0)
                                                    <div class="mb-4">
                                                        <h4 class="fw-bold text-violet-red mb-3">
                                                            <i class="fas fa-palette me-2"></i>
                                                            {{ ucfirst($categoria) }}
                                                        </h4>
                                                        <div class="service-type-selector">
                                                            @foreach($serviciosCategoria['tipos'] as $tipo)
                                                                <div class="service-option" 
                                                                     data-service-id="{{ $tipo->id }}"
                                                                     data-service-name="{{ $tipo->nombre }}"
                                                                     data-service-price="{{ $tipo->precio_base }}"
                                                                     data-service-category="{{ $categoria }}">
                                                                    <div class="service-icon">
                                                                        @if($tipo->nombre == 'Semipermanente')
                                                                            <i class="fas fa-paint-brush"></i>
                                                                        @elseif($tipo->nombre == 'Softgel')
                                                                            <i class="fas fa-gem"></i>
                                                                        @elseif($tipo->nombre == 'Acrigel o PolyGel')
                                                                            <i class="fas fa-layer-group"></i>
                                                                        @elseif($tipo->nombre == 'Acrílicas')
                                                                            <i class="fas fa-crown"></i>
                                                                        @elseif($tipo->nombre == 'Técnica Dipping')
                                                                            <i class="fas fa-hand-sparkles"></i>
                                                                        @else
                                                                            <i class="fas fa-star"></i>
                                                                        @endif
                                                                    </div>
                                                            @if($tipo->imagen)
                                                                <div class="service-image mb-2">
                                                                    <img src="{{ asset($tipo->imagen) }}" 
                                                                         alt="{{ $tipo->nombre }}" 
                                                                         class="img-fluid rounded" 
                                                                         style="max-height: 80px; object-fit: cover;">
                                                                </div>
                                                            @endif
                                                                    <h4>{{ $tipo->nombre }}</h4>
                                                                    <p>{{ $tipo->descripcion }}</p>
                                                                    <div class="service-price">{{ $tipo->precio_formateado }}</div>
                                                            <div class="service-time">
                                                                <i class="fas fa-clock me-1"></i>
                                                                {{ $tipo->tiempo_aproximado ?? 30 }} min
                                                            </div>
                                                                    <div class="service-check">
                                                                        <i class="fas fa-check"></i>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                        
                                                        <!-- Radio buttons ocultos para tipos de servicio -->
                                                        @foreach($serviciosCategoria['tipos'] as $tipo)
                                                            <input type="radio" 
                                                                   name="tipo_{{ $categoria }}" 
                                                                   value="{{ $tipo->id }}" 
                                                                   class="tipo-servicio-radio"
                                                                   data-precio="{{ $tipo->precio_base }}"
                                                                   style="display: none;">
                                                        @endforeach
                                                    </div>
                                                @endif
                                                
                                        <!-- Opciones por uña -->
                                        @if($serviciosCategoria['opciones_uña']->count() > 0)
                                            <div class="mb-4 opciones-uña-section" data-categoria="{{ $categoria }}" style="display: none;">
                                                        <h4 class="fw-bold text-violet-red mb-3">
                                                            <i class="fas fa-hand-sparkles me-2"></i>
                                                    Personaliza tus uñas
                                                        </h4>
                                                        
                                                @if($categoria === 'manicura')
                                                    <!-- Manicura: 2 manos, 5 uñas cada una -->
                                                        <div class="row">
                                                            <div class="col-md-6">
                                                                <div class="card">
                                                                    <div class="card-header">
                                                                        <strong>Mano Izquierda</strong>
                                                                    </div>
                                                                    <div class="card-body">
                                                                        <div class="manos-container">
                                                                            <div class="mano">
                                                                                <div class="svg-container">
                                                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" style="transform: scaleX(-1);">
                                                                                        <g id="Mano">
                                                                                            <image width="1000" height="1000" xlink:href="{{ asset('imagenes/unas/modelos/unasmano1.png') }}"/>
                                                                                        </g>
                                                                                        <g id="Dedos">
                                                                                            <path id="Meñique" class="cls-1" d="M357.59,854.53c3.65,11.42-42.36,24.12-51.83,26.37-2.13,1.3-3.94,3.87-6.94,3.38-3.13-2-6.69.32-10.09-.63-11.67-2.47-16.6-14.69-20.05-24.84a1.87,1.87,0,0,1,.65-2.25c2.1-2.34.69-6.33.09-9.12-8.93-24.34-22-48.68-24.81-74.49.45-2.19.1-4.29,0-6.48,2.28-20.81,14.85-36.3,37.42-35.75,5.27.29,9.69,2.15,14.17,5.09,6.37.57,12.52,7.81,14.58,13.62.06.41.09.66.63.54,3.58-.19,4.19,5.08,6.42,7.18a89,89,0,0,1,12.95,28.24A348.77,348.77,0,0,1,357.59,854.53Z"/>
                                                                                            <path id="Anular" class="cls-1" d="M388.43,641.94c2.84-.5,5.2,1.8,7.87,1.42,3.7-1.18,4.35-.24,6.92,1.72,7.63-1.85,13.43,9.29,14.58,15.2,26.7,18.27,34.86,54.74,49.54,82.81,3.73,15.59,25.78,54.12,14.17,65.84-16.37,18-42.06,25.36-66,26-12.95.9-18.91-9.58-24.89-19.15-19-28.72-30.79-62.11-43.59-94-8.72-22.43-8.44-51,11.18-67C365,644.7,378.17,645.2,388.43,641.94Z"/>
                                                                                            <path id="Medio" class="cls-1" d="M561.17,653c-.15,4-.1,8.88-3,11.91a9,9,0,0,0-2.31,3.74c-1.09,4.9-5.57,6.43-9.29,8.89-11.88,7.06-24.85,13-38.59,14.87-.36,0-.88-.13-1.06.34-1.94,2.15-7.18,1.27-9.79,2.24-42.84,2.36-38.78-21-51-52.71C435.22,611.92,422.5,581,422.49,548.4c.55-25,25.45-42.9,49.42-44.4,3,.18,6.28-.44,9.18.47,5.53,2.93,12.18,1.66,17.53,4.81,27,16.72,37.44,63,48.43,92.06C550.21,619.08,559.84,635,561.17,653Z"/>
                                                                                            <path id="Indice" class="cls-1" d="M598.31,524.57c-10.67-.62-25.56,3-33.83-5.72-6.17-27.14-11.42-54.51-14.91-82.16-7-46.56-4-89,51.83-85.12,51.52,8.55,47.19,87.1,55.69,128.13C661.31,515.73,624.81,519.07,598.31,524.57Z"/>
                                                                                            <path id="Pulgar" class="cls-1" d="M553.15,618.92v-8.83c.07-.08.21-.16.21-.24.32-4.36,1.77-8.41,3.28-12.46,1.62-4.34,3-8.75,3.15-13.45a46.24,46.24,0,0,1,.46-6.22c2.26-13.11,3.75-26.49,9-38.86,2.63-6.78,6.72-9.13,13.31-11.54,17-5.87,35,.83,50.39,8.33,16.92,8.39,29.56,13.72,47.59,19.29,4,3.62,13.83,8.75,19.19,12.25,7.36,4.81,10.91,7.21,17.62,14.73,3.46,5.56,10.5,11.58,15.22,16.12,8.73,8.4,12.81,18.8,13.3,30.75q0,3.62,0,7.22c-1.16,16.36-5.42,33.81-17.59,45.54-4.18,4-9.18,6.44-14.46,8.5a94.67,94.67,0,0,1-22.19,5.71H688c-18.93-2.22-38.22-3.88-56.28-10.37a173.47,173.47,0,0,1-19.46-8.92c-8.92-4.6-18.48-7.89-26.89-13.58-9.76-6.65-21.86-11.73-25.88-23.28a133.16,133.16,0,0,1-4.62-14.17C554.47,624,553.71,620.38,553.15,618.92Z"/>
                                                                                        </g>
                                                                                        
                                                                                        <!-- Imágenes superpuestas para cada uña -->
                                                                                        <!-- Índice -->
                                                                                    <image x="639" y="535" width="100" height="230" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                           transform="rotate(175, 650, 555)" preserveAspectRatio="none" class="uña-clickeable" data-mano="izquierda" data-dedo="indice"/>
                                                                                        
                                                                                        <!-- Medio -->
                                                                                    <image x="656" y="678" width="110" height="230" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                           transform="rotate(162, 615, 687.5)" preserveAspectRatio="none" class="uña-clickeable" data-mano="izquierda" data-dedo="medio"/>
                                                                                        
                                                                                        <!-- Anular -->
                                                                                    <image x="520" y="380" width="110" height="230" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                           transform="rotate(156, 467.5, 605)" preserveAspectRatio="none" class="uña-clickeable" data-mano="izquierda" data-dedo="anular"/>
                                                                                        
                                                                                        <!-- Meñique -->
                                                                                    <image x="665" y="376" width="88" height="190" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                           transform="rotate(156, 467.5, 605)" preserveAspectRatio="none" class="uña-clickeable" data-mano="izquierda" data-dedo="meñique"/>

                                                                                        <!-- Pulgar -->
                                                                                    <image x="613" y="465" width="140" height="230" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                           transform="rotate(-80, 685, 625)" preserveAspectRatio="none" class="uña-clickeable" data-mano="izquierda" data-dedo="pulgar"/>
                                                                                    </svg>
                                                                                </div>
                                                                                <div class="seleccion-info">
                                                                                    <h6>Selecciones Mano Izquierda:</h6>
                                                                                <div id="selecciones-izquierda" class="small"></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            
                                                            <div class="col-md-6">
                                                                <div class="card">
                                                                    <div class="card-header">
                                                                        <strong>Mano Derecha</strong>
                                                                    </div>
                                                                    <div class="card-body">
                                                                        <div class="manos-container">
                                                                            <div class="mano">
                                                                                <div class="svg-container">
                                                                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000">
                                                                                        <g id="Mano">
                                                                                            <image width="1000" height="1000" xlink:href="{{ asset('imagenes/unas/modelos/unasmano1.png') }}"/>
                                                                                        </g>
                                                                                        <g id="Dedos">
                                                                                            <path id="Meñique" class="cls-1" d="M357.59,854.53c3.65,11.42-42.36,24.12-51.83,26.37-2.13,1.3-3.94,3.87-6.94,3.38-3.13-2-6.69.32-10.09-.63-11.67-2.47-16.6-14.69-20.05-24.84a1.87,1.87,0,0,1,.65-2.25c2.1-2.34.69-6.33.09-9.12-8.93-24.34-22-48.68-24.81-74.49.45-2.19.1-4.29,0-6.48,2.28-20.81,14.85-36.3,37.42-35.75,5.27.29,9.69,2.15,14.17,5.09,6.37.57,12.52,7.81,14.58,13.62.06.41.09.66.63.54,3.58-.19,4.19,5.08,6.42,7.18a89,89,0,0,1,12.95,28.24A348.77,348.77,0,0,1,357.59,854.53Z"/>
                                                                                            <path id="Anular" class="cls-1" d="M388.43,641.94c2.84-.5,5.2,1.8,7.87,1.42,3.7-1.18,4.35-.24,6.92,1.72,7.63-1.85,13.43,9.29,14.58,15.2,26.7,18.27,34.86,54.74,49.54,82.81,3.73,15.59,25.78,54.12,14.17,65.84-16.37,18-42.06,25.36-66,26-12.95.9-18.91-9.58-24.89-19.15-19-28.72-30.79-62.11-43.59-94-8.72-22.43-8.44-51,11.18-67C365,644.7,378.17,645.2,388.43,641.94Z"/>
                                                                                            <path id="Medio" class="cls-1" d="M561.17,653c-.15,4-.1,8.88-3,11.91a9,9,0,0,0-2.31,3.74c-1.09,4.9-5.57,6.43-9.29,8.89-11.88,7.06-24.85,13-38.59,14.87-.36,0-.88-.13-1.06.34-1.94,2.15-7.18,1.27-9.79,2.24-42.84,2.36-38.78-21-51-52.71C435.22,611.92,422.5,581,422.49,548.4c.55-25,25.45-42.9,49.42-44.4,3,.18,6.28-.44,9.18.47,5.53,2.93,12.18,1.66,17.53,4.81,27,16.72,37.44,63,48.43,92.06C550.21,619.08,559.84,635,561.17,653Z"/>
                                                                                            <path id="Indice" class="cls-1" d="M598.31,524.57c-10.67-.62-25.56,3-33.83-5.72-6.17-27.14-11.42-54.51-14.91-82.16-7-46.56-4-89,51.83-85.12,51.52,8.55,47.19,87.1,55.69,128.13C661.31,515.73,624.81,519.07,598.31,524.57Z"/>
                                                                                            <path id="Pulgar" class="cls-1" d="M553.15,618.92v-8.83c.07-.08.21-.16.21-.24.32-4.36,1.77-8.41,3.28-12.46,1.62-4.34,3-8.75,3.15-13.45a46.24,46.24,0,0,1,.46-6.22c2.26-13.11,3.75-26.49,9-38.86,2.63-6.78,6.72-9.13,13.31-11.54,17-5.87,35,.83,50.39,8.33,16.92,8.39,29.56,13.72,47.59,19.29,4,3.62,13.83,8.75,19.19,12.25,7.36,4.81,10.91,7.21,17.62,14.73,3.46,5.56,10.5,11.58,15.22,16.12,8.73,8.4,12.81,18.8,13.3,30.75q0,3.62,0,7.22c-1.16,16.36-5.42,33.81-17.59,45.54-4.18,4-9.18,6.44-14.46,8.5a94.67,94.67,0,0,1-22.19,5.71H688c-18.93-2.22-38.22-3.88-56.28-10.37a173.47,173.47,0,0,1-19.46-8.92c-8.92-4.6-18.48-7.89-26.89-13.58-9.76-6.65-21.86-11.73-25.88-23.28a133.16,133.16,0,0,1-4.62-14.17C554.47,624,553.71,620.38,553.15,618.92Z"/>
                                                                                        </g>
                                                                                        
                                                                                        <!-- Imágenes superpuestas para cada uña -->
                                                                                        <!-- Índice -->
                                                                                        <image x="40" y="510" width="100" height="230" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                               transform="rotate(175, 350, 555)" preserveAspectRatio="none" class="uña-clickeable" data-mano="derecha" data-dedo="indice"/>
                                                                                        
                                                                                        <!-- Medio -->
                                                                                        <image x="205" y="608" width="110" height="230" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                               transform="rotate(162, 385, 687.5)" preserveAspectRatio="none" class="uña-clickeable" data-mano="derecha" data-dedo="medio"/>
                                                                                        
                                                                                        <!-- Anular -->
                                                                                        <image x="645" y="405" width="110" height="230" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                               transform="rotate(156, 532.5, 605)" preserveAspectRatio="none" class="uña-clickeable" data-mano="derecha" data-dedo="anular"/>
                                                                                        
                                                                                        <!-- Meñique -->
                                                                                        <image x="790" y="401" width="88" height="190" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                               transform="rotate(156, 532.5, 605)" preserveAspectRatio="none" class="uña-clickeable" data-mano="derecha" data-dedo="meñique"/>

                                                                                        <!-- Pulgar -->
                                                                                        <image x="308" y="830" width="140" height="230" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                               transform="rotate(-80, 315, 625)" preserveAspectRatio="none" class="uña-clickeable" data-mano="derecha" data-dedo="pulgar"/>
                                                                                    </svg>
                                                                                </div>
                                                                                <div class="seleccion-info">
                                                                                    <h6>Selecciones Mano Derecha:</h6>
                                                                                <div id="selecciones-derecha" class="small"></div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                            </div>
                                                        </div>
                                                    </div>

                                        <!-- Botones de selección rápida para manicura -->
                                        @if($categoria === 'manicura')
                                            <div class="mt-4">
                                                <div class="card">
                                                    <div class="card-body">
                                                        <h6 class="text-violet-red mb-3">
                                                            <i class="fas fa-magic me-2"></i>
                                                            ¿Aún no te decides por la combinación de uñas perfecta?
                                                        </h6>
                                                        <p class="text-muted mb-3">
                                                            Prueba nuestras combinaciones más elegidas y recomendadas
                                                        </p>
                                                        <div class="d-flex gap-2 flex-wrap">
                                                            <button type="button" class="btn violet-red--btn tra-black--hover btn-sm combinacion-btn" data-combinacion="combinado1">
                                                                <i class="fas fa-palette me-1"></i>
                                                                Relieve
                                                            </button>
                                                            <button type="button" class="btn violet-red--btn tra-black--hover btn-sm combinacion-btn" data-combinacion="nailart">
                                                                <i class="fas fa-star me-1"></i>
                                                                NailArt
                                                            </button>
                                                            <button type="button" class="btn violet-red--btn tra-black--hover btn-sm combinacion-btn" data-combinacion="combinado2">
                                                                <i class="fas fa-gem me-1"></i>
                                                                Combinado
                                                            </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endif
                                        

                                                @elseif($categoria === 'pedicura')
                                                    <!-- Pedicura: 2 pies, solo pulgares -->
                                                    
                                                    <!-- Mensaje informativo -->
                                                    <div class="alert alert-info mb-4">
                                                        <div class="d-flex align-items-center">
                                                            <i class="fas fa-info-circle me-3" style="font-size: 1.2em; color: #17a2b8;"></i>
                                                            <div>
                                                                <strong>Información importante:</strong>
                                                                <br>
                                                                En los pies únicamente se puede seleccionar una uña (el pulgar), ya que debido al tamaño de las otras uñas, al ser demasiado pequeñas únicamente podrán ser lisas o francesas.
                                                 </div>
                                                        </div>
                                                    </div>
                                                    
                                                 <div class="row">
                                                        <div class="col-md-6">
                                                             <div class="card">
                                                                 <div class="card-header">
                                                                    <strong>Pie Izquierdo</strong>
                                                                 </div>
                                                                 <div class="card-body">
                                                                    <div class="manos-container">
                                                                        <div class="mano">
                                                                            <div class="svg-container">
                                                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 753">
                                                                                    <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>
                                                                                    
                                                                                    <!-- Imagen superpuesta para el pulgar -->
                                                                                    <image x="790" y="75" width="210" height="210" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                           preserveAspectRatio="none" class="uña-clickeable" data-mano="pie1" data-dedo="pulgar"/>
                                                                                </svg>
                                                                                 </div>
                                                                            <div class="seleccion-info">
                                                                                <h6>Selecciones Pie Izquierdo:</h6>
                                                                                <div id="selecciones-pie1" class="small"></div>
                                                                         </div>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="col-md-6">
                                                            <div class="card">
                                                                <div class="card-header">
                                                                    <strong>Pie Derecho</strong>
                                                                </div>
                                                                <div class="card-body">
                                                                    <div class="manos-container">
                                                                        <div class="mano">
                                                                            <div class="svg-container">
                                                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 753" style="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>
                                                                                    
                                                                                    <!-- Imagen superpuesta para el pulgar -->
                                                                                    <image x="790" y="75" width="210" height="210" xlink:href="{{ asset('imagenes/unas/default.png') }}" 
                                                                                           preserveAspectRatio="none" class="uña-clickeable" data-mano="pie2" data-dedo="pulgar"/>
                                                                                </svg>
                                                                            </div>
                                                                            <div class="seleccion-info">
                                                                                <h6>Selecciones Pie Derecho:</h6>
                                                                                <div id="selecciones-pie2" class="small"></div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                 </div>
                                                    </div>
                                                @endif
                                             </div>
                                         @endif
                                        

                                                
                                                <!-- Servicios adicionales -->
                                                @if($serviciosCategoria['adicionales']->count() > 0)
                                                    <div class="mb-4 servicios-adicionales-section" data-categoria="{{ $categoria }}" style="display: none;">
                                                        <h4 class="fw-bold text-violet-red mb-3">
                                                            <i class="fas fa-plus-circle me-2"></i>
                                                            Servicios adicionales
                                                        </h4>
                                                        <div class="row">
                                                            @foreach($serviciosCategoria['adicionales'] as $adicional)
                                                                <div class="col-md-6 mb-3">
                                                                    <div class="card h-100">
                                                                        <div class="card-body">
                                                                            <div class="form-check">
                                                                                <input class="form-check-input servicio-checkbox" 
                                                                                       type="checkbox" 
                                                                                       name="servicios[]" 
                                                                                       value="{{ $adicional->id }}" 
                                                                                       id="servicio_{{ $adicional->id }}"
                                                                                       data-precio="{{ $adicional->precio_base }}"
                                                                                       data-categoria="{{ $categoria }}"
                                                                               {{ in_array($adicional->id, old('servicios', [])) ? 'checked' : '' }}>
                                                                                <label class="form-check-label" for="servicio_{{ $adicional->id }}">
                                                                                    <strong>{{ $adicional->nombre }}</strong>
                                                                                    <br>
                                                                                    <small class="text-muted">{{ $adicional->descripcion }}</small>
                                                                                    <br>
                                                                                    <span class="badge bg-warning">{{ $adicional->precio_formateado }}</span>
                                                        <small class="d-block text-muted mt-1">
                                                            <i class="fas fa-clock me-1"></i>
                                                            {{ $adicional->tiempo_aproximado ?? 15 }} min
                                                        </small>
                                                                                </label>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                
                                <!-- Columna derecha: Fecha/Hora, Notas, Resumen y Botones -->
                                <div class="col-md-4">
                                    <!-- Fecha y Hora -->
                                    <div class="card mb-3">
                                        <div class="card-header bg-violet-red text-white">
                                            <h6 class="mb-0">
                                                <i class="fas fa-calendar-alt me-2"></i>
                                                Fecha y Hora
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="fecha_hora" class="form-label">Fecha y Hora</label>
                            <input type="datetime-local" class="form-control @error('fecha_hora') is-invalid @enderror" id="fecha_hora" name="fecha_hora" value="{{ old('fecha_hora', now()->addDays(2)->format('Y-m-d\TH:i')) }}" required>
                                                @error('fecha_hora')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Notas -->
                                    <div class="card mb-3">
                                        <div class="card-header bg-violet-red text-white">
                                            <h6 class="mb-0">
                                                <i class="fas fa-sticky-note me-2"></i>
                                                Notas
                                            </h6>
                                        </div>
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label for="notas" class="form-label">Notas adicionales</label>
                                                <textarea class="form-control @error('notas') is-invalid @enderror" id="notas" name="notas" rows="3" placeholder="Agrega cualquier nota o comentario adicional...">{{ old('notas') }}</textarea>
                                                @error('notas')
                                                    <div class="invalid-feedback">{{ $message }}</div>
                                                @enderror
                                            </div>
                                        </div>
                        </div>
                        
                                    <!-- Resumen de precios -->
                                    <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-calculator me-2"></i>
                                                Resumen de tu cita
                                            </h5>
                                        </div>
                                        <div class="card-body">
                                            <!-- Servicios seleccionados -->
                                            <div id="servicios-seleccionados" class="mb-3">
                                                <h6 class="text-muted">Servicios seleccionados:</h6>
                                                <div id="lista-servicios" class="small">
                                                    <em class="text-muted">Ningún servicio seleccionado</em>
                                                </div>
                                            </div>
                                            
                                            <!-- Resumen de precios -->
                                            <div class="border-top pt-3">
                                                <div class="d-flex justify-content-between mb-2">
                                                    <span>Subtotal:</span>
                                                    <span id="subtotal">$0.00</span>
                                                </div>
                                                <div class="d-flex justify-content-between mb-2">
                                                    <span>Descuentos:</span>
                                                    <span id="descuentos-totales" class="text-success">-$0.00</span>
                                                </div>
                                                <div class="d-flex justify-content-between mb-3 border-top pt-2">
                                                    <strong>Total final:</strong>
                                                    <strong id="total-estimado" class="text-success">$0.00</strong>
                                                </div>
                                                
                                                <!-- Sección de descuentos aplicados -->
                                                <div id="descuentos-aplicados" class="mt-3" style="display: none;">
                                                    <h6 class="text-success">
                                                        <i class="fas fa-tags me-2"></i>
                                                        Descuentos aplicados:
                                                    </h6>
                                                    <div id="lista-descuentos" class="small"></div>
                                                </div>
                                                
                                                <!-- Información unificada sobre descuentos -->
                                                <div class="mt-3 pt-3 border-top">
                                                    <div class="card border-0" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); cursor: pointer;" 
                                                         data-bs-toggle="collapse" 
                                                         data-bs-target="#infoDescuentos" 
                                                         aria-expanded="false" 
                                                         aria-controls="infoDescuentos">
                                                        <div class="card-body p-3">
                                                            <div class="d-flex align-items-center justify-content-between">
                                                                <div class="d-flex align-items-center">
                                                                    <div class="me-3">
                                                                        <i class="fas fa-lightbulb text-warning" style="font-size: 1.2rem;"></i>
                                                                    </div>
                                                                    <div>
                                                                        <h6 class="mb-0 text-primary fw-bold">
                                                                            <i class="fas fa-percentage me-1"></i>
                                                                            Cómo funcionan nuestros descuentos
                                                                        </h6>
                                                                    </div>
                                                                </div>
                                                                <div>
                                                                    <i class="fas fa-chevron-down text-muted" id="iconInfoDescuentos"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    
                                                    <!-- Contenido colapsible -->
                                                    <div class="collapse" id="infoDescuentos">
                                                        <div class="card border-0 mt-2" style="background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);">
                                                            <div class="card-body p-3">
                                                                <p class="mb-2 small text-muted">
                                                                    Queremos que ahorres en cada cita:
                                                                </p>
                                                                <div class="row g-2 mb-2">
                                                                    <div class="col-12">
                                                                        <div class="d-flex align-items-center mb-1">
                                                                            <i class="fas fa-star text-warning me-2"></i>
                                                                            <small class="text-dark">Descuento por nivel de usuario: Se aplica automáticamente.</small>
                                                                        </div>
                                                                        <div class="d-flex align-items-center mb-1">
                                                                            <i class="fas fa-user-check text-success me-2"></i>
                                                                            <small class="text-dark">Una promoción por cita: Siempre elegimos la que más te ahorre.</small>
                                                                        </div>
                                                                        <div class="d-flex align-items-center mb-1">
                                                                            <i class="fas fa-clock text-info me-2"></i>
                                                                            <small class="text-dark">Tiempos de espera: Algunas ofertas requieren un breve periodo antes de volver a usarse.</small>
                                                                        </div>
                                                                        <div class="d-flex align-items-center mb-2">
                                                                            <i class="fas fa-list text-primary me-2"></i>
                                                                            <small class="text-dark">Consulta todas las promociones: En "Ver todas las promociones" verás las que tienes activas.</small>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <p class="mb-0 small text-muted">
                                                                    📌 En resumen: tú reservas, nosotros nos aseguramos de que pagues lo menos posible.
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Estado (solo para administradores) -->
                                    @if(Auth::user()->isAdmin())
                                        <div class="card mt-3">
                                            <div class="card-header bg-warning text-dark">
                                                <h6 class="mb-0">
                                                    <i class="fas fa-cog me-2"></i>
                                                    Estado de la Cita
                                                </h6>
                                            </div>
                                            <div class="card-body">
                                                <div class="mb-3">
                                                    <label for="estado" class="form-label">Estado</label>
                                                    <select class="form-select @error('estado') is-invalid @enderror" id="estado" name="estado" required>
                                                        @foreach(App\Models\Cita::getEstados() as $key => $value)
                                        <option value="{{ $key }}" {{ old('estado', 'pendiente') == $key ? 'selected' : '' }}>
                                                                {{ $value }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('estado')
                                                        <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                        </div>
                        @else
                                        <div class="alert alert-info mt-3">
                                <i class="fas fa-info-circle me-2"></i>
                                Tu cita será revisada por un administrador antes de ser confirmada.
                                        </div>
                                    @endif
                                    
                                    <!-- Botones -->
                                    <div class="card mt-3">
                                        <div class="card-body">
                                            <div class="d-grid gap-2">
                            <button type="submit" class="btn violet-red--btn tra-black--hover" id="submit-btn">Guardar Cita</button>
                                                <button type="button" class="btn btn-warning violet-red--btn tra-black--hover" onclick="resetearSelecciones()">Resetear Selecciones</button>
                                                <a href="{{ Auth::user()->isAdmin() ? route('admin.citas.index') : route('user.citas.index') }}" class="btn btn-secondary violet-red--btn tra-black--hover">Cancelar</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        

                        
                        <!-- Campo unificado para todos los servicios -->
                        <input type="hidden" name="servicios_completos" id="servicios_completos" value="{{ old('servicios_completos', '') }}">
                        
                        <!-- DEBUG: Mostrar campos ocultos para desarrollo (solo para administradores) -->
                        @if(Auth::user()->isAdmin())
                        <div class="mt-4 p-3 bg-light border rounded">
                            <h6 class="text-muted">🔍 DEBUG - Campos Ocultos:</h6>
                            <div class="row">
                                <div class="col-md-6">
                                    <small><strong>Servicios completos:</strong> <span id="debug-servicios-completos" class="text-primary">[]</span></small><br>
                                </div>
                                <div class="col-md-6">
                                    <small><strong>Subtotal:</strong> <span id="debug-subtotal" class="text-warning">$0.00</span></small><br>
                                    <small><strong>Descuentos:</strong> <span id="debug-descuentos" class="text-danger">$0.00</span></small><br>
                                    <small><strong>Total final:</strong> <span id="debug-total" class="text-success">$0.00</span></small>
                                </div>
                            </div>
                        </div>
                        @endif
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Elementos del DOM
    const checkboxes = document.querySelectorAll('.servicio-checkbox');
    const radioButtons = document.querySelectorAll('.tipo-servicio-radio');
    const subtotalSpan = document.getElementById('subtotal');
    const totalSpan = document.getElementById('total-estimado');
    const descuentosTotalesSpan = document.getElementById('descuentos-totales');
    const submitBtn = document.getElementById('submit-btn');
    const descuentosAplicados = document.getElementById('descuentos-aplicados');
    const listaDescuentos = document.getElementById('lista-descuentos');
    
    // Función para cargar datos de la cita existente al formulario
    function cargarDatosCitaExistente() {
        console.log('🔄 CARGANDO DATOS DE LA CITA EXISTENTE...');
        
        // Obtener datos de la cita existente
        const datosCitaElement = document.getElementById('datos_cita_existente');
        if (!datosCitaElement || !datosCitaElement.value) {
            console.log('No hay datos de la cita para cargar');
            return;
        }
        
        try {
            const datosCita = JSON.parse(datosCitaElement.value);
            console.log('Datos de la cita encontrados:', datosCita);
            
            // Restaurar tipos de servicio seleccionados
            if (datosCita.tipos_seleccionados) {
                Object.keys(datosCita.tipos_seleccionados).forEach(categoria => {
                    const tipos = datosCita.tipos_seleccionados[categoria];
                    tipos.forEach(tipoId => {
                        const radio = document.querySelector(`input[name="tipo_${categoria}"][value="${tipoId}"]`);
                        if (radio) {
                            radio.checked = true;
                            console.log(`✅ Restaurado tipo de servicio: ${categoria} - ${tipoId}`);
                            
                            // Agregar clase selected al elemento visual service-option
                            const serviceOption = document.querySelector(`.service-option[data-service-id="${tipoId}"]`);
                    if (serviceOption) {
                        serviceOption.classList.add('selected');
                                console.log(`✅ Clase selected agregada a service-option: ${categoria} - ${tipoId}`);
                            } else {
                                console.log(`❌ Service-option no encontrado: ${categoria} - ${tipoId}`);
                            }
                            
                            // Mostrar sección de opciones de uña si corresponde
                            const opcionesSection = document.querySelector(`.opciones-uña-section[data-categoria="${categoria}"]`);
                            if (opcionesSection) {
                                opcionesSection.style.display = 'block';
                                console.log(`✅ Mostrada sección de opciones para ${categoria}`);
                            }
                        }
                    });
                });
            }
            
            // Restaurar servicios adicionales seleccionados
            if (datosCita.servicios_adicionales) {
                datosCita.servicios_adicionales.forEach(servicioId => {
                    const checkbox = document.querySelector(`.servicio-checkbox[value="${servicioId}"]`);
                    if (checkbox) {
                        checkbox.checked = true;
                        console.log(`✅ Restaurado servicio adicional: ${servicioId}`);
                    }
                });
            }
            
            // Restaurar selecciones de uñas
            if (datosCita.opciones_por_uña) {
                // Restaurar manos (convertir servicio_id a id para compatibilidad)
                if (datosCita.opciones_por_uña.izquierda) {
                    selecciones.izquierda = {};
                    Object.keys(datosCita.opciones_por_uña.izquierda).forEach(dedo => {
                        const opcion = datosCita.opciones_por_uña.izquierda[dedo];
                        selecciones.izquierda[dedo] = {
                            id: opcion.servicio_id || opcion.id, // Usar servicio_id si existe, sino id
                            nombre: opcion.nombre,
                            precio: opcion.precio,
                            imagen: opcion.imagen
                        };
                    });
                    console.log('✅ Restauradas selecciones mano izquierda:', selecciones.izquierda);
                }
                
                if (datosCita.opciones_por_uña.derecha) {
                    selecciones.derecha = {};
                    Object.keys(datosCita.opciones_por_uña.derecha).forEach(dedo => {
                        const opcion = datosCita.opciones_por_uña.derecha[dedo];
                        selecciones.derecha[dedo] = {
                            id: opcion.servicio_id || opcion.id, // Usar servicio_id si existe, sino id
                            nombre: opcion.nombre,
                            precio: opcion.precio,
                            imagen: opcion.imagen
                        };
                    });
                    console.log('✅ Restauradas selecciones mano derecha:', selecciones.derecha);
                }
                
                // Restaurar pies (convertir servicio_id a id para compatibilidad)
                if (datosCita.opciones_por_uña.pie1) {
                    selecciones.pie1 = {};
                    Object.keys(datosCita.opciones_por_uña.pie1).forEach(dedo => {
                        const opcion = datosCita.opciones_por_uña.pie1[dedo];
                        selecciones.pie1[dedo] = {
                            id: opcion.servicio_id || opcion.id, // Usar servicio_id si existe, sino id
                            nombre: opcion.nombre,
                            precio: opcion.precio,
                            imagen: opcion.imagen
                        };
                    });
                    console.log('✅ Restauradas selecciones pie izquierdo:', selecciones.pie1);
                }
                
                if (datosCita.opciones_por_uña.pie2) {
                    selecciones.pie2 = {};
                    Object.keys(datosCita.opciones_por_uña.pie2).forEach(dedo => {
                        const opcion = datosCita.opciones_por_uña.pie2[dedo];
                        selecciones.pie2[dedo] = {
                            id: opcion.servicio_id || opcion.id, // Usar servicio_id si existe, sino id
                            nombre: opcion.nombre,
                            precio: opcion.precio,
                            imagen: opcion.imagen
                        };
                    });
                    console.log('✅ Restauradas selecciones pie derecho:', selecciones.pie2);
                }
                
                // Actualizar imágenes visuales con delay para asegurar que el DOM esté listo
                setTimeout(() => {
                    console.log('🔄 Actualizando imágenes de uñas después de restauración...');
                    
                    // Verificar que las secciones de pedicura estén visibles
                    const seccionPedicura = document.querySelector('.opciones-uña-section[data-categoria="pedicura"]');
                    if (seccionPedicura) {
                        seccionPedicura.style.display = 'block';
                        console.log('✅ Sección de pedicura mostrada para restauración');
                    }
                    
                    // Verificar elementos de pies en el DOM antes de actualizar
                    console.log('🔍 Verificando elementos de pies en el DOM:');
                    const elementosPie1 = document.querySelectorAll('[data-mano="pie1"]');
                    const elementosPie2 = document.querySelectorAll('[data-mano="pie2"]');
                    console.log('Elementos pie1 encontrados:', elementosPie1.length);
                    console.log('Elementos pie2 encontrados:', elementosPie2.length);
                    
                    // Actualizar imágenes
                    actualizarImagenesUñas();
                    
                    // Verificar específicamente las imágenes de los pies después de actualizar
                    console.log('🔍 Verificando imágenes de pies después de restauración:');
                    console.log('Selecciones pie1:', selecciones.pie1);
                    console.log('Selecciones pie2:', selecciones.pie2);
                    
                    // Verificar elementos de pies en el DOM
                    Object.keys(selecciones.pie1).forEach(dedo => {
                        const uñaElement = document.querySelector(`[data-mano="pie1"][data-dedo="${dedo}"]`);
                        if (uñaElement) {
                            console.log(`Pie1 - ${dedo}:`, uñaElement.getAttribute('xlink:href'));
                        } else {
                            console.log(`❌ Elemento pie1 - ${dedo} no encontrado`);
                        }
                    });
                    
                    Object.keys(selecciones.pie2).forEach(dedo => {
                        const uñaElement = document.querySelector(`[data-mano="pie2"][data-dedo="${dedo}"]`);
                        if (uñaElement) {
                            console.log(`Pie2 - ${dedo}:`, uñaElement.getAttribute('xlink:href'));
                        } else {
                            console.log(`❌ Elemento pie2 - ${dedo} no encontrado`);
                        }
                    });
                    
                    console.log('✅ Imágenes de uñas actualizadas después de restauración');
                }, 200);
            }
            
            // Restaurar descuentos aplicados
            if (datosCita.descuentos && datosCita.descuentos.detalles) {
                descuentosAplicadosSeleccionados = {};
                datosCita.descuentos.detalles.forEach(descuento => {
                    descuentosAplicadosSeleccionados[descuento.nombre] = descuento;
                });
                console.log('✅ Restaurados descuentos aplicados:', descuentosAplicadosSeleccionados);
            }
            
            // Actualizar visualización y cálculos
        actualizarSelecciones();
            recalcularTodo();
            
            console.log('✅ Estado del formulario restaurado completamente');
            
        } catch (error) {
            console.error('❌ Error al cargar datos de la cita:', error);
        }
    }

    // Función para restaurar el estado del formulario en caso de error de validación
    function restaurarEstadoFormulario() {
        console.log('🔄 RESTAURANDO ESTADO DEL FORMULARIO...');
        
        // Obtener datos del campo servicios_completos (que se preserva automáticamente con old())
        const serviciosCompletosElement = document.getElementById('servicios_completos');
        if (!serviciosCompletosElement || !serviciosCompletosElement.value) {
            console.log('No hay datos previos para restaurar');
            return;
        }
        
        try {
            const datosAnteriores = JSON.parse(serviciosCompletosElement.value);
            console.log('Datos anteriores encontrados:', datosAnteriores);
            
            // Restaurar tipos de servicio seleccionados
            if (datosAnteriores.tipos_seleccionados) {
                Object.keys(datosAnteriores.tipos_seleccionados).forEach(categoria => {
                    const tipos = datosAnteriores.tipos_seleccionados[categoria];
                    tipos.forEach(tipoId => {
                        const radio = document.querySelector(`input[name="tipo_${categoria}"][value="${tipoId}"]`);
                        if (radio) {
                            radio.checked = true;
                            console.log(`✅ Restaurado tipo de servicio: ${categoria} - ${tipoId}`);
                            
                            // Agregar clase selected al elemento visual service-option
                            const serviceOption = document.querySelector(`.service-option[data-service-id="${tipoId}"]`);
                            if (serviceOption) {
                                serviceOption.classList.add('selected');
                                console.log(`✅ Clase selected agregada a service-option: ${categoria} - ${tipoId}`);
                            } else {
                                console.log(`❌ Service-option no encontrado: ${categoria} - ${tipoId}`);
                            }
                            
                            // Mostrar sección de opciones de uña si corresponde
                            const opcionesSection = document.querySelector(`.opciones-uña-section[data-categoria="${categoria}"]`);
                            if (opcionesSection) {
                                opcionesSection.style.display = 'block';
                                console.log(`✅ Mostrada sección de opciones para ${categoria}`);
                            }
                        }
                    });
                });
            }
            
            // Restaurar servicios adicionales seleccionados
            if (datosAnteriores.servicios_adicionales) {
                datosAnteriores.servicios_adicionales.forEach(servicioId => {
                    const checkbox = document.querySelector(`.servicio-checkbox[value="${servicioId}"]`);
                    if (checkbox) {
                        checkbox.checked = true;
                        console.log(`✅ Restaurado servicio adicional: ${servicioId}`);
                    }
                });
            }
            
            // Restaurar selecciones de uñas
            if (datosAnteriores.opciones_por_uña) {
                // Restaurar manos (convertir servicio_id a id para compatibilidad)
                if (datosAnteriores.opciones_por_uña.izquierda) {
                    selecciones.izquierda = {};
                    Object.keys(datosAnteriores.opciones_por_uña.izquierda).forEach(dedo => {
                        const opcion = datosAnteriores.opciones_por_uña.izquierda[dedo];
                        selecciones.izquierda[dedo] = {
                            id: opcion.servicio_id || opcion.id, // Usar servicio_id si existe, sino id
                            nombre: opcion.nombre,
                            precio: opcion.precio,
                            imagen: opcion.imagen
                        };
                    });
                    console.log('✅ Restauradas selecciones mano izquierda:', selecciones.izquierda);
                }
                
                if (datosAnteriores.opciones_por_uña.derecha) {
                    selecciones.derecha = {};
                    Object.keys(datosAnteriores.opciones_por_uña.derecha).forEach(dedo => {
                        const opcion = datosAnteriores.opciones_por_uña.derecha[dedo];
                        selecciones.derecha[dedo] = {
                            id: opcion.servicio_id || opcion.id, // Usar servicio_id si existe, sino id
                            nombre: opcion.nombre,
                            precio: opcion.precio,
                            imagen: opcion.imagen
                        };
                    });
                    console.log('✅ Restauradas selecciones mano derecha:', selecciones.derecha);
                }
                
                // Restaurar pies (convertir servicio_id a id para compatibilidad)
                if (datosAnteriores.opciones_por_uña.pie1) {
                    selecciones.pie1 = {};
                    Object.keys(datosAnteriores.opciones_por_uña.pie1).forEach(dedo => {
                        const opcion = datosAnteriores.opciones_por_uña.pie1[dedo];
                        selecciones.pie1[dedo] = {
                            id: opcion.servicio_id || opcion.id, // Usar servicio_id si existe, sino id
                            nombre: opcion.nombre,
                            precio: opcion.precio,
                            imagen: opcion.imagen
                        };
                    });
                    console.log('✅ Restauradas selecciones pie izquierdo:', selecciones.pie1);
                }
                
                if (datosAnteriores.opciones_por_uña.pie2) {
                    selecciones.pie2 = {};
                    Object.keys(datosAnteriores.opciones_por_uña.pie2).forEach(dedo => {
                        const opcion = datosAnteriores.opciones_por_uña.pie2[dedo];
                        selecciones.pie2[dedo] = {
                            id: opcion.servicio_id || opcion.id, // Usar servicio_id si existe, sino id
                            nombre: opcion.nombre,
                            precio: opcion.precio,
                            imagen: opcion.imagen
                        };
                    });
                    console.log('✅ Restauradas selecciones pie derecho:', selecciones.pie2);
                }
            }
            
            // Restaurar descuentos aplicados
            if (datosAnteriores.descuentos && datosAnteriores.descuentos.detalles) {
                descuentosAplicadosSeleccionados = {};
                datosAnteriores.descuentos.detalles.forEach(descuento => {
                    descuentosAplicadosSeleccionados[descuento.nombre] = descuento;
                });
                console.log('✅ Restaurados descuentos aplicados:', descuentosAplicadosSeleccionados);
            }
            
            // Actualizar visualización
            actualizarImagenesUñas();
            actualizarSelecciones();
            recalcularTodo();
            
        } catch (error) {
            console.error('❌ Error al restaurar estado del formulario:', error);
        }
    }
    
    // Cargar datos de la cita existente
    cargarDatosCitaExistente();
    
    // Si hay datos de old() (errores de validación), restaurar el estado del formulario
    const serviciosCompletosElement = document.getElementById('servicios_completos');
    if (serviciosCompletosElement && serviciosCompletosElement.value) {
        console.log('🔄 Detectados datos de old(), restaurando estado del formulario...');
        restaurarEstadoFormulario();
    }
    
    // Datos del usuario
    // Variable para almacenar el porcentaje de descuento del usuario (se actualiza dinámicamente)
    let userDiscountPercentage = {{ Auth::user()->getDiscountPercentage() }};
    
    console.log('=== INICIALIZACIÓN ===');
    console.log('Elementos encontrados:', {
        checkboxes: checkboxes.length,
        radioButtons: radioButtons.length,
        //opcionUñaRadioButtons: opcionUñaRadioButtons.length
    });
    
    // Verificar radio buttons por categoría
    console.log('Radio buttons por categoría:');
    ['manicura', 'pedicura'].forEach(categoria => {
        const radios = document.querySelectorAll(`input[name="tipo_${categoria}"]`);
        console.log(`- ${categoria}: ${radios.length} radio buttons`);
        radios.forEach((radio, index) => {
            console.log(`  ${index + 1}. ${radio.value} - ${radio.checked ? 'marcado' : 'desmarcado'}`);
        });
    });
    
    // Función para recolectar todos los servicios seleccionados
    function recolectarServiciosSeleccionados() {
        const serviciosSeleccionados = [];
        
        // Recolectar checkboxes
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                serviciosSeleccionados.push(checkbox.value);
            }
        });
        
        // Recolectar radio buttons de tipos de servicio
        radioButtons.forEach(radio => {
            if (radio.checked) {
                serviciosSeleccionados.push(radio.value);
            }
        });
        
        // Recolectar radio buttons de opciones de uña (para pedicura)
        // Nota: Las opciones de uñas se recolectan desde la variable selecciones
        // No necesitamos opcionUñaRadioButtons ya que no existen
        
        // Recolectar selecciones de uñas de manicura (del modal)
        Object.keys(selecciones.izquierda).forEach(dedo => {
            const opcion = selecciones.izquierda[dedo];
            if (opcion && opcion.id) {
                serviciosSeleccionados.push(opcion.id);
                console.log(`Añadido servicio de uña izquierda: ${opcion.nombre} (ID: ${opcion.id})`);
            }
        });
        
        Object.keys(selecciones.derecha).forEach(dedo => {
            const opcion = selecciones.derecha[dedo];
            if (opcion && opcion.id) {
                serviciosSeleccionados.push(opcion.id);
                console.log(`Añadido servicio de uña derecha: ${opcion.nombre} (ID: ${opcion.id})`);
            }
        });
        
        // Recolectar selecciones de uñas de pedicura (del modal)
        Object.keys(selecciones.pie1).forEach(dedo => {
            const opcion = selecciones.pie1[dedo];
            if (opcion && opcion.id) {
                serviciosSeleccionados.push(opcion.id);
                console.log(`Añadido servicio de uña pie1: ${opcion.nombre} (ID: ${opcion.id})`);
            }
        });
        
        Object.keys(selecciones.pie2).forEach(dedo => {
            const opcion = selecciones.pie2[dedo];
            if (opcion && opcion.id) {
                serviciosSeleccionados.push(opcion.id);
                console.log(`Añadido servicio de uña pie2: ${opcion.nombre} (ID: ${opcion.id})`);
            }
        });
        
        console.log('Servicios recolectados:', serviciosSeleccionados);
        return serviciosSeleccionados;
    }
    
    // Función para calcular el subtotal
    function calcularSubtotal() {
        let subtotal = 0;
        
        // Sumar checkboxes
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                subtotal += parseFloat(checkbox.dataset.precio);
            }
        });
        
        // Sumar radio buttons de tipos
        radioButtons.forEach(radio => {
            if (radio.checked) {
                subtotal += parseFloat(radio.dataset.precio);
            }
        });
        
        // Sumar radio buttons de opciones de uña (para pedicura)
        // Nota: Las opciones de uñas se suman desde la variable selecciones
        // No necesitamos opcionUñaRadioButtons ya que no existen
        
        // Sumar selecciones de uñas de manicura (del modal)
        Object.keys(selecciones.izquierda).forEach(dedo => {
            const opcion = selecciones.izquierda[dedo];
            if (opcion && opcion.precio) {
                subtotal += parseFloat(opcion.precio);
                console.log(`Sumando precio de uña izquierda ${dedo}: ${opcion.precio}`);
            }
        });
        
        Object.keys(selecciones.derecha).forEach(dedo => {
            const opcion = selecciones.derecha[dedo];
            if (opcion && opcion.precio) {
                subtotal += parseFloat(opcion.precio);
                console.log(`Sumando precio de uña derecha ${dedo}: ${opcion.precio}`);
            }
        });
        
        // Sumar selecciones de uñas de pedicura (del modal)
        Object.keys(selecciones.pie1).forEach(dedo => {
            const opcion = selecciones.pie1[dedo];
            if (opcion && opcion.precio) {
                subtotal += parseFloat(opcion.precio);
                console.log(`Sumando precio de uña pie1 ${dedo}: ${opcion.precio}`);
            }
        });
        
        Object.keys(selecciones.pie2).forEach(dedo => {
            const opcion = selecciones.pie2[dedo];
            if (opcion && opcion.precio) {
                subtotal += parseFloat(opcion.precio);
                console.log(`Sumando precio de uña pie2 ${dedo}: ${opcion.precio}`);
            }
        });
        
        console.log('Subtotal calculado:', subtotal);
        return subtotal;
    }
    
    // Función para actualizar el UI
    function actualizarUI(subtotal) {
        if (subtotalSpan) {
            subtotalSpan.textContent = '$' + subtotal.toFixed(2);
            console.log('UI actualizado - Subtotal:', subtotalSpan.textContent);
        }
        
        // Actualizar lista de servicios seleccionados
        actualizarListaServicios();
    }
    
    // Función para actualizar la lista de servicios seleccionados
    function actualizarListaServicios() {
        console.log('=== ACTUALIZANDO LISTA DE SERVICIOS ===');
        const listaServicios = document.getElementById('lista-servicios');
        const serviciosSeleccionados = recolectarServiciosSeleccionados();
        
        // Verificar si hay algún tipo de selección (servicios o uñas)
        const tieneServicios = serviciosSeleccionados.length > 0;
        const tieneUñasManicura = Object.keys(selecciones.izquierda).length > 0 || Object.keys(selecciones.derecha).length > 0;
        const tieneUñasPedicura = Object.keys(selecciones.pie1).length > 0 || Object.keys(selecciones.pie2).length > 0;
        
        console.log('Estado de selecciones:', {
            tieneServicios,
            tieneUñasManicura,
            tieneUñasPedicura,
            serviciosSeleccionados: serviciosSeleccionados.length,
            seleccionesIzquierda: Object.keys(selecciones.izquierda).length,
            seleccionesDerecha: Object.keys(selecciones.derecha).length,
            seleccionesPie1: Object.keys(selecciones.pie1).length,
            seleccionesPie2: Object.keys(selecciones.pie2).length
        });
        
        if (!tieneServicios && !tieneUñasManicura && !tieneUñasPedicura) {
            listaServicios.innerHTML = '<em class="text-muted">Ningún servicio seleccionado</em>';
            console.log('No hay selecciones, mostrando mensaje por defecto');
            return;
        }
        
        let html = '';
        
        // Procesar cada categoría (manicura, pedicura)
        ['manicura', 'pedicura'].forEach(categoria => {
            const serviciosCategoria = [];
            const uñasIzquierda = [];
            const uñasDerecha = [];
            const uñasPie1 = [];
            const uñasPie2 = [];
            const serviciosAdicionales = [];
            
            // Recolectar tipos de servicio para esta categoría
            serviciosSeleccionados.forEach(servicioId => {
                const radioButton = document.querySelector(`input[name="tipo_${categoria}"][value="${servicioId}"]`);
                if (radioButton) {
                    // Buscar el service-option correspondiente usando el data-service-id
                    const serviceOption = document.querySelector(`.service-option[data-service-id="${servicioId}"]`);
                    const nombre = serviceOption?.getAttribute('data-service-name') || 'Servicio';
                    const precio = parseFloat(radioButton.dataset.precio || 0);
                    serviciosCategoria.push({ nombre, precio });
                }
            });
            
            // Recolectar uñas seleccionadas (solo para manicura)
            if (categoria === 'manicura') {
                console.log('Procesando uñas de manicura:', {
                    izquierda: Object.keys(selecciones.izquierda),
                    derecha: Object.keys(selecciones.derecha)
                });
                
                Object.keys(selecciones.izquierda).forEach(dedo => {
                    const opcion = selecciones.izquierda[dedo];
                    if (opcion && opcion.nombre) {
                        uñasIzquierda.push({ 
                            nombre: `${opcion.nombre} (${dedo})`, 
                            precio: parseFloat(opcion.precio || 0)
                        });
                        console.log(`Añadida uña izquierda: ${opcion.nombre} (${dedo})`);
                    }
                });
                
                Object.keys(selecciones.derecha).forEach(dedo => {
                    const opcion = selecciones.derecha[dedo];
                    if (opcion && opcion.nombre) {
                        uñasDerecha.push({ 
                            nombre: `${opcion.nombre} (${dedo})`, 
                            precio: parseFloat(opcion.precio || 0)
                        });
                        console.log(`Añadida uña derecha: ${opcion.nombre} (${dedo})`);
                    }
                });
            }
            
            // Recolectar uñas seleccionadas (solo para pedicura)
            if (categoria === 'pedicura') {
                console.log('Procesando uñas de pedicura:', {
                    pie1: Object.keys(selecciones.pie1),
                    pie2: Object.keys(selecciones.pie2)
                });
                
                Object.keys(selecciones.pie1).forEach(dedo => {
                    const opcion = selecciones.pie1[dedo];
                    if (opcion && opcion.nombre) {
                        uñasPie1.push({ 
                            nombre: `${opcion.nombre} (${dedo})`, 
                            precio: parseFloat(opcion.precio || 0)
                        });
                        console.log(`Añadida uña pie1: ${opcion.nombre} (${dedo})`);
                    }
                });
                
                Object.keys(selecciones.pie2).forEach(dedo => {
                    const opcion = selecciones.pie2[dedo];
                    if (opcion && opcion.nombre) {
                        uñasPie2.push({ 
                            nombre: `${opcion.nombre} (${dedo})`, 
                            precio: parseFloat(opcion.precio || 0)
                        });
                        console.log(`Añadida uña pie2: ${opcion.nombre} (${dedo})`);
                    }
                });
            }
            
            // Recolectar servicios adicionales
            document.querySelectorAll(`input[name="servicios[]"]:checked`).forEach(checkbox => {
                const checkboxCategoria = checkbox.dataset.categoria;
                if (checkboxCategoria === categoria) {
                    const nombre = checkbox.closest('.form-check')?.querySelector('.form-check-label strong')?.textContent?.trim() || 'Servicio adicional';
                    const precio = parseFloat(checkbox.dataset.precio || 0);
                    serviciosAdicionales.push({ nombre, precio });
                }
            });
            
            // Mostrar categoría si hay servicios, uñas o servicios adicionales
            const tieneContenido = serviciosCategoria.length > 0 || uñasIzquierda.length > 0 || uñasDerecha.length > 0 || uñasPie1.length > 0 || uñasPie2.length > 0 || serviciosAdicionales.length > 0;
            
            if (tieneContenido) {
                html += `<div class="mb-3"><strong>${categoria.charAt(0).toUpperCase() + categoria.slice(1)}:</strong></div>`;
                
                // Servicios principales
                serviciosCategoria.forEach(servicio => {
                    html += `<div class="d-flex justify-content-between small mb-1 ms-3">
                        <span>${servicio.nombre}</span>
                        <span>$${servicio.precio.toFixed(2)}</span>
                    </div>`;
                });
                
                // Uñas mano izquierda
                if (uñasIzquierda.length > 0) {
                    html += `<div class="small mb-1 ms-3"><strong>Mano Izquierda:</strong></div>`;
                    uñasIzquierda.forEach(uña => {
                        html += `<div class="d-flex justify-content-between small mb-1 ms-5">
                            <span>${uña.nombre}</span>
                            <span>$${uña.precio.toFixed(2)}</span>
                        </div>`;
                    });
                }
                
                // Uñas mano derecha
                if (uñasDerecha.length > 0) {
                    html += `<div class="small mb-1 ms-3"><strong>Mano Derecha:</strong></div>`;
                    uñasDerecha.forEach(uña => {
                        html += `<div class="d-flex justify-content-between small mb-1 ms-5">
                            <span>${uña.nombre}</span>
                            <span>$${uña.precio.toFixed(2)}</span>
                        </div>`;
                    });
                }
                
                // Uñas pie 1
                if (uñasPie1.length > 0) {
                    html += `<div class="small mb-1 ms-3"><strong>Pie Izquierdo:</strong></div>`;
                    uñasPie1.forEach(uña => {
                        html += `<div class="d-flex justify-content-between small mb-1 ms-5">
                            <span>${uña.nombre}</span>
                            <span>$${uña.precio.toFixed(2)}</span>
                        </div>`;
                    });
                }
                
                // Uñas pie 2
                if (uñasPie2.length > 0) {
                    html += `<div class="small mb-1 ms-3"><strong>Pie Derecho:</strong></div>`;
                    uñasPie2.forEach(uña => {
                        html += `<div class="d-flex justify-content-between small mb-1 ms-5">
                            <span>${uña.nombre}</span>
                            <span>$${uña.precio.toFixed(2)}</span>
                        </div>`;
                    });
                }
                
                // Servicios adicionales
                if (serviciosAdicionales.length > 0) {
                    html += `<div class="small mb-1 ms-3"><strong>Servicios adicionales:</strong></div>`;
                    serviciosAdicionales.forEach(servicio => {
                        html += `<div class="d-flex justify-content-between small mb-1 ms-5">
                            <span>${servicio.nombre}</span>
                            <span>$${servicio.precio.toFixed(2)}</span>
                        </div>`;
                    });
                }
            }
        });
        
        console.log('HTML generado para lista de servicios:', html);
        listaServicios.innerHTML = html;
        console.log('Lista de servicios actualizada');
    }
    
            // Función para calcular descuentos
        function calcularDescuentos(subtotal, serviciosSeleccionados) {
            if (serviciosSeleccionados.length === 0) {
                // Limpiar descuentos y total cuando no hay servicios
                descuentosTotalesSpan.textContent = '-$0.00';
                totalSpan.textContent = '$0.00';
                descuentosAplicados.style.display = 'none';
                return;
            }
            
            console.log('Calculando descuentos para servicios:', serviciosSeleccionados);
            
            // Preparar datos para enviar al servidor
            const datos = {
                servicios: serviciosSeleccionados,
                fecha: new Date().toISOString().split('T')[0]
            };
            
            // Si es admin y hay un cliente seleccionado, enviar el user_id
            @if(Auth::user()->isAdmin())
            const userSelectForDiscounts = document.getElementById('user_id');
            if (userSelectForDiscounts && userSelectForDiscounts.value) {
                datos.user_id = parseInt(userSelectForDiscounts.value);
            }
            @endif
            
            fetch('{{ route("citas.calcular-descuentos") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify(datos)
            })
        .then(response => response.json())
        .then(data => {
            console.log('Respuesta del servidor:', data);
            
            // Actualizar UI con datos del servidor
            if (data.subtotal !== undefined) {
                subtotalSpan.textContent = '$' + data.subtotal.toFixed(2);
            }
            descuentosTotalesSpan.textContent = '-$' + (data.descuento_total || 0).toFixed(2);
            totalSpan.textContent = '$' + (data.total_final || 0).toFixed(2);
            
            console.log('💰 ACTUALIZACIÓN DE PRECIOS:', {
                subtotal: data.subtotal,
                descuento_total: data.descuento_total,
                total_final: data.total_final,
                descuento_nivel: data.descuento_nivel,
                promociones_disponibles: data.promociones_disponibles,
                promociones_no_disponibles: data.promociones_no_disponibles
            });
            
            // Actualizar servicios_completos con los nuevos datos del servidor
            actualizarServiciosCompletosConDatosServidor(data);
            
            // Mostrar descuentos
            mostrarDescuentos(data);
        })
        .catch(error => {
            console.error('Error al calcular descuentos:', error);
        });
    }
    
    // Función para actualizar servicios_completos con datos del servidor
    function actualizarServiciosCompletosConDatosServidor(data) {
        console.log('🔧 ACTUALIZANDO SERVICIOS_COMPLETOS CON DATOS DEL SERVIDOR:', data);
        
        // Obtener el objeto servicios_completos actual
        const serviciosCompletosElement = document.getElementById('servicios_completos');
        let serviciosCompletos = {};
        
        if (serviciosCompletosElement && serviciosCompletosElement.value) {
            try {
                serviciosCompletos = JSON.parse(serviciosCompletosElement.value);
            } catch (e) {
                console.error('Error parsing servicios_completos:', e);
            }
        }
        
        // Actualizar subtotal y total_final con datos del servidor
        serviciosCompletos.subtotal = data.subtotal || 0;
        serviciosCompletos.total_final = data.total_final || 0;
        
        // Crear estructura de descuentos unificada
        const descuentos = {
            total: data.descuento_total || 0,
            detalles: []
        };
        
        // Agregar descuento por nivel
        if (data.descuento_nivel > 0) {
            // Actualizar el porcentaje de descuento con los datos del servidor
            const descuentoPorcentaje = data.nivel_usuario?.descuento_porcentaje || userDiscountPercentage;
            userDiscountPercentage = descuentoPorcentaje; // Actualizar variable global
            
            descuentos.detalles.push({
                nombre: "Descuento por Nivel",
                descripcion: `Descuento por nivel (${descuentoPorcentaje}%)`,
                tipo: "porcentaje",
                valor: descuentoPorcentaje,
                monto: data.descuento_nivel,
                aplicada: true,
                condicion_tipo: "nivel_usuario",
                condicion_valor: {
                    nivel_id: data.nivel_usuario?.nivel_id || {{ Auth::user()->level_id ?? 'null' }},
                    nivel_nombre: data.nivel_usuario?.nombre || "{{ Auth::user()->level->nombre ?? 'Sin nivel' }}",
                    porcentaje: descuentoPorcentaje
                }
            });
        }
        
        // Agregar promociones aplicadas (solo las disponibles)
        if (data.promociones_disponibles) {
            data.promociones_disponibles.forEach(promocion => {
                if (promocion.aplicada) {
                    descuentos.detalles.push({
                        nombre: promocion.nombre,
                        descripcion: promocion.descripcion,
                        tipo: promocion.tipo,
                        valor: promocion.valor_descuento,
                        monto: promocion.descuento_calculado || 0,
                        aplicada: true,
                        condicion_tipo: promocion.condicion_tipo,
                        condicion_valor: promocion.condicion_valor
                    });
                }
            });
        }
        
        // Actualizar descuentos en servicios_completos
        serviciosCompletos.descuentos = descuentos;
        
        // Guardar servicios_completos actualizado
        if (serviciosCompletosElement) {
            serviciosCompletosElement.value = JSON.stringify(serviciosCompletos);
            console.log('✅ servicios_completos actualizado con datos del servidor:', serviciosCompletos);
        }
        
        // Los campos ocultos financieros ya están incluidos en servicios_completos
        
        // Actualizar debug display
        const debugSubtotal = document.getElementById('debug-subtotal');
        const debugDescuentos = document.getElementById('debug-descuentos');
        const debugTotal = document.getElementById('debug-total');
        
        if (debugSubtotal) debugSubtotal.textContent = '$' + (data.subtotal || 0).toFixed(2);
        if (debugDescuentos) {
            const descuentoTotal = (data.descuento_total || 0).toFixed(2);
            const porcentajeTotal = data.subtotal > 0 ? ((data.descuento_total || 0) / data.subtotal * 100).toFixed(1) : 0;
            debugDescuentos.textContent = `$${descuentoTotal} (${porcentajeTotal}%)`;
        }
        if (debugTotal) debugTotal.textContent = '$' + (data.total_final || 0).toFixed(2);
        
        console.log('💰 DEBUG DISPLAY ACTUALIZADO CON DATOS DEL SERVIDOR:', {
            subtotal: data.subtotal,
            descuento_total: data.descuento_total,
            total_final: data.total_final
        });
        
        // Actualizar debug display de servicios_completos
        const debugElement = document.getElementById('debug-servicios-completos');
        if (debugElement) {
            debugElement.textContent = JSON.stringify(serviciosCompletos, null, 2);
        }
    }
    
    // Función para actualizar debug display con valores de servicios_completos
    function actualizarDebugDisplay() {
        console.log('🔍 ACTUALIZANDO DEBUG DISPLAY CON SERVICIOS_COMPLETOS');
        
        // Obtener datos de servicios_completos
        const serviciosCompletosElement = document.getElementById('servicios_completos');
        const debugServiciosCompletos = document.getElementById('debug-servicios-completos');
        const debugSubtotal = document.getElementById('debug-subtotal');
        const debugDescuentos = document.getElementById('debug-descuentos');
        const debugTotal = document.getElementById('debug-total');
        
        if (serviciosCompletosElement && serviciosCompletosElement.value) {
            try {
                const serviciosCompletos = JSON.parse(serviciosCompletosElement.value);
                
                // Actualizar debug servicios completos
                if (debugServiciosCompletos) {
                    debugServiciosCompletos.textContent = serviciosCompletosElement.value;
                    console.log('✅ Debug servicios completos actualizado');
                }
                
                // Actualizar debug subtotal
                if (debugSubtotal) {
                    debugSubtotal.textContent = '$' + (serviciosCompletos.subtotal || 0).toFixed(2);
                    console.log('✅ Debug subtotal actualizado:', serviciosCompletos.subtotal);
                }
                
                // Actualizar debug descuentos
                if (debugDescuentos) {
                    const descuentoTotal = serviciosCompletos.descuentos?.total || 0;
                    const subtotal = serviciosCompletos.subtotal || 0;
                    const porcentajeTotal = subtotal > 0 ? (descuentoTotal / subtotal * 100).toFixed(1) : 0;
                    debugDescuentos.textContent = `$${descuentoTotal.toFixed(2)} (${porcentajeTotal}%)`;
                    console.log('✅ Debug descuentos actualizado:', descuentoTotal);
                }
                
                // Actualizar debug total final
                if (debugTotal) {
                    debugTotal.textContent = '$' + (serviciosCompletos.total_final || 0).toFixed(2);
                    console.log('✅ Debug total actualizado:', serviciosCompletos.total_final);
                }
                
            } catch (e) {
                console.error('❌ Error parsing servicios_completos:', e);
                
                // Resetear valores en caso de error
                if (debugSubtotal) debugSubtotal.textContent = '$0.00';
                if (debugDescuentos) debugDescuentos.textContent = '$0.00 (0%)';
                if (debugTotal) debugTotal.textContent = '$0.00';
            }
        } else {
            // Si no hay servicios_completos, resetear valores
            if (debugServiciosCompletos) debugServiciosCompletos.textContent = '{}';
            if (debugSubtotal) debugSubtotal.textContent = '$0.00';
            if (debugDescuentos) debugDescuentos.textContent = '$0.00 (0%)';
            if (debugTotal) debugTotal.textContent = '$0.00';
            console.log('🔄 No hay servicios_completos, debug display reseteado');
        }
        
        console.log('🎯 DEBUG DISPLAY ACTUALIZADO CON SERVICIOS_COMPLETOS');
    }
    
    // Función para mostrar descuentos con colores específicos
    function mostrarDescuentos(data) {
        let html = '';
        let hayDescuentos = false;
        
        console.log('🎁 MOSTRANDO DESCUENTOS:', data);
        
        // 1. Mostrar descuento por nivel (color dorado)
        if (data.descuento_nivel > 0 && data.nivel_usuario) {
            const descuentoNivel = parseFloat(data.descuento_nivel || 0);
            const porcentajeNivel = data.nivel_usuario.descuento_porcentaje || 0;
            const nombreNivel = data.nivel_usuario.nombre || 'Nivel de Usuario';
            
            html += `<div class="alert py-2 mb-2" style="background-color: #fff3cd; border-color: #ffeaa7; color: #856404;">
                <i class="fas fa-star me-2" style="color: #f39c12;"></i>
                <strong>Descuento por Nivel (${nombreNivel}):</strong> -$${descuentoNivel.toFixed(2)} (${porcentajeNivel}%)
            </div>`;
            hayDescuentos = true;
            console.log(`⭐ Descuento por nivel: ${nombreNivel} (${porcentajeNivel}%) - $${descuentoNivel.toFixed(2)}`);
        }
        
        // 2. Mostrar promociones disponibles (enfoque híbrido)
        if (data.promociones_disponibles && data.promociones_disponibles.length > 0) {
            console.log('📋 Promociones disponibles:', data.promociones_disponibles.length);
            
            // Mostrar solo la promoción que se aplica (la de mayor descuento)
            data.promociones_disponibles.forEach((descuento, index) => {
                const descuentoCalculado = parseFloat(descuento.descuento_calculado || 0);
                
                html += `<div class="alert alert-success py-2 mb-2">
                    <i class="fas fa-check-circle me-2"></i>
                    <strong>${descuento.nombre} (APLICADA):</strong> -$${descuentoCalculado.toFixed(2)} (${descuento.valor_descuento}${descuento.tipo === 'porcentaje' ? '%' : '$'})
                </div>`;
                hayDescuentos = true;
                console.log(`✅ Promoción aplicada: ${descuento.nombre} - $${descuentoCalculado.toFixed(2)}`);
            });
        }
        
        // 3. Mostrar sección expandible de promociones no disponibles
        if (data.promociones_no_disponibles && data.promociones_no_disponibles.length > 0) {
            console.log('🔒 Promociones no disponibles:', data.promociones_no_disponibles.length);
            
            html += `<div class="mt-3">
                <small class="text-muted">
                    <i class="fas fa-list me-1"></i>
                    <a href="#" data-bs-toggle="collapse" data-bs-target="#promocionesNoDisponibles" aria-expanded="false" aria-controls="promocionesNoDisponibles" style="text-decoration: none; color: #6c757d;">
                        Ver todas las promociones (${data.promociones_no_disponibles.length})
                    </a>
                </small>
                <div class="collapse mt-2" id="promocionesNoDisponibles">
                    <div class="card card-body" style="background-color: #f8f9fa; border-color: #dee2e6;">
                        <small class="text-muted mb-2">
                            <i class="fas fa-info-circle me-1"></i>
                            Otras promociones disponibles y bloqueadas
                        </small>`;
            
            data.promociones_no_disponibles.forEach((descuento, index) => {
                const descuentoCalculado = parseFloat(descuento.descuento_calculado || 0);
                const esPromocionNoAplicada = descuento.mensaje && descuento.mensaje.includes('no aplicada');
                
                if (esPromocionNoAplicada) {
                    // Promoción disponible pero no aplicada por tener menor descuento
                    html += `<div class="alert py-2 mb-2" style="background-color: #ffffff; border-color: #28a745; color: #155724;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-gift me-2" style="color: #28a745;"></i>
                                <strong>${descuento.nombre}:</strong> -$${descuentoCalculado.toFixed(2)} (${descuento.valor_descuento}${descuento.tipo === 'porcentaje' ? '%' : '$'})
                            </div>
                            <small class="text-success">
                                <i class="fas fa-info-circle me-1"></i>
                                Disponible
                            </small>
                        </div>
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            No aplicada - menor descuento que la promoción actual
                        </small>
                    </div>`;
                } else {
                    // Promoción no disponible por tiempo de espera
                    html += `<div class="alert py-2 mb-2" style="background-color: #ffffff; border-color: #dee2e6; color: #6c757d;">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <i class="fas fa-lock me-2" style="color: #6c757d;"></i>
                                <strong>${descuento.nombre}:</strong> ${descuento.valor_descuento}${descuento.tipo === 'porcentaje' ? '%' : '$'}
                            </div>
                            <small class="text-muted">
                                <i class="fas fa-calendar-alt me-1"></i>
                                ${descuento.mensaje}
                            </small>
                        </div>
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Tiempo de espera: ${descuento.tiempo_espera_dias} días
                        </small>
                    </div>`;
                }
            });
            
            html += `</div>
                </div>
            </div>`;
            
            hayDescuentos = true;
        }
        
        if (!data.promociones_disponibles || data.promociones_disponibles.length === 0) {
            console.log('ℹ️ No hay promociones disponibles');
        }
        
        if (hayDescuentos) {
            listaDescuentos.innerHTML = html;
            descuentosAplicados.style.display = 'block';
            
            // Mostrar información adicional de promociones si hay promociones con tiempo de espera
            const infoPromocionesText = document.getElementById('info-promociones-text');
            if (infoPromocionesText && data.promociones_no_disponibles?.length > 0) {
                infoPromocionesText.style.display = 'inline';
            }
            
            console.log('✅ Sección de descuentos mostrada con colores específicos');
        } else {
            descuentosAplicados.style.display = 'none';
            
            // Ocultar información adicional de promociones si no hay descuentos
            const infoPromocionesText = document.getElementById('info-promociones-text');
            if (infoPromocionesText) {
                infoPromocionesText.style.display = 'none';
            }
            
            console.log('ℹ️ No hay descuentos para mostrar');
        }
    }
    
    // Función principal para recalcular todo
    function recalcularTodo() {
        console.log('=== RECALCULANDO TODO ===');
        
        // Recolectar servicios completos (incluye todo)
        const serviciosCompletos = recolectarServiciosCompletos();
        const serviciosSeleccionados = recolectarServiciosSeleccionados();
        const subtotal = serviciosCompletos.subtotal || calcularSubtotal();
        
        console.log('Servicios completos:', serviciosCompletos);
        console.log('Servicios seleccionados:', serviciosSeleccionados);
        console.log('Subtotal:', subtotal);
        
        // Actualizar UI inmediatamente
        actualizarUI(subtotal);
        
        // Actualizar debug display con valores de campos ocultos
        actualizarDebugDisplay();
        
        // Actualizar visibilidad de secciones de opciones por uña y servicios adicionales
        actualizarVisibilidadSecciones();
        
        // Calcular descuentos si hay servicios seleccionados
        if (serviciosSeleccionados.length > 0) {
            calcularDescuentos(subtotal, serviciosSeleccionados);
        } else {
            // Limpiar descuentos y total cuando no hay servicios
            descuentosTotalesSpan.textContent = '-$0.00';
            totalSpan.textContent = '$0.00';
            descuentosAplicados.style.display = 'none';
        }
        
        // Habilitar/deshabilitar botón
        if (serviciosSeleccionados.length > 0) {
            submitBtn.disabled = false;
            submitBtn.classList.remove('btn-secondary');
            submitBtn.classList.add('violet-red--btn', 'tra-black--hover');
        } else {
            submitBtn.disabled = true;
            submitBtn.classList.remove('violet-red--btn', 'tra-black--hover');
            submitBtn.classList.add('btn-secondary');
        }
    }
    
    // Event listeners
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            console.log('➕ SERVICIO ADICIONAL SELECCIONADO:', {
                id: this.id,
                name: this.name,
                value: this.value,
                checked: this.checked,
                categoria: this.getAttribute('data-categoria')
            });
            recalcularTodo();
        });
    });
    
    radioButtons.forEach(radio => {
        radio.addEventListener('change', function() {
            console.log('🎯 TIPO DE SERVICIO SELECCIONADO:', {
                id: this.id,
                name: this.name,
                value: this.value,
                checked: this.checked,
                categoria: this.getAttribute('data-categoria')
            });
            recalcularTodo();
        });
    });
    
    // Las opciones de uñas se actualizan automáticamente cuando se seleccionan
    // No necesitamos event listeners para opcionUñaRadioButtons ya que no existen
    
    // Funcionalidad para el icono de información de descuentos
    document.addEventListener('DOMContentLoaded', function() {
        const infoDescuentos = document.getElementById('infoDescuentos');
        const iconInfoDescuentos = document.getElementById('iconInfoDescuentos');
        
        if (infoDescuentos && iconInfoDescuentos) {
            infoDescuentos.addEventListener('show.bs.collapse', function() {
                iconInfoDescuentos.classList.remove('fa-chevron-down');
                iconInfoDescuentos.classList.add('fa-chevron-up');
            });
            
            infoDescuentos.addEventListener('hide.bs.collapse', function() {
                iconInfoDescuentos.classList.remove('fa-chevron-up');
                iconInfoDescuentos.classList.add('fa-chevron-down');
            });
        }
    });
    
    // Event listener para cambio de cliente (solo para admins)
    @if(Auth::user()->isAdmin())
    const userSelectForRecalculation = document.getElementById('user_id');
    if (userSelectForRecalculation) {
        userSelectForRecalculation.addEventListener('change', function() {
            console.log('Cliente cambiado a:', this.value);
            recalcularTodo();
        });
    }
    @endif
    
    // Delegación de eventos para opciones de uña
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('opcion-uña-radio')) {
            console.log('🎨 OPCIÓN DE UÑA SELECCIONADA:', {
                id: e.target.id,
                name: e.target.name,
                value: e.target.value,
                checked: e.target.checked,
                dedo: e.target.getAttribute('data-dedo'),
                mano: e.target.getAttribute('data-mano')
            });
            recalcularTodo();
        }
    });
    
    // Función unificada para recolectar todos los servicios
    function recolectarServiciosCompletos() {
        console.log('=== RECOLECTANDO SERVICIOS COMPLETOS ===');
        
        // Recolectar servicios adicionales (checkboxes)
        const serviciosAdicionales = [];
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                serviciosAdicionales.push(parseInt(checkbox.value));
            }
        });
        
        // Recolectar tipos seleccionados por categoría
        const tiposSeleccionados = {
            manicura: [],
            pedicura: []
        };
        
        radioButtons.forEach(radio => {
            if (radio.checked) {
                const categoria = radio.name.replace('tipo_', '');
                tiposSeleccionados[categoria].push(parseInt(radio.value));
            }
        });
        
        // Recolectar opciones por uña (convertir id a servicio_id para compatibilidad)
        const opcionesPorUña = {
            izquierda: {},
            derecha: {},
            pie1: {},
            pie2: {}
        };
        
        // Convertir las selecciones para usar servicio_id
        Object.keys(selecciones.izquierda).forEach(dedo => {
            const opcion = selecciones.izquierda[dedo];
            opcionesPorUña.izquierda[dedo] = {
                servicio_id: opcion.id,
                precio: opcion.precio,
                nombre: opcion.nombre,
                imagen: opcion.imagen
            };
        });
        
        Object.keys(selecciones.derecha).forEach(dedo => {
            const opcion = selecciones.derecha[dedo];
            opcionesPorUña.derecha[dedo] = {
                servicio_id: opcion.id,
                precio: opcion.precio,
                nombre: opcion.nombre,
                imagen: opcion.imagen
            };
        });
        
        Object.keys(selecciones.pie1).forEach(dedo => {
            const opcion = selecciones.pie1[dedo];
            opcionesPorUña.pie1[dedo] = {
                servicio_id: opcion.id,
                precio: opcion.precio,
                nombre: opcion.nombre,
                imagen: opcion.imagen
            };
        });
        
        Object.keys(selecciones.pie2).forEach(dedo => {
            const opcion = selecciones.pie2[dedo];
            opcionesPorUña.pie2[dedo] = {
                servicio_id: opcion.id,
                precio: opcion.precio,
                nombre: opcion.nombre,
                imagen: opcion.imagen
            };
        });
        
        // Calcular subtotal
        let subtotal = 0;
        
        // Sumar servicios adicionales
        checkboxes.forEach(checkbox => {
            if (checkbox.checked) {
                subtotal += parseFloat(checkbox.dataset.precio);
            }
        });
        
        // Sumar tipos seleccionados
        radioButtons.forEach(radio => {
            if (radio.checked) {
                subtotal += parseFloat(radio.dataset.precio);
            }
        });
        
        // Sumar opciones por uña
        Object.values(opcionesPorUña).forEach(mano => {
            Object.values(mano).forEach(opcion => {
                if (opcion && opcion.precio) {
                    subtotal += parseFloat(opcion.precio);
                }
            });
        });
        
        // Obtener descuentos del campo servicios_completos actual (si existe)
        let descuentos = { total: 0, detalles: [] };
        
        // Solo mantener descuentos si hay servicios seleccionados
        const tieneServicios = serviciosAdicionales.length > 0 || 
                              tiposSeleccionados.manicura.length > 0 || 
                              tiposSeleccionados.pedicura.length > 0 ||
                              Object.keys(opcionesPorUña.izquierda).length > 0 ||
                              Object.keys(opcionesPorUña.derecha).length > 0 ||
                              Object.keys(opcionesPorUña.pie1).length > 0 ||
                              Object.keys(opcionesPorUña.pie2).length > 0;
        
        if (tieneServicios) {
            const serviciosCompletosElement = document.getElementById('servicios_completos');
            if (serviciosCompletosElement && serviciosCompletosElement.value) {
                try {
                    const serviciosCompletosActual = JSON.parse(serviciosCompletosElement.value);
                    if (serviciosCompletosActual.descuentos) {
                        descuentos = serviciosCompletosActual.descuentos;
                    }
                } catch (e) {
                    console.error('Error parsing servicios_completos:', e);
                }
            }
        } else {
            // Si no hay servicios seleccionados, resetear descuentos
            descuentos = { total: 0, detalles: [] };
            console.log('🔄 No hay servicios seleccionados, descuentos reseteados a 0');
        }
        
        // Calcular total final
        const totalFinal = subtotal - descuentos.total;
        
        // Crear objeto unificado
        const serviciosCompletos = {
            servicios_adicionales: serviciosAdicionales,
            tipos_seleccionados: tiposSeleccionados,
            opciones_por_uña: opcionesPorUña,
            subtotal: subtotal,
            descuentos: descuentos,
            total_final: totalFinal
        };
        
        console.log('Servicios completos recolectados:', serviciosCompletos);
        
        // Actualizar campo hidden
        const elemento = document.getElementById('servicios_completos');
        if (elemento) {
            elemento.value = JSON.stringify(serviciosCompletos);
            console.log('✅ Campo servicios_completos actualizado');
        } else {
            console.error('❌ Elemento servicios_completos no encontrado');
        }
        
        // Actualizar debug display
        const debugElement = document.getElementById('debug-servicios-completos');
        if (debugElement) {
            debugElement.textContent = JSON.stringify(serviciosCompletos, null, 2);
        }
        
        return serviciosCompletos;
    }
    
    // Event listeners para actualizar servicios completos
    radioButtons.forEach(radio => {
        radio.addEventListener('change', recolectarServiciosCompletos);
    });
    
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', recolectarServiciosCompletos);
    });
    
    // Event listener para cambio de usuario (solo para administradores)
    @if(Auth::user()->isAdmin())
    const userSelectForDiscounts = document.getElementById('user_id');
    if (userSelectForDiscounts) {
        userSelectForDiscounts.addEventListener('change', function() {
            console.log('🔄 Usuario seleccionado cambiado:', this.value);
            // Recalcular descuentos cuando cambie el usuario
            const serviciosSeleccionados = recolectarServiciosSeleccionados();
            if (serviciosSeleccionados.length > 0) {
                calcularDescuentos(0, serviciosSeleccionados); // El subtotal se calcula en el servidor
            }
        });
    }
    @endif
    
    // Las opciones de uñas se actualizan automáticamente cuando se seleccionan
    
    // Validación del formulario
    document.querySelector('form').addEventListener('submit', function(e) {
        console.log('=== FORMULARIO ENVIADO ===');
        console.log('Evento submit capturado');
        
        // Prevenir el envío por defecto para procesar con JavaScript
        e.preventDefault();
        
        const serviciosSeleccionados = document.querySelectorAll('.servicio-checkbox:checked, .tipo-servicio-radio:checked, .opcion-uña-radio:checked');
        
        if (serviciosSeleccionados.length === 0) {
            e.preventDefault();
            alert('Debes seleccionar al menos un servicio.');
            return false;
        }
        
        const tiposSeleccionados = document.querySelectorAll('.tipo-servicio-radio:checked');
        if (tiposSeleccionados.length === 0) {
            e.preventDefault();
            alert('Debes seleccionar al menos un tipo de servicio (manicura o pedicura).');
            return false;
        }
        
        // Validar que si hay tipos de manicura/pedicura seleccionados, se hayan seleccionado uñas
        const tiposManicura = document.querySelectorAll('input[name="tipo_manicura"]:checked');
        const tiposPedicura = document.querySelectorAll('input[name="tipo_pedicura"]:checked');
        
        // Validación para manicura - TODOS los dedos de cada mano deben estar seleccionados
        if (tiposManicura.length > 0) {
            const dedosRequeridos = ['pulgar', 'indice', 'medio', 'anular', 'meñique'];
            const dedosIzquierdaSeleccionados = Object.keys(selecciones.izquierda);
            const dedosDerechaSeleccionados = Object.keys(selecciones.derecha);
            
            const dedosFaltantesIzquierda = dedosRequeridos.filter(dedo => !dedosIzquierdaSeleccionados.includes(dedo));
            const dedosFaltantesDerecha = dedosRequeridos.filter(dedo => !dedosDerechaSeleccionados.includes(dedo));
            
            if (dedosFaltantesIzquierda.length > 0) {
                e.preventDefault();
                alert(`Para manicura, debes seleccionar todos los dedos de la mano izquierda. Faltan: ${dedosFaltantesIzquierda.join(', ')}`);
                return false;
            }
            
            if (dedosFaltantesDerecha.length > 0) {
                e.preventDefault();
                alert(`Para manicura, debes seleccionar todos los dedos de la mano derecha. Faltan: ${dedosFaltantesDerecha.join(', ')}`);
                return false;
            }
        }
        
        // Validación para pedicura - al menos una uña para cada pie
        if (tiposPedicura.length > 0) {
            const uñasPieIzquierdo = Object.keys(selecciones.pie1).length;
            const uñasPieDerecho = Object.keys(selecciones.pie2).length;
            
            if (uñasPieIzquierdo === 0) {
                e.preventDefault();
                alert('Para pedicura, debes seleccionar al menos una uña del pie izquierdo.');
                return false;
            }
            
            if (uñasPieDerecho === 0) {
                e.preventDefault();
                alert('Para pedicura, debes seleccionar al menos una uña del pie derecho.');
                return false;
            }
        }
        
        // Actualizar campo unificado con información completa
        recolectarServiciosCompletos();
        
        // Debug: Verificar que el campo unificado se actualizó correctamente
        console.log('=== VERIFICACIÓN DE CAMPO UNIFICADO ===');
        console.log('servicios_completos actualizado:', document.getElementById('servicios_completos').value);
        
        // Debug: Mostrar valores de campos ocultos
        console.log('=== DEBUG FORMULARIO ===');
        console.log('servicios_completos:', document.getElementById('servicios_completos').value);
        console.log('=== FIN DEBUG ===');
        
        // Los campos ocultos financieros se actualizan automáticamente con los datos del servidor
        // cuando se calculan los descuentos en tiempo real
        console.log('✅ Campos ocultos actualizados con datos del servidor');
        
        // Verificar que las selecciones no estén vacías
        const totalSelecciones = Object.keys(selecciones.izquierda).length + 
                                Object.keys(selecciones.derecha).length + 
                                Object.keys(selecciones.pie1).length + 
                                Object.keys(selecciones.pie2).length;
        
        console.log('Total de selecciones de uñas:', totalSelecciones);
        
        if (totalSelecciones === 0) {
            console.warn('⚠️  No hay selecciones de uñas para enviar');
        } else {
            console.log('✅ Hay selecciones de uñas para enviar');
        }
        
        // Los descuentos aplicados se actualizan automáticamente con los datos del servidor
        // cuando se calculan los descuentos en tiempo real
        console.log('✅ Descuentos aplicados actualizados con datos del servidor');
        
        console.log('Formulario enviado con información detallada:', {
            selecciones: selecciones,
            serviciosSeleccionados: serviciosSeleccionados
        });
        console.log('=== FIN FORMULARIO ENVIADO ===');
        
        // Enviar el formulario manualmente
        console.log('Enviando formulario...');
        this.submit();
    });
    
    // Verificar elementos de debug
    console.log('🔍 VERIFICANDO ELEMENTOS DE DEBUG:');
            const debugElements = ['debug-servicios-completos', 'debug-subtotal', 'debug-descuentos', 'debug-total'];
    debugElements.forEach(id => {
        const element = document.getElementById(id);
        if (element) {
            console.log(`✅ ${id}: encontrado`);
        } else {
            console.error(`❌ ${id}: NO encontrado`);
        }
    });
    
    // Calcular inicialmente
    recalcularTodo();
    
    // Ocultar secciones de opciones por uña y servicios adicionales inicialmente
    actualizarVisibilidadSecciones();
    
    // Event listeners para las uñas clickeables (después de que todo esté inicializado)
    setTimeout(() => {
        console.log('Configurando event listeners para uñas...');
        const uñasClickables = document.querySelectorAll('.uña-clickeable');
        console.log('Uñas clickeables encontradas:', uñasClickables.length);
        
        uñasClickables.forEach(uña => {
            uña.addEventListener('click', function() {
                console.log('Uña clickeada:', this);
                const mano = this.getAttribute('data-mano');
                const dedo = this.getAttribute('data-dedo');
                console.log('Atributos:', { mano, dedo });
                mostrarModal(mano, dedo);
            });
        });
        
        // Event listeners para botones de combinación rápida
        const combinacionBtns = document.querySelectorAll('.combinacion-btn');
        combinacionBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const combinacion = this.getAttribute('data-combinacion');
                aplicarCombinacionRapida(combinacion);
            });
        });
        
        // Función para aplicar combinaciones rápidas predefinidas (SOLO PARA MANOS)
        function aplicarCombinacionRapida(combinacion) {
            console.log('Aplicando combinación rápida SOLO para manos:', combinacion);
            
            // Definir las combinaciones (solo para manos)
            const combinaciones = {
                'combinado1': {
                    izquierda: ['Liso', 'NailArt - Relieve', 'NailArt - Relieve', 'NailArt - Relieve', 'Liso'],
                    derecha: ['Liso', 'NailArt - Relieve', 'NailArt - Relieve', 'NailArt - Relieve', 'Liso']
                },
                'nailart': {
                    izquierda: ['NailArt - Relieve', 'NailArt', 'NailArt', 'NailArt', 'NailArt - Relieve'],
                    derecha: ['NailArt - Relieve', 'NailArt', 'NailArt', 'NailArt', 'NailArt - Relieve']
                },
                'combinado2': {
                    izquierda: ['NailArt - Relieve', 'Liso', 'NailArt - Relieve', 'NailArt - 3D', 'Liso'],
                    derecha: ['NailArt - Relieve', 'Liso', 'NailArt - Relieve', 'NailArt - 3D', 'Liso']
                }
            };
            
            console.log('Buscando combinación:', combinacion);
            console.log('Opciones disponibles:', opcionesUñas.map(opcion => opcion.nombre));
            
            const combinacionSeleccionada = combinaciones[combinacion];
            if (!combinacionSeleccionada) {
                console.error('Combinación no encontrada:', combinacion);
                return;
            }
            
            // IMPORTANTE: NO tocar las selecciones de pies en absoluto
            // Las combinaciones rápidas solo son para manos de manicura
            
            // Limpiar SOLO las selecciones de las manos
            selecciones.izquierda = {};
            selecciones.derecha = {};
            
            // Aplicar combinación a mano izquierda
            const dedosIzquierda = ['pulgar', 'indice', 'medio', 'anular', 'meñique'];
            dedosIzquierda.forEach((dedo, index) => {
                const diseño = combinacionSeleccionada.izquierda[index];
                // Buscar el servicio correspondiente en opcionesUñas
                const servicio = opcionesUñas.find(opcion => opcion.nombre === diseño);
                if (servicio) {
                    selecciones.izquierda[dedo] = {
                        id: servicio.id,
                        nombre: servicio.nombre,
                        precio: servicio.precio_base,
                        imagen: servicio.imagen
                    };
                    console.log(`Aplicado ${diseño} a ${dedo} izquierda`);
                } else {
                    console.error(`No se encontró el servicio: ${diseño}`);
                }
            });
            
            // Aplicar combinación a mano derecha
            const dedosDerecha = ['pulgar', 'indice', 'medio', 'anular', 'meñique'];
            dedosDerecha.forEach((dedo, index) => {
                const diseño = combinacionSeleccionada.derecha[index];
                // Buscar el servicio correspondiente en opcionesUñas
                const servicio = opcionesUñas.find(opcion => opcion.nombre === diseño);
                if (servicio) {
                    selecciones.derecha[dedo] = {
                        id: servicio.id,
                        nombre: servicio.nombre,
                        precio: servicio.precio_base,
                        imagen: servicio.imagen
                    };
                    console.log(`Aplicado ${diseño} a ${dedo} derecha`);
                } else {
                    console.error(`No se encontró el servicio: ${diseño}`);
                }
            });
            
            // Actualizar SOLO las imágenes de las manos (NO tocar pies)
            actualizarImagenesManos();
            
            // Actualizar visualización y recalcular
            actualizarSelecciones();
            
            // Actualizar servicios completos
            recolectarServiciosCompletos();
            
            // Forzar recálculo después de un pequeño delay para asegurar que todo esté actualizado
            setTimeout(() => {
                recalcularTodo();
            }, 100);
            
            console.log('Combinación aplicada SOLO para manos:', combinacion);
            console.log('Selecciones izquierda:', selecciones.izquierda);
            console.log('Selecciones derecha:', selecciones.derecha);
            console.log('Selecciones pies (INTACTAS):', { pie1: selecciones.pie1, pie2: selecciones.pie2 });
        }
    }, 100);

    // Event listeners para los nuevos botones de tipo de servicio
    document.addEventListener('click', function(e) {
        if (e.target.closest('.service-option')) {
            const serviceOption = e.target.closest('.service-option');
            const category = serviceOption.getAttribute('data-service-category');
            const serviceId = serviceOption.getAttribute('data-service-id');
            const serviceName = serviceOption.getAttribute('data-service-name');
            const servicePrice = serviceOption.getAttribute('data-service-price');
            
            // Remover selección previa en la misma categoría
            // Verificar si el servicio ya está seleccionado
            const isAlreadySelected = serviceOption.classList.contains('selected');
            
            // Remove previous selection in the same category
            document.querySelectorAll(`.service-option[data-service-category="${category}"]`).forEach(option => {
                option.classList.remove('selected');
            });
            
            // Si no estaba seleccionado, seleccionarlo; si ya estaba seleccionado, desmarcarlo
            if (!isAlreadySelected) {
            serviceOption.classList.add('selected');
            
                // Actualizar radio button oculto correspondiente
            const radioButton = document.querySelector(`input[name="tipo_${category}"][value="${serviceId}"]`);
            if (radioButton) {
                radioButton.checked = true;
                    console.log(`✅ Radio button marcado: ${category} - ${serviceId}`);
                } else {
                    console.log(`❌ Radio button no encontrado: ${category} - ${serviceId}`);
                }
            } else {
                // Verificar si hay selecciones relacionadas antes de desmarcar
                const tieneSeleccionesRelacionadas = verificarSeleccionesRelacionadas(category);
                
                if (tieneSeleccionesRelacionadas) {
                    // Mostrar confirmación antes de desmarcar
                    const confirmacion = confirm(`¿Estás seguro de que quieres desmarcar "${serviceName}"?\n\nSe borrarán todas las opciones seleccionadas para ${category === 'manicura' ? 'manicura' : 'pedicura'} (manos izquierda/derecha, servicios adicionales, etc.).`);
                    
                    if (confirmacion) {
                        // Desmarcar el radio button
                        const radioButton = document.querySelector(`input[name="tipo_${category}"][value="${serviceId}"]`);
                        if (radioButton) {
                            radioButton.checked = false;
                            console.log(`❌ Radio button desmarcado: ${category} - ${serviceId}`);
                        }
                        
                        // Si se desmarcó un tipo de servicio, limpiar todas las selecciones relacionadas
                        limpiarSeleccionesCategoria(category);
                        
                        // Recalcular después de limpiar con un pequeño retraso para asegurar que las limpiezas se completen
                        console.log('Recalculando después de limpiar selecciones...');
                        setTimeout(() => {
            recalcularTodo();
                        }, 100);
                    } else {
                        // Si el usuario cancela, mantener la selección
                        serviceOption.classList.add('selected');
                        return;
                    }
                } else {
                    // Si no hay selecciones relacionadas, desmarcar directamente
                    const radioButton = document.querySelector(`input[name="tipo_${category}"][value="${serviceId}"]`);
                    if (radioButton) {
                        radioButton.checked = false;
                        console.log(`❌ Radio button desmarcado (sin selecciones relacionadas): ${category} - ${serviceId}`);
                    }
                    
                    // Recalcular después de desmarcar
                    console.log('Recalculando después de desmarcar sin selecciones relacionadas...');
                    setTimeout(() => {
                        recalcularTodo();
                    }, 100);
                }
            }
            
            console.log('Servicio seleccionado:', {
                category: category,
                serviceId: serviceId,
                serviceName: serviceName,
                servicePrice: servicePrice,
                isAlreadySelected: isAlreadySelected
            });
            
            // Recalcular subtotal (solo para selecciones, no para desmarcados)
            if (!isAlreadySelected) {
                recalcularTodo();
            }
            
            // Scroll suave hacia la sección de Opciones por uña
            setTimeout(() => {
                const opcionesUñaSection = serviceOption.closest('.tab-pane').querySelector('.text-success');
                if (opcionesUñaSection) {
                    opcionesUñaSection.scrollIntoView({ 
                        behavior: 'smooth', 
                        block: 'start',
                        inline: 'nearest'
                    });
                }
            }, 300);
        }
    });

    // Función para verificar si hay selecciones relacionadas en una categoría
    function verificarSeleccionesRelacionadas(categoria) {
        console.log('Verificando selecciones relacionadas para categoría:', categoria);
        
        if (categoria === 'manicura') {
            // Verificar si hay selecciones de manos izquierda o derecha
            const tieneSeleccionesManos = Object.keys(selecciones.izquierda).length > 0 || Object.keys(selecciones.derecha).length > 0;
            
            // Verificar si hay servicios adicionales de manicura seleccionados
            const tieneServiciosAdicionales = document.querySelectorAll(`input[name="servicios[]"][data-categoria="manicura"]:checked`).length > 0;
            
            console.log('Selecciones manos:', tieneSeleccionesManos, 'Servicios adicionales:', tieneServiciosAdicionales);
            return tieneSeleccionesManos || tieneServiciosAdicionales;
            
        } else if (categoria === 'pedicura') {
            // Verificar si hay selecciones de pies
            const tieneSeleccionesPies = Object.keys(selecciones.pie1).length > 0 || Object.keys(selecciones.pie2).length > 0;
            
            // Verificar si hay servicios adicionales de pedicura seleccionados
            const tieneServiciosAdicionales = document.querySelectorAll(`input[name="servicios[]"][data-categoria="pedicura"]:checked`).length > 0;
            
            console.log('Selecciones pies:', tieneSeleccionesPies, 'Servicios adicionales:', tieneServiciosAdicionales);
            return tieneSeleccionesPies || tieneServiciosAdicionales;
        }
        
        return false;
    }

    // Función para mostrar/ocultar secciones de opciones por uña y servicios adicionales
    function actualizarVisibilidadSecciones() {
        console.log('Actualizando visibilidad de secciones...');
        
        // Verificar cada categoría
        ['manicura', 'pedicura'].forEach(categoria => {
            // Sección de opciones por uña
            const seccionOpciones = document.querySelector(`.opciones-uña-section[data-categoria="${categoria}"]`);
            if (seccionOpciones) {
                // Verificar si hay un tipo de servicio seleccionado para esta categoría
                const tieneTipoSeleccionado = document.querySelector(`input[name="tipo_${categoria}"]:checked`) !== null;
                
                console.log(`Categoría ${categoria} - Opciones:`, {
                    tieneTipoSeleccionado: tieneTipoSeleccionado,
                    seccionEncontrada: !!seccionOpciones
                });
                
                if (tieneTipoSeleccionado) {
                    // Mostrar con transición suave
                    seccionOpciones.style.display = 'block';
                    setTimeout(() => {
                        seccionOpciones.style.opacity = '1';
                        seccionOpciones.style.transform = 'translateY(0)';
                    }, 10);
                    console.log(`Mostrando sección de opciones para ${categoria}`);
                } else {
                    // Ocultar con transición suave
                    seccionOpciones.style.opacity = '0';
                    seccionOpciones.style.transform = 'translateY(-10px)';
                    setTimeout(() => {
                        seccionOpciones.style.display = 'none';
                    }, 300);
                    console.log(`Ocultando sección de opciones para ${categoria}`);
                }
            }
            
            // Sección de servicios adicionales
            const seccionAdicionales = document.querySelector(`.servicios-adicionales-section[data-categoria="${categoria}"]`);
            if (seccionAdicionales) {
                // Verificar si hay un tipo de servicio seleccionado para esta categoría
                const tieneTipoSeleccionado = document.querySelector(`input[name="tipo_${categoria}"]:checked`) !== null;
                
                console.log(`Categoría ${categoria} - Adicionales:`, {
                    tieneTipoSeleccionado: tieneTipoSeleccionado,
                    seccionEncontrada: !!seccionAdicionales
                });
                
                if (tieneTipoSeleccionado) {
                    // Mostrar con transición suave
                    seccionAdicionales.style.display = 'block';
                    setTimeout(() => {
                        seccionAdicionales.style.opacity = '1';
                        seccionAdicionales.style.transform = 'translateY(0)';
                    }, 10);
                    console.log(`Mostrando sección de servicios adicionales para ${categoria}`);
                } else {
                    // Ocultar con transición suave
                    seccionAdicionales.style.opacity = '0';
                    seccionAdicionales.style.transform = 'translateY(-10px)';
                    setTimeout(() => {
                        seccionAdicionales.style.display = 'none';
                    }, 300);
                    console.log(`Ocultando sección de servicios adicionales para ${categoria}`);
                }
            }
        });
    }

    // Función para limpiar todas las selecciones de una categoría específica
    function limpiarSeleccionesCategoria(categoria) {
        console.log('Limpiando selecciones para categoría:', categoria);
        
        if (categoria === 'manicura') {
            // Limpiar selecciones de manos izquierda y derecha
            selecciones.izquierda = {};
            selecciones.derecha = {};
            
            // Resetear imágenes de uñas de manicura
            document.querySelectorAll('.uña-clickeable[data-mano="izquierda"], .uña-clickeable[data-mano="derecha"]').forEach(uña => {
                uña.setAttribute('xlink:href', '{{ asset("imagenes/unas/default.png") }}');
                uña.classList.remove('uña-seleccionada');
            });
            
            // Actualizar visualización de selecciones
            actualizarSelecciones();
            
            // Actualizar servicios completos
            recolectarServiciosCompletos();
            
        } else if (categoria === 'pedicura') {
            // Limpiar selecciones de pies
            selecciones.pie1 = {};
            selecciones.pie2 = {};
            
            // Resetear imágenes de uñas de pedicura
            document.querySelectorAll('.uña-clickeable[data-mano="pie1"], .uña-clickeable[data-mano="pie2"]').forEach(uña => {
                uña.setAttribute('xlink:href', '{{ asset("imagenes/unas/default.png") }}');
                uña.classList.remove('uña-seleccionada');
            });
            
            // Actualizar visualización de selecciones
            actualizarSelecciones();
            
            // Actualizar servicios completos
            recolectarServiciosCompletos();
        }
        
        // Limpiar servicios adicionales de esta categoría
        document.querySelectorAll(`input[name="servicios[]"][data-categoria="${categoria}"]`).forEach(checkbox => {
            checkbox.checked = false;
        });
        
        console.log('Selecciones limpiadas para categoría:', categoria);
    }

    // Event listener unificado para el modal
    document.getElementById('modalOverlay').addEventListener('click', function(e) {
        // Si se hace clic en un botón de opción
        if (e.target.classList.contains('opcion-btn')) {
            const opcionId = e.target.getAttribute('data-opcion-id');
            const opcionNombre = e.target.getAttribute('data-opcion-nombre');
            const opcionPrecio = e.target.getAttribute('data-opcion-precio');
            const opcionImagen = e.target.getAttribute('data-opcion-imagen');
            
            if (!uñaSeleccionada) {
                alert('Error: No hay uña seleccionada');
                return;
            }
            
            const { mano, dedo } = uñaSeleccionada;
            
            console.log('Seleccionando opción:', {
                opcionId: opcionId,
                opcionNombre: opcionNombre,
                opcionPrecio: opcionPrecio,
                opcionImagen: opcionImagen,
                mano: mano,
                dedo: dedo
            });
            
            // Guardar la selección
            if (!selecciones[mano]) {
                selecciones[mano] = {};
            }
            selecciones[mano][dedo] = {
                id: opcionId,
                nombre: opcionNombre,
                precio: opcionPrecio,
                imagen: opcionImagen
            };
            
            console.log('Selección guardada:', selecciones[mano][dedo]);
            console.log('Estado actual de selecciones:', selecciones);
            
            // Actualizar la imagen de la uña
            const uñaElement = document.querySelector(`[data-mano="${mano}"][data-dedo="${dedo}"]`);
            if (uñaElement) {
                uñaElement.setAttribute('xlink:href', opcionImagen);
                uñaElement.classList.add('uña-seleccionada');
                console.log('Imagen de uña actualizada');
            } else {
                console.error('Elemento de uña no encontrado:', `[data-mano="${mano}"][data-dedo="${dedo}"]`);
            }
            
            // Actualizar la visualización
            actualizarSelecciones();
            
            // Actualizar servicios completos
            recolectarServiciosCompletos();
            
            // Recalcular subtotal y descuentos
            console.log('Recalculando después de selección de uña...');
    recalcularTodo();
            
            // Ocultar el modal automáticamente
            console.log('Cerrando modal...');
            ocultarModal();
        }
        // Si se hace clic fuera del modal (en el overlay)
        else if (e.target === this) {
            ocultarModal();
        }
    });

});
</script>
@endsection

@section('styles')
<style>
    /* Estilos para las manos interactivas */
    .manos-container {
        display: flex;
        justify-content: center;
        gap: 20px;
    }
    
    /* Transición suave para las secciones de opciones por uña y servicios adicionales */
    .opciones-uña-section,
    .servicios-adicionales-section {
        transition: all 0.3s ease-in-out;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-10px);
    }

    .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;
    }

    /* Estilos para el cuadro flotante */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
    }

    .modal-content {
        background: white;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        max-width: 500px;
        width: 90%;
        text-align: center;
    }

    .modal-header {
        margin-bottom: 20px;
    }

    .modal-title {
        color: #333;
        margin: 0;
        font-size: 1.5em;
    }

    .opciones-container {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
        margin-bottom: 20px;
    }

    .opcion-btn {
        padding: 15px 20px;
        border: 2px solid #ddd;
        border-radius: 10px;
        background: white;
        cursor: pointer;
    }

    /* Estilos para el tiempo aproximado */
    .service-time {
        font-size: 0.9em;
        color: #666;
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

    .service-time i {
        color: #ff6b6b;
    }

    /* Estilos para las imágenes de servicios */
    .service-image {
        text-align: center;
    }

    .service-image img {
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        transition: transform 0.2s ease;
    }

    .service-image img:hover {
        transform: scale(1.05);
    }
        transition: all 0.3s ease;
        font-weight: bold;
        min-width: 120px;
        font-size: 0.9em;
    }

    .opcion-btn:hover {
        border-color: #667eea;
        background: #f8f9ff;
    }

    .opcion-btn.selected {
        border-color: #667eea;
        background: #667eea;
        color: white;
    }

    /* Estilos para uñas seleccionadas */
    .uña-seleccionada {
        filter: drop-shadow(0 0 10px #667eea);
    }

    /* Información de selección */
    .seleccion-info {
        margin-top: 15px;
        padding: 10px;
        background: #f8f9fa;
        border-radius: 8px;
        border-left: 4px solid #667eea;
        font-size: 0.85em;
    }

    .seleccion-item {
        margin: 3px 0;
        font-size: 0.8em;
    }

    /* Hacer las uñas clickeables */
    .uña-clickeable {
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .uña-clickeable:hover {
        filter: brightness(1.1);
    }

    /* Estilos para el selector de tipos de servicio */
    .service-type-selector {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 12px;
        margin: 12px 0;
    }

    .service-option {
        background: white;
        border: 2px solid #e9ecef;
        border-radius: 10px;
        padding: 12px 10px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        min-height: 120px;
    }

    .service-option:hover {
        border-color: #667eea;
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(102, 126, 234, 0.2);
    }

    .service-option.selected {
        border-color: #da3b85;
        background: linear-gradient(135deg, #da3b85 0%, #c42d6b 50%, #a81f4f 100%);
        color: white;
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(218, 59, 133, 0.3);
        position: relative;
    }

    .service-option.selected::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
        border-radius: 15px 15px 0 0;
    }

    .service-option.selected .service-icon {
        background: rgba(255, 255, 255, 0.15);
        color: white;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }

    .service-option.selected .service-price {
        color: #ffffff;
        font-weight: bold;
        font-size: 1.3em;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .service-option.selected h4 {
        color: white;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    .service-option.selected p {
        color: rgba(255, 255, 255, 0.95);
    }

    .service-icon {
        width: 45px;
        height: 45px;
        background: #f8f9fa;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 8px;
        font-size: 1.2em;
        color: #667eea;
        transition: all 0.3s ease;
    }

    .service-option h4 {
        margin: 0 0 6px 0;
        font-size: 1em;
        font-weight: bold;
    }

    .service-option p {
        margin: 0 0 8px 0;
        color: #6c757d;
        font-size: 0.75em;
        line-height: 1.2;
    }

    .service-option.selected p {
        color: rgba(255, 255, 255, 0.9);
    }

    .service-price {
        font-size: 0.9em;
        font-weight: bold;
        color: #667eea;
        margin-bottom: 6px;
    }

    .service-check {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 25px;
        height: 25px;
        background: linear-gradient(135deg, #da3b85 0%, #c42d6b 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        opacity: 0;
        transform: scale(0);
        transition: all 0.3s ease;
        box-shadow: 0 3px 6px rgba(218, 59, 133, 0.4);
    }

    .service-option.selected .service-check {
        opacity: 1;
        transform: scale(1);
    }

    /* Responsive */
    @media (max-width: 768px) {
        .service-type-selector {
            grid-template-columns: 1fr;
        }
        
        .service-option {
            padding: 20px;
        }
        
        .service-icon {
            width: 60px;
            height: 60px;
            font-size: 1.5em;
        }
    }
    
    /* Estilos para las tarjetas de la columna derecha */
    .col-md-4 .card {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: none;
        border-radius: 8px;
    }
    
    .col-md-4 .card-header {
        border-radius: 8px 8px 0 0 !important;
        border-bottom: none;
    }
    
    .col-md-4 .card-body {
        padding: 1.25rem;
    }
    
    /* Estilos específicos para el textarea de notas */
    #notas {
        resize: vertical;
        min-height: 80px;
    }
    
    /* Estilos para los botones */
    .col-md-4 .btn {
        border-radius: 6px;
        font-weight: 500;
        padding: 0.75rem 1rem;
    }
    
    /* Estilos para botones de combinación rápida */
    .combinacion-btn {
        transition: all 0.3s ease;
        border-width: 2px;
    }
    
    .combinacion-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
    
    .combinacion-btn:active {
        transform: translateY(0);
    }
    
    /* Asegurar que los botones de combinación usen los estilos violet-red */
    .combinacion-btn.violet-red--btn {
        background-color: #da3b85;
        border-color: #da3b85;
        color: white;
    }
    
    .combinacion-btn.violet-red--btn:hover {
        background-color: #c42d6b;
        border-color: #c42d6b;
        color: white;
    }
    
    /* Estilos para pestañas elegantes */
    .nav-tabs {
        border-bottom: 2px solid #e9ecef;
    }
    
    .nav-tabs .nav-link {
        border: none;
        border-radius: 15px 15px 0 0;
        margin-right: 5px;
        padding: 12px 25px;
        font-weight: 600;
        color: #6c757d;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }
    
    .nav-tabs .nav-link:hover {
        color: #da3b85;
        background: linear-gradient(135deg, #fff5f8 0%, #ffe6f0 100%);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(218, 59, 133, 0.15);
    }
    
    .nav-tabs .nav-link.active {
        color: white;
        background: linear-gradient(135deg, #da3b85 0%, #c42d6b 100%);
        border: none;
        box-shadow: 0 4px 15px rgba(218, 59, 133, 0.3);
        transform: translateY(-2px);
    }
    
    .nav-tabs .nav-link.active::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
        border-radius: 15px 15px 0 0;
    }
    
    .nav-tabs .nav-link i {
        transition: all 0.3s ease;
    }
    
    .nav-tabs .nav-link:hover i {
        transform: scale(1.1);
    }
    
    .nav-tabs .nav-link.active i {
        transform: scale(1.1);
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    }
    

</style>
@endsection 

<!-- Modal para selección de opciones -->
<div class="modal-overlay" id="modalOverlay">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title" id="modalTitle">Seleccionar Opción</h3>
        </div>
        <div class="opciones-container" id="opcionesContainer">
            <!-- Las opciones se generarán dinámicamente desde JavaScript -->
        </div>
    </div>
</div>

<script>
    // Variables globales
    let uñaSeleccionada = null;
    let selecciones = {
        izquierda: {},
        derecha: {},
        pie1: {},
        pie2: {}
    };
    let descuentosAplicadosSeleccionados = {};
    // Debug: Ver la estructura completa de serviciosOrganizados
    console.log('Servicios Organizados completos:', @json($serviciosOrganizados));
    
    let opcionesUñas = [];
    if (@json($serviciosOrganizados) && @json($serviciosOrganizados)['manicura'] && @json($serviciosOrganizados)['manicura']['opciones_uña']) {
        opcionesUñas = @json($serviciosOrganizados['manicura']['opciones_uña']);
    }
    
    // Debug: Verificar que opcionesUñas se carga correctamente
    console.log('Opciones Uñas cargadas:', opcionesUñas);
    console.log('Número de opciones:', opcionesUñas.length);
    if (opcionesUñas.length > 0) {
        console.log('Primera opción:', opcionesUñas[0]);
        console.log('Nombres disponibles:', opcionesUñas.map(opcion => opcion.nombre));
    }

    // Debug: Ver qué datos recibimos
    console.log('Opciones Uñas recibidas:', opcionesUñas);
    console.log('Tipo de opcionesUñas:', typeof opcionesUñas);
    console.log('Es array?', Array.isArray(opcionesUñas));
    if (opcionesUñas) {
        console.log('Longitud:', opcionesUñas.length);
    }

    // Función para mostrar el modal
    function mostrarModal(mano, dedo) {
        console.log('Ejecutando mostrarModal con:', mano, dedo);
        
        const modal = document.getElementById('modalOverlay');
        const modalTitle = document.getElementById('modalTitle');
        const opcionesContainer = document.getElementById('opcionesContainer');
        
        console.log('Elementos del modal:', {
            modal: modal,
            modalTitle: modalTitle,
            opcionesContainer: opcionesContainer
        });
        
        if (!modal || !modalTitle || !opcionesContainer) {
            console.error('Elementos del modal no encontrados');
            return;
        }
        
        // Configurar el título del modal
        const nombresDedos = {
            'pulgar': 'Pulgar',
            'indice': 'Índice', 
            'medio': 'Medio',
            'anular': 'Anular',
            'meñique': 'Meñique'
        };
        
        const nombresManos = {
            'izquierda': 'Mano Izquierda',
            'derecha': 'Mano Derecha',
            'pie1': 'Pie Izquierdo',
            'pie2': 'Pie Derecho'
        };
        
        modalTitle.textContent = `${nombresManos[mano]} - ${nombresDedos[dedo]}`;
        
        // Generar opciones dinámicamente
        opcionesContainer.innerHTML = '';
        
        console.log('Opciones Uñas disponibles:', opcionesUñas);
        
        // Verificar que opcionesUñas sea un array y tenga elementos
        if (opcionesUñas && Array.isArray(opcionesUñas) && opcionesUñas.length > 0) {
            opcionesUñas.forEach(opcion => {
                const btn = document.createElement('button');
                btn.className = 'opcion-btn';
                btn.setAttribute('data-opcion-id', opcion.id);
                btn.setAttribute('data-opcion-nombre', opcion.nombre);
                btn.setAttribute('data-opcion-precio', opcion.precio_base);
                btn.setAttribute('data-opcion-imagen', opcion.imagen ? '{{ asset('') }}' + opcion.imagen : '{{ asset("imagenes/unas/default.png") }}');
                
                btn.innerHTML = `
                    <div style="text-align: center; pointer-events: none;">
                        <img src="${opcion.imagen ? '{{ asset('') }}' + opcion.imagen : '{{ asset("imagenes/unas/default.png") }}'}" alt="${opcion.nombre}" style="width: 60px; height: 80px; object-fit: contain; border-radius: 5px; margin-bottom: 8px; pointer-events: none;">
                        <div style="font-weight: bold; margin-bottom: 5px; pointer-events: none;">${opcion.nombre}</div>
                        <div style="color: #da3b85; font-weight: bold; font-size: 1.1em; pointer-events: none;">${parseFloat(opcion.precio_base).toFixed(2)}€</div>
                    </div>
                `;
                
                opcionesContainer.appendChild(btn);
            });
        } else {
            // Si no hay opciones, mostrar mensaje
            opcionesContainer.innerHTML = '<p class="text-muted">No hay opciones disponibles</p>';
        }
        
        // Guardar la uña seleccionada
        uñaSeleccionada = { mano, dedo };
        
        // Mostrar el modal
        modal.style.display = 'flex';
        console.log('Modal mostrado');
    }

    // Función para ocultar el modal
    function ocultarModal() {
        console.log('Ejecutando ocultarModal...');
        const modal = document.getElementById('modalOverlay');
        if (modal) {
            modal.style.display = 'none';
            console.log('Modal ocultado');
        } else {
            console.error('Modal no encontrado');
        }
        uñaSeleccionada = null;
    }

    // Función para resetear las imágenes de las uñas
    function resetearImagenesUñas() {
        document.querySelectorAll('.uña-clickeable').forEach(uña => {
            uña.setAttribute('xlink:href', '{{ asset("imagenes/unas/default.png") }}');
            uña.classList.remove('uña-seleccionada');
        });
    }

    // Función para resetear todas las selecciones
    function resetearSelecciones() {
        selecciones = {
            izquierda: {},
            derecha: {},
            pie1: {},
            pie2: {}
        };
        actualizarSelecciones();
        resetearImagenesUñas();
        recalcularTodo();
    }


    
    // Función para actualizar imágenes de las uñas (todas)
    function actualizarImagenesUñas(seleccionesPiesPreservadas = null) {
        // Primero, limpiar todas las imágenes de las manos (no de los pies)
        document.querySelectorAll('.uña-clickeable[data-mano="izquierda"], .uña-clickeable[data-mano="derecha"]').forEach(uña => {
            uña.setAttribute('xlink:href', '{{ asset("imagenes/unas/default.png") }}');
            uña.classList.remove('uña-seleccionada');
        });
        
        // Actualizar mano izquierda
        Object.keys(selecciones.izquierda).forEach(dedo => {
            const opcion = selecciones.izquierda[dedo];
            const uñaElement = document.querySelector(`[data-mano="izquierda"][data-dedo="${dedo}"]`);
            if (uñaElement && opcion.imagen) {
                // Verificar si la imagen ya tiene la ruta completa o solo el nombre del archivo
                const imagenUrl = opcion.imagen.startsWith('http') || opcion.imagen.startsWith('/') 
                    ? opcion.imagen 
                    : '{{ asset('') }}' + opcion.imagen;
                uñaElement.setAttribute('xlink:href', imagenUrl);
                uñaElement.classList.add('uña-seleccionada');
            }
        });
        
        // Actualizar mano derecha
        Object.keys(selecciones.derecha).forEach(dedo => {
            const opcion = selecciones.derecha[dedo];
            const uñaElement = document.querySelector(`[data-mano="derecha"][data-dedo="${dedo}"]`);
            if (uñaElement && opcion.imagen) {
                // Verificar si la imagen ya tiene la ruta completa o solo el nombre del archivo
                const imagenUrl = opcion.imagen.startsWith('http') || opcion.imagen.startsWith('/') 
                    ? opcion.imagen 
                    : '{{ asset('') }}' + opcion.imagen;
                uñaElement.setAttribute('xlink:href', imagenUrl);
                uñaElement.classList.add('uña-seleccionada');
            }
        });
        
        // Usar selecciones preservadas si están disponibles, sino usar las actuales
        const pie1Selecciones = seleccionesPiesPreservadas ? seleccionesPiesPreservadas.pie1 : selecciones.pie1;
        const pie2Selecciones = seleccionesPiesPreservadas ? seleccionesPiesPreservadas.pie2 : selecciones.pie2;
        
        // Actualizar pie izquierdo (preservar selecciones existentes)
        Object.keys(pie1Selecciones).forEach(dedo => {
            const opcion = pie1Selecciones[dedo];
            const uñaElement = document.querySelector(`[data-mano="pie1"][data-dedo="${dedo}"]`);
            if (uñaElement && opcion.imagen) {
                // Verificar si la imagen ya tiene la ruta completa o solo el nombre del archivo
                const imagenUrl = opcion.imagen.startsWith('http') || opcion.imagen.startsWith('/') 
                    ? opcion.imagen 
                    : '{{ asset('') }}' + opcion.imagen;
                uñaElement.setAttribute('xlink:href', imagenUrl);
                uñaElement.classList.add('uña-seleccionada');
            }
        });
        
        // Actualizar pie derecho (preservar selecciones existentes)
        Object.keys(pie2Selecciones).forEach(dedo => {
            const opcion = pie2Selecciones[dedo];
            const uñaElement = document.querySelector(`[data-mano="pie2"][data-dedo="${dedo}"]`);
            if (uñaElement && opcion.imagen) {
                // Verificar si la imagen ya tiene la ruta completa o solo el nombre del archivo
                const imagenUrl = opcion.imagen.startsWith('http') || opcion.imagen.startsWith('/') 
                    ? opcion.imagen 
                    : '{{ asset('') }}' + opcion.imagen;
                uñaElement.setAttribute('xlink:href', imagenUrl);
                uñaElement.classList.add('uña-seleccionada');
            }
        });
    }

    // Función para actualizar SOLO las imágenes de las manos (para combinaciones rápidas)
    function actualizarImagenesManos() {
        console.log('Actualizando SOLO imágenes de manos (combinaciones rápidas)');
        
        // Limpiar SOLO las imágenes de las manos
        document.querySelectorAll('.uña-clickeable[data-mano="izquierda"], .uña-clickeable[data-mano="derecha"]').forEach(uña => {
            uña.setAttribute('xlink:href', '{{ asset("imagenes/unas/default.png") }}');
            uña.classList.remove('uña-seleccionada');
        });
        
        // Actualizar mano izquierda
        Object.keys(selecciones.izquierda).forEach(dedo => {
            const opcion = selecciones.izquierda[dedo];
            const uñaElement = document.querySelector(`[data-mano="izquierda"][data-dedo="${dedo}"]`);
            if (uñaElement && opcion.imagen) {
                // Verificar si la imagen ya tiene la ruta completa o solo el nombre del archivo
                const imagenUrl = opcion.imagen.startsWith('http') || opcion.imagen.startsWith('/') 
                    ? opcion.imagen 
                    : '{{ asset('') }}' + opcion.imagen;
                uñaElement.setAttribute('xlink:href', imagenUrl);
                uñaElement.classList.add('uña-seleccionada');
                console.log(`Imagen actualizada: mano izquierda - ${dedo} - ${opcion.nombre}`);
            }
        });
        
        // Actualizar mano derecha
        Object.keys(selecciones.derecha).forEach(dedo => {
            const opcion = selecciones.derecha[dedo];
            const uñaElement = document.querySelector(`[data-mano="derecha"][data-dedo="${dedo}"]`);
            if (uñaElement && opcion.imagen) {
                // Verificar si la imagen ya tiene la ruta completa o solo el nombre del archivo
                const imagenUrl = opcion.imagen.startsWith('http') || opcion.imagen.startsWith('/') 
                    ? opcion.imagen 
                    : '{{ asset('') }}' + opcion.imagen;
                uñaElement.setAttribute('xlink:href', imagenUrl);
                uñaElement.classList.add('uña-seleccionada');
                console.log(`Imagen actualizada: mano derecha - ${dedo} - ${opcion.nombre}`);
            }
        });
        
        console.log('Imágenes de manos actualizadas. Pies NO tocados.');
    }

    // Función para actualizar la visualización de selecciones
    function actualizarSelecciones() {
        const seleccionesIzquierda = document.getElementById('selecciones-izquierda');
        const seleccionesDerecha = document.getElementById('selecciones-derecha');
        const seleccionesPie1 = document.getElementById('selecciones-pie1');
        const seleccionesPie2 = document.getElementById('selecciones-pie2');
        
        console.log('Actualizando visualización de selecciones...');
        console.log('Estado actual de selecciones:', selecciones);
        
        // Limpiar contenedores
        seleccionesIzquierda.innerHTML = '';
        seleccionesDerecha.innerHTML = '';
        seleccionesPie1.innerHTML = '';
        seleccionesPie2.innerHTML = '';
        
        // Mostrar selecciones de mano izquierda
        Object.keys(selecciones.izquierda).forEach(dedo => {
            const opcion = selecciones.izquierda[dedo];
            const item = document.createElement('div');
            item.className = 'd-flex justify-content-start mb-1 text-start';
            item.innerHTML = `
                <span class="me-2">
                    <i class="fas fa-check-circle text-success"></i>
                </span>
                <span>${dedo.charAt(0).toUpperCase() + dedo.slice(1)}: ${opcion.nombre}</span>
            `;
            seleccionesIzquierda.appendChild(item);
            console.log(`Mostrando selección izquierda: ${dedo} - ${opcion.nombre}`);
        });
        
        // Mostrar selecciones de mano derecha
        Object.keys(selecciones.derecha).forEach(dedo => {
            const opcion = selecciones.derecha[dedo];
            const item = document.createElement('div');
            item.className = 'd-flex justify-content-start mb-1 text-start';
            item.innerHTML = `
                <span class="me-2">
                    <i class="fas fa-check-circle text-success"></i>
                </span>
                <span>${dedo.charAt(0).toUpperCase() + dedo.slice(1)}: ${opcion.nombre}</span>
            `;
            seleccionesDerecha.appendChild(item);
            console.log(`Mostrando selección derecha: ${dedo} - ${opcion.nombre}`);
        });
        
        // Mostrar selecciones de pie 1
        Object.keys(selecciones.pie1).forEach(dedo => {
            const opcion = selecciones.pie1[dedo];
            const item = document.createElement('div');
            item.className = 'd-flex justify-content-start mb-1 text-start';
            item.innerHTML = `
                <span class="me-2">
                    <i class="fas fa-check-circle text-success"></i>
                </span>
                <span>${dedo.charAt(0).toUpperCase() + dedo.slice(1)}: ${opcion.nombre}</span>
            `;
            seleccionesPie1.appendChild(item);
            console.log(`Mostrando selección pie1: ${dedo} - ${opcion.nombre}`);
        });
        
        // Mostrar selecciones de pie 2
        Object.keys(selecciones.pie2).forEach(dedo => {
            const opcion = selecciones.pie2[dedo];
            const item = document.createElement('div');
            item.className = 'd-flex justify-content-start mb-1 text-start';
            item.innerHTML = `
                <span class="me-2">
                    <i class="fas fa-check-circle text-success"></i>
                </span>
                <span>${dedo.charAt(0).toUpperCase() + dedo.slice(1)}: ${opcion.nombre}</span>
            `;
            seleccionesPie2.appendChild(item);
            console.log(`Mostrando selección pie2: ${dedo} - ${opcion.nombre}`);
        });
        
        console.log('Visualización de selecciones actualizada');
    }




</script>