@extends('layouts.app')
@section('content')

<div class="card mb-6">
  <h5 class="card-header">Agregar Producto o Servicio al Inventario</h5>

  @if ($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
      <strong>¡Error!</strong>
      <ul class="list-disc ml-5">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <form class="card-body" action="{{ route('inventory.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row g-6">

      {{-- Activo --}}
      <div class="col-md-4">
        <label class="form-label d-block">Activo</label>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="is_active" name="is_active" value="1" checked>
          <label class="form-check-label" for="is_active">Mostrar en el catálogo</label>
        </div>
      </div>

      {{-- Imagen --}}
      <div class="col-md-4">
        <label class="form-label" for="image">Imagen</label>
        <input type="file" id="image" name="image" class="form-control" accept="image/*">
        <small class="text-muted">JPG, PNG o WEBP (máx. 5 MB).</small>
      </div>

      {{-- Vista Previa --}}
      <div class="col-md-4">
        <div class="mt-2">
          <img id="imagePreview" src="" alt="" style="max-height:120px; display:none; border-radius:8px;">
        </div>
      </div>

     {{-- SKU --}}
    <div class="col-md-3">
      <label class="form-label" for="sku">
        SKU
        <i class="ti tabler-info-circle ms-1"
          role="button"
          tabindex="0"
          data-bs-toggle="tooltip"
          data-bs-placement="top"
          data-bs-original-title="Identificador interno opcional para tu producto/servicio. Se recomienda único por usuario para búsquedas y control.">
        </i>
      </label>
      <input
        type="text"
        id="sku"
        name="sku"
        class="form-control"
        placeholder="Tu código interno"
      />
    </div>

      {{-- Código SAT (ClaveProdServ) --}}
      <div class="col-md-3">
        <label class="form-label" for="sat_code">Código SAT (ClaveProdServ)</label>
        <input
          type="text"
          id="sat_code"
          name="sat_code"
          class="form-control"
          placeholder="8 dígitos del catálogo del SAT"
          inputmode="numeric"
          pattern="\d{8}"
          maxlength="8"
          value="{{ old('sat_code') }}"
        />
      </div>

      {{-- Nombre --}}
      <div class="col-md-6">
        <label class="form-label" for="name">
          Nombre <span class="required-asterisk">*</span>
        </label>
        <input type="text" id="name" name="name" class="form-control" placeholder="Ej: Taza blanca 11oz / Servicio de impresión A4" required />
      </div>

      {{-- Tipo (desde BD) --}}
      <div class="col-md-3">
        <label class="form-label" for="type">
          Tipo 
          <i class="ti tabler-info-circle ms-1" role="button" tabindex="0"
            data-bs-toggle="tooltip" data-bs-placement="top"
            data-bs-original-title="Elige “Servicio” si no hay existencias físicas que contar."></i>
          <span class="required-asterisk">*</span>
        </label>
        <select id="type" name="type" class="select2 form-select" data-allow-clear="true" required>
          <option value="" disabled selected>Selecciona el tipo…</option>
          @foreach ($types as $t)
            <option value="{{ $t->code }}" data-stockable="{{ $t->is_stockable ? 1 : 0 }}">
              {{ $t->name }} {{ $t->is_stockable ? '(maneja inventario)' : '(sin inventario)' }}
            </option>
          @endforeach
        </select>
      </div>

      {{-- Categoría --}}
      <div class="col-md-3">
        <label class="form-label" for="category_id">Categoría</label>
        <select id="category_id" name="category_id" class="select2 form-select" data-allow-clear="true">
          <option value="">Sin categoría</option>
          @foreach ($categories as $cat)
            <option value="{{ $cat->id }}">{{ $cat->name }}</option>
          @endforeach
        </select>
      </div>

      {{-- Unidad SAT (ClaveUnidad) --}}
      <div class="col-md-3">
        <label class="form-label" for="sat_unit_code">
          Unidad SAT (ClaveUnidad) 
          <i class="ti tabler-info-circle ms-1"
            role="button"
            tabindex="0"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            data-bs-original-title="Requerida para CFDI. Ejemplos: Pieza, Kilogramo, Hora, Servicio.">
          </i>
          <span class="required-asterisk">*</span>
        </label>
        <select id="sat_unit_code" name="sat_unit_code" class="select2 form-select" required>
          <option value="">Selecciona la unidad del SAT…</option>
          @foreach(\App\Models\SatUnit::where('is_active', true)->whereNull('deleted_at')->orderBy('name')->get() as $u)
            <option value="{{ $u->code }}" {{ old('sat_unit_code', $inventory->sat_unit_code ?? '') === $u->code ? 'selected':'' }}>
              {{ $u->name }} ({{ $u->code }}) — {{ $u->group }}
            </option>
          @endforeach
        </select>
      </div>

      {{-- Unidad legible (etiqueta visible) --}}
      <div class="col-md-3">
        <label class="form-label" for="unit">
          Unidad (etiqueta visible) 
          <i class="ti tabler-info-circle ms-1"
            role="button"
            tabindex="0"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            data-bs-original-title="Así aparecerá en PDFs/Interfaces. Se llena desde la Unidad SAT.">
          </i>
          <span class="required-asterisk">*</span>
        </label>
        <input
          type="text"
          id="unit"
          name="unit"
          class="form-control input-fake-disabled"
          value="{{ old('unit', $inventory->unit ?? '') }}"
          placeholder="Se autollenará con la Unidad SAT"
          readonly
          aria-disabled="true"
          required
        >
      </div>

      {{-- Permitir decimales --}}
      <div class="col-md-4">
        <label class="form-label d-block">Permitir cantidades decimales</label>
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" id="allow_decimal_qty" name="allow_decimal_qty" value="1">
          <label class="form-check-label" for="allow_decimal_qty">Actívalo para metros, litros, m², horas, etc.</label>
        </div>
      </div>

      {{-- Cantidad --}}
      <div class="col-md-4">
        <label class="form-label" for="quantity">
          Cantidad 
          <i class="ti tabler-info-circle ms-1"
            role="button"
            tabindex="0"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            data-bs-original-title="Para servicios no aplica inventario (se registra 0).">
          </i>
          <span class="required-asterisk js-req-product">*</span>
        </label>
        <input
          type="number"
          id="quantity"
          name="quantity"
          class="form-control input-fake-disabled"
          placeholder="Ej: 10 (para servicios se fija en 0)"
          min="0"
          required
        />
      </div>

      {{-- Costo/Precio base --}}
      <div class="col-md-4">
        <label class="form-label" for="cost">
          Costo/Precio base 
          <i class="ti tabler-info-circle ms-1"
            role="button"
            tabindex="0"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            data-bs-original-title="Puedes definir precios por volumen más abajo.">
          </i>
          <span class="required-asterisk">*</span>
        </label>
        <input
          type="number"
          step="0.01"
          id="cost"
          name="cost"
          class="form-control"
          placeholder="Ej: 50.00 (precio unitario base)"
          min="0"
          required
        />
      </div>

      {{-- Descripción --}}
      <div class="col-md-12">
        <label class="form-label" for="description">Descripción</label>
        <textarea
          class="form-control"
          name="description"
          id="description"
          placeholder="Ej: Taza cerámica blanca 11oz, apta para sublimación. O: Servicio de impresión en papel couché a color."
          rows="3"
        ></textarea>
      </div>

      {{-- Estrategia de precio --}}
      <div class="col-md-4">
        <label class="form-label" for="pricing_strategy">
          Estrategia de precio
          <i class="ti tabler-info-circle ms-1"
            role="button"
            tabindex="0"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            data-bs-original-title="Elige cómo se calculará el precio (simple, rangos de cantidad o por paquetes).">
          </i>
          <span class="required-asterisk">*</span>
        </label>
        <select id="pricing_strategy" name="pricing_strategy" class="select2 form-select" required>
          @foreach($strategies as $st)
            <option
              value="{{ $st->code }}"
              data-show-volume="{{ $st->show_volume_section ? 1 : 0 }}"
              data-bs-original-title="{{ $st->hint ?? '' }}"
              {{ old('pricing_strategy','simple') === $st->code ? 'selected' : '' }}
            >
              {{ $st->name }}
            </option>
          @endforeach
        </select>
        <small class="text-muted d-block mt-1">
          Tip: “Paquetes + sobrante” es útil para “un millar y medio”.
        </small>
      </div>


      {{-- Equivalencia de pack (opcional) --}}
      <div class="col-md-4">
        <label class="form-label" for="pack_equivalence">
          Equivalencia de pack
          <i class="ti tabler-info-circle ms-1"
            role="button"
            tabindex="0"
            data-bs-toggle="tooltip"
            data-bs-placement="top"
            data-bs-original-title="Cuántas unidades base incluye 1 pack. Ej: 1000 si 1 pack = 1000 piezas.">
          </i>
        </label>
        <input
          type="number"
          step="0.001"
          min="0.001"
          class="form-control"
          id="pack_equivalence"
          name="pack_equivalence"
          placeholder="Ej: 1000 (si 1 pack = 1000 unidades)"
        >
      </div>

      {{-- Etiqueta de pack --}}
      <div class="col-md-4">
        <label class="form-label" for="pack_label">Etiqueta de pack</label>
        <input
          type="text"
          class="form-control"
          id="pack_label"
          name="pack_label"
          placeholder="Ej: millar, caja, rollo"
        >
      </div>

      {{-- Sección de Precios por volumen (solo visible si strategy != simple) --}}
      <div id="volumePricingSection" class="col-12" style="display:none">
        @include('inventory._volume_pricing', ['inventory' => $inventory ?? null])
      </div>
    </div>

    <div class="pt-4 text-end">
      <button id="save-btn" type="submit" class="btn btn-outline-success waves-effect me-2">
        <i class="menu-icon icon-base ti tabler-device-floppy me-1"></i> {{ __('fields.buttons_save') }}
      </button>
      <a href="{{ route('inventory.index') }}" class="btn btn-outline-secondary">
        <i class="menu-icon icon-base ti tabler-arrow-narrow-left-dashed"></i> {{ __('fields.buttons_volver_listado') }}
      </a>
    </div>
  </form>
</div>
@endsection

@push('scripts')
  <script src="{{ asset('vuexy-assets/js/pages/inventory/inventory-create.js') }}"></script>
  <script src="{{ asset('vuexy-assets/js/pages/inventory/inventory-volume-pricing.js') }}"></script>
@endpush