<template>
  <div class="create-catering-form">
    <form @submit.prevent="handleSubmit">
      <!-- Detalles Específicos -->
      <div class="form-section detalles-especificos">
        <div class="form-row">
    <div class="form-group">
            <label for="tipo_entrega">
              <i class="bi bi-truck"></i> Tipo de Entrega*
      </label>
            <select id="tipo_entrega" v-model="formData.tipo_entrega" required class="select-granate">
              <option value="establecimiento">Establecimiento</option>
              <option value="entrega">Entrega</option>
              <option value="servicio_domicilio">Servicio a Domicilio</option>
            </select>
          </div>
        </div>
        <div class="form-row" v-if="formData.tipo_entrega === 'servicio_domicilio'">
          <div class="form-group">
            <label for="tipo_catering">
              <i class="bi bi-box"></i> Tipo de Catering*
            </label>
            <select id="tipo_catering" v-model="formData.tipo_catering" required class="select-granate">
              <option value="mesa_servido">Servicio en Mesa con Camareros</option>
              <option value="mesa_compartido">Servicio en Mesa Compartido</option>
              <option value="mesa_redonda">Mesas Redondas</option>
              <option value="banquete_imperial">Banquete Imperial</option>
              <option value="gueridon">Gueridon</option>
        <option value="buffet">Buffet</option>
              <option value="estaciones">Estaciones</option>
              <option value="coctel">Cóctel</option>
              <option value="finger_food">Finger Food</option>
              <option value="mixto_coctel_mesa">Mixto Cóctel + Mesa</option>
              <option value="mixto_coctel_buffet">Mixto Cóctel + Buffet</option>
              <option value="show_cooking">Show Cooking</option>
              <option value="food_truck">Food Truck</option>
      </select>
    </div>
        </div>
    <div class="form-row">
      <div class="form-group">
            <label for="min_comensales">
              <i class="bi bi-people"></i> Mínimo de Comensales*
        </label>
        <input
          type="number"
              id="min_comensales"
              v-model="formData.min_comensales"
          required
              min="1"
        />
      </div>
      <div class="form-group">
            <label for="max_comensales">
              <i class="bi bi-people-fill"></i> Máximo de Comensales*
        </label>
        <input
          type="number"
              id="max_comensales"
              v-model="formData.max_comensales"
              required
          min="1"
            />
          </div>
          <div class="form-group">
            <label for="duracion">
              <i class="bi bi-clock"></i> Duración (horas)*
            </label>
            <input
              type="number"
              id="duracion"
              v-model="formData.duracion"
          required
              min="0.5"
              step="0.5"
        />
          </div>
      </div>
    </div>

      <!-- Tipo de Servicio (Menú/Artículo) -->
    <div class="form-section">
        <h3><i class="bi icon_i bi-list-check"></i> Tipo de Servicio</h3>
        <div class="radio-group">
          <label class="radio-label">
            <input
              type="radio"
              v-model="formData.is_menu"
              :value="true"
            />
            Menú
          </label>
          <label class="radio-label">
            <input
              type="radio"
              v-model="formData.is_menu"
              :value="false"
            />
            Artículo
          </label>
          </div>

        <!-- Campos específicos para Menú -->
        <template v-if="formData.is_menu">
          <div class="form-group">
            <label for="tipo_menu">
              <i class="bi bi-tag"></i> Tipo de Menú*
            </label>
            <select id="tipo_menu" v-model="formData.tipo_menu" required class="select-granate">
              <option value="tapas">Tapas</option>
              <option value="pizza">Pizza</option>
              <option value="mediterraneo">Mediterráneo</option>
              <option value="asiatico">Asiático</option>
              <option value="mexicano">Mexicano</option>
              <option value="italiano">Italiano</option>
              <option value="vegetariano">Vegetariano</option>
              <option value="vegano">Vegano</option>
              <option value="sin_gluten">Sin Gluten</option>
              <option value="infantil">Infantil</option>
              <option value="gourmet">Gourmet</option>
              <option value="fusion">Fusión</option>
              <option value="marisco">Marisco</option>
              <option value="carnes">Carnes</option>
              <option value="postres">Postres</option>
              <option value="bodegas">Bodegas</option>
              <option value="brunch">Brunch</option>
              <option value="coffee_break">Coffee Break</option>
              <option value="picnic">Picnic</option>
              <option value="barbacoa">Barbacoa</option>
              <option value="paella">Paella</option>
              <option value="sushi">Sushi</option>
              <option value="variado">Variado</option>
              <option value="otro">Otro</option>
            </select>
        </div>

          <div class="form-group">
            <label for="nombre_menu">
              <i class="bi bi-pencil"></i> Nombre del Menú*
            </label>
            <input
              type="text"
              id="nombre_menu"
              v-model="formData.nombre_menu"
              required
              placeholder="Ej: Menú de la Semana"
            />
          </div>

          <div class="form-group">
            <label for="descripcion_menu">
              <i class="bi bi-card-text"></i> Descripción del Menú
            </label>
            <textarea
              id="descripcion_menu"
              v-model="formData.descripcion_menu"
              placeholder="Describa los detalles del menú..."
            ></textarea>
        </div>

          <div class="form-group">
            <label for="platos">
              <i class="bi bi-list-ul"></i> Platos*
            </label>
            <div class="input-group">
              <input
                id="platos"
                v-model="nuevoPlato"
                type="text"
                placeholder="Añade un plato y pulsa +"
                class="plato-input"
              />
              <button @click="agregarPlato" class="btn-add" type="button">
                <i class="bi bi-plus"></i>
              </button>
          </div>
            <div class="platos-list">
              <span v-for="(plato, idx) in formData.platos" :key="plato + idx" class="tag special plato-tag">
                {{ plato }}
                <button type="button" @click="eliminarPlato(idx)" class="remove-tag"><i class="bi bi-x"></i></button>
              </span>
        </div>
          </div>
        </template>

        <!-- Campos específicos para Artículo -->
        <template v-else>
          <div class="form-group">
            <label for="tipo_articulo">
              <i class="bi bi-tag"></i> Tipo de Artículo*
            </label>
            <select id="tipo_articulo" v-model="formData.tipo_articulo" required class="select-granate">
              <option value="agua">Agua</option>
              <option value="refrescos">Refrescos</option>
              <option value="zumos">Zumos</option>
              <option value="cerveza">Cerveza</option>
              <option value="vino">Vino</option>
              <option value="cava">Cava</option>
              <option value="champagne">Champagne</option>
              <option value="cocteles">Cócteles</option>
              <option value="cafe">Café</option>
              <option value="te">Té</option>
              <option value="infusiones">Infusiones</option>
              <option value="aceitunas">Aceitunas</option>
              <option value="frutos_secos">Frutos Secos</option>
              <option value="patatas">Patatas/Snacks</option>
              <option value="tapas">Tapas</option>
              <option value="canapes">Canapés</option>
              <option value="quesos">Quesos</option>
              <option value="embutidos">Embutidos</option>
              <option value="tartas">Tartas</option>
              <option value="pasteles">Pasteles</option>
              <option value="helados">Helados</option>
              <option value="fruta">Fruta</option>
              <option value="chocolates">Chocolates</option>
              <option value="galletas">Galletas</option>
              <option value="dulces">Dulces</option>
              <option value="variado">Variado</option>
              <option value="otro">Otro</option>
            </select>
        </div>

          <div class="form-group">
            <label for="nombre_articulo">
              <i class="bi bi-pencil"></i> Nombre del Artículo*
            </label>
            <input
              type="text"
              id="nombre_articulo"
              v-model="formData.nombre_articulo"
              required
              placeholder="Ej: Tabla de quesos selectos"
            />
          </div>

          <div class="form-group">
            <label for="descripcion_articulo">
              <i class="bi bi-card-text"></i> Descripción del Artículo
            </label>
            <textarea
              id="descripcion_articulo"
              v-model="formData.descripcion_articulo"
              placeholder="Describa los detalles del artículo..."
            ></textarea>
        </div>
        </template>
          </div>

      <!-- Características -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-list-stars"></i> Características</h3>
        <div class="details-grid">
          <div v-for="car in caracteristicasList" :key="car" class="detail-item" @click="toggleCaracteristica(car)">
            <div class="detail-icon" :class="{ active: hasCaracteristica(car) }">
              <i :class="getCaracteristicaIcon(car)"></i>
        </div>
            <span>{{ car }}</span>
          </div>
        </div>
          </div>

      <!-- Alérgenos -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-exclamation-triangle"></i> Alérgenos</h3>
        <div class="checkbox-group">
          <label v-for="alergeno in alergenos" :key="alergeno.value" class="checkbox-label">
            <input
              type="checkbox"
              v-model="formData.alergenos"
              :value="alergeno.value"
            />
            {{ alergeno.label }}
          </label>
        </div>
          </div>

      <!-- Opciones Especiales -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-star"></i> Opciones Especiales</h3>
        <div class="checkbox-group">
          <label v-for="opcion in opcionesEspeciales" :key="opcion" class="checkbox-label">
            <input
              type="checkbox"
              v-model="formData.opciones_especiales"
              :value="opcion"
            />
            {{ opcion }}
          </label>
          <label
            v-for="opcion in formData.opciones_especiales.filter(o => !opcionesEspeciales.includes(o))"
            :key="opcion"
            class="checkbox-label tag special"
          >
            {{ opcion }}
            <button type="button" @click="removeOpcionEspecial(opcion)" class="remove-tag"><i class="bi bi-x"></i></button>
          </label>
        </div>
        <div class="form-group">
          <div class="input-group">
            <input
              type="text"
              v-model="nuevaOpcion"
              placeholder="Añadir otra opción especial"
            />
            <button @click="agregarOpcionEspecial" class="btn-add" type="button">
              <i class="bi bi-plus"></i>
            </button>
          </div>
        </div>
          </div>

      <!-- Servicios Incluidos -->
      <div class="form-section">
        <h3><i class="bi icon_i bi-gear"></i> Servicios Incluidos</h3>
        <div class="servicios-incluidos-grid">
          <div class="servicios-incluidos-row">
            <div class="servicios-incluidos-col">
              <h4><i :class="getCategoryIcon('Personal')"></i> Personal</h4>
              <div class="servicios-btns-grid">
                <div v-for="(value, service) in formData.servicios_incluidos['Personal']" :key="service" class="servicio-btn-outer" @click="toggleServicio('Personal', service)">
                  <div class="servicio-icon-btn" :class="{ selected: hasServicio('Personal', service) }">
                    <i :class="getServicioIcon(service)"></i>
        </div>
                  <span class="servicio-label">{{ formatServicioName(service) }}</span>
          </div>
        </div>
          </div>
            <div class="servicios-incluidos-col">
              <h4><i :class="getCategoryIcon('Menaje')"></i> Menaje</h4>
              <div class="servicios-btns-grid">
                <div v-for="(value, service) in formData.servicios_incluidos['Menaje']" :key="service" class="servicio-btn-outer" @click="toggleServicio('Menaje', service)">
                  <div class="servicio-icon-btn" :class="{ selected: hasServicio('Menaje', service) }">
                    <i :class="getServicioIcon(service)"></i>
        </div>
                  <span class="servicio-label">{{ formatServicioName(service) }}</span>
          </div>
        </div>
          </div>
        </div>
          <div class="servicios-incluidos-row">
            <div class="servicios-incluidos-col-full">
              <h4><i :class="getCategoryIcon('Otros')"></i> Otros</h4>
              <div class="servicios-btns-grid">
                <div v-for="(value, service) in formData.servicios_incluidos['Otros']" :key="service" class="servicio-btn-outer" @click="toggleServicio('Otros', service)">
                  <div class="servicio-icon-btn" :class="{ selected: hasServicio('Otros', service) }">
                    <i :class="getServicioIcon(service)"></i>
          </div>
                  <span class="servicio-label">{{ formatServicioName(service) }}</span>
        </div>
          </div>
        </div>
          </div>
        </div>
          </div>
    </form>
  </div>
</template>

<script>
export default {
  name: 'EditCatering',
  props: {
    serviceData: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      formData: {
        tipo_entrega: '',
        tipo_catering: '',
        min_comensales: 1,
        max_comensales: 1,
        duracion: 1,
        is_menu: true,
        tipo_menu: '',
        nombre_menu: '',
        descripcion_menu: '',
        platos: [],
        tipo_articulo: '',
        nombre_articulo: '',
        descripcion_articulo: '',
        alergenos: [],
        opciones_especiales: [],
        caracteristicas: [],
        servicios_incluidos: {
          'Personal': {
            chef: false,
            camareros: false,
            bartenders: false
          },
          'Menaje': {
            vajilla: false,
            cuberteria: false
          },
          'Otros': {
            limpieza: false,
            transporte: false,
            montaje: false,
            logistica: false
          }
        }
      },
      nuevaOpcion: '',
      nuevoPlato: '',
      alergenos: [
        { value: 'gluten', label: 'Gluten' },
        { value: 'crustaceos', label: 'Crustáceos' },
        { value: 'pescado', label: 'Pescado' },
        { value: 'huevos', label: 'Huevos' },
        { value: 'cacahuetes', label: 'Cacahuetes' },
        { value: 'soja', label: 'Soja' },
        { value: 'lacteos', label: 'Lácteos' },
        { value: 'frutos_de_cascara', label: 'Frutos de cáscara' },
        { value: 'apio', label: 'Apio' },
        { value: 'mostaza', label: 'Mostaza' },
        { value: 'sesamo', label: 'Sésamo' },
        { value: 'di_azufre', label: 'Dióxido de azufre' },
        { value: 'altramuces', label: 'Altramuces' },
        { value: 'moluscos', label: 'Moluscos' }
      ],
      opcionesEspeciales: [
        'Vegetariano',
        'Vegano',
        'Sin gluten (celíaco)',
        'Sin lactosa',
        'Halal',
        'Kosher',
        'Diabético',
        'Infantil',
        'Baja en sal'
      ],
      caracteristicasList: [
        'Personalizable', 'Sala privada', 'Frío', 'Caliente', 'Desayuno', 'Brunch', 'Almuerzo', 'Merienda', 'Comida', 'Cena', 'Cóctel', 'Picoteo', 'Degustación', 'Tardeo', 'Noche',
        'Bebida incluida', 'Personal exclusivo', 'Flexibilidad horaria', 'Km 0', 'A pie', 'Sentados', 'A pie y sentado'
      ],
      hasPendingChanges: false
    }
  },
  watch: {
    serviceData: {
      immediate: true,
      handler (newVal, oldVal) {
        console.log('EditCatering - serviceData watch triggered:', newVal)
        // Solo cargar datos si es la primera vez o si los datos son diferentes
        if (!oldVal || JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          this.loadServiceData(newVal)
        }
      }
    }
  },
  mounted () {
    console.log('EditCatering - mounted with serviceData:', this.serviceData)
    if (this.serviceData) {
      this.loadServiceData(this.serviceData)
    }
  },
  methods: {
    loadServiceData (serviceData) {
      console.log('EditCatering - loadServiceData called with:', JSON.parse(JSON.stringify(serviceData)))

      // Cargar datos básicos
      this.formData.tipo_entrega = serviceData.tipo_entrega || ''
      this.formData.tipo_catering = serviceData.tipo_catering || ''
      this.formData.min_comensales = serviceData.min_comensales || 1
      this.formData.max_comensales = serviceData.max_comensales || 1
      this.formData.duracion = serviceData.duracion || 1

      // Determinar si es menú o artículo basado en los datos recibidos
      this.formData.is_menu = serviceData.menu !== null

      // Cargar datos del menú si existe
      if (serviceData.menu) {
        this.formData.tipo_menu = serviceData.menu.type_menu || ''
        this.formData.nombre_menu = serviceData.menu.nombre || ''
        this.formData.descripcion_menu = serviceData.menu.descripcion || ''
        this.formData.platos = serviceData.menu.platos || []
        this.formData.opciones_especiales = serviceData.menu.opciones_especiales || []
      }

      // Cargar datos del artículo si existe
      if (serviceData.articulo) {
        this.formData.tipo_articulo = serviceData.articulo.type_articulo || ''
        this.formData.nombre_articulo = serviceData.articulo.nombre || ''
        this.formData.descripcion_articulo = serviceData.articulo.descripcion || ''
      }

      // Cargar arrays
      this.formData.alergenos = serviceData.alergenos || []
      this.formData.caracteristicas = serviceData.caracteristicas || []

      // Cargar servicios incluidos solo si no hay cambios pendientes
      if (serviceData.service_include) {
        console.log('EditCatering - Cargando servicios incluidos:', serviceData.service_include)
        // Solo actualizar si no hay cambios pendientes
        if (!this.hasPendingChanges) {
          this.formData.servicios_incluidos = {
            'Personal': {
              chef: (serviceData.service_include.personal?.some(s => s.toLowerCase() === 'chef') || serviceData.service_include.Personal?.some(s => s.toLowerCase() === 'chef')) || false,
              camareros: (serviceData.service_include.personal?.some(s => s.toLowerCase() === 'camareros') || serviceData.service_include.Personal?.some(s => s.toLowerCase() === 'camareros')) || false,
              bartenders: (serviceData.service_include.personal?.some(s => s.toLowerCase() === 'bartenders') || serviceData.service_include.Personal?.some(s => s.toLowerCase() === 'bartenders')) || false
            },
            'Menaje': {
              vajilla: (serviceData.service_include.equipamiento?.some(s => s.toLowerCase() === 'vajilla') || serviceData.service_include.Menaje?.some(s => s.toLowerCase() === 'vajilla')) || false,
              cuberteria: (serviceData.service_include.equipamiento?.some(s => s.toLowerCase() === 'cuberteria') || serviceData.service_include.Menaje?.some(s => s.toLowerCase() === 'cuberteria')) || false
            },
            'Otros': {
              limpieza: (serviceData.service_include.servicios_adicionales?.some(s => s.toLowerCase() === 'limpieza') || serviceData.service_include.Otros?.some(s => s.toLowerCase() === 'limpieza')) || false,
              transporte: (serviceData.service_include.servicios_adicionales?.some(s => s.toLowerCase() === 'transporte') || serviceData.service_include.Otros?.some(s => s.toLowerCase() === 'transporte')) || false,
              montaje: (serviceData.service_include.servicios_adicionales?.some(s => s.toLowerCase() === 'montaje') || serviceData.service_include.Otros?.some(s => s.toLowerCase() === 'montaje')) || false,
              logistica: (serviceData.service_include.servicios_adicionales?.some(s => s.toLowerCase() === 'logistica') || serviceData.service_include.Otros?.some(s => s.toLowerCase() === 'logistica')) || false
            }
          }
        }
        console.log('EditCatering - Servicios incluidos cargados:', this.formData.servicios_incluidos)
      }

      console.log('EditCatering - formData después de cargar:', JSON.parse(JSON.stringify(this.formData)))
    },
    toggleCaracteristica (car) {
      const idx = this.formData.caracteristicas.indexOf(car)
      if (idx === -1) this.formData.caracteristicas.push(car)
      else this.formData.caracteristicas.splice(idx, 1)
      this.emitData()
    },
    hasCaracteristica (car) {
      return this.formData.caracteristicas.includes(car)
    },
    getCaracteristicaIcon (car) {
      const icons = {
        'Personalizable': 'bi-pencil',
        'Sala privada': 'bi-door-closed',
        'Frío': 'bi-snow',
        'Caliente': 'bi-thermometer-high',
        'Desayuno': 'bi-cup-hot',
        'Brunch': 'bi-cup-hot',
        'Almuerzo': 'bi-egg-fried',
        'Merienda': 'bi-cup-hot',
        'Comida': 'bi-egg-fried',
        'Cena': 'bi-moon',
        'Cóctel': 'bi-cup-straw',
        'Picoteo': 'bi-egg-fried',
        'Degustación': 'bi-star',
        'Tardeo': 'bi-sunset',
        'Noche': 'bi-moon-stars',
        'Bebida incluida': 'bi-cup-straw',
        'Personal exclusivo': 'bi-person-badge',
        'Flexibilidad horaria': 'bi-clock-history',
        'Km 0': 'bi-geo-alt',
        'A pie': 'bi-person-walking',
        'Sentados': 'bi-person-lines-fill',
        'A pie y sentado': 'bi-people'
      }
      return icons[car] || 'bi-star'
    },
    agregarOpcionEspecial () {
      if (this.nuevaOpcion.trim() && !this.formData.opciones_especiales.includes(this.nuevaOpcion.trim())) {
        this.formData.opciones_especiales.push(this.nuevaOpcion.trim())
        this.nuevaOpcion = ''
        this.emitData()
      }
    },
    removeOpcionEspecial (opcion) {
      const idx = this.formData.opciones_especiales.indexOf(opcion)
      if (idx !== -1) this.formData.opciones_especiales.splice(idx, 1)
      this.emitData()
    },
    toggleServicio (category, service) {
      console.log('Toggle servicio:', category, service, 'antes:', this.formData.servicios_incluidos[category][service])
      this.formData.servicios_incluidos[category][service] = !this.formData.servicios_incluidos[category][service]
      console.log('Toggle servicio:', category, service, 'después:', this.formData.servicios_incluidos[category][service])
      this.hasPendingChanges = true
      this.emitData()
    },
    hasServicio (category, service) {
      const has = this.formData.servicios_incluidos[category][service]
      console.log('Has servicio:', category, service, has)
      return has
    },
    getCategoryIcon (category) {
      const icons = {
        'Personal': 'bi-person-badge',
        'Menaje': 'bi-cup-straw',
        'Otros': 'bi-gear'
      }
      return icons[category] || 'bi-box-seam'
    },
    getServicioIcon (service) {
      const icons = {
        chef: 'bi-egg-fried',
        camareros: 'bi-people',
        bartenders: 'bi-cup-straw',
        vajilla: 'bi-cup',
        cuberteria: 'bi-knife',
        limpieza: 'bi-broom',
        transporte: 'bi-truck',
        montaje: 'bi-hammer',
        logistica: 'bi-gear'
      }
      return icons[service] || 'bi-box-seam'
    },
    formatServicioName (service) {
      return service.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
    },
    agregarPlato () {
      const plato = this.nuevoPlato.trim()
      if (plato && !this.formData.platos.includes(plato)) {
        this.formData.platos.push(plato)
        this.nuevoPlato = ''
        this.emitData()
      }
    },
    eliminarPlato (idx) {
      this.formData.platos.splice(idx, 1)
      this.emitData()
    },
    emitData () {
      // Transformar servicios incluidos al formato que espera el backend
      const serviceInclude = {
        personal: [],
        equipamiento: [],
        servicios_adicionales: []
      }

      // Mapear los servicios incluidos al formato correcto
      Object.entries(this.formData.servicios_incluidos).forEach(([category, services]) => {
        Object.entries(services).forEach(([service, isSelected]) => {
          if (isSelected) {
            switch (category) {
              case 'Personal':
                serviceInclude.personal.push(
                  // eslint-disable-next-line
                  service === 'chef' ? 'Chef'
                    : service === 'camareros' ? 'Camareros'
                      : service === 'bartenders' ? 'Bartenders'
                        : service
                )
                break
              case 'Menaje':
                serviceInclude.equipamiento.push(
                  // eslint-disable-next-line
                  service === 'vajilla' ? 'Vajilla'
                    // eslint-disable-next-line
                    : service === 'cuberteria' ? 'Cubertería'
                    // eslint-disable-next-line
                    : service
                )
                break
              case 'Otros':
                serviceInclude.servicios_adicionales.push(
                  service === 'limpieza' ? 'Limpieza'
                    : service === 'transporte' ? 'Transporte'
                      : service === 'montaje' ? 'Montaje'
                        : service === 'logistica' ? 'Logística'
                          : service
                )
                break
            }
          }
        })
      })

      const serviceIncludeEmit = {}
      for (const [category, services] of Object.entries(serviceInclude)) {
        if (services.length > 0) {
          serviceIncludeEmit[category] = services
        }
      }
      console.log('serviceIncludeEmit', serviceIncludeEmit)

      // Preparar datos del menú o artículo
      let menuData = null
      let articuloData = null

      if (this.formData.is_menu) {
        menuData = {
          type_menu: this.formData.tipo_menu,
          nombre: this.formData.nombre_menu,
          descripcion: this.formData.descripcion_menu || '',
          platos: this.formData.platos || [],
          opciones_especiales: this.formData.opciones_especiales || []
        }
      } else {
        articuloData = {
          type_articulo: this.formData.tipo_articulo,
          nombre: this.formData.nombre_articulo,
          descripcion: this.formData.descripcion_articulo || '',
          opciones_especiales: this.formData.opciones_especiales || []
        }
      }

      const serviceData = {
        tipo_entrega: this.formData.tipo_entrega,
        ...(this.formData.tipo_entrega === 'servicio_domicilio' && { tipo_catering: this.formData.tipo_catering }),
        min_comensales: parseInt(this.formData.min_comensales) || 1,
        max_comensales: parseInt(this.formData.max_comensales) || 1,
        duracion: parseFloat(this.formData.duracion) || 1,
        alergenos: this.formData.alergenos || [],
        caracteristicas: this.formData.caracteristicas || [],
        service_include: serviceIncludeEmit,
        menu: menuData,
        articulo: articuloData
      }

      console.log('EditCatering - Enviando datos:', JSON.parse(JSON.stringify(serviceData)))
      this.$emit('service-data', serviceData)
    }
  }
}
</script>

<style scoped>
.create-catering-form {
  width: 100%;
}

.form-section {
  background: white;
  border-radius: 12px;
  padding: 0rem;
  margin-bottom: 1.2rem;
  margin-top: 0.5rem;
}

h3 {
  color: #2C3E50;
  margin-bottom: 1rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
}

.icon_i {
  font-size: 1.2rem;
  color: #800020;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  width: 100%;
  margin-bottom: 1.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 100%;
}

label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #2C3E50;
  margin-bottom: 0.5rem;
  font-weight: 500;
  text-align: left;
  justify-content: flex-start;
}

input[type="text"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.3s;
  box-sizing: border-box;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #800020;
}

.radio-group {
  display: flex;
  gap: 2rem;
  margin-bottom: 1rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  font-size: 1.2rem;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 1rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgb(240, 240, 240);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  transition: all 0.3s ease;
}

.detail-icon i {
  font-size: 1.25rem;
  color: #6c757d;
}

.detail-icon.active {
  background-color: #800020;
}

.detail-icon.active i {
  color: white;
}

.detail-item span {
  text-align: center;
  font-size: 0.875rem;
  color: #495057;
  font-weight: 500;
}

.checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8rem;
  margin-top: 0.5rem;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.tag.special {
  background:rgb(232, 244, 245);
  color:rgb(46, 70, 125);
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
  margin-right: 0.5rem;
  font-size: 0.9em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
}

.remove-tag {
  background: none;
  border: none;
  color: #dc3545;
  margin-left: 0.3rem;
  cursor: pointer;
  font-size: 1.1em;
  justify-content: right;
}

.input-group {
  display: flex;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.btn-add {
  padding: 0.8rem;
  background: #800020;
  color: white;
  font-size: 1.2rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-add:hover {
  background-color: #600018;
}

.servicios-incluidos-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.servicios-incluidos-row {
  display: flex;
  gap: 2rem;
}

.servicios-incluidos-col,
.servicios-incluidos-col-full {
  background-color:rgb(247, 247, 247);
  border-radius: 12px;
  flex: 1;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
}

.select-granate {
  border: 1.5px solid #ccc;
  color: #2C3E50;
  background: #fff;
  border-radius: 8px;
  padding: 0.8rem;
  font-size: 1rem;
  transition: border-color 0.2s;
  height: 44px;
}

.select-granate:focus {
  border-color: #800020;
  box-shadow: 0 0 0 0.2rem rgba(128, 0, 32, 0.1);
}

.select-granate option:checked {
  background: #800020;
  color: #fff;
}

.select-granate option:hover {
  background: #e5b3c6;
  color: #800020;
}

.servicio-icon-btn {
  background: #e9ecef;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c757d;
  font-size: 1.5rem;
  margin-bottom: 0.3rem;
  transition: all 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  cursor: pointer;
}

.servicio-icon-btn.selected {
  background: #800020;
  color: #fff;
}

.servicios-btns-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.1rem;
  overflow-x: auto;
  justify-content: center;
  width: 100%;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
  scrollbar-color: #ccc #f7f7f7;
}

.servicios-btns-grid::-webkit-scrollbar {
  height: 8px;
  background: #f7f7f7;
}

.servicios-btns-grid::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.servicio-btn-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 90px;
  min-width: 90px;
  justify-self: center;
}

.servicio-label {
  color: #6c757d;
  font-size: 0.93rem;
  text-align: center;
  font-weight: 500;
  max-width: 90px;
  line-height: 1.1;
  margin-top: 0.2rem;
}

@media (max-width: 700px) {
  .servicio-btn-outer {
    width: 80px;
    min-width: 80px;
  }
  .servicio-label {
    max-width: 80px;
    font-size: 0.88rem;
  }
}

@media (max-width: 768px) {
  .checkbox-group {
    grid-template-columns: 1fr;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .details-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.form-section.detalles-especificos {
  margin-bottom: 0.5rem;
}

.form-section.detalles-especificos .form-row {
  margin-bottom: 1rem;
}

.form-section.detalles-especificos .form-group {
  margin-bottom: 0.5rem;
}

.plato-input {
  width: 100%;
  box-sizing: border-box;
}

.platos-list {
  margin-top: 0rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.plato-tag {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: 0.5rem;
}
</style>
