@extends('layouts.app')

@section('title', 'Crear Producto')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('configuracion.index') }}">Configuración</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.inventory.products.index') }}">Inventario</a></li>
            <li class="breadcrumb-item active">Crear Producto</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-plus text-success me-2"></i>Crear Producto
            </h1>
            <p class="text-muted mb-0">Complete todos los campos para crear un nuevo producto</p>
        </div>
        <a href="{{ route('admin.inventory.products.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Volver
        </a>
    </div>

    <form action="{{ route('admin.inventory.products.store') }}" method="POST" enctype="multipart/form-data" id="product-form">
        @csrf
        
        <!-- Progress Bar -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="progress mb-3" style="height: 8px;">
                    <div class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
                </div>
                <small class="text-muted">Complete todos los campos para finalizar el producto</small>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-8">
                <!-- Información Básica -->
                <div class="card mb-4" id="section-basic">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-info-circle"></i> Información Básica del Producto
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="code" class="form-label">Código del Producto <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="code" name="code" 
                                           value="{{ old('code') }}" required>
                                    <button type="button" class="btn btn-outline-secondary" onclick="generarCodigo()">
                                        <i class="fas fa-sync"></i>
                                    </button>
                                </div>
                                @error('code')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="sku" class="form-label">SKU <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="text" class="form-control" id="sku" name="sku" 
                                           value="{{ old('sku') }}" required>
                                    <button type="button" class="btn btn-outline-secondary" onclick="generarSKU()">
                                        <i class="fas fa-sync"></i>
                                    </button>
                                </div>
                                @error('sku')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="name" class="form-label">Nombre del Producto <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" 
                                   value="{{ old('name') }}" required>
                            @error('name')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="description" class="form-label">Descripción</label>
                            <textarea class="form-control" id="description" name="description" rows="3">{{ old('description') }}</textarea>
                            @error('description')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="category_id" class="form-label">Categoría <span class="text-danger">*</span></label>
                                <select class="form-select" id="category_id" name="category_id" required>
                                    <option value="">Seleccione una categoría</option>
                                    @foreach($categories as $category)
                                        <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="brand_id" class="form-label">Marca <span class="text-danger">*</span></label>
                                <select class="form-select" id="brand_id" name="brand_id" required>
                                    <option value="">Seleccione una marca</option>
                                    @foreach($brands as $brand)
                                        <option value="{{ $brand->id }}" {{ old('brand_id') == $brand->id ? 'selected' : '' }}>
                                            {{ $brand->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('brand_id')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="barcode" class="form-label">Código de Barras Principal</label>
                            <div class="input-group">
                                <input type="text" class="form-control" id="barcode" name="barcode" 
                                       value="{{ old('barcode') }}">
                                <button type="button" class="btn btn-outline-secondary" onclick="generarBarcode()">
                                    <i class="fas fa-barcode"></i>
                                </button>
                            </div>
                            @error('barcode')
                                <div class="text-danger small">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Medidas Físicas -->
                <div class="card mb-4" id="section-physical">
                    <div class="card-header bg-gradient-secondary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-ruler-combined"></i> Medidas Físicas
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3 mb-3">
                                <label for="weight" class="form-label">Peso (kg)</label>
                                <input type="number" class="form-control" id="weight" name="weight" 
                                       value="{{ old('weight') }}" step="0.01" min="0">
                                @error('weight')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="length" class="form-label">Largo (cm)</label>
                                <input type="number" class="form-control" id="length" name="length" 
                                       value="{{ old('length') }}" step="0.01" min="0">
                                @error('length')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="width" class="form-label">Ancho (cm)</label>
                                <input type="number" class="form-control" id="width" name="width" 
                                       value="{{ old('width') }}" step="0.01" min="0">
                                @error('width')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="height" class="form-label">Alto (cm)</label>
                                <input type="number" class="form-control" id="height" name="height" 
                                       value="{{ old('height') }}" step="0.01" min="0">
                                @error('height')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sistema de Precios por Pestañas -->
                <div class="card mb-4" id="section-unit-prices">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-dollar-sign"></i> Sistema de Precios por Pestañas
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Costos Base -->
                        <div class="row mb-4">
                            <div class="col-md-3 mb-3">
                                <label for="base_cost_price" class="form-label">Precio Base <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="base_cost_price" name="base_cost_price" 
                                           value="{{ old('base_cost_price') }}" step="0.01" min="0" required>
                                </div>
                                @error('base_cost_price')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="expense_1" class="form-label">Gasto 1</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="expense_1" name="expense_1" 
                                           value="{{ old('expense_1', 0) }}" step="0.01" min="0">
                                </div>
                                @error('expense_1')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="expense_2" class="form-label">Gasto 2</label>
                                <div class="input-group">
                                    <span class="input-group-text">$</span>
                                    <input type="number" class="form-control" id="expense_2" name="expense_2" 
                                           value="{{ old('expense_2', 0) }}" step="0.01" min="0">
                                </div>
                                @error('expense_2')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-3 mb-3">
                                <label class="form-label">Impuesto en Compras</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="purchase_tax_enabled" 
                                           name="purchase_tax_enabled" {{ old('purchase_tax_enabled') ? 'checked' : '' }}>
                                    <label class="form-check-label" for="purchase_tax_enabled">
                                        Incluir IVA
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="tax_id" class="form-label">Impuesto del Producto</label>
                                <select class="form-select" id="tax_id" name="tax_id">
                                    <option value="">Seleccionar impuesto</option>
                                    @foreach(\App\Models\Tax::active()->ordered()->get() as $tax)
                                        <option value="{{ $tax->id }}" 
                                                data-percentage="{{ $tax->percentage }}"
                                                data-type="{{ $tax->type }}"
                                                data-calculation="{{ $tax->calculation_type }}"
                                                {{ old('tax_id') == $tax->id ? 'selected' : '' }}>
                                            {{ $tax->name }} ({{ $tax->formatted_percentage }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('tax_id')
                                    <div class="text-danger small">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        
                        <!-- Configuración de Nombres de Pestañas -->
                        <div class="row mb-4">
                            <div class="col-md-4 mb-3">
                                <label for="tab_name_1" class="form-label">Nombre Pestaña 1</label>
                                <input type="text" class="form-control" id="tab_name_1" name="tab_name_1" 
                                       value="{{ old('tab_name_1', 'Unidad') }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="tab_enabled_1" 
                                           name="tab_enabled_1" checked>
                                    <label class="form-check-label" for="tab_enabled_1">
                                        Habilitar
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="tab_name_2" class="form-label">Nombre Pestaña 2</label>
                                <input type="text" class="form-control" id="tab_name_2" name="tab_name_2" 
                                       value="{{ old('tab_name_2', 'Caja') }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="tab_enabled_2" 
                                           name="tab_enabled_2">
                                    <label class="form-check-label" for="tab_enabled_2">
                                        Habilitar
                                    </label>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="tab_name_3" class="form-label">Nombre Pestaña 3</label>
                                <input type="text" class="form-control" id="tab_name_3" name="tab_name_3" 
                                       value="{{ old('tab_name_3', 'Bulto') }}">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="tab_enabled_3" 
                                           name="tab_enabled_3">
                                    <label class="form-check-label" for="tab_enabled_3">
                                        Habilitar
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                        <!-- Pestañas de Unidades -->
                        <ul class="nav nav-tabs nav-tabs-custom" id="unitTabs">
                            <li class="nav-item">
                                <button class="nav-link active" id="tab1-tab" data-bs-toggle="tab" data-bs-target="#tab1" type="button" role="tab">
                                    <span id="tab-text-1">Unidad</span>
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" id="tab2-tab" data-bs-toggle="tab" data-bs-target="#tab2" type="button" role="tab">
                                    <span id="tab-text-2">Caja</span>
                                </button>
                            </li>
                            <li class="nav-item">
                                <button class="nav-link" id="tab3-tab" data-bs-toggle="tab" data-bs-target="#tab3" type="button" role="tab">
                                    <span id="tab-text-3">Bulto</span>
                                </button>
                            </li>
                        </ul>
                        
                        <div class="tab-content" id="unitTabContent">
                            <!-- Unidad 1 -->
                            <div class="tab-pane fade show active" id="tab1">
                                <div class="row mt-3">
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_1_quantity" class="form-label">Cantidad</label>
                                        <input type="number" class="form-control" id="unit_1_quantity" name="unit_1_quantity" 
                                               value="{{ old('unit_1_quantity', 1) }}" min="1">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_1_operation" class="form-label">Operación</label>
                                        <select class="form-select" id="unit_1_operation" name="unit_1_operation">
                                            <option value="divide" {{ old('unit_1_operation', 'divide') == 'divide' ? 'selected' : '' }}>Dividir</option>
                                            <option value="multiply" {{ old('unit_1_operation') == 'multiply' ? 'selected' : '' }}>Multiplicar</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_1_currency" class="form-label">Moneda</label>
                                        <select class="form-select" id="unit_1_currency" name="unit_1_currency">
                                            <option value="USD" {{ old('unit_1_currency', 'USD') == 'USD' ? 'selected' : '' }}>USD</option>
                                            <option value="EUR" {{ old('unit_1_currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                                            <option value="BOB" {{ old('unit_1_currency') == 'BOB' ? 'selected' : '' }}>BOB</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Precios por Nivel -->
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-primary">Nivel Básico</h6>
                                        <div class="mb-2">
                                            <label for="unit_1_utilidad_1" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_1_utilidad_1" name="unit_1_utilidad_1" 
                                                   value="{{ old('unit_1_utilidad_1', 25) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_1_tax_enabled_1" 
                                                   name="unit_1_tax_enabled_1" checked>
                                            <label class="form-check-label" for="unit_1_tax_enabled_1">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_sin_impuesto_1" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_1_sin_impuesto_1" name="unit_1_sin_impuesto_1" 
                                                   value="{{ old('unit_1_sin_impuesto_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_con_impuesto_1" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_1_con_impuesto_1" name="unit_1_con_impuesto_1" 
                                                   value="{{ old('unit_1_con_impuesto_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_pvp_1" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_1_pvp_1" name="unit_1_pvp_1" 
                                                   value="{{ old('unit_1_pvp_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-success">Nivel Intermedio</h6>
                                        <div class="mb-2">
                                            <label for="unit_1_utilidad_2" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_1_utilidad_2" name="unit_1_utilidad_2" 
                                                   value="{{ old('unit_1_utilidad_2', 30) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_1_tax_enabled_2" 
                                                   name="unit_1_tax_enabled_2" checked>
                                            <label class="form-check-label" for="unit_1_tax_enabled_2">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_sin_impuesto_2" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_1_sin_impuesto_2" name="unit_1_sin_impuesto_2" 
                                                   value="{{ old('unit_1_sin_impuesto_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_con_impuesto_2" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_1_con_impuesto_2" name="unit_1_con_impuesto_2" 
                                                   value="{{ old('unit_1_con_impuesto_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_pvp_2" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_1_pvp_2" name="unit_1_pvp_2" 
                                                   value="{{ old('unit_1_pvp_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-warning">Nivel Premium</h6>
                                        <div class="mb-2">
                                            <label for="unit_1_utilidad_3" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_1_utilidad_3" name="unit_1_utilidad_3" 
                                                   value="{{ old('unit_1_utilidad_3', 35) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_1_tax_enabled_3" 
                                                   name="unit_1_tax_enabled_3" checked>
                                            <label class="form-check-label" for="unit_1_tax_enabled_3">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_sin_impuesto_3" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_1_sin_impuesto_3" name="unit_1_sin_impuesto_3" 
                                                   value="{{ old('unit_1_sin_impuesto_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_con_impuesto_3" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_1_con_impuesto_3" name="unit_1_con_impuesto_3" 
                                                   value="{{ old('unit_1_con_impuesto_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_1_pvp_3" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_1_pvp_3" name="unit_1_pvp_3" 
                                                   value="{{ old('unit_1_pvp_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Unidad 2 -->
                            <div class="tab-pane fade" id="tab2">
                                <div class="row mt-3">
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_2_quantity" class="form-label">Cantidad</label>
                                        <input type="number" class="form-control" id="unit_2_quantity" name="unit_2_quantity" 
                                               value="{{ old('unit_2_quantity', 12) }}" min="1">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_2_operation" class="form-label">Operación</label>
                                        <select class="form-select" id="unit_2_operation" name="unit_2_operation">
                                            <option value="divide" {{ old('unit_2_operation', 'divide') == 'divide' ? 'selected' : '' }}>Dividir</option>
                                            <option value="multiply" {{ old('unit_2_operation') == 'multiply' ? 'selected' : '' }}>Multiplicar</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_2_currency" class="form-label">Moneda</label>
                                        <select class="form-select" id="unit_2_currency" name="unit_2_currency">
                                            <option value="USD" {{ old('unit_2_currency', 'USD') == 'USD' ? 'selected' : '' }}>USD</option>
                                            <option value="EUR" {{ old('unit_2_currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                                            <option value="BOB" {{ old('unit_2_currency') == 'BOB' ? 'selected' : '' }}>BOB</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Precios por Nivel -->
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-primary">Nivel Básico</h6>
                                        <div class="mb-2">
                                            <label for="unit_2_utilidad_1" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_2_utilidad_1" name="unit_2_utilidad_1" 
                                                   value="{{ old('unit_2_utilidad_1', 20) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_2_tax_enabled_1" 
                                                   name="unit_2_tax_enabled_1" checked>
                                            <label class="form-check-label" for="unit_2_tax_enabled_1">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_sin_impuesto_1" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_2_sin_impuesto_1" name="unit_2_sin_impuesto_1" 
                                                   value="{{ old('unit_2_sin_impuesto_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_con_impuesto_1" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_2_con_impuesto_1" name="unit_2_con_impuesto_1" 
                                                   value="{{ old('unit_2_con_impuesto_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_pvp_1" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_2_pvp_1" name="unit_2_pvp_1" 
                                                   value="{{ old('unit_2_pvp_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-success">Nivel Intermedio</h6>
                                        <div class="mb-2">
                                            <label for="unit_2_utilidad_2" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_2_utilidad_2" name="unit_2_utilidad_2" 
                                                   value="{{ old('unit_2_utilidad_2', 25) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_2_tax_enabled_2" 
                                                   name="unit_2_tax_enabled_2" checked>
                                            <label class="form-check-label" for="unit_2_tax_enabled_2">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_sin_impuesto_2" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_2_sin_impuesto_2" name="unit_2_sin_impuesto_2" 
                                                   value="{{ old('unit_2_sin_impuesto_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_con_impuesto_2" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_2_con_impuesto_2" name="unit_2_con_impuesto_2" 
                                                   value="{{ old('unit_2_con_impuesto_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_pvp_2" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_2_pvp_2" name="unit_2_pvp_2" 
                                                   value="{{ old('unit_2_pvp_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-warning">Nivel Premium</h6>
                                        <div class="mb-2">
                                            <label for="unit_2_utilidad_3" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_2_utilidad_3" name="unit_2_utilidad_3" 
                                                   value="{{ old('unit_2_utilidad_3', 30) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_2_tax_enabled_3" 
                                                   name="unit_2_tax_enabled_3" checked>
                                            <label class="form-check-label" for="unit_2_tax_enabled_3">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_sin_impuesto_3" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_2_sin_impuesto_3" name="unit_2_sin_impuesto_3" 
                                                   value="{{ old('unit_2_sin_impuesto_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_con_impuesto_3" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_2_con_impuesto_3" name="unit_2_con_impuesto_3" 
                                                   value="{{ old('unit_2_con_impuesto_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_2_pvp_3" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_2_pvp_3" name="unit_2_pvp_3" 
                                                   value="{{ old('unit_2_pvp_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Unidad 3 -->
                            <div class="tab-pane fade" id="tab3">
                                <div class="row mt-3">
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_3_quantity" class="form-label">Cantidad</label>
                                        <input type="number" class="form-control" id="unit_3_quantity" name="unit_3_quantity" 
                                               value="{{ old('unit_3_quantity', 24) }}" min="1">
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_3_operation" class="form-label">Operación</label>
                                        <select class="form-select" id="unit_3_operation" name="unit_3_operation">
                                            <option value="divide" {{ old('unit_3_operation', 'divide') == 'divide' ? 'selected' : '' }}>Dividir</option>
                                            <option value="multiply" {{ old('unit_3_operation') == 'multiply' ? 'selected' : '' }}>Multiplicar</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label for="unit_3_currency" class="form-label">Moneda</label>
                                        <select class="form-select" id="unit_3_currency" name="unit_3_currency">
                                            <option value="USD" {{ old('unit_3_currency', 'USD') == 'USD' ? 'selected' : '' }}>USD</option>
                                            <option value="EUR" {{ old('unit_3_currency') == 'EUR' ? 'selected' : '' }}>EUR</option>
                                            <option value="BOB" {{ old('unit_3_currency') == 'BOB' ? 'selected' : '' }}>BOB</option>
                                        </select>
                                    </div>
                                </div>
                                
                                <!-- Precios por Nivel -->
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-primary">Nivel Básico</h6>
                                        <div class="mb-2">
                                            <label for="unit_3_utilidad_1" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_3_utilidad_1" name="unit_3_utilidad_1" 
                                                   value="{{ old('unit_3_utilidad_1', 15) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_3_tax_enabled_1" 
                                                   name="unit_3_tax_enabled_1" checked>
                                            <label class="form-check-label" for="unit_3_tax_enabled_1">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_sin_impuesto_1" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_3_sin_impuesto_1" name="unit_3_sin_impuesto_1" 
                                                   value="{{ old('unit_3_sin_impuesto_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_con_impuesto_1" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_3_con_impuesto_1" name="unit_3_con_impuesto_1" 
                                                   value="{{ old('unit_3_con_impuesto_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_pvp_1" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_3_pvp_1" name="unit_3_pvp_1" 
                                                   value="{{ old('unit_3_pvp_1') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-success">Nivel Intermedio</h6>
                                        <div class="mb-2">
                                            <label for="unit_3_utilidad_2" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_3_utilidad_2" name="unit_3_utilidad_2" 
                                                   value="{{ old('unit_3_utilidad_2', 20) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_3_tax_enabled_2" 
                                                   name="unit_3_tax_enabled_2" checked>
                                            <label class="form-check-label" for="unit_3_tax_enabled_2">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_sin_impuesto_2" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_3_sin_impuesto_2" name="unit_3_sin_impuesto_2" 
                                                   value="{{ old('unit_3_sin_impuesto_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_con_impuesto_2" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_3_con_impuesto_2" name="unit_3_con_impuesto_2" 
                                                   value="{{ old('unit_3_con_impuesto_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_pvp_2" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_3_pvp_2" name="unit_3_pvp_2" 
                                                   value="{{ old('unit_3_pvp_2') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                    
                                    <div class="col-md-4 mb-3">
                                        <h6 class="text-warning">Nivel Premium</h6>
                                        <div class="mb-2">
                                            <label for="unit_3_utilidad_3" class="form-label">Utilidad (%)</label>
                                            <input type="number" class="form-control" id="unit_3_utilidad_3" name="unit_3_utilidad_3" 
                                                   value="{{ old('unit_3_utilidad_3', 25) }}" step="0.01" min="0">
                                        </div>
                                        <div class="form-check mb-2">
                                            <input class="form-check-input" type="checkbox" id="unit_3_tax_enabled_3" 
                                                   name="unit_3_tax_enabled_3" checked>
                                            <label class="form-check-label" for="unit_3_tax_enabled_3">
                                                Incluir IVA
                                            </label>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_sin_impuesto_3" class="form-label">Sin Impuesto</label>
                                            <input type="number" class="form-control" id="unit_3_sin_impuesto_3" name="unit_3_sin_impuesto_3" 
                                                   value="{{ old('unit_3_sin_impuesto_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_con_impuesto_3" class="form-label">Con Impuesto</label>
                                            <input type="number" class="form-control" id="unit_3_con_impuesto_3" name="unit_3_con_impuesto_3" 
                                                   value="{{ old('unit_3_con_impuesto_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                        <div class="mb-2">
                                            <label for="unit_3_pvp_3" class="form-label">PVP</label>
                                            <input type="number" class="form-control" id="unit_3_pvp_3" name="unit_3_pvp_3" 
                                                   value="{{ old('unit_3_pvp_3') }}" step="0.01" min="0" readonly>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sistema Multi-Código de Barras -->
                <div class="card mb-4" id="section-barcodes">
                    <div class="card-header bg-info text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-barcode"></i> Códigos de Barras Adicionales
                        </h5>
                    </div>
                    <div class="card-body">
                        <div id="barcodes-container">
                            <!-- Los códigos se agregarán dinámicamente -->
                        </div>
                        <button type="button" class="btn btn-outline-primary" onclick="addBarcode()">
                            <i class="fas fa-plus me-2"></i>Agregar Código de Barras
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4">
                <!-- Imagen del Producto -->
                <div class="card mb-4">
                    <div class="card-header bg-warning text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-image"></i> Imagen del Producto
                        </h5>
                    </div>
                    <div class="card-body text-center">
                        <div id="image-preview-container">
                            <img id="image-preview" src="" alt="Vista previa" class="img-thumbnail mb-3" style="display: none; max-width: 200px;">
                            <div id="no-image" class="text-muted">
                                <i class="fas fa-image fa-3x mb-3"></i>
                                <p>No hay imagen seleccionada</p>
                            </div>
                        </div>
                        <input type="file" class="form-control" id="image" name="image" accept="image/*" onchange="previewImage(this)">
                        <div class="form-text">
                            <i class="fas fa-info-circle me-1"></i>
                            Formatos permitidos: JPEG, PNG, JPG, GIF. Tamaño máximo: 10MB
                        </div>
                        <button type="button" class="btn btn-outline-danger btn-sm mt-2" id="remove-image" onclick="removeImage()" style="display: none;">
                            <i class="fas fa-trash me-1"></i>Eliminar Imagen
                        </button>
                        @error('image')
                            <div class="text-danger small mt-2">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

                <!-- Estado del Producto -->
                <div class="card mb-4">
                    <div class="card-header bg-secondary text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-toggle-on"></i> Estado del Producto
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="is_active" name="is_active" checked>
                            <label class="form-check-label" for="is_active">
                                <strong>Producto Activo</strong>
                            </label>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured">
                            <label class="form-check-label" for="is_featured">
                                <strong>Producto Destacado</strong>
                            </label>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="requires_prescription" name="requires_prescription">
                            <label class="form-check-label" for="requires_prescription">
                                <strong>Requiere Receta</strong>
                            </label>
                        </div>
                    </div>
                </div>

                <!-- Configuración de Inventario -->
                <div class="card mb-4">
                    <div class="card-header bg-dark text-white">
                        <h5 class="mb-0">
                            <i class="fas fa-warehouse"></i> Configuración de Inventario
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="track_stock" name="track_stock" checked>
                            <label class="form-check-label" for="track_stock">
                                <strong>Rastrear Stock</strong>
                            </label>
                        </div>
                        <div class="form-check mb-3">
                            <input class="form-check-input" type="checkbox" id="allow_negative_stock" name="allow_negative_stock">
                            <label class="form-check-label" for="allow_negative_stock">
                                <strong>Permitir Stock Negativo</strong>
                            </label>
                        </div>
                        <div class="mb-3">
                            <label for="stock_min" class="form-label">Stock Mínimo</label>
                            <input type="number" class="form-control" id="stock_min" name="stock_min" 
                                   value="{{ old('stock_min', 0) }}" min="0">
                        </div>
                        <div class="mb-3">
                            <label for="stock_max" class="form-label">Stock Máximo</label>
                            <input type="number" class="form-control" id="stock_max" name="stock_max" 
                                   value="{{ old('stock_max') }}" min="0">
                        </div>
                        <div class="mb-3">
                            <label for="current_stock" class="form-label">Stock Actual</label>
                            <div class="input-group">
                                <input type="number" class="form-control" id="current_stock" name="current_stock" 
                                       value="{{ old('current_stock', 0) }}" min="0" readonly>
                                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#inventoryModal">
                                    <i class="fas fa-info-circle"></i> Ver Inventario
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información Adicional -->
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0">
                            <i class="fas fa-info"></i> Información Adicional
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="unit_of_measure" class="form-label">Unidad de Medida</label>
                            <select class="form-select" id="unit_of_measure" name="unit_of_measure">
                                <option value="pcs" {{ old('unit_of_measure', 'pcs') == 'pcs' ? 'selected' : '' }}>Piezas</option>
                                <option value="kg" {{ old('unit_of_measure') == 'kg' ? 'selected' : '' }}>Kilogramos</option>
                                <option value="g" {{ old('unit_of_measure') == 'g' ? 'selected' : '' }}>Gramos</option>
                                <option value="l" {{ old('unit_of_measure') == 'l' ? 'selected' : '' }}>Litros</option>
                                <option value="ml" {{ old('unit_of_measure') == 'ml' ? 'selected' : '' }}>Mililitros</option>
                                <option value="m" {{ old('unit_of_measure') == 'm' ? 'selected' : '' }}>Metros</option>
                                <option value="cm" {{ old('unit_of_measure') == 'cm' ? 'selected' : '' }}>Centímetros</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="notes" class="form-label">Notas</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3">{{ old('notes') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Botones de Acción -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body text-center">
                        <button type="submit" class="btn btn-success btn-lg me-3">
                            <i class="fas fa-save me-2"></i>Guardar Producto
                        </button>
                        <a href="{{ route('admin.inventory.products.index') }}" class="btn btn-secondary btn-lg">
                            <i class="fas fa-times me-2"></i>Cancelar
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('styles')
<style>
.nav-tabs-custom .nav-link {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px 10px 0 0;
    margin-right: 5px;
    transition: all 0.3s ease;
}

.nav-tabs-custom .nav-link:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
}

.nav-tabs-custom .nav-link.active {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.input-group-text {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    font-weight: bold;
}

.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
@endpush

@push('scripts')
<script>
let barcodeCounter = 0;

// Generar códigos únicos
function generarCodigo() {
    fetch("{{ route('admin.inventory.products.generate-codes') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ prefix: 'PRD' })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('code').value = data.code;
    })
    .catch(error => console.error('Error:', error));
}

function generarSKU() {
    fetch("{{ route('admin.inventory.products.generate-codes') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ prefix: 'SKU' })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('sku').value = data.sku;
    })
    .catch(error => console.error('Error:', error));
}

function generarBarcode() {
    fetch("{{ route('admin.inventory.products.generate-codes') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ prefix: 'BC' })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('barcode').value = data.barcode;
    })
    .catch(error => console.error('Error:', error));
}

// Cálculo de precios
function calculateUnitPrices(unitNumber) {
    const baseCostPrice = parseFloat(document.getElementById('base_cost_price').value) || 0;
    const expense1 = parseFloat(document.getElementById('expense_1').value) || 0;
    const expense2 = parseFloat(document.getElementById('expense_2').value) || 0;
    
    // Obtener el impuesto seleccionado
    const taxSelect = document.getElementById('tax_id');
    let taxPercentage = 0;
    let taxType = 'percentage';
    let taxCalculation = 'exclusive';
    
    if (taxSelect && taxSelect.value) {
        const selectedOption = taxSelect.options[taxSelect.selectedIndex];
        taxPercentage = parseFloat(selectedOption.getAttribute('data-percentage')) || 0;
        taxType = selectedOption.getAttribute('data-type') || 'percentage';
        taxCalculation = selectedOption.getAttribute('data-calculation') || 'exclusive';
    }
    
    const purchaseTaxEnabled = document.getElementById('purchase_tax_enabled').checked;
    
    // Calcular costo total base
    let totalBaseCost = baseCostPrice + expense1 + expense2;
    if (purchaseTaxEnabled) {
        totalBaseCost = totalBaseCost * (1 + taxPercentage / 100);
    }
    
    // Obtener configuración de la unidad
    const quantityElement = document.getElementById(`unit_${unitNumber}_quantity`);
    const operationElement = document.getElementById(`unit_${unitNumber}_operation`);
    
    // Solo calcular si los elementos existen
    if (!quantityElement || !operationElement) {
        console.log(`Elementos no encontrados para unidad ${unitNumber}`);
        return;
    }
    
    const quantity = parseFloat(quantityElement.value) || 1;
    const operation = operationElement.value || 'divide';
    
    // Calcular costo unitario
    let unitCost = totalBaseCost;
    if (operation === 'divide') {
        unitCost = totalBaseCost / quantity;
    } else if (operation === 'multiply') {
        unitCost = totalBaseCost * quantity;
    }
    
    // Calcular precios para cada nivel
    for (let level = 1; level <= 3; level++) {
        const utilidadElement = document.getElementById(`unit_${unitNumber}_utilidad_${level}`);
        const taxElement = document.getElementById(`unit_${unitNumber}_tax_enabled_${level}`);
        
        // Solo calcular si los elementos existen
        if (!utilidadElement || !taxElement) {
            console.log(`Elementos de nivel ${level} no encontrados para unidad ${unitNumber}`);
            continue;
        }
        
        const utilidad = parseFloat(utilidadElement.value) || 0;
        const taxEnabled = taxElement.checked;
        
        const precioSinImpuesto = unitCost * (1 + utilidad / 100);
        let precioConImpuesto = precioSinImpuesto;
        let pvp = precioSinImpuesto;
        
        if (taxEnabled) {
            precioConImpuesto = precioSinImpuesto * (1 + taxPercentage / 100);
            pvp = precioConImpuesto;
        }
        
        // Actualizar campos si existen
        const sinImpuestoElement = document.getElementById(`unit_${unitNumber}_sin_impuesto_${level}`);
        const conImpuestoElement = document.getElementById(`unit_${unitNumber}_con_impuesto_${level}`);
        const pvpElement = document.getElementById(`unit_${unitNumber}_pvp_${level}`);
        
        if (sinImpuestoElement) sinImpuestoElement.value = precioSinImpuesto.toFixed(2);
        if (conImpuestoElement) conImpuestoElement.value = precioConImpuesto.toFixed(2);
        if (pvpElement) pvpElement.value = pvp.toFixed(2);
    }
}

// Gestión de pestañas
function switchTab(tabNumber) {
    // Ocultar todas las pestañas
    document.querySelectorAll('.nav-link').forEach(link => link.classList.remove('active'));
    document.querySelectorAll('.tab-pane').forEach(pane => {
        pane.classList.remove('show', 'active');
    });
    
    // Mostrar pestaña seleccionada
    document.getElementById(`tab${tabNumber}-tab`).classList.add('active');
    document.getElementById(`tab${tabNumber}`).classList.add('show', 'active');
    
    // Solo recalcular precios si los elementos existen
    if (document.getElementById(`unit_${tabNumber}_quantity`)) {
        calculateUnitPrices(tabNumber);
    }
}

function toggleTab(tabNumber) {
    const isEnabled = document.getElementById(`tab_enabled_${tabNumber}`).checked;
    
    if (isEnabled) {
        document.getElementById(`tab${tabNumber}-tab`).classList.remove('disabled');
        document.getElementById(`tab${tabNumber}`).classList.remove('disabled');
    } else {
        document.getElementById(`tab${tabNumber}-tab`).classList.add('disabled');
        document.getElementById(`tab${tabNumber}`).classList.add('disabled');
        
        // Si la pestaña activa se deshabilita, cambiar a la primera habilitada
        if (document.getElementById(`tab${tabNumber}-tab`).classList.contains('active')) {
            for (let i = 1; i <= 3; i++) {
                if (document.getElementById(`tab_enabled_${i}`).checked) {
                    switchTab(i);
                    break;
                }
            }
        }
    }
}

// Gestión de códigos de barras
function addBarcode() {
    barcodeCounter++;
    const barcodeHtml = `
        <div class="barcode-item mb-3" id="barcode-${barcodeCounter}">
            <div class="row">
                <div class="col-md-4">
                    <input type="text" class="form-control" name="additional_barcodes[${barcodeCounter}][barcode]" 
                           placeholder="Código de barras" required>
                </div>
                <div class="col-md-3">
                    <select class="form-control" name="additional_barcodes[${barcodeCounter}][type]">
                        <option value="EAN13">EAN13</option>
                        <option value="UPC">UPC</option>
                        <option value="Code128">Code128</option>
                    </select>
                </div>
                <div class="col-md-4">
                    <input type="text" class="form-control" name="additional_barcodes[${barcodeCounter}][description]" 
                           placeholder="Descripción (opcional)">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeBarcode(${barcodeCounter})">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>
    `;
    
    document.getElementById('barcodes-container').insertAdjacentHTML('beforeend', barcodeHtml);
}

function removeBarcode(counter) {
    document.getElementById(`barcode-${counter}`).remove();
}

// Carga de imagen
function previewImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = function(e) {
            document.getElementById('image-preview').src = e.target.result;
            document.getElementById('image-preview').style.display = 'block';
            document.getElementById('no-image').style.display = 'none';
            document.getElementById('remove-image').style.display = 'block';
        };
        
        reader.readAsDataURL(input.files[0]);
    }
}

function removeImage() {
    document.getElementById('image').value = '';
    document.getElementById('image-preview').style.display = 'none';
    document.getElementById('no-image').style.display = 'block';
    document.getElementById('remove-image').style.display = 'none';
}

// Barra de progreso
function updateProgress() {
    let progress = 0;
    const totalSections = 6;
    
    // Información Básica
    if (document.getElementById('name').value && document.getElementById('code').value && 
        document.getElementById('sku').value && document.getElementById('category_id').value && 
        document.getElementById('brand_id').value) {
        progress += 1;
    }
    
    // Medidas Físicas (opcional)
    progress += 0.5;
    
    // Configuración de Inventario
    if (document.getElementById('stock_min').value) {
        progress += 1;
    }
    
    // Sistema de Precios
    if (document.getElementById('base_cost_price').value) {
        progress += 1;
    }
    
    // Imagen (opcional)
    if (document.getElementById('image').value) {
        progress += 0.5;
    }
    
    // Al menos una pestaña habilitada
    if (document.getElementById('tab_enabled_1').checked || 
        document.getElementById('tab_enabled_2').checked || 
        document.getElementById('tab_enabled_3').checked) {
        progress += 1;
    }
    
    const percentage = Math.round((progress / totalSections) * 100);
    const progressBar = document.querySelector('.progress-bar');
    progressBar.style.width = percentage + '%';
    progressBar.setAttribute('aria-valuenow', percentage);
    progressBar.textContent = percentage + '%';
}

// Event listeners
document.addEventListener('DOMContentLoaded', function() {
    // Actualizar nombres de pestañas
    document.getElementById('tab_name_1').addEventListener('input', function() {
        document.getElementById('tab-text-1').textContent = this.value || 'Unidad';
    });
    
    document.getElementById('tab_name_2').addEventListener('input', function() {
        document.getElementById('tab-text-2').textContent = this.value || 'Caja';
    });
    
    document.getElementById('tab_name_3').addEventListener('input', function() {
        document.getElementById('tab-text-3').textContent = this.value || 'Bulto';
    });
    
    // Event listeners para botones de pestañas
    for (let i = 1; i <= 3; i++) {
        const tabButton = document.getElementById(`tab${i}-tab`);
        if (tabButton) {
            tabButton.addEventListener('click', function(e) {
                e.preventDefault();
                switchTab(i);
            });
        }
    }
    
    // Recalcular precios cuando cambien los valores - TODAS LAS PESTAÑAS
    const calculationFields = [
        'base_cost_price', 'expense_1', 'expense_2', 'purchase_tax_enabled', 'iva_percentage'
    ];
    
    calculationFields.forEach(fieldId => {
        const field = document.getElementById(fieldId);
        if (field) {
            field.addEventListener('input', function() {
                // Recalcular todas las pestañas habilitadas
                for (let i = 1; i <= 3; i++) {
                    if (document.getElementById(`tab_enabled_${i}`).checked) {
                        calculateUnitPrices(i);
                    }
                }
            });
            field.addEventListener('change', function() {
                // Recalcular todas las pestañas habilitadas
                for (let i = 1; i <= 3; i++) {
                    if (document.getElementById(`tab_enabled_${i}`).checked) {
                        calculateUnitPrices(i);
                    }
                }
            });
        }
    });
    
    // Event listener para el selector de impuesto
    const taxSelect = document.getElementById('tax_id');
    if (taxSelect) {
        taxSelect.addEventListener('change', function() {
            // Recalcular todas las pestañas habilitadas
            for (let i = 1; i <= 3; i++) {
                if (document.getElementById(`tab_enabled_${i}`).checked) {
                    calculateUnitPrices(i);
                }
            }
        });
    }
    
    // Event listeners para campos específicos de cada pestaña
    for (let unit = 1; unit <= 3; unit++) {
        // Campos de configuración de unidad
        const quantityField = document.getElementById(`unit_${unit}_quantity`);
        const operationField = document.getElementById(`unit_${unit}_operation`);
        
        if (quantityField) {
            quantityField.addEventListener('input', () => calculateUnitPrices(unit));
        }
        if (operationField) {
            operationField.addEventListener('change', () => calculateUnitPrices(unit));
        }
        
        // Campos de utilidad y impuestos por nivel
        for (let level = 1; level <= 3; level++) {
            const utilidadField = document.getElementById(`unit_${unit}_utilidad_${level}`);
            const taxField = document.getElementById(`unit_${unit}_tax_enabled_${level}`);
            
            if (utilidadField) {
                utilidadField.addEventListener('input', () => calculateUnitPrices(unit));
            }
            if (taxField) {
                taxField.addEventListener('change', () => calculateUnitPrices(unit));
            }
        }
    }
    
    // Actualizar progreso
    document.querySelectorAll('input, select, textarea').forEach(element => {
        element.addEventListener('input', updateProgress);
        element.addEventListener('change', updateProgress);
    });
    
    // Calcular precios iniciales
    calculateUnitPrices(1);
    updateProgress();
});
</script>
@endpush
@endsection

<!-- Modal de Información del Inventario -->
<div class="modal fade" id="inventoryModal" tabindex="-1" aria-labelledby="inventoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="inventoryModalLabel">
                    <i class="fas fa-warehouse"></i> Información Completa del Inventario
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-boxes"></i> Stock por Almacén
                        </h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>Almacén</th>
                                        <th>Cantidad</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Almacén Principal</td>
                                        <td><span class="badge bg-success">0</span></td>
                                        <td><span class="badge bg-secondary">Nuevo Producto</span></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-chart-line"></i> Configuración de Stock
                        </h6>
                        <div class="row">
                            <div class="col-6">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">Stock Mínimo</h6>
                                        <h4 class="text-warning" id="modal-stock-min">0</h4>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="card bg-light">
                                    <div class="card-body text-center">
                                        <h6 class="card-title text-muted">Stock Máximo</h6>
                                        <h4 class="text-info" id="modal-stock-max">0</h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mt-3">
                            <h6 class="text-primary mb-2">
                                <i class="fas fa-info-circle"></i> Estado
                            </h6>
                            <p class="mb-0">
                                <i class="fas fa-plus-circle text-muted"></i> 
                                Producto nuevo - Stock inicial: 0
                            </p>
                        </div>
                    </div>
                </div>
                
                <div class="row mt-4">
                    <div class="col-12">
                        <h6 class="text-primary mb-3">
                            <i class="fas fa-history"></i> Últimos Movimientos
                        </h6>
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <thead class="table-light">
                                    <tr>
                                        <th>Fecha</th>
                                        <th>Tipo</th>
                                        <th>Cantidad</th>
                                        <th>Usuario</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="4" class="text-center text-muted">
                                            <i class="fas fa-info-circle"></i> 
                                            Producto nuevo - No hay movimientos registrados
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cerrar
                </button>
                <button type="button" class="btn btn-primary" onclick="window.open('{{ route('admin.inventory.reports') }}', '_blank')">
                    <i class="fas fa-chart-bar"></i> Ver Reportes
                </button>
            </div>
        </div>
    </div>
</div>

<script>
// Actualizar valores del modal cuando cambien los campos
document.addEventListener('DOMContentLoaded', function() {
    const stockMinInput = document.getElementById('stock_min');
    const stockMaxInput = document.getElementById('stock_max');
    const modalStockMin = document.getElementById('modal-stock-min');
    const modalStockMax = document.getElementById('modal-stock-max');
    
    function updateModalValues() {
        if (modalStockMin) modalStockMin.textContent = stockMinInput.value || '0';
        if (modalStockMax) modalStockMax.textContent = stockMaxInput.value || '0';
    }
    
    if (stockMinInput) stockMinInput.addEventListener('input', updateModalValues);
    if (stockMaxInput) stockMaxInput.addEventListener('input', updateModalValues);
});
</script>