@extends('adminlte::page')

@section('title', 'Nueva Cotización')

@section('plugins.Select2', true)

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css" rel="stylesheet">
@endpush

@section('content_header')
    <h1>Crear Nueva Cotización</h1>
@stop

@section('content')
    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    <form action="{{ route('admin.cotizaciones.store') }}" method="POST" id="formCotizacion">
        @csrf
        <div class="row">
            <div class="col-md-12">
                <!-- Datos de la Cotización -->
                <div class="card">
                    <div class="card-header">
                        <h5>Datos de la Cotización</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="cliente_id">Cliente <span class="text-danger">*</span></label>
                                    <select class="form-control select2 @error('cliente_id') is-invalid @enderror"
                                            id="cliente_id"
                                            name="cliente_id"
                                            style="width: 100%;"
                                            required>
                                        <option value="">Seleccione un cliente</option>
                                        @foreach($clientes as $cliente)
                                            <option value="{{ $cliente->id }}" {{ old('cliente_id') == $cliente->id ? 'selected' : '' }}>
                                                {{ $cliente->user->name }} - {{ $cliente->empresa ?? 'Sin empresa' }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('cliente_id')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-auto">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modalNuevoCliente">
                                        <i class="fas fa-plus-circle"></i> Nuevo Cliente
                                    </button>
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="fecha_emision">Fecha Emisión <span class="text-danger">*</span></label>
                                    <input type="date"
                                           class="form-control @error('fecha_emision') is-invalid @enderror"
                                           id="fecha_emision"
                                           name="fecha_emision"
                                           value="{{ old('fecha_emision', date('Y-m-d')) }}"
                                           required>
                                    @error('fecha_emision')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="fecha_vencimiento">Fecha Vencimiento</label>
                                    <input type="date"
                                           class="form-control @error('fecha_vencimiento') is-invalid @enderror"
                                           id="fecha_vencimiento"
                                           name="fecha_vencimiento"
                                           value="{{ old('fecha_vencimiento') }}">
                                    @error('fecha_vencimiento')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="estado">Estado <span class="text-danger">*</span></label>
                                    <select class="form-control @error('estado') is-invalid @enderror"
                                            id="estado"
                                            name="estado"
                                            required>
                                        <option value="pendiente" {{ old('estado', 'pendiente') == 'pendiente' ? 'selected' : '' }}>Pendiente</option>
                                        <option value="aprobada" {{ old('estado') == 'aprobada' ? 'selected' : '' }}>Aprobada</option>
                                        <option value="rechazada" {{ old('estado') == 'rechazada' ? 'selected' : '' }}>Rechazada</option>
                                        <option value="vencida" {{ old('estado') == 'vencida' ? 'selected' : '' }}>Vencida</option>
                                    </select>
                                    @error('estado')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-3">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Tabla de Productos -->
                <div class="card mt-3">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5><i class="fas fa-shopping-cart"></i> Productos de la Cotización</h5>
                        <span class="badge badge-primary" id="contador-productos">0 productos</span>
                    </div>
                    <div class="card-body pb-2">
                        <div class="d-flex gap-2 mb-3 flex-wrap">
                            <button type="button" class="btn btn-success btn-sm mr-2" onclick="abrirModalProductos()">
                                <i class="fas fa-plus-circle"></i> Agregar Producto
                            </button>
                            <button type="button" class="btn btn-primary btn-sm mr-2" onclick="abrirModalNuevoProducto()">
                                <i class="fas fa-box"></i> Nuevo Producto
                            </button>
                            <button type="button" class="btn btn-danger btn-sm mr-2" onclick="limpiarProductos()">
                                <i class="fas fa-trash"></i> Limpiar Todo
                            </button>
                        </div>
                    </div>
                    <div class="card-body pt-0 p-0">
                        <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                            <table class="table table-hover table-bordered mb-0" id="tabla-productos">
                                <thead class="thead-light sticky-top">
                                    <tr>
                                        <th width="5%">#</th>
                                        <th width="15%">Código</th>
                                        <th width="25%">Descripción</th>
                                        <th width="8%" class="text-center">Cantidad</th>
                                        <th width="10%" class="text-right">Precio Unit.</th>
                                        <th width="8%" class="text-center">Desc. %</th>
                                        <th width="8%" class="text-center">Imp. %</th>
                                        <th width="10%" class="text-right">Subtotal</th>
                                        <th width="5%" class="text-center">Acción</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-productos">
                                    <tr id="fila-vacia">
                                        <td colspan="9" class="text-center text-muted py-5">
                                            <i class="fas fa-box-open fa-3x mb-3"></i><br>
                                            No hay productos agregados. Busca y agrega productos arriba.
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Resumen y Botones -->
                <div class="row mt-3">
                    <div class="col-md-8">
                        <div class="card">
                            <div class="card-body">
                                <div class="form-group mb-0">
                                    <label for="observaciones-detalle">Observaciones detalladas</label>
                                    <textarea class="form-control"
                                              id="observaciones-detalle"
                                              name="observaciones"
                                              rows="3"
                                              placeholder="Notas adicionales sobre la cotización...">{{ old('observaciones') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-header">
                                <h5 class="mb-0">Resumen</h5>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-sm mb-0">
                                        <tr>
                                            <th>Subtotal:</th>
                                            <td class="text-right"><span id="subtotal">S/ 0.00</span></td>
                                        </tr>
                                    <tr>
                                        <th>Descuento:</th>
                                        <td class="text-right">
                                            <input type="number"
                                                   class="form-control form-control-sm text-right"
                                                   id="descuento-global"
                                                   name="descuento"
                                                   value="{{ old('descuento', 0) }}"
                                                   step="0.01"
                                                   min="0"
                                                   onchange="calcularTotal()">
                                        </td>
                                    </tr>
                                    <tr>
                                        <th>Impuesto:</th>
                                        <td class="text-right"><span id="impuesto-total">S/ 0.00</span></td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="impuesto-cero" onchange="toggleImpuestoCero()">
                                                <label class="form-check-label" for="impuesto-cero">
                                                    <small>Impuesto 0% para todos los productos</small>
                                                </label>
                                            </div>
                                        </td>
                                    </tr>
                                        <tr class="table-primary">
                                            <th><strong>TOTAL:</strong></th>
                                            <td class="text-right"><strong><span id="total">S/ 0.00</span></strong></td>
                                        </tr>
                                    </table>
                                </div>
                                <hr>
                                <div class="form-group mb-0">
                                    <button type="submit" class="btn btn-success btn-block btn-lg">
                                        <i class="fas fa-save"></i> Guardar Cotización
                                    </button>
                                    <a href="{{ route('admin.cotizaciones.index') }}" class="btn btn-secondary btn-block" onclick="if(confirm('¿Desea cancelar? Los datos guardados localmente se perderán.')) { limpiarLocalStorage(); }">
                                        <i class="fas fa-times"></i> Cancelar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Modal para nuevo cliente -->
    <div class="modal fade" id="modalNuevoCliente" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Nuevo Cliente</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <form id="formNuevoCliente">
                    <div class="modal-body">
                        <div id="alertNuevoCliente"></div>
                        
                        <!-- Búsqueda por tipo de documento -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_cliente_tipo_documento">Tipo de Documento</label>
                                    <select class="form-control" id="nuevo_cliente_tipo_documento" name="tipo_documento">
                                        <option value="1">DNI</option>
                                        <option value="2">RUC</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_cliente_documento">Número de Documento</label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="nuevo_cliente_documento" 
                                           name="documento" 
                                           maxlength="11">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label>&nbsp;</label>
                                    <button type="button" class="btn btn-primary btn-block" id="btn-buscar-cliente-modal">
                                        <i class="fas fa-search"></i> Buscar Cliente
                                    </button>
                                </div>
                            </div>
                        </div>
                        <hr>
                        
                        <!-- Campos del formulario -->
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_cliente_name">Nombre Completo (Representante Legal) <span class="text-danger">*</span></label>
                                    <input type="text"
                                           class="form-control"
                                           id="nuevo_cliente_name"
                                           name="name"
                                           required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_cliente_empresa">Empresa</label>
                                    <input type="text"
                                           class="form-control"
                                           id="nuevo_cliente_empresa"
                                           name="empresa">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_cliente_razon_social">Razón Social</label>
                                    <input type="text"
                                           class="form-control"
                                           id="nuevo_cliente_razon_social"
                                           name="razon_social">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_cliente_direccion">Dirección</label>
                                    <input type="text"
                                           class="form-control"
                                           id="nuevo_cliente_direccion"
                                           name="direccion"
                                           maxlength="500">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_cliente_celular">Celular</label>
                                    <input type="text"
                                           class="form-control"
                                           id="nuevo_cliente_celular"
                                           name="celular"
                                           maxlength="20">
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <div class="row">
                            <div class="col-md-12">
                                <div class="form-group">
                                    <label for="nuevo_cliente_email">Email <span class="text-danger">*</span></label>
                                    <input type="email"
                                           class="form-control"
                                           id="nuevo_cliente_email"
                                           name="email"
                                           required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nuevo_cliente_password">Contraseña <span class="text-danger">*</span></label>
                                    <input type="password"
                                           class="form-control"
                                           id="nuevo_cliente_password"
                                           name="password"
                                           required
                                           minlength="8">
                                    <small class="form-text text-muted">Mínimo 8 caracteres</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nuevo_cliente_password_confirmation">Confirmar Contraseña <span class="text-danger">*</span></label>
                                    <input type="password"
                                           class="form-control"
                                           id="nuevo_cliente_password_confirmation"
                                           name="password_confirmation"
                                           required>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save"></i> Guardar Cliente
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Modal para cálculo de fletes -->
    <div class="modal fade" id="modalCalculoFletes" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title">
                        <i class="fas fa-calculator"></i> Cálculo de Fletes y Margen
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Instrucciones:</strong> Complete los campos de Peso x Unidad, Flete x Tonelada y % Margen para cada producto.
                        Los cálculos se realizarán automáticamente.
                    </div>
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-bordered" id="tabla-fletes">
                            <thead class="thead-light sticky-top">
                                <tr>
                                    <th width="4%" class="text-center">#</th>
                                    <th width="10%">Código</th>
                                    <th width="15%">Descripción</th>
                                    <th width="6%" class="text-center">Cant.</th>
                                    <th width="9%" class="text-right">Precio Unit.</th>
                                    <th width="9%" class="text-center">Peso x Unidad (kg)</th>
                                    <th width="9%" class="text-center">Flete x Ton. (S/)</th>
                                    <th width="8%" class="text-center">% Margen</th>
                                    <th width="9%" class="text-right">Flete Unit.</th>
                                    <th width="9%" class="text-right">Costo + Flete</th>
                                    <th width="8%" class="text-right">Total KG</th>
                                    <th width="9%" class="text-right">Margen Total</th>
                                    <th width="9%" class="text-right">Flete Total (S/)</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-fletes">
                                <!-- Se llenará dinámicamente -->
                            </tbody>
                        </table>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="card-title">Resumen de Fletes</h6>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <strong>Total KG:</strong> <span id="resumen-total-kg">0.00</span> kg
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Total Flete:</strong> S/ <span id="resumen-total-flete">0.00</span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Total Margen:</strong> S/ <span id="resumen-total-margen">0.00</span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Total Costo + Flete:</strong> S/ <span id="resumen-total-costo-flete">0.00</span>
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-md-12">
                                            <strong>Total Precio Base:</strong> S/ <span id="resumen-total-precio-base">0.00</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <div class="alert alert-info">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="actualizar-precio-base" checked>
                                    <label class="form-check-label" for="actualizar-precio-base">
                                        <strong>Actualizar precio base del producto automáticamente</strong>
                                        <br>
                                        <small>Si está marcado, el precio base del producto se actualizará con el nuevo valor ingresado en esta cotización.</small>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cancelar
                    </button>
                    <button type="button" class="btn btn-success" id="btn-confirmar-fletes">
                        <i class="fas fa-check"></i> Confirmar y Guardar Cotización
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para seleccionar productos -->
    <div class="modal fade" id="modalProductos" tabindex="-1" role="dialog" aria-labelledby="modalProductosLabel">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="modalProductosLabel">
                        <i class="fas fa-box"></i> Agregar Productos a la Cotización
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle"></i>
                        <strong>Instrucciones:</strong> Escribe en el buscador para encontrar productos por código o descripción. Se mostrarán hasta 50 resultados. Luego haz clic en el botón <i class="fas fa-plus text-success"></i> para agregarlos a la cotización.
                    </div>
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                        </div>
                        <input type="text"
                               class="form-control form-control-lg"
                               id="buscador-modal"
                               placeholder="Buscar producto por código o descripción... (escribe para buscar)">
                        <div class="input-group-append">
                            <button type="button" class="btn btn-secondary" onclick="limpiarBusquedaModal()">
                                <i class="fas fa-times"></i> Limpiar
                            </button>
                        </div>
                    </div>
                    <div id="loading-productos" class="text-center py-4" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x text-primary"></i>
                        <p class="mt-2 text-muted">Buscando productos...</p>
                    </div>
                    <div class="table-responsive" style="max-height: 500px; overflow-y: auto;">
                        <table class="table table-hover table-sm table-bordered">
                            <thead class="thead-light sticky-top">
                                <tr>
                                    <th width="5%" class="text-center">Acción</th>
                                    <th width="12%">Código</th>
                                    <th width="30%">Descripción</th>
                                    <th width="12%" class="text-right">Precio Base</th>
                                    <th width="12%" class="text-right">Precio Venta</th>
                                    <th width="10%" class="text-center">Stock</th>
                                    <th width="10%" class="text-center">Imp. %</th>
                                    <th width="9%" class="text-center">Estado</th>
                                </tr>
                            </thead>
                            <tbody id="tbody-modal-productos">
                                @if(count($productos) > 0)
                                    @foreach($productos as $producto)
                                        <tr data-producto-id="{{ $producto->id }}"
                                            data-codigo="{{ $producto->codigo_producto }}"
                                            data-descripcion="{{ $producto->descripcion }}"
                                            data-precio="{{ $producto->precio_venta }}"
                                            data-precio-base="{{ $producto->precio_base }}"
                                            data-impuesto="{{ $producto->impuesto ?? 0 }}"
                                            data-unidad="{{ $producto->unidad_medida }}"
                                            class="fila-producto-modal">
                                            <td class="text-center">
                                                <button type="button"
                                                        class="btn btn-sm btn-success"
                                                        onclick="agregarProductoDesdeModal({{ $producto->id }})"
                                                        title="Agregar producto">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </td>
                                            <td><strong>{{ $producto->codigo_producto }}</strong></td>
                                            <td>
                                                <input type="text"
                                                       class="form-control form-control-sm descripcion-editable"
                                                       value="{{ $producto->descripcion }}"
                                                       data-descripcion-original="{{ $producto->descripcion }}"
                                                       data-producto-id="{{ $producto->id }}"
                                                       style="min-width: 200px;">
                                            </td>
                                            <td class="text-right">S/ {{ number_format($producto->precio_base, 2) }}</td>
                                            <td class="text-right">S/ {{ number_format($producto->precio_venta, 2) }}</td>
                                            <td class="text-center">
                                                <span class="badge badge-{{ $producto->stock > 0 ? 'success' : 'warning' }}">
                                                    {{ $producto->stock }} {{ $producto->unidad_medida }}
                                                </span>
                                            </td>
                                            <td class="text-center">{{ number_format($producto->impuesto ?? 0, 2) }}%</td>
                                            <td class="text-center">
                                                @if($producto->activo)
                                                    <span class="badge badge-success">Activo</span>
                                                @else
                                                    <span class="badge badge-danger">Inactivo</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr id="fila-sin-resultados">
                                        <td colspan="8" class="text-center text-muted py-4">
                                            <i class="fas fa-search fa-2x mb-2"></i><br>
                                            Escribe en el buscador para encontrar productos
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-3">
                        <small class="text-muted">
                            <i class="fas fa-info-circle"></i>
                            Mostrando <span id="contador-modal-productos">{{ count($productos) }}</span> producto(s)
                            @if(count($productos) > 0)
                                <span id="mensaje-busqueda" class="text-info">(primeros resultados - busca para ver más)</span>
                            @endif
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal para Nuevo Producto -->
    <div class="modal fade" id="modalNuevoProducto" tabindex="-1" role="dialog" aria-labelledby="modalNuevoProductoLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-success text-white">
                    <h5 class="modal-title" id="modalNuevoProductoLabel">
                        <i class="fas fa-box"></i> Registrar Nuevo Producto
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="formNuevoProducto">
                    @csrf
                    <div class="modal-body">
                        <div id="alertNuevoProducto"></div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nuevo_proveedor_id">Proveedor</label>
                                    <select class="form-control" id="nuevo_proveedor_id" name="proveedor_id">
                                        <option value="">Seleccione un proveedor (Opcional)</option>
                                        @foreach(\App\Models\Proveedor::all() as $proveedor)
                                            <option value="{{ $proveedor->id }}">
                                                {{ $proveedor->nombre }} {{ $proveedor->empresa ? '- ' . $proveedor->empresa : '' }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nuevo_codigo_producto">Código del Producto <span class="text-danger">*</span></label>
                                    <input type="text"
                                           class="form-control"
                                           id="nuevo_codigo_producto"
                                           name="codigo_producto"
                                           required
                                           autofocus>
                                    <small class="form-text text-muted">Código único del producto</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="nuevo_descripcion">Descripción <span class="text-danger">*</span></label>
                            <input type="text"
                                   class="form-control"
                                   id="nuevo_descripcion"
                                   name="descripcion"
                                   required>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_precio_base">Precio Base (Costo) <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">S/</span>
                                        </div>
                                        <input type="number"
                                               class="form-control"
                                               id="nuevo_precio_base"
                                               name="precio_base"
                                               step="0.01"
                                               min="0"
                                               required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_precio_venta">Precio de Venta <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text">S/</span>
                                        </div>
                                        <input type="number"
                                               class="form-control"
                                               id="nuevo_precio_venta"
                                               name="precio_venta"
                                               step="0.01"
                                               min="0"
                                               required>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="nuevo_impuesto">Impuesto/IVA (%)</label>
                                    <div class="input-group">
                                        <input type="number"
                                               class="form-control"
                                               id="nuevo_impuesto"
                                               name="impuesto"
                                               value="0"
                                               step="0.01"
                                               min="0"
                                               max="100">
                                        <div class="input-group-append">
                                            <span class="input-group-text">%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nuevo_stock">Stock</label>
                                    <input type="number"
                                           class="form-control"
                                           id="nuevo_stock"
                                           name="stock"
                                           value="0"
                                           min="0">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="nuevo_unidad_medida">Unidad de Medida</label>
                                    <input type="text"
                                           class="form-control"
                                           id="nuevo_unidad_medida"
                                           name="unidad_medida"
                                           value="unidad"
                                           placeholder="Ej: unidad, kg, m">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">
                            <i class="fas fa-times"></i> Cancelar
                        </button>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-save"></i> Guardar y Agregar a Cotización
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="/css/admin_custom.css">
    <style>
        .badge-lg {
            font-size: 1rem;
            padding: 0.5rem 1rem;
        }
        .card.border-success, .card.border-primary {
            transition: all 0.3s ease;
        }
        .card.border-success:hover, .card.border-primary:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            transform: translateY(-2px);
        }
        .card.border-success .fa-list,
        .card.border-primary .fa-box {
            opacity: 0.8;
        }
        #tabla-productos thead th {
            position: sticky;
            top: 0;
            background-color: #f8f9fa;
            z-index: 10;
        }
        .input-producto {
            border: none;
            background: transparent;
            width: 100%;
            text-align: center;
        }
        .input-producto:focus {
            background-color: #fff;
            border: 1px solid #80bdff;
            border-radius: 4px;
        }
        .position-relative {
            position: relative;
        }
        .select2-container--default .select2-selection--single {
            height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 36px;
        }
        /* Alineación del botón Nuevo Cliente */
        .col-md-auto .form-group {
            display: flex;
            flex-direction: column;
        }
        .col-md-auto .form-group label {
            height: 20px;
            margin-bottom: 0.5rem;
        }
        .col-md-auto .form-group button {
            margin-top: 0;
            height: 38px;
            align-self: flex-start;
        }
        /* Estilos para modal de fletes - más compacto */
        #tabla-fletes {
            font-size: 0.85rem;
        }
        #tabla-fletes thead th {
            font-size: 0.8rem;
            padding: 8px 6px;
            white-space: nowrap;
            font-weight: 600;
        }
        #tabla-fletes tbody td {
            padding: 8px 6px;
            vertical-align: middle;
        }
        #tabla-fletes .form-control-sm {
            font-size: 0.8rem;
            padding: 4px 6px;
            height: 28px;
        }
        #tabla-fletes small {
            font-size: 0.7rem;
        }
        #tabla-fletes tbody td strong {
            font-size: 0.85rem;
        }
    </style>
@stop

@section('js')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        let productosAgregados = new Map();
        let contadorProductos = 0;
        const productosDisponibles = @json($productos);

        // Función para alternar impuesto a 0%
        function toggleImpuestoCero() {
            const checkbox = document.getElementById('impuesto-cero');
            const aplicarImpuestoCero = checkbox.checked;

            document.querySelectorAll('#tbody-productos tr[data-producto-id]').forEach(fila => {
                const impuestoInput = fila.querySelector('.impuesto-valor');
                const impuestoDisplay = fila.querySelector('.impuesto-display');

                if (aplicarImpuestoCero) {
                    // Guardar el impuesto original si no está guardado
                    if (!impuestoInput.hasAttribute('data-impuesto-original-guardado')) {
                        const impuestoOriginal = parseFloat(impuestoInput.value) || 0;
                        impuestoInput.setAttribute('data-impuesto-original-guardado', impuestoOriginal);
                    }
                    // Establecer impuesto a 0
                    impuestoInput.value = 0;
                    impuestoDisplay.textContent = '0.00%';
                } else {
                    // Restaurar el impuesto original
                    const impuestoOriginal = parseFloat(impuestoInput.getAttribute('data-impuesto-original-guardado') || impuestoInput.getAttribute('data-impuesto-original') || 0);
                    impuestoInput.value = impuestoOriginal;
                    impuestoDisplay.textContent = impuestoOriginal.toFixed(2) + '%';
                    impuestoInput.removeAttribute('data-impuesto-original-guardado');
                }

                // Recalcular la fila
                calcularFila(fila);
            });

            guardarEnLocalStorage();
        }
        const STORAGE_KEY = 'cotizacion_temporal_' + window.location.pathname;

        // Cargar datos guardados al iniciar
        function cargarDesdeLocalStorage() {
            try {
                const datosGuardados = localStorage.getItem(STORAGE_KEY);
                if (datosGuardados) {
                    const datos = JSON.parse(datosGuardados);

                    // Restaurar datos básicos de la cotización
                    if (datos.cliente_id) {
                        document.getElementById('cliente_id').value = datos.cliente_id;
                        // Actualizar Select2 si está disponible
                        if (typeof $.fn.select2 !== 'undefined') {
                            $('#cliente_id').trigger('change');
                        }
                    }
                    if (datos.fecha_emision) {
                        document.getElementById('fecha_emision').value = datos.fecha_emision;
                    }
                    if (datos.fecha_vencimiento) {
                        document.getElementById('fecha_vencimiento').value = datos.fecha_vencimiento;
                    }
                    if (datos.estado) {
                        document.getElementById('estado').value = datos.estado;
                    }
                    if (datos.observaciones) {
                        document.getElementById('observaciones-detalle').value = datos.observaciones;
                    }
                    if (datos.descuento) {
                        document.getElementById('descuento-global').value = datos.descuento;
                    }

                    // Restaurar productos
                    if (datos.productos && datos.productos.length > 0) {
                        datos.productos.forEach(productoData => {
                            const producto = productosDisponibles.find(p => p.id === productoData.producto_id);
                            if (producto) {
                                agregarProductoATabla(producto, productoData);
                            }
                        });
                    }
                }
            } catch (e) {
                console.error('Error al cargar desde localStorage:', e);
            }
        }

        // Guardar datos en localStorage
        function guardarEnLocalStorage() {
            try {
                const datos = {
                    cliente_id: document.getElementById('cliente_id').value,
                    fecha_emision: document.getElementById('fecha_emision').value,
                    fecha_vencimiento: document.getElementById('fecha_vencimiento').value,
                    estado: document.getElementById('estado').value,
                    observaciones: document.getElementById('observaciones-detalle').value,
                    descuento: document.getElementById('descuento-global').value,
                    productos: []
                };

                // Guardar productos
                document.querySelectorAll('#tbody-productos tr[data-producto-id]').forEach(fila => {
                    const productoId = parseInt(fila.getAttribute('data-producto-id'));
                    datos.productos.push({
                        producto_id: productoId,
                        cantidad: parseInt(fila.querySelector('.cantidad-input').value),
                        precio_unitario: parseFloat(fila.querySelector('.precio-input').value),
                        descuento: parseFloat(fila.querySelector('.descuento-input').value) || 0
                    });
                });

                localStorage.setItem(STORAGE_KEY, JSON.stringify(datos));
            } catch (e) {
                console.error('Error al guardar en localStorage:', e);
            }
        }

        // Limpiar localStorage
        function limpiarLocalStorage() {
            try {
                localStorage.removeItem(STORAGE_KEY);
            } catch (e) {
                console.error('Error al limpiar localStorage:', e);
            }
        }

        // Inicializar Select2 para cliente
        $(document).ready(function() {
            // Esperar a que Select2 esté disponible
            if (typeof $.fn.select2 !== 'undefined') {
                $('#cliente_id').select2({
                    placeholder: 'Seleccione un cliente',
                    allowClear: true,
                    dropdownParent: $('#cliente_id').parent(),
                    language: {
                        noResults: function() {
                            return "No se encontraron resultados";
                        }
                    }
                });

                // Guardar en localStorage cuando cambia el cliente
                $('#cliente_id').on('change', function() {
                    guardarEnLocalStorage();
                });
            } else {
                // Si Select2 no está disponible, usar select normal
                console.warn('Select2 no está disponible, usando select normal');
                $('#cliente_id').on('change', function() {
                    guardarEnLocalStorage();
                });
            }

            // Cargar datos guardados
            cargarDesdeLocalStorage();

            // Guardar cada vez que cambien los datos del formulario
            document.getElementById('fecha_emision').addEventListener('change', guardarEnLocalStorage);
            document.getElementById('fecha_vencimiento').addEventListener('change', guardarEnLocalStorage);
            document.getElementById('estado').addEventListener('change', guardarEnLocalStorage);
            document.getElementById('observaciones-detalle').addEventListener('input', guardarEnLocalStorage);
        });


        // Agregar producto desde modal
        async function agregarProductoDesdeModal(productoId) {
            // Buscar producto en productosDisponibles
            let producto = productosDisponibles.find(p => p.id === productoId || p.id == productoId);
            
            // Obtener la descripción editada del input en el modal
            const filaModal = document.querySelector(`#tbody-modal-productos tr[data-producto-id="${productoId}"]`);
            let descripcionEditada = null;
            
            if (filaModal) {
                const inputDescripcion = filaModal.querySelector('.descripcion-editable');
                if (inputDescripcion) {
                    descripcionEditada = inputDescripcion.value.trim();
                    const descripcionOriginal = inputDescripcion.getAttribute('data-descripcion-original');
                    
                    // Si la descripción fue modificada, actualizar en la base de datos
                    if (descripcionEditada !== descripcionOriginal && descripcionEditada !== '') {
                        try {
                            // Mostrar loading en el botón
                            const btnAgregar = filaModal.querySelector('button');
                            const iconoOriginal = btnAgregar.innerHTML;
                            btnAgregar.disabled = true;
                            btnAgregar.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                            
                            // Actualizar descripción en la base de datos
                            const response = await fetch(`/api/productos/${productoId}/actualizar-descripcion`, {
                                method: 'PUT',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                },
                                body: JSON.stringify({
                                    descripcion: descripcionEditada
                                })
                            });
                            
                            const data = await response.json();
                            
                            if (data.success) {
                                // Actualizar el atributo data-descripcion-original
                                inputDescripcion.setAttribute('data-descripcion-original', descripcionEditada);
                                
                                // Actualizar en productosDisponibles si existe
                                if (producto) {
                                    producto.descripcion = descripcionEditada;
                                } else {
                                    // Si no existe, crearlo
                                    producto = {
                                        id: parseInt(productoId),
                                        codigo_producto: filaModal.getAttribute('data-codigo'),
                                        descripcion: descripcionEditada,
                                        precio_base: parseFloat(filaModal.getAttribute('data-precio-base') || 0),
                                        precio_venta: parseFloat(filaModal.getAttribute('data-precio') || 0),
                                        impuesto: parseFloat(filaModal.getAttribute('data-impuesto') || 0),
                                        stock: 0,
                                        unidad_medida: 'unidad',
                                        activo: true
                                    };
                                    productosDisponibles.push(producto);
                                }
                                
                                // Actualizar el atributo data-descripcion de la fila
                                filaModal.setAttribute('data-descripcion', descripcionEditada);
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: data.message || 'Error al actualizar la descripción del producto.'
                                });
                                btnAgregar.disabled = false;
                                btnAgregar.innerHTML = iconoOriginal;
                                return;
                            }
                            
                            // Restaurar botón
                            btnAgregar.disabled = false;
                            btnAgregar.innerHTML = iconoOriginal;
                            
                        } catch (error) {
                            console.error('Error al actualizar descripción:', error);
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Error al actualizar la descripción del producto. Intente nuevamente.'
                            });
                            return;
                        }
                    }
                }
            }
            
            // Si no se encuentra, intentar obtenerlo de la fila del modal
            if (!producto) {
                if (filaModal) {
                    producto = {
                        id: parseInt(productoId),
                        codigo_producto: filaModal.getAttribute('data-codigo'),
                        descripcion: filaModal.getAttribute('data-descripcion'),
                        precio_base: parseFloat(filaModal.getAttribute('data-precio-base') || 0),
                        precio_venta: parseFloat(filaModal.getAttribute('data-precio') || 0),
                        impuesto: parseFloat(filaModal.getAttribute('data-impuesto') || 0),
                        stock: 0,
                        unidad_medida: 'unidad',
                        activo: true
                    };
                    // Agregar a productosDisponibles para futuras referencias
                    productosDisponibles.push(producto);
                }
            }
            
            if (!producto) {
                console.error('Producto no encontrado:', productoId);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'No se pudo encontrar el producto. Por favor, intente nuevamente.'
                });
                return;
            }

            if (productosAgregados.has(producto.id)) {
                const fila = document.querySelector(`#tbody-productos tr[data-producto-id="${producto.id}"]`);
                if (fila) {
                    const cantidadInput = fila.querySelector('.cantidad-input');
                    cantidadInput.value = parseInt(cantidadInput.value) + 1;
                    calcularFila(fila);
                    guardarEnLocalStorage();
                }
            } else {
                agregarProductoATabla(producto);
            }
        }

        // Agregar producto a la tabla
        function agregarProductoATabla(producto, productoData = null) {
            if (productosAgregados.has(producto.id)) return;

            productosAgregados.set(producto.id, producto);
            contadorProductos++;

            const cantidad = productoData ? productoData.cantidad : 1;
            const precio = productoData ? productoData.precio_unitario : parseFloat(producto.precio_venta).toFixed(2);
            const descuento = productoData ? (productoData.descuento || 0) : 0;

            const fila = document.createElement('tr');
            fila.setAttribute('data-producto-id', producto.id);
            fila.innerHTML = `
                <td>${contadorProductos}</td>
                <td><strong>${producto.codigo_producto}</strong></td>
                <td>${producto.descripcion}</td>
                <td>
                    <input type="number"
                           class="form-control form-control-sm cantidad-input text-center"
                           name="productos[${producto.id}][cantidad]"
                           value="${cantidad}"
                           min="1"
                           required
                           onchange="calcularFila(this.closest('tr')); guardarEnLocalStorage();"
                           onkeyup="calcularFila(this.closest('tr')); guardarEnLocalStorage();">
                </td>
                <td>
                    <input type="number"
                           class="form-control form-control-sm precio-input text-right"
                           name="productos[${producto.id}][precio_unitario]"
                           value="${precio}"
                           step="0.01"
                           min="0"
                           required
                           onchange="calcularFila(this.closest('tr')); guardarEnLocalStorage();"
                           onkeyup="calcularFila(this.closest('tr')); guardarEnLocalStorage();">
                </td>
                <td>
                    <input type="number"
                           class="form-control form-control-sm descuento-input text-center"
                           name="productos[${producto.id}][descuento]"
                           value="${descuento}"
                           step="0.01"
                           min="0"
                           max="100"
                           onchange="calcularFila(this.closest('tr')); guardarEnLocalStorage();"
                           onkeyup="calcularFila(this.closest('tr')); guardarEnLocalStorage();">
                </td>
                <td class="text-center impuesto-display">${parseFloat(producto.impuesto || 0).toFixed(2)}%</td>
                <td class="text-right"><strong class="subtotal-fila">S/ 0.00</strong></td>
                <td class="text-center">
                    <button type="button" class="btn btn-sm btn-danger" onclick="eliminarProducto(${producto.id})">
                        <i class="fas fa-trash"></i>
                    </button>
                    <input type="hidden" name="productos[${producto.id}][producto_id]" value="${producto.id}">
                    <input type="hidden" name="productos[${producto.id}][impuesto]" class="impuesto-valor" value="${producto.impuesto || 0}" data-impuesto-original="${producto.impuesto || 0}">
                </td>
            `;

            const tbody = document.getElementById('tbody-productos');
            if (document.getElementById('fila-vacia')) {
                document.getElementById('fila-vacia').remove();
            }
            tbody.appendChild(fila);
            calcularFila(fila);
            actualizarContador();
            guardarEnLocalStorage();
        }

        // Calcular subtotal de una fila
        function calcularFila(fila) {
            const cantidad = parseFloat(fila.querySelector('.cantidad-input').value) || 0;
            const precioUnitario = parseFloat(fila.querySelector('.precio-input').value) || 0;
            const descuento = parseFloat(fila.querySelector('.descuento-input').value) || 0;
            const impuesto = parseFloat(fila.querySelector('.impuesto-valor').value) || 0;

            const precioConDescuento = precioUnitario - (precioUnitario * (descuento / 100));
            const subtotalSinImpuesto = precioConDescuento * cantidad;
            const impuestoMonto = subtotalSinImpuesto * (impuesto / 100);
            const subtotal = subtotalSinImpuesto + impuestoMonto;

            fila.querySelector('.subtotal-fila').textContent = 'S/ ' + subtotal.toFixed(2);
            calcularTotal();
        }

        // Eliminar producto
        function eliminarProducto(productoId) {
            const fila = document.querySelector(`tr[data-producto-id="${productoId}"]`);
            if (fila) {
                fila.remove();
                productosAgregados.delete(productoId);
                renumerarFilas();
                actualizarContador();
                calcularTotal();
                guardarEnLocalStorage();
            }

            if (productosAgregados.size === 0) {
                const tbody = document.getElementById('tbody-productos');
                tbody.innerHTML = '<tr id="fila-vacia"><td colspan="9" class="text-center text-muted py-5"><i class="fas fa-box-open fa-3x mb-3"></i><br>No hay productos agregados. Busca y agrega productos arriba.</td></tr>';
                guardarEnLocalStorage();
            }
        }

        // Renumerar filas
        function renumerarFilas() {
            let contador = 0;
            document.querySelectorAll('#tbody-productos tr').forEach(fila => {
                if (fila.id !== 'fila-vacia') {
                    contador++;
                    fila.querySelector('td:first-child').textContent = contador;
                }
            });
        }

        // Calcular total general
        function calcularTotal() {
            let subtotal = 0;
            let impuestoTotal = 0;

            document.querySelectorAll('#tbody-productos tr[data-producto-id]').forEach(fila => {
                const cantidad = parseFloat(fila.querySelector('.cantidad-input').value) || 0;
                const precioUnitario = parseFloat(fila.querySelector('.precio-input').value) || 0;
                const descuento = parseFloat(fila.querySelector('.descuento-input').value) || 0;
                const impuesto = parseFloat(fila.querySelector('.impuesto-valor').value) || 0;

                const precioConDescuento = precioUnitario - (precioUnitario * (descuento / 100));
                const subtotalSinImpuesto = precioConDescuento * cantidad;
                const impuestoMonto = subtotalSinImpuesto * (impuesto / 100);

                subtotal += subtotalSinImpuesto;
                impuestoTotal += impuestoMonto;
            });

            const descuentoGlobal = parseFloat(document.getElementById('descuento-global').value) || 0;
            const total = (subtotal + impuestoTotal) - descuentoGlobal;

            document.getElementById('subtotal').textContent = 'S/ ' + subtotal.toFixed(2);
            document.getElementById('impuesto-total').textContent = 'S/ ' + impuestoTotal.toFixed(2);
            document.getElementById('total').textContent = 'S/ ' + total.toFixed(2);
        }

        // Actualizar contador
        function actualizarContador() {
            const cantidad = productosAgregados.size;
            document.getElementById('contador-productos').textContent = `${cantidad} producto${cantidad !== 1 ? 's' : ''}`;
        }

        // Limpiar todos los productos
        function limpiarProductos() {
            if (confirm('¿Está seguro de eliminar todos los productos?')) {
                productosAgregados.clear();
                document.getElementById('tbody-productos').innerHTML = '<tr id="fila-vacia"><td colspan="9" class="text-center text-muted py-5"><i class="fas fa-box-open fa-3x mb-3"></i><br>No hay productos agregados. Busca y agrega productos arriba.</td></tr>';
                actualizarContador();
                calcularTotal();
                guardarEnLocalStorage();
            }
        }

        // Abrir modal de productos
        function abrirModalProductos() {
            $('#modalProductos').modal('show');
        }

        // Abrir modal de nuevo producto
        function abrirModalNuevoProducto() {
            $('#formNuevoProducto')[0].reset();
            $('#alertNuevoProducto').html('');
            $('#modalNuevoProducto').modal('show');
        }

        // Guardar nuevo producto vía AJAX
        document.getElementById('formNuevoProducto').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const alertDiv = document.getElementById('alertNuevoProducto');
            const submitBtn = this.querySelector('button[type="submit"]');

            // Deshabilitar botón
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';

            fetch('{{ route("admin.productos.store-ajax") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alertDiv.innerHTML = '<div class="alert alert-success">¡Producto creado exitosamente!</div>';

                    // Agregar el producto a productosDisponibles
                    productosDisponibles.push({
                        id: data.producto.id,
                        codigo_producto: data.producto.codigo_producto,
                        descripcion: data.producto.descripcion,
                        precio_base: parseFloat(data.producto.precio_base),
                        precio_venta: parseFloat(data.producto.precio_venta),
                        impuesto: parseFloat(data.producto.impuesto),
                        stock: parseInt(data.producto.stock),
                        unidad_medida: data.producto.unidad_medida
                    });

                    // Agregar fila al modal de productos
                    const tbody = document.getElementById('tbody-modal-productos');
                    const nuevaFila = document.createElement('tr');
                    nuevaFila.setAttribute('data-producto-id', data.producto.id);
                    nuevaFila.setAttribute('data-codigo', data.producto.codigo_producto);
                    nuevaFila.setAttribute('data-descripcion', data.producto.descripcion);
                    nuevaFila.setAttribute('data-precio', data.producto.precio_venta);
                    nuevaFila.setAttribute('data-precio-base', data.producto.precio_base);
                    nuevaFila.setAttribute('data-impuesto', data.producto.impuesto);
                    nuevaFila.setAttribute('data-unidad', data.producto.unidad_medida);
                    nuevaFila.className = 'fila-producto-modal';

                    nuevaFila.innerHTML = `
                        <td class="text-center">
                            <button type="button"
                                    class="btn btn-sm btn-success"
                                    onclick="agregarProductoDesdeModal(${data.producto.id})"
                                    title="Agregar producto">
                                <i class="fas fa-plus"></i>
                            </button>
                        </td>
                        <td><strong>${data.producto.codigo_producto}</strong></td>
                        <td>
                            <input type="text"
                                   class="form-control form-control-sm descripcion-editable"
                                   value="${data.producto.descripcion}"
                                   data-descripcion-original="${data.producto.descripcion}"
                                   data-producto-id="${data.producto.id}"
                                   style="min-width: 200px;">
                        </td>
                        <td class="text-right">S/ ${parseFloat(data.producto.precio_base).toFixed(2)}</td>
                        <td class="text-right">S/ ${parseFloat(data.producto.precio_venta).toFixed(2)}</td>
                        <td class="text-center">
                            <span class="badge badge-success">
                                ${data.producto.stock} ${data.producto.unidad_medida}
                            </span>
                        </td>
                        <td class="text-center">${parseFloat(data.producto.impuesto).toFixed(2)}%</td>
                        <td class="text-center">
                            <span class="badge badge-success">Activo</span>
                        </td>
                    `;

                    tbody.appendChild(nuevaFila);

                    // Actualizar contador
                    const contador = parseInt(document.getElementById('contador-modal-productos').textContent);
                    document.getElementById('contador-modal-productos').textContent = contador + 1;

                    // Cerrar modal y agregar producto automáticamente
                    setTimeout(() => {
                        $('#modalNuevoProducto').modal('hide');
                        agregarProductoDesdeModal(data.producto.id);
                        $('#modalProductos').modal('show');

                        Swal.fire({
                            icon: 'success',
                            title: '¡Éxito!',
                            text: 'Producto creado y agregado a la cotización',
                            timer: 2000,
                            showConfirmButton: false
                        });
                    }, 1000);

                } else {
                    let errorMsg = data.message || 'Error al crear el producto';
                    if (data.errors) {
                        const errors = Object.values(data.errors).flat();
                        errorMsg = errors.join('<br>');
                    }
                    alertDiv.innerHTML = `<div class="alert alert-danger">${errorMsg}</div>`;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alertDiv.innerHTML = '<div class="alert alert-danger">Error al crear el producto. Por favor, intente nuevamente.</div>';
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-save"></i> Guardar y Agregar a Cotización';
            });
        });

        // Variable para el timeout del debounce
        let timeoutBusqueda = null;

        // Búsqueda AJAX en modal con debounce
        document.getElementById('buscador-modal').addEventListener('input', function(e) {
            const busqueda = e.target.value.trim();

            // Limpiar timeout anterior
            if (timeoutBusqueda) {
                clearTimeout(timeoutBusqueda);
            }

            // Si está vacío, mostrar mensaje inicial
            if (busqueda === '') {
                limpiarBusquedaModal();
                return;
            }

            // Debounce: esperar 500ms después de que el usuario deje de escribir
            timeoutBusqueda = setTimeout(() => {
                buscarProductosAjax(busqueda);
            }, 500);
        });

        // Función para buscar productos vía AJAX
        function buscarProductosAjax(busqueda) {
            const tbody = document.getElementById('tbody-modal-productos');
            const loading = document.getElementById('loading-productos');
            const contador = document.getElementById('contador-modal-productos');
            const mensajeBusqueda = document.getElementById('mensaje-busqueda');

            // Mostrar loading
            loading.style.display = 'block';
            tbody.innerHTML = '';

            // Realizar petición AJAX
            fetch(`{{ route('api.productos.buscar') }}?q=${encodeURIComponent(busqueda)}&limit=50`, {
                method: 'GET',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                loading.style.display = 'none';

                if (data.success && data.productos.length > 0) {
                    // Limpiar mensaje de búsqueda
                    if (mensajeBusqueda) {
                        mensajeBusqueda.textContent = '';
                    }

                    // Renderizar productos y agregar a productosDisponibles
                    data.productos.forEach(producto => {
                        // Agregar a productosDisponibles si no existe
                        const existe = productosDisponibles.find(p => p.id === producto.id);
                        if (!existe) {
                            productosDisponibles.push({
                                id: producto.id,
                                codigo_producto: producto.codigo_producto,
                                descripcion: producto.descripcion,
                                precio_base: parseFloat(producto.precio_base.replace(/,/g, '')),
                                precio_venta: parseFloat(producto.precio_venta.replace(/,/g, '')),
                                impuesto: parseFloat(producto.impuesto.replace(/,/g, '') || 0),
                                stock: parseInt(producto.stock) || 0,
                                unidad_medida: producto.unidad_medida || 'unidad',
                                activo: producto.activo
                            });
                        }

                        const fila = document.createElement('tr');
                        fila.setAttribute('data-producto-id', producto.id);
                        fila.setAttribute('data-codigo', producto.codigo_producto);
                        fila.setAttribute('data-descripcion', producto.descripcion);
                        fila.setAttribute('data-precio', producto.precio_venta.replace(',', ''));
                        fila.setAttribute('data-precio-base', producto.precio_base.replace(',', ''));
                        fila.setAttribute('data-impuesto', producto.impuesto.replace(',', ''));
                        fila.className = 'fila-producto-modal';

                        const stockBadgeClass = parseInt(producto.stock) > 0 ? 'success' : 'warning';
                        const estadoBadge = producto.activo ? '<span class="badge badge-success">Activo</span>' : '<span class="badge badge-danger">Inactivo</span>';

                        fila.innerHTML = `
                            <td class="text-center">
                                <button type="button"
                                        class="btn btn-sm btn-success"
                                        onclick="agregarProductoDesdeModal(${producto.id})"
                                        title="Agregar producto">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </td>
                            <td><strong>${producto.codigo_producto}</strong></td>
                            <td>
                                <input type="text"
                                       class="form-control form-control-sm descripcion-editable"
                                       value="${producto.descripcion}"
                                       data-descripcion-original="${producto.descripcion}"
                                       data-producto-id="${producto.id}"
                                       style="min-width: 200px;">
                            </td>
                            <td class="text-right">S/ ${producto.precio_base}</td>
                            <td class="text-right">S/ ${producto.precio_venta}</td>
                            <td class="text-center">
                                <span class="badge badge-${stockBadgeClass}">
                                    ${producto.stock} ${producto.unidad_medida}
                                </span>
                            </td>
                            <td class="text-center">${producto.impuesto}%</td>
                            <td class="text-center">${estadoBadge}</td>
                        `;

                        tbody.appendChild(fila);
                    });

                    // Actualizar contador
                    contador.textContent = data.total;
                    if (mensajeBusqueda) {
                        mensajeBusqueda.textContent = `(resultados para "${busqueda}")`;
                    }
                } else {
                    // No hay resultados
                    tbody.innerHTML = `
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">
                                <i class="fas fa-search fa-2x mb-2"></i><br>
                                No se encontraron productos para "${busqueda}"
                            </td>
                        </tr>
                    `;
                    contador.textContent = '0';
                    if (mensajeBusqueda) {
                        mensajeBusqueda.textContent = '';
                    }
                }
            })
            .catch(error => {
                console.error('Error al buscar productos:', error);
                loading.style.display = 'none';
                tbody.innerHTML = `
                    <tr>
                        <td colspan="8" class="text-center text-danger py-4">
                            <i class="fas fa-exclamation-triangle fa-2x mb-2"></i><br>
                            Error al buscar productos. Por favor, intente nuevamente.
                        </td>
                    </tr>
                `;
            });
        }

        // Función para limpiar búsqueda en modal
        function limpiarBusquedaModal() {
            document.getElementById('buscador-modal').value = '';
            const tbody = document.getElementById('tbody-modal-productos');
            const contador = document.getElementById('contador-modal-productos');
            const mensajeBusqueda = document.getElementById('mensaje-busqueda');

            // Cargar primeros 10 productos
            buscarProductosAjax('');

            if (mensajeBusqueda) {
                mensajeBusqueda.textContent = '(primeros resultados - busca para ver más)';
            }
        }

        // Cargar primeros productos al abrir el modal
        $('#modalProductos').on('shown.bs.modal', function() {
            const busqueda = document.getElementById('buscador-modal').value.trim();
            if (busqueda === '') {
                // Si no hay búsqueda, cargar primeros productos
                buscarProductosAjax('');
            }
        });

        // Interceptar submit del formulario - abrir modal de fletes
        document.getElementById('formCotizacion').addEventListener('submit', function(e) {
            if (productosAgregados.size === 0) {
                e.preventDefault();
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Debe agregar al menos un producto a la cotización'
                });
                return false;
            }

            e.preventDefault();

            // Llenar el modal de fletes con los productos
            llenarModalFletes();

            // Abrir el modal
            $('#modalCalculoFletes').modal('show');
        });

        // Función para llenar el modal de fletes
        function llenarModalFletes() {
            const tbody = document.getElementById('tbody-fletes');
            tbody.innerHTML = '';

            let contador = 0;
            document.querySelectorAll('#tbody-productos tr[data-producto-id]').forEach(fila => {
                contador++;
                const productoId = fila.getAttribute('data-producto-id');

                // Buscar el producto en productosDisponibles para obtener precio_base
                const producto = productosDisponibles.find(p => p.id == productoId);
                if (!producto) return;

                const codigo = producto.codigo_producto;
                const descripcion = producto.descripcion;
                const cantidad = fila.querySelector('.cantidad-input').value;
                const precioBase = parseFloat(producto.precio_base) || 0;

                // Obtener valores guardados si existen
                const datosGuardados = JSON.parse(localStorage.getItem(STORAGE_KEY) || '{}');
                const productoGuardado = datosGuardados.productos?.find(p => p.producto_id == productoId);

                const filaFlete = document.createElement('tr');
                filaFlete.setAttribute('data-producto-id', productoId);
                filaFlete.setAttribute('data-precio-base-original', precioBase);
                const precioBaseCotizacion = productoGuardado?.precio_base_cotizacion || precioBase;
                filaFlete.innerHTML = `
                    <td>${contador}</td>
                    <td><strong>${codigo}</strong></td>
                    <td>${descripcion}</td>
                    <td class="text-center">${cantidad}</td>
                    <td>
                        <input type="number"
                               class="form-control form-control-sm precio-base-input text-right"
                               step="0.01"
                               min="0"
                               value="${precioBaseCotizacion.toFixed(2)}"
                               onchange="calcularFilaFlete(this.closest('tr'))"
                               onkeyup="calcularFilaFlete(this.closest('tr'))">
                        <small class="text-muted d-block" style="font-size: 0.7rem;">
                            Base: S/ ${precioBase.toFixed(2)}
                        </small>
                    </td>
                    <td>
                        <input type="number"
                               class="form-control form-control-sm peso-unidad text-center"
                               step="0.0001"
                               min="0"
                               value="${productoGuardado?.peso_unidad || ''}"
                               onchange="calcularFilaFlete(this.closest('tr'))"
                               onkeyup="calcularFilaFlete(this.closest('tr'))">
                    </td>
                    <td>
                        <input type="number"
                               class="form-control form-control-sm flete-tonelada text-center"
                               step="0.01"
                               min="0"
                               value="${productoGuardado?.flete_tonelada || ''}"
                               onchange="calcularFilaFlete(this.closest('tr'))"
                               onkeyup="calcularFilaFlete(this.closest('tr'))">
                    </td>
                    <td>
                        <input type="number"
                               class="form-control form-control-sm margen-porcentaje text-center"
                               step="0.01"
                               min="0"
                               value="${productoGuardado?.margen_porcentaje || ''}"
                               onchange="calcularFilaFlete(this.closest('tr'))"
                               onkeyup="calcularFilaFlete(this.closest('tr'))">
                    </td>
                    <td class="text-right flete-unitario">S/ 0.00</td>
                    <td class="text-right costo-mas-flete">S/ 0.00</td>
                    <td class="text-right total-kg">0.00</td>
                    <td class="text-right margen-total">S/ 0.00</td>
                    <td class="text-right flete-total">S/ 0.00</td>
                `;

                tbody.appendChild(filaFlete);

                // Calcular la fila inicialmente
                calcularFilaFlete(filaFlete);
            });

            actualizarResumenFletes();
        }

        // Calcular valores de una fila de flete
        function calcularFilaFlete(fila) {
            const cantidad = parseFloat(fila.querySelector('td:nth-child(4)').textContent) || 0;
            // Usar precio_base ingresado en el modal (puede ser diferente al precio base del producto)
            const precioBase = parseFloat(fila.querySelector('.precio-base-input').value) || 0;
            const pesoUnidad = parseFloat(fila.querySelector('.peso-unidad').value) || 0;
            const fleteTonelada = parseFloat(fila.querySelector('.flete-tonelada').value) || 0;
            const margenPorcentaje = parseFloat(fila.querySelector('.margen-porcentaje').value) || 0;

            // Verificar si se están usando campos de flete
            const usaFlete = pesoUnidad > 0 && fleteTonelada > 0;

            // Flete Unitario = (Peso x Unidad / 1000) × Flete x Tonelada
            const fleteUnitario = usaFlete ? (pesoUnidad / 1000) * fleteTonelada : 0;

            // Costo + Flete: Si no se usa flete, es cantidad * precio_base; si se usa flete, es (precioBase + fleteUnitario) * cantidad
            let costoMasFlete;
            if (!usaFlete) {
                // Cuando no se usa flete: Costo + Flete = Cantidad × Precio Base
                costoMasFlete = cantidad * precioBase;
            } else {
                // Cuando se usa flete: Costo + Flete = (Precio Base + Flete Unitario) × Cantidad
                costoMasFlete = (precioBase + fleteUnitario) * cantidad;
            }

            // Total KG = Cantidad × Peso x Unidad
            const totalKg = cantidad * pesoUnidad;

            // Margen Total = (costo + flete) × (% margen / 100)
            // Si costoMasFlete ya incluye cantidad, no multiplicamos de nuevo
            const costoMasFleteUnitario = usaFlete ? (precioBase + fleteUnitario) : precioBase;
            const margenTotal = costoMasFleteUnitario * (margenPorcentaje / 100) * cantidad;

            // Flete Total = Flete Unitario × Cantidad
            const fleteTotal = fleteUnitario * cantidad;

            // Actualizar celdas
            fila.querySelector('.flete-unitario').textContent = 'S/ ' + fleteUnitario.toFixed(4);
            fila.querySelector('.costo-mas-flete').textContent = 'S/ ' + costoMasFlete.toFixed(2);
            fila.querySelector('.total-kg').textContent = totalKg.toFixed(4);
            fila.querySelector('.margen-total').textContent = 'S/ ' + margenTotal.toFixed(2);
            fila.querySelector('.flete-total').textContent = 'S/ ' + fleteTotal.toFixed(2);

            // Actualizar resumen
            actualizarResumenFletes();
        }

        // Actualizar resumen de fletes
        function actualizarResumenFletes() {
            let totalKg = 0;
            let totalFlete = 0;
            let totalMargen = 0;
            let totalCostoFlete = 0;
            let totalPrecioBase = 0; // Total de precio base (cantidad × precio_base)

            document.querySelectorAll('#tbody-fletes tr[data-producto-id]').forEach(fila => {
                const cantidad = parseFloat(fila.querySelector('td:nth-child(4)').textContent) || 0;
                const precioBase = parseFloat(fila.querySelector('.precio-base-input').value) || 0;
                
                // Calcular total precio base: cantidad × precio_base
                totalPrecioBase += cantidad * precioBase;
                
                totalKg += parseFloat(fila.querySelector('.total-kg').textContent) || 0;
                totalFlete += parseFloat(fila.querySelector('.flete-total').textContent.replace('S/ ', '').trim()) || 0;
                totalMargen += parseFloat(fila.querySelector('.margen-total').textContent.replace('S/ ', '').trim()) || 0;
                totalCostoFlete += parseFloat(fila.querySelector('.costo-mas-flete').textContent.replace('S/ ', '').trim()) || 0;
            });

            document.getElementById('resumen-total-kg').textContent = totalKg.toFixed(4);
            document.getElementById('resumen-total-flete').textContent = totalFlete.toFixed(2);
            document.getElementById('resumen-total-margen').textContent = totalMargen.toFixed(2);
            document.getElementById('resumen-total-costo-flete').textContent = totalCostoFlete.toFixed(2);
            document.getElementById('resumen-total-precio-base').textContent = totalPrecioBase.toFixed(2);
        }

        // Confirmar y guardar cotización con datos de flete
        document.getElementById('btn-confirmar-fletes').addEventListener('click', function() {
            // Recopilar datos de flete y agregarlos al formulario
            const productosFlete = [];

            document.querySelectorAll('#tbody-fletes tr[data-producto-id]').forEach(fila => {
                const productoId = fila.getAttribute('data-producto-id');
                const precioBaseOriginal = parseFloat(fila.getAttribute('data-precio-base-original')) || 0;
                const precioBaseCotizacion = parseFloat(fila.querySelector('.precio-base-input').value) || 0;
                const pesoUnidad = parseFloat(fila.querySelector('.peso-unidad').value) || 0;
                const fleteTonelada = parseFloat(fila.querySelector('.flete-tonelada').value) || 0;
                const margenPorcentaje = parseFloat(fila.querySelector('.margen-porcentaje').value) || 0;
                const fleteUnitario = parseFloat(fila.querySelector('.flete-unitario').textContent.replace('S/ ', '').trim()) || 0;
                const costoMasFlete = parseFloat(fila.querySelector('.costo-mas-flete').textContent.replace('S/ ', '').trim()) || 0;
                const totalKg = parseFloat(fila.querySelector('.total-kg').textContent) || 0;
                const margenTotal = parseFloat(fila.querySelector('.margen-total').textContent.replace('S/ ', '').trim()) || 0;
                const fleteTotal = parseFloat(fila.querySelector('.flete-total').textContent.replace('S/ ', '').trim()) || 0;

                productosFlete.push({
                    producto_id: productoId,
                    precio_base_original: precioBaseOriginal,
                    precio_base_cotizacion: precioBaseCotizacion,
                    peso_unidad: pesoUnidad,
                    flete_tonelada: fleteTonelada,
                    margen_porcentaje: margenPorcentaje,
                    flete_unitario: fleteUnitario,
                    costo_mas_flete: costoMasFlete,
                    total_kg: totalKg,
                    margen_total: margenTotal,
                    flete_total: fleteTotal
                });
            });

            // Agregar campos hidden al formulario con los datos de flete
            productosFlete.forEach((prod, index) => {
                const productoId = prod.producto_id;
                Object.keys(prod).forEach(key => {
                    if (key !== 'producto_id') {
                        const input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = `productos[${productoId}][${key}]`;
                        input.value = prod[key];
                        document.getElementById('formCotizacion').appendChild(input);
                    }
                });
            });

            // Agregar campo para indicar si se debe actualizar el precio base
            const actualizarPrecioBase = document.getElementById('actualizar-precio-base').checked;
            const inputActualizar = document.createElement('input');
            inputActualizar.type = 'hidden';
            inputActualizar.name = 'actualizar_precio_base';
            inputActualizar.value = actualizarPrecioBase ? '1' : '0';
            document.getElementById('formCotizacion').appendChild(inputActualizar);

            // Cerrar modal
            $('#modalCalculoFletes').modal('hide');

            // Asegurar que los valores de impuesto estén actualizados antes de enviar
            // Si el checkbox está marcado, forzar impuesto a 0 en todos los productos
            const checkboxImpuestoCero = document.getElementById('impuesto-cero');
            if (checkboxImpuestoCero && checkboxImpuestoCero.checked) {
                document.querySelectorAll('#tbody-productos tr[data-producto-id]').forEach(fila => {
                    const impuestoInput = fila.querySelector('.impuesto-valor');
                    if (impuestoInput) {
                        impuestoInput.value = 0;
                    }
                });
            }

            // Limpiar localStorage antes de enviar
            limpiarLocalStorage();

            // Enviar formulario
            document.getElementById('formCotizacion').submit();
        });

        // Calcular total al cargar
        document.getElementById('descuento-global').addEventListener('change', function() {
            calcularTotal();
            guardarEnLocalStorage();
        });
        document.getElementById('descuento-global').addEventListener('input', function() {
            calcularTotal();
            guardarEnLocalStorage();
        });

        // Mostrar notificación si hay datos guardados
        window.addEventListener('load', function() {
            const datosGuardados = localStorage.getItem(STORAGE_KEY);
            if (datosGuardados) {
                const datos = JSON.parse(datosGuardados);
                if (datos.productos && datos.productos.length > 0) {
                    const notificacion = document.createElement('div');
                    notificacion.className = 'alert alert-info alert-dismissible fade show';
                    notificacion.setAttribute('role', 'alert');
                    notificacion.innerHTML = `
                        <i class="fas fa-info-circle"></i>
                        <strong>Datos recuperados:</strong> Se encontraron ${datos.productos.length} producto(s) guardados anteriormente.
                        Los datos han sido restaurados automáticamente.
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    `;
                    const contentHeader = document.querySelector('.content-header');
                    if (contentHeader && contentHeader.nextElementSibling) {
                        contentHeader.nextElementSibling.insertBefore(notificacion, contentHeader.nextElementSibling.firstChild);
                    } else {
                        document.querySelector('.content').insertBefore(notificacion, document.querySelector('.content').firstChild);
                    }

                    // Auto-ocultar después de 5 segundos
                    setTimeout(function() {
                        notificacion.classList.remove('show');
                        setTimeout(function() {
                            notificacion.remove();
                        }, 150);
                    }, 5000);
                }
            }
        });

        // Funcionalidad de búsqueda de cliente en el modal
        function updateDocumentoMaxLengthModal() {
            var tipoDocumento = $('#nuevo_cliente_tipo_documento').val();
            if (tipoDocumento == '1') { // DNI
                $('#nuevo_cliente_documento').attr('maxlength', 8);
            } else if (tipoDocumento == '2') { // RUC
                $('#nuevo_cliente_documento').attr('maxlength', 11);
            } else {
                $('#nuevo_cliente_documento').removeAttr('maxlength');
            }
        }

        // Inicializar maxlength al cargar
        updateDocumentoMaxLengthModal();

        // Cambiar maxlength cuando cambia el tipo de documento
        $('#nuevo_cliente_tipo_documento').on('change', function () {
            updateDocumentoMaxLengthModal();
            $('#nuevo_cliente_documento').val('');
            $('#nuevo_cliente_name').val('');
            $('#nuevo_cliente_empresa').val('');
            $('#nuevo_cliente_razon_social').val('');
            $('#nuevo_cliente_direccion').val('');
            $('#nuevo_cliente_celular').val('');
        });

        // Permitir solo números en el campo documento
        $('#nuevo_cliente_documento').on('input', function () {
            this.value = this.value.replace(/[^0-9]/g, '');
            var tipoDocumento = $('#nuevo_cliente_tipo_documento').val();
            var maxLength = tipoDocumento == '1' ? 8 : (tipoDocumento == '2' ? 11 : null);
            if (maxLength && this.value.length > maxLength) {
                this.value = this.value.substring(0, maxLength);
            }
        });

        // Buscar cliente por documento
        $('#btn-buscar-cliente-modal').on('click', function () {
            var documento = $('#nuevo_cliente_documento').val().trim();
            var tipo_documento = $('#nuevo_cliente_tipo_documento').val();

            if (!documento) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Ingrese un número de documento.',
                });
                return;
            }

            // Validaciones básicas según tipo de documento
            if (tipo_documento == '1' && documento.length != 8) {
                Swal.fire({
                    icon: 'warning',
                    title: 'El DNI debe tener 8 dígitos.',
                });
                return;
            }
            if (tipo_documento == '2' && documento.length != 11) {
                Swal.fire({
                    icon: 'warning',
                    title: 'El RUC debe tener 11 dígitos.',
                });
                return;
            }

            $('#btn-buscar-cliente-modal').prop('disabled', true).html('<i class="fas fa-spinner fa-spin"></i> Buscando...');

            $.ajax({
                url: "{{ route('admin.clientes.search-document') }}",
                data: {
                    documento: documento,
                    tipo_documento: tipo_documento
                },
                method: 'GET',
                dataType: 'json',
                success: function (resp) {
                    if (resp.success) {
                        if (resp.data) {
                            // Autocompletar campos según tipo de documento
                            if (tipo_documento == '1') {
                                $('#nuevo_cliente_name').val(resp.data.nombre_comercial || '');
                            } else if (tipo_documento == '2') {
                                $('#nuevo_cliente_empresa').val(resp.data.razon_social || '');
                                $('#nuevo_cliente_razon_social').val(resp.data.razon_social || '');
                                $('#nuevo_cliente_direccion').val(resp.data.direccion || '');
                                $('#nuevo_cliente_celular').val(resp.data.celular || '');
                            }
                        }
                        Swal.fire({
                            icon: 'success',
                            title: '¡Cliente encontrado!',
                            text: 'Datos consultados correctamente.',
                        });
                        $('#btn-buscar-cliente-modal').prop('disabled', false).html('<i class="fas fa-search"></i> Buscar Cliente');
                    } else {
                        Swal.fire({
                            icon: 'warning',
                            title: 'No se encontraron datos',
                            text: resp.message || 'No se encontraron datos.',
                        });
                        $('#btn-buscar-cliente-modal').prop('disabled', false).html('<i class="fas fa-search"></i> Buscar Cliente');
                    }
                },
                error: function () {
                    Swal.fire({
                        icon: 'error',
                        title: 'Ocurrió un error',
                        text: 'Ocurrió un error de conexión.',
                    });
                    $('#btn-buscar-cliente-modal').prop('disabled', false).html('<i class="fas fa-search"></i> Buscar Cliente');
                }
            });
        });

        // Manejar creación de nuevo cliente
        document.getElementById('formNuevoCliente').addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const alertDiv = document.getElementById('alertNuevoCliente');
            const submitBtn = this.querySelector('button[type="submit"]');

            // Limpiar alertas anteriores
            alertDiv.innerHTML = '';
            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Guardando...';

            fetch('{{ route("admin.clientes.store") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Agregar nueva opción al select2
                    const newOption = new Option(
                        data.cliente.name + ' - ' + (data.cliente.empresa || 'Sin empresa'),
                        data.cliente.id,
                        true,
                        true
                    );
                    if (typeof $.fn.select2 !== 'undefined') {
                        $('#cliente_id').append(newOption).trigger('change');
                    } else {
                        // Si Select2 no está disponible, usar select normal
                        const select = document.getElementById('cliente_id');
                        const option = document.createElement('option');
                        option.value = data.cliente.id;
                        option.text = data.cliente.name + ' - ' + (data.cliente.empresa || 'Sin empresa');
                        option.selected = true;
                        select.appendChild(option);
                        select.dispatchEvent(new Event('change'));
                    }

                    // Guardar en localStorage
                    guardarEnLocalStorage();

                    // Cerrar modal y limpiar formulario
                    $('#modalNuevoCliente').modal('hide');
                    document.getElementById('formNuevoCliente').reset();
                    alertDiv.innerHTML = '';

                    // Mostrar mensaje de éxito
                    Swal.fire({
                        icon: 'success',
                        title: 'Cliente creado exitosamente',
                        text: 'El cliente ha sido creado y seleccionado.',
                    });
                } else {
                    // Mostrar errores
                    let errorHtml = '<div class="alert alert-danger"><ul class="mb-0">';
                    if (data.errors) {
                        Object.keys(data.errors).forEach(key => {
                            data.errors[key].forEach(error => {
                                errorHtml += '<li>' + error + '</li>';
                            });
                        });
                    } else {
                        errorHtml += '<li>' + (data.message || 'Error al crear el cliente') + '</li>';
                    }
                    errorHtml += '</ul></div>';
                    alertDiv.innerHTML = errorHtml;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alertDiv.innerHTML = '<div class="alert alert-danger">Error al crear el cliente. Por favor, intente nuevamente.</div>';
            })
            .finally(() => {
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-save"></i> Guardar Cliente';
            });
        });

        // Limpiar formulario cuando se cierra el modal
        $('#modalNuevoCliente').on('hidden.bs.modal', function () {
            document.getElementById('formNuevoCliente').reset();
            $('#nuevo_cliente_tipo_documento').val('1');
            updateDocumentoMaxLengthModal();
            document.getElementById('alertNuevoCliente').innerHTML = '';
            $('#btn-buscar-cliente-modal').prop('disabled', false).html('<i class="fas fa-search"></i> Buscar Cliente');
        });
    </script>

    <!-- Modal de Cotización Creada -->
    @if(session('cotizacion_creada') && isset($cotizacion))
    <div class="modal fade" id="modalCotizacionCreada" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <h5 class="modal-title text-white">
                        <i class="fas fa-check-circle"></i> Cotización Generada Exitosamente
                    </h5>
                    <button type="button" class="close text-white" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <!-- Columna Izquierda: Preview -->
                        <div class="col-md-7">
                            <h6 class="font-weight-bold mb-3">
                                <i class="fas fa-file-pdf text-danger"></i> Vista Previa
                            </h6>
                            <div class="border p-3" style="background-color: #f8f9fa; min-height: 500px;">
                                <iframe id="previewPdf" src="{{ route('admin.cotizaciones.pdf', $cotizacion) }}"
                                        style="width: 100%; height: 500px; border: none;"></iframe>
                            </div>
                        </div>

                        <!-- Columna Derecha: Acciones Rápidas -->
                        <div class="col-md-5">
                            <h6 class="font-weight-bold mb-3">
                                <i class="fas fa-bolt"></i> Acciones Rápidas
                            </h6>

                            <!-- Descargar PDF -->
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">
                                        <i class="fas fa-download text-primary"></i> Descargar PDF
                                    </h6>
                                    <p class="card-text text-muted small">Descarga la cotización en formato PDF</p>
                                    <a href="{{ route('admin.cotizaciones.pdf', $cotizacion) }}"
                                       class="btn btn-primary btn-block"
                                       target="_blank"
                                       download>
                                        <i class="fas fa-file-pdf"></i> Descargar Cotización
                                    </a>
                                </div>
                            </div>

                            <!-- Enviar por Email -->
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">
                                        <i class="fas fa-envelope text-success"></i> Enviar por Email
                                    </h6>
                                    <p class="card-text text-muted small">Envía la cotización por correo electrónico</p>
                                    <form id="formEnviarEmail" onsubmit="enviarEmail(event)">
                                        @csrf
                                        <div class="form-group">
                                            <input type="email"
                                                   class="form-control"
                                                   id="emailCliente"
                                                   placeholder="correo@ejemplo.com"
                                                   required>
                                        </div>
                                        <button type="submit" class="btn btn-success btn-block">
                                            <i class="fas fa-paper-plane"></i> Enviar Email
                                        </button>
                                    </form>
                                    <div id="alertEmail" class="mt-2"></div>
                                </div>
                            </div>

                            <!-- Enviar por WhatsApp -->
                            <div class="card mb-3">
                                <div class="card-body">
                                    <h6 class="card-title">
                                        <i class="fab fa-whatsapp text-success"></i> Enviar por WhatsApp
                                    </h6>
                                    <p class="card-text text-muted small">Envía la cotización directamente por WhatsApp</p>

                                    <!-- Radio buttons para seleccionar tipo de WhatsApp -->
                                    <div class="form-group mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="whatsappTipo" id="whatsappWeb" value="web" checked>
                                            <label class="form-check-label" for="whatsappWeb">
                                                WhatsApp Web
                                            </label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="whatsappTipo" id="whatsappDesktop" value="desktop">
                                            <label class="form-check-label" for="whatsappDesktop">
                                                WhatsApp Desktop (Windows)
                                            </label>
                                        </div>
                                    </div>

                                    <form id="formEnviarWhatsApp" onsubmit="enviarWhatsApp(event)">
                                        @csrf
                                        <div class="form-group">
                                            <input type="tel"
                                                   class="form-control"
                                                   id="telefonoWhatsApp"
                                                   placeholder="+51 987 654 321"
                                                   required>
                                            <small class="form-text text-muted">Incluye código de país (ej: +51)</small>
                                        </div>
                                        <button type="submit" class="btn btn-success btn-block">
                                            <i class="fab fa-whatsapp"></i> Enviar por WhatsApp
                                        </button>
                                    </form>
                                    <div id="alertWhatsApp" class="mt-2">                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-12">
                            <div class="alert alert-info">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="actualizar-precio-base" checked>
                                    <label class="form-check-label" for="actualizar-precio-base">
                                        <strong>Actualizar precio base del producto automáticamente</strong>
                                        <br>
                                        <small>Si está marcado, el precio base del producto se actualizará con el nuevo valor ingresado en esta cotización.</small>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a href="{{ route('admin.cotizaciones.index') }}" class="btn btn-secondary">
                        <i class="fas fa-list"></i> Ver Todas las Cotizaciones
                    </a>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cerrar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        const cotizacionId = {{ $cotizacion->id }};
        const csrfToken = '{{ csrf_token() }}';

        // Abrir modal automáticamente
        $(document).ready(function() {
            $('#modalCotizacionCreada').modal('show');
        });

        function enviarEmail(event) {
            event.preventDefault();
            const email = document.getElementById('emailCliente').value;
            const alertDiv = document.getElementById('alertEmail');

            fetch(`/cotizaciones/${cotizacionId}/enviar-email`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify({ email: email })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alertDiv.innerHTML = '<div class="alert alert-success">¡Email enviado exitosamente!</div>';
                    document.getElementById('formEnviarEmail').reset();
                } else {
                    alertDiv.innerHTML = '<div class="alert alert-danger">' + (data.message || 'Error al enviar el email') + '</div>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alertDiv.innerHTML = '<div class="alert alert-danger">Error al enviar el email. Por favor, intente nuevamente.</div>';
            });
        }

        function enviarWhatsApp(event) {
            event.preventDefault();
            const telefono = document.getElementById('telefonoWhatsApp').value.replace(/\s+/g, '');
            const tipo = document.querySelector('input[name="whatsappTipo"]:checked').value;
            const alertDiv = document.getElementById('alertWhatsApp');

            // Obtener URL pública
            fetch(`/cotizaciones/${cotizacionId}/publica`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const mensaje = encodeURIComponent('Hola, te comparto la cotización: ' + data.url);
                    let urlWhatsApp = '';

                    if (tipo === 'web') {
                        // WhatsApp Web
                        urlWhatsApp = `https://web.whatsapp.com/send?phone=${telefono}&text=${mensaje}`;
                    } else {
                        // WhatsApp Desktop (Windows) - usa wa.me que abre la app si está instalada
                        urlWhatsApp = `https://wa.me/${telefono}?text=${mensaje}`;
                    }

                    window.open(urlWhatsApp, '_blank');
                    alertDiv.innerHTML = '<div class="alert alert-success">Redirigiendo a WhatsApp...</div>';
                } else {
                    alertDiv.innerHTML = '<div class="alert alert-danger">Error al generar el enlace. Intente nuevamente.</div>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alertDiv.innerHTML = '<div class="alert alert-danger">Error al generar el enlace. Por favor, intente nuevamente.</div>';
            });
        }
    </script>
    @endif
@stop