@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0">Nueva Orden</h4>
            <div class="page-title-right">
                <a href="{{ route('orders.index') }}" class="btn btn-primary">Volver a Órdenes</a>
            </div>
        </div>
    </div>
</div>
            <form id="orderForm" novalidate autocomplete="off">
                @csrf
                
                <!-- Información del Cliente -->
                <div class="card border-primary">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ri-user-line me-2"></i>Información del Cliente
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="ri-group-line me-1 text-success"></i>Cliente Registrado (Opcional)
                                    </label>
                                    <div class="input-group">
                                        <select class="form-select" id="user_id" name="user_id">
                                            <option value="">Seleccione cliente</option>
                                            @foreach($users as $user)
                                                @php
                                                    $address = $user->addresses->first();
                                                @endphp
                                                <option value="{{ $user->id }}" 
                                                    data-name="{{ $user->name }}" 
                                                    data-email="{{ $user->email }}" 
                                                    data-mobile="{{ $user->phone ?? ($address->mobile ?? '') }}"
                                                    data-address="{{ $address->address ?? '' }}"
                                                    data-apartment="{{ $address->apartment ?? '' }}"
                                                    data-city="{{ $address->city ?? '' }}"
                                                    data-state="{{ $address->state ?? '' }}"
                                                    data-zip="{{ $address->zip ?? '' }}"
                                                    data-country="{{ $address->country_id ?? '' }}">
                                                    {{ $user->name }} ({{ $user->email }})
                                                </option>
                                            @endforeach
                                        </select>
                                        <button class="btn btn-info" type="button" id="newClientBtn" title="Buscar cliente">
                                            <i class="ri-search-line"></i>
                                        </button>
                                        <button class="btn btn-success" type="button" id="addNewClientBtn" title="Agregar cliente nuevo">
                                            <i class="ri-add-line"></i>
                                        </button>
                                    </div>
                                    <small class="text-muted">Si selecciona un cliente, se autocompletarán los datos</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="customer_type">Tipo de Cliente <span class="text-danger">*</span></label>
                                    <select class="form-select" id="customer_type" name="customer_type" required>
                                        <option value="individual">Persona Física</option>
                                        <option value="business">Empresa</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3" id="companyField" style="display: none;">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="ri-building-line me-1 text-primary"></i>Empresa <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" class="form-control" id="company" name="company" placeholder="Razón social o nombre de la empresa">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="first_name">Nombre <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="first_name" name="first_name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="last_name">Apellido <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="last_name" name="last_name" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email">Email <span class="text-danger">*</span></label>
                                    <input type="email" class="form-control" id="email" name="email" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="mobile">Teléfono <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="mobile" name="mobile" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="country_id">País <span class="text-danger">*</span></label>
                                    <select class="form-select" id="country_id" name="country_id" required>
                                        <option value="">Seleccionar país...</option>
                                        @foreach($countries as $country)
                                            <option value="{{ $country->id }}">{{ $country->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="address">Dirección <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="address" name="address" rows="2" required></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="apartment">Casa/Departamento</label>
                                    <input type="text" class="form-control" id="apartment" name="apartment" placeholder="Casa, departamento, oficina, etc.">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="city">Ciudad/Localidad <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="city" name="city" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="state">Provincia/Departamento <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="state" name="state" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="zip">Código Postal <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="zip" name="zip" required>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Productos -->
                <div class="card border-success">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ri-shopping-cart-2-line me-2"></i>Productos de la Orden
                        </h3>
                    </div>
                    <div class="card-body">
                        <!-- Selector de Productos -->
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <div class="mb-3">
                                    <label class="form-label fw-bold">
                                        <i class="ri-shopping-bag-line me-1 text-primary"></i>Seleccionar Productos
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="productSearch" 
                                               placeholder="Complete los campos del cliente primero..." 
                                               readonly style="background-color: #f8f9fa;">
                                        <button class="btn btn-primary" type="button" id="addProductBtn" title="Buscar productos">
                                            <i class="ri-search-line"></i>
                                        </button>
                                    </div>
                                    <small class="text-muted">Haga clic en el botón de búsqueda para seleccionar productos de la orden</small>
                                </div>
                            </div>
                        </div>

                        <!-- Modal de Selección de Productos -->
                        <div class="modal fade" id="productModal" tabindex="-1">
                            <div class="modal-dialog modal-xl">
                                <div class="modal-content">
                                    <div class="modal-header bg-primary text-white">
                                        <h5 class="modal-title">
                                            <i class="ri-shopping-bag-line me-2"></i>
                                            Seleccionar Producto (<span id="productModalCount">0</span> items)
                                        </h5>
                                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">&times;</span>
                                        </button>
                                    </div>
                                    
                                    <div class="modal-body p-0">
                                        <!-- Toolbar de filtros -->
                                        <div class="bg-light p-3 border-bottom">
                                            <div class="row g-2 align-items-center">
                                                <div class="col-auto">
                                                    <span class="badge bg-success rounded-pill">
                                                        <i class="ri-check-line me-1"></i>
                                                        Vista Ordenada por:
                                                    </span>
                                                </div>
                                                <div class="col-auto">
                                                    <select id="orderByProduct" class="form-select form-select-sm">
                                                        <option value="title">Título</option>
                                                        <option value="sku">Código/SKU</option>
                                                        <option value="price">Precio</option>
                                                        <option value="category">Categoría</option>
                                                        <option value="brand">Marca</option>
                                                    </select>
                                                </div>
                                                <div class="col-auto">
                                                    <button type="button" class="btn btn-sm btn-success" id="sortProductBtn">
                                                        <i class="ri-sort-asc-alpha-down"></i>
                                                    </button>
                                                </div>
                                                <div class="col-auto">
                                                    <button type="button" class="btn btn-sm btn-warning" id="clearProductSearch" title="Limpiar búsqueda">
                                                        <i class="ri-eraser-line"></i>
                                                    </button>
                                                </div>
                                                <div class="col-auto ms-auto">
                                                    <button class="btn btn-sm btn-danger" data-bs-dismiss="modal">
                                                        <i class="ri-close-line"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            
                                            <!-- Filtros adicionales -->
                                            <div class="row g-2 mt-2">
                                                <div class="col-md-3">
                                                    <label class="form-label small fw-bold">Categoría</label>
                                                    <select id="modalCategoryFilter" class="form-select form-select-sm">
                                                        <option value="">Todas las categorías</option>
                                                        @foreach($categories as $category)
                                                            <option value="{{ $category->CO_CATEGOR }}">{{ $category->DE_CATEGOR }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label small fw-bold">Marca</label>
                                                    <select id="modalBrandFilter" class="form-select form-select-sm">
                                                        <option value="">Todas las marcas</option>
                                                        @foreach($brands as $brand)
                                                            <option value="{{ $brand->CO_MARCA }}">{{ $brand->DE_MARCA }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label small fw-bold">Modelo</label>
                                                    <select id="modalModelFilter" class="form-select form-select-sm">
                                                        <option value="">Todos los modelos</option>
                                                        @foreach($models as $model)
                                                            <option value="{{ $model->CO_MODELO }}">{{ $model->DE_MODELO }}</option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row g-2 mt-2">
                                                <div class="col-md-3">
                                                    <label class="form-label small fw-bold">Precio</label>
                                                    <select id="priceRangeFilter" class="form-select form-select-sm">
                                                        <option value="">Todos los precios</option>
                                                        <option value="0-100">$0 - $100</option>
                                                        <option value="100-500">$100 - $500</option>
                                                        <option value="500-1000">$500 - $1,000</option>
                                                        <option value="1000+">$1,000+</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-3">
                                                    <label class="form-label small fw-bold">Estado</label>
                                                    <div class="form-check form-switch">
                                                        <input class="form-check-input" type="checkbox" id="onlyActiveProducts" checked>
                                                        <label class="form-check-label small" for="onlyActiveProducts">
                                                            Solo activos
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Tabla de productos -->
                                        <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                                            <table class="table table-striped table-hover mb-0">
                                                <thead class="table-dark sticky-top">
                                                    <tr>
                                                        <th style="cursor: pointer;" data-sort="sku">
                                                            Código/SKU
                                                            <i class="ri-sort-asc"></i>
                                                        </th>
                                                        <th style="cursor: pointer;" data-sort="title">
                                                            Título
                                                            <i class="ri-sort-asc"></i>
                                                        </th>
                                                        <th style="cursor: pointer;" data-sort="category">
                                                            Categoría
                                                            <i class="ri-sort-asc"></i>
                                                        </th>
                                                        <th style="cursor: pointer;" data-sort="brand">
                                                            Marca
                                                            <i class="ri-sort-asc"></i>
                                                        </th>
                                                        <th class="text-center" style="cursor: pointer;" data-sort="price">
                                                            Precio
                                                            <i class="ri-sort-asc"></i>
                                                        </th>
                                                        <th class="text-center">Estado</th>
                                                        <th class="text-center">Acción</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="productModalTableBody">
                                                    <!-- Los productos se cargarán aquí vía AJAX -->
                                                </tbody>
                                            </table>
                                        </div>

                                        <!-- Loading -->
                                        <div class="text-center p-4 d-none" id="loadingProductsModal">
                                            <div class="spinner-border text-primary" role="status">
                                                <span class="visually-hidden">Cargando...</span>
                                            </div>
                                            <p class="mt-2 text-muted">Cargando productos...</p>
                                        </div>
                                    </div>
                                    
                                    <div class="modal-footer bg-light">
                                        <div class="row w-100 align-items-center">
                                            <div class="col-md-6">
                                                <div class="input-group">
                                                    <span class="input-group-text">
                                                        <i class="ri-search-line"></i>
                                                    </span>
                                                    <input type="text" class="form-control" id="productModalSearch" 
                                                           placeholder="Buscar por código, título, marca o categoría...">
                                                </div>
                                            </div>
                                            <div class="col-md-6 text-end">
                                                <div class="d-flex align-items-center justify-content-end">
                                                    <!-- Paginación de productos -->
                                                    <div class="me-3">
                                                        <button type="button" class="btn btn-sm btn-outline-primary" id="prevProductPage" disabled>
                                                            <i class="ri-arrow-left-s-line"></i>
                                                        </button>
                                                        <span class="mx-2 text-muted" id="productPageInfo">
                                                            Página 1 de 1
                                                        </span>
                                                        <button type="button" class="btn btn-sm btn-outline-primary" id="nextProductPage" disabled>
                                                            <i class="ri-arrow-right-s-line"></i>
                                                        </button>
                                                    </div>
                                                    <span class="text-muted me-3" id="productModalFooterCount">
                                                        Cargando productos...
                                                    </span>
                                                    <button class="btn btn-secondary" data-bs-dismiss="modal">
                                                        <i class="ri-close-line me-1"></i>
                                                        Cerrar
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Tabla de Productos Seleccionados -->
                        <div class="table-responsive">
                            <table class="table table-bordered" id="orderItemsTable">
                                <thead class="thead-light">
                                    <tr>
                                        <th width="40%">Producto</th>
                                        <th width="10%">Cantidad</th>
                                        <th width="15%">Precio Unit.</th>
                                        <th width="10%">Desc. %</th>
                                        <th width="15%">Total</th>
                                        <th width="10%">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody id="orderItemsBody">
                                    <tr id="noItemsRow">
                                        <td colspan="6" class="text-center text-muted py-4">
                                            <i class="ri-shopping-cart-2-line ri-2x mb-2"></i><br>
                                            No hay productos agregados. Haga clic en "Agregar Producto" para comenzar.
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- Totales -->
                        <div class="row mt-3">
                            <div class="col-md-6 offset-md-6">
                                <table class="table table-sm">
                                    <tr>
                                        <td class="text-end"><strong>Subtotal:</strong></td>
                                        <td class="text-end" id="subtotalAmount">$0.00</td>
                                    </tr>
                                    <tr>
                                        <td class="text-end">
                                            <label for="global_discount_percentage">Descuento Global (%):</label>
                                        </td>
                                        <td class="text-end">
                                            <div class="input-group input-group-sm">
                                                <input type="number" class="form-control text-end" 
                                                       id="global_discount_percentage" name="global_discount_percentage" 
                                                       min="0" max="100" step="0.01" value="0">
                                                <span class="input-group-text">%</span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="text-end"><strong>Descuento (<span id="discountPercentage">0%</span>):</strong></td>
                                        <td class="text-end text-danger"><strong id="discountAmount">-$0.00</strong></td>
                                    </tr>
                                    <tr>
                                        <td class="text-end"><strong>Subtotal con Descuento:</strong></td>
                                        <td class="text-end" id="subtotalWithDiscountAmount">$0.00</td>
                                    </tr>
                                    <tr>
                                        <td class="text-end">
                                            <label for="shipping_cost">Costo de Envío:</label>
                                        </td>
                                        <td class="text-end">
                                            <div class="input-group input-group-sm">
                                                <span class="input-group-text">$</span>
                                                <input type="number" class="form-control text-end" 
                                                       id="shipping_cost" name="shipping_cost" 
                                                       min="0" step="0.01" value="0" placeholder="0.00">
                                                <button type="button" class="btn btn-outline-info btn-sm" id="calculateShippingBtn" title="Calcular envío automático">
                                                    <i class="ri-calculator-line"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="table-success">
                                        <td class="text-end"><strong>Total General:</strong></td>
                                        <td class="text-end"><strong id="grandTotalAmount">$0.00</strong></td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información de Entrega -->
                <div class="card border-warning">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ri-truck-line me-2"></i>Información de Entrega
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="delivery_type">Tipo de Entrega</label>
                                    <select class="form-select" id="delivery_type" name="delivery_type">
                                        <option value="standard">Estándar (3-5 días)</option>
                                        <option value="express">Express (1-2 días)</option>
                                        <option value="scheduled">Programada</option>
                                        <option value="pickup">Retiro en Local</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="delivery_date">Fecha de Entrega</label>
                                    <input type="date" class="form-control" id="delivery_date" name="delivery_date" 
                                           min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="delivery_time_from">Horario Desde</label>
                                    <input type="time" class="form-control" id="delivery_time_from" name="delivery_time_from">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="delivery_time_to">Horario Hasta</label>
                                    <input type="time" class="form-control" id="delivery_time_to" name="delivery_time_to">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="delivery_instructions">Instrucciones de Entrega</label>
                                    <textarea class="form-control" id="delivery_instructions" name="delivery_instructions" 
                                              rows="3" placeholder="Código de acceso, portero, referencias, etc."></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="contact_person">Persona de Contacto en Entrega</label>
                                    <input type="text" class="form-control" id="contact_person" name="contact_person" 
                                           placeholder="Nombre de quien recibe">
                                    <small class="text-muted">Opcional: si es diferente al cliente</small>
                                </div>
                                <div class="mb-3">
                                    <label for="alternative_phone">Teléfono Alternativo</label>
                                    <input type="text" class="form-control" id="alternative_phone" name="alternative_phone" 
                                           placeholder="Teléfono adicional de contacto">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Condiciones Comerciales -->
                <div class="card card-secondary">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ri-handshake-line me-2"></i>Condiciones Comerciales
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="payment_terms">Términos de Pago</label>
                                    <select class="form-select" id="payment_terms" name="payment_terms">
                                        <option value="cash">Contado</option>
                                        <option value="transfer">Transferencia</option>
                                        <option value="check">Cheque</option>
                                        <option value="30_days">30 días</option>
                                        <option value="60_days">60 días</option>
                                        <option value="90_days">90 días</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="warranty_days">Garantía (días)</label>
                                    <input type="number" class="form-control" id="warranty_days" name="warranty_days" 
                                           value="30" min="0" max="365">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="priority">Prioridad</label>
                                    <select class="form-select" id="priority" name="priority">
                                        <option value="normal">Normal</option>
                                        <option value="high">Alta</option>
                                        <option value="urgent">Urgente</option>
                                        <option value="low">Baja</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="mb-3">
                                    <label for="reference_number">Ref. Cliente</label>
                                    <input type="text" class="form-control" id="reference_number" name="reference_number" 
                                           placeholder="Número de referencia del cliente">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Observaciones y Configuración -->
                <div class="card border-info">
                    <div class="card-header">
                        <h3 class="card-title">
                            <i class="ri-sticky-note-line me-2"></i>Observaciones y Términos
                        </h3>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="special_requirements">Requerimientos Especiales del Cliente</label>
                                    <textarea class="form-control" id="special_requirements" name="special_requirements" 
                                              rows="4" placeholder="Especificaciones técnicas, condiciones de entrega, etc."></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="admin_notes">Notas Internas (Admin)</label>
                                    <textarea class="form-control" id="admin_notes" name="admin_notes" 
                                              rows="4" placeholder="Notas privadas para el equipo administrativo..."></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="valid_until">Válida Hasta (Opcional)</label>
                                    <input type="date" class="form-control" id="valid_until" name="valid_until" 
                                           min="{{ date('Y-m-d', strtotime('+1 day')) }}">
                                    <small class="text-muted">Deje vacío si la orden no tiene fecha de vencimiento</small>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="terms_conditions">Términos y Condiciones</label>
                                    <textarea class="form-control" id="terms_conditions" name="terms_conditions" 
                                              rows="4" placeholder="Términos específicos para esta orden..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Botones de Acción -->
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="update_customer_data" name="update_customer_data" value="1">
                                    <label class="form-check-label" for="update_customer_data">
                                        <strong>Actualizar datos del cliente en el sistema</strong>
                                    </label>
                                    <br>
                                    <small class="text-muted">Se actualizarán los datos del cliente registrado (excepto email)</small>
                                </div>
                            </div>
                            <div class="col-md-6 text-end">
                                <a href="{{ route('orders.index') }}" class="btn btn-secondary me-2">
                                    <i class="ri-close-line me-1"></i>Cancelar
                                </a>
                                <button type="submit" class="btn btn-primary" id="submitBtn">
                                    <i class="ri-save-line me-1"></i>Crear Orden
                                </button>
                                <button type="button" class="btn btn-link btn-sm ms-2" onclick="resetSubmitButton()" title="Resetear botón si se queda bloqueado">
                                    <small>Resetear</small>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>


<!-- Modal Agregar Nuevo Cliente -->
<div class="modal fade" id="addClientModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="ri-user-add-line me-2"></i>
                    Agregar Nuevo Cliente
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="newClientForm">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="newClientFirstName">Nombre <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="newClientFirstName" name="first_name" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="newClientLastName">Apellido <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="newClientLastName" name="last_name" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="newClientEmail">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="newClientEmail" name="email" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="newClientPhone">Teléfono <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="newClientPhone" name="phone" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="newClientCountry">País <span class="text-danger">*</span></label>
                                <select class="form-select" id="newClientCountry" name="country_id" required>
                                    <option value="">Seleccionar país</option>
                                    @foreach($countries as $country)
                                        <option value="{{ $country->id }}">{{ $country->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="newClientCustomerType">Tipo de Cliente</label>
                                <select class="form-select" id="newClientCustomerType" name="customer_type">
                                    <option value="individual">Persona Física</option>
                                    <option value="business">Empresa</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="mb-3" id="newClientCompanyField" style="display: none;">
                        <label for="newClientCompany">Empresa/Razón Social</label>
                        <input type="text" class="form-control" id="newClientCompany" name="company">
                    </div>
                    
                    <div class="mb-3">
                        <label for="newClientAddress">Dirección <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="newClientAddress" name="address" required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="newClientCity">Ciudad <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="newClientCity" name="city" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="newClientState">Provincia/Estado <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="newClientState" name="state" required>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="newClientZip">Código Postal</label>
                                <input type="text" class="form-control" id="newClientZip" name="zip">
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="ri-close-line me-1"></i>Cancelar
                    </button>
                    <button type="submit" class="btn btn-success" id="saveNewClientBtn">
                        <i class="ri-save-line me-1"></i>Guardar Cliente
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Toast Container for Top-Right Notifications -->
<div class="toast-container position-fixed" style="top: 80px; right: 20px; z-index: 9999;">
    <!-- Los toasts se agregarán dinámicamente aquí -->
</div>

@endsection

@push('css')
<style>
.select2-container {
    width: 100% !important;
}

/* Transiciones suaves para las filas de la tabla */
#clientTableBody tr {
    transition: all 0.3s ease;
}

#clientTableBody tr.client-hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

#clientTableBody tr.client-visible {
    opacity: 1;
    transform: scale(1);
}

/* Altura mínima para evitar colapso completo */
.table-responsive {
    min-height: 350px;
}

/* Loading suave */
.search-loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Toast Notifications Styling */
.toast-container {
    max-width: 350px;
}

.toast-notification {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: none;
    font-size: 0.9rem;
}

.toast-notification .close {
    margin-left: auto;
}

/* Animación slide-in desde la derecha */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}
.select2-dropdown {
    z-index: 9999 !important;
}
.select2-container .select2-selection--single {
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}
.select2-container .select2-selection__rendered {
    line-height: 1.5 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.select2-container .select2-selection__arrow {
    height: 36px !important;
}
</style>
@endpush

@push('js')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
$(document).ready(function() {
    // Variables globales
    let orderItems = [];
    let productIndex = 0;
    let isSubmitting = false; // Prevenir envíos múltiples

    // Sistema de notificaciones toast en top-right
    function showToast(options) {
        const toastContainer = $('.toast-container');
        const toastId = 'toast-' + Date.now();
        
        // Determinar colores según el tipo
        let bgClass = 'bg-primary';
        let iconClass = 'ri-information-line';
        
        switch(options.icon) {
            case 'success':
                bgClass = 'bg-success';
                iconClass = 'ri-checkbox-circle-line';
                break;
            case 'error':
                bgClass = 'bg-danger';
                iconClass = 'ri-error-warning-line';
                break;
            case 'warning':
                bgClass = 'bg-warning';
                iconClass = 'ri-error-warning-line';
                break;
            case 'info':
                bgClass = 'bg-info';
                iconClass = 'ri-information-line';
                break;
        }

        const toastHtml = `
            <div id="${toastId}" class="toast-notification alert ${bgClass.replace('bg-', 'alert-')} alert-dismissible show" role="alert" style="margin-bottom: 10px; opacity: 1; animation: slideInRight 0.3s ease-out;">
                <div class="d-flex align-items-center">
                    <i class="${iconClass} me-2"></i>
                    <div class="flex-grow-1">
                        ${options.title ? '<strong>' + options.title + '</strong><br>' : ''}
                        ${options.text || options.message || ''}
                    </div>
                    <button type="button" class="close ms-2" data-bs-dismiss="alert" aria-label="Close" style="opacity: 0.8; padding: 0; border: none; background: none; color: inherit; font-size: 1.2em;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        `;

        toastContainer.append(toastHtml);
        
        // Auto-hide después de 4 segundos
        setTimeout(function() {
            $('#' + toastId).fadeOut(300, function() {
                $(this).remove();
            });
        }, 4000);

        return Promise.resolve();
    }

    // Función de compatibilidad para mantener la API anterior
    function showAlert(options) {
        return showToast(options);
    }

    // Mostrar/ocultar campo empresa según tipo de cliente
    $('#customer_type').on('change', function() {
        if ($(this).val() === 'business') {
            $('#companyField').show();
            $('#company').prop('required', true);
        } else {
            $('#companyField').hide();
            $('#company').prop('required', false).val('');
        }
    });

    // Auto-completar datos del cliente seleccionado
    $('#user_id').on('change', function() {
        const selectedOption = $(this).find(':selected');
        if (selectedOption.val()) {
            const names = selectedOption.data('name').split(' ');
            $('#first_name').val(names[0] || '');
            $('#last_name').val(names.slice(1).join(' ') || '');
            $('#email').val(selectedOption.data('email'));
            $('#mobile').val(selectedOption.data('mobile') || '');
            $('#address').val(selectedOption.data('address') || '');
            $('#apartment').val(selectedOption.data('apartment') || '');
            $('#city').val(selectedOption.data('city') || '');
            $('#state').val(selectedOption.data('state') || '');
            $('#zip').val(selectedOption.data('zip') || '');
            $('#country_id').val(selectedOption.data('country') || '').trigger('change');
        } else {
            $('#first_name, #last_name, #email, #mobile, #address, #apartment, #city, #state, #zip').val('');
            $('#country_id').val('').trigger('change');
        }
    });

    // Función para llenar datos del cliente en el formulario
    function fillClientData(user) {
        const names = user.name.split(' ');
        $('#first_name').val(names[0] || '');
        $('#last_name').val(names.slice(1).join(' ') || '');
        $('#email').val(user.email);
        $('#mobile').val(user.phone || '');
        $('#address').val(user.address || '');
        $('#city').val(user.city || '');
        $('#state').val(user.state || '');
        $('#zip').val(user.zip || '');
        $('#country_id').val(user.country_id || '').trigger('change');
        $('#company').val(user.company || '');
        $('#customer_type').val(user.customer_type || 'individual');
    }

    // Botón nuevo cliente (búsqueda)
    $('#newClientBtn').click(function(e) {
        e.preventDefault();
        console.log('Botón cliente clickeado');
        $('#newClientModal').modal('show');
    });

    // Botón agregar nuevo cliente
    $('#addNewClientBtn').click(function(e) {
        e.preventDefault();
        console.log('Botón agregar cliente clickeado');
        $('#addClientModal').modal('show');
    });

    // Mostrar/ocultar campo empresa en modal de nuevo cliente
    $('#newClientCustomerType').on('change', function() {
        if ($(this).val() === 'business') {
            $('#newClientCompanyField').show();
        } else {
            $('#newClientCompanyField').hide();
        }
    });

    // Manejar envío del formulario de nuevo cliente
    $('#newClientForm').on('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        formData.append('_token', '{{ csrf_token() }}');
        
        // Deshabilitar botón mientras se procesa
        const saveBtn = $('#saveNewClientBtn');
        saveBtn.prop('disabled', true).html('<i class="ri-loader-line fa-spin me-1"></i>Guardando...');
        
        $.ajax({
            url: '{{ route("admin.orders.createUser") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.status) {
                    // Cerrar modal
                    $('#addClientModal').modal('hide');
                    
                    // Mostrar notificación
                    showToast({
                        icon: 'success',
                        text: 'Cliente creado exitosamente'
                    });
                    
                    // Agregar cliente al select principal
                    const newOption = `<option value="${response.user.id}" 
                                              data-name="${response.user.name}"
                                              data-email="${response.user.email}"
                                              data-mobile="${response.user.phone || ''}"
                                              data-address="${response.user.address || ''}"
                                              data-city="${response.user.city || ''}"
                                              data-state="${response.user.state || ''}"
                                              data-zip="${response.user.zip || ''}"
                                              data-country="${response.user.country_id || ''}"
                                              selected>
                                        ${response.user.name} (${response.user.email})
                                      </option>`;
                    
                    $('#user_id').append(newOption);
                    
                    // Autocompletar datos del cliente en el formulario principal
                    fillClientData(response.user);
                    
                    // Limpiar formulario
                    $('#newClientForm')[0].reset();
                } else {
                    showToast({
                        icon: 'error',
                        text: response.message || 'Error al crear el cliente'
                    });
                }
            },
            error: function(xhr) {
                let errorMessage = 'Error al crear el cliente';
                if (xhr.responseJSON && xhr.responseJSON.errors) {
                    const errors = Object.values(xhr.responseJSON.errors).flat();
                    errorMessage = errors.join(', ');
                }
                
                showToast({
                    icon: 'error',
                    text: errorMessage
                });
            },
            complete: function() {
                // Rehabilitar botón
                saveBtn.prop('disabled', false).html('<i class="ri-save-line me-1"></i>Guardar Cliente');
            }
        });
    });

    // Abrir modal de productos
    $('#addProductBtn').click(function(e) {
        e.preventDefault();
        console.log('Botón producto clickeado');
        $('#productModal').modal('show');
        loadProducts();
    });

    // Dar foco al campo de búsqueda cuando se abre el modal de productos
    $('#productModal').on('shown.bs.modal', function() {
        setTimeout(() => {
            $('#productModalSearch').focus();
        }, 100);
    });

    // Los filtros básicos ya no se usan, todo está en el modal

    // Variables para paginación de productos
    let currentProductPage = 1;
    let totalProductPages = 1;

    // Cargar productos vía AJAX
    function loadProducts(page = 1) {
        currentProductPage = page;
        $('#loadingProductsModal').removeClass('d-none');
        $('#productModalTableBody').empty();

        $.ajax({
            url: '{{ route("admin.orders.products") }}',
            method: 'GET',
            data: {
                search: $('#productModalSearch').val(),
                category_id: $('#modalCategoryFilter').val(),
                brand_id: $('#modalBrandFilter').val(),
                model_id: $('#modalModelFilter').val(),
                price_range: $('#priceRangeFilter').val(),
                only_active: $('#onlyActiveProducts').is(':checked') ? 'true' : 'false',
                page: page
            },
            success: function(response) {
                $('#loadingProductsModal').addClass('d-none');
                
                if (response.status && response.products.data.length > 0) {
                    let html = '';
                    const products = response.products.data;
                    
                    products.forEach(function(product, index) {
                        const rowClass = index % 2 === 0 ? '' : 'table-light';
                        const statusBadge = product.status == 1 ? 
                            '<span class="badge bg-success">Activo</span>' : 
                            '<span class="badge bg-danger">Inactivo</span>';
                        
                        html += `
                            <tr class="${rowClass}" data-product-id="${product.id}">
                                <td class="fw-bold text-primary">${product.sku || 'N/A'}</td>
                                <td>${product.title}</td>
                                <td>
                                    <span class="badge bg-info">${product.category ? product.category.name : 'Sin categoría'}</span>
                                </td>
                                <td>
                                    <span class="badge bg-secondary">${product.brand ? product.brand.name : 'Sin marca'}</span>
                                </td>
                                <td class="text-center">
                                    <span class="fw-bold text-success">$${product.price ? parseFloat(product.price).toFixed(2) : '0.00'}</span>
                                </td>
                                <td class="text-center">${statusBadge}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-primary select-product-btn" 
                                            data-product='${JSON.stringify(product)}'
                                            title="Seleccionar producto">
                                        <i class="ri-check-line"></i>
                                    </button>
                                </td>
                            </tr>
                        `;
                    });
                    
                    $('#productModalTableBody').html(html);
                    $('#productModalCount').text(products.length);
                    $('#productModalFooterCount').text(`Mostrando ${products.length} de ${response.products.total} productos`);
                    
                    // Actualizar paginación
                    totalProductPages = response.products.last_page;
                    $('#productPageInfo').text(`Página ${response.products.current_page} de ${totalProductPages}`);
                    $('#prevProductPage').prop('disabled', response.products.current_page === 1);
                    $('#nextProductPage').prop('disabled', response.products.current_page === totalProductPages);
                } else {
                    $('#productModalTableBody').html(`
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <i class="ri-search-line ri-2x text-muted mb-2"></i><br>
                                <span class="text-muted">No se encontraron productos</span>
                            </td>
                        </tr>
                    `);
                    $('#productModalCount').text('0');
                    $('#productModalFooterCount').text('No hay productos disponibles');
                    
                    // Resetear paginación cuando no hay resultados
                    $('#productPageInfo').text('Página 1 de 1');
                    $('#prevProductPage').prop('disabled', true);
                    $('#nextProductPage').prop('disabled', true);
                }
            },
            error: function() {
                $('#loadingProductsModal').addClass('d-none');
                $('#productModalTableBody').html(`
                    <tr>
                        <td colspan="7" class="text-center py-4">
                            <i class="ri-error-warning-line ri-2x text-danger mb-2"></i><br>
                            <span class="text-danger">Error al cargar productos</span>
                        </td>
                    </tr>
                `);
                $('#productModalCount').text('0');
                $('#productModalFooterCount').text('Error al cargar');
            }
        });
    }

    // Seleccionar producto
    $(document).on('click', '.select-product-btn', function() {
        const product = JSON.parse($(this).attr('data-product'));
        addProductToOrder(product);
        $('#productModal').modal('hide');
    });

    // Búsqueda en tiempo real en el modal de productos
    $('#productModalSearch').on('input', function() {
        currentProductPage = 1; // Reiniciar a primera página al buscar
        loadProducts();
    });

    // Filtros del modal de productos
    $('#modalCategoryFilter, #modalBrandFilter, #modalModelFilter, #priceRangeFilter, #onlyActiveProducts').on('change', function() {
        currentProductPage = 1; // Reiniciar a primera página al filtrar
        loadProducts();
    });

    // Navegación de páginas de productos
    $('#prevProductPage').click(function() {
        if (currentProductPage > 1) {
            loadProducts(currentProductPage - 1);
        }
    });

    $('#nextProductPage').click(function() {
        if (currentProductPage < totalProductPages) {
            loadProducts(currentProductPage + 1);
        }
    });

    // Limpiar búsqueda de productos
    $('#clearProductSearch').click(function() {
        $('#productModalSearch').val('');
        $('#modalCategoryFilter').val('');
        $('#modalBrandFilter').val('');
        $('#modalModelFilter').val('');
        $('#priceRangeFilter').val('');
        $('#onlyActiveProducts').prop('checked', true);
        currentProductPage = 1; // Reiniciar a primera página al limpiar
        loadProducts();
    });

    // Agregar producto a la orden
    function addProductToOrder(product) {
        console.log('🔵 AGREGANDO PRODUCTO:', product.title);
        
        // Verificar si el producto ya está agregado
        if (orderItems.find(item => item.product_id === product.id)) {
            showAlert({
                icon: 'warning',
                title: 'Producto duplicado',
                text: 'Este producto ya está agregado a la orden'
            });
            return;
        }

        const item = {
            index: productIndex++,
            product_id: product.id,
            title: product.title,
            sku: product.sku,
            quantity: 1,
            unit_price: product.price ? parseFloat(product.price) : 0,
            discount_percentage: 0,
            total: product.price ? parseFloat(product.price) : 0
        };

        console.log('🔵 Estado del botón ANTES de agregar:', {
            disabled: $('#submitBtn').prop('disabled'),
            html: $('#submitBtn').html(),
            isSubmitting: isSubmitting
        });

        orderItems.push(item);
        renderOrderItems();
        updateTotals();
    }

    // Renderizar tabla de productos
    function renderOrderItems() {
        if (orderItems.length === 0) {
            $('#orderItemsBody').html(`
                <tr id="noItemsRow">
                    <td colspan="6" class="text-center text-muted py-4">
                        <i class="ri-shopping-cart-2-line ri-2x mb-2"></i><br>
                        No hay productos agregados. Haga clic en "Agregar Producto" para comenzar.
                    </td>
                </tr>
            `);
            return;
        }

        let html = '';
        orderItems.forEach(function(item) {
            html += `
                <tr data-index="${item.index}">
                    <td>
                        <strong>${item.title}</strong><br>
                        <small class="text-muted">SKU: ${item.sku || 'N/A'}</small>
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm quantity-input" 
                               value="${item.quantity}" min="1" data-index="${item.index}" autocomplete="off" tabindex="-1">
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm price-input" 
                               value="${item.unit_price || 0}" min="0" step="0.01" data-index="${item.index}" autocomplete="off" tabindex="-1">
                    </td>
                    <td>
                        <input type="number" class="form-control form-control-sm discount-input" 
                               value="${item.discount_percentage}" min="0" max="100" step="0.01" data-index="${item.index}" autocomplete="off" tabindex="-1">
                    </td>
                    <td class="text-end">
                        <strong class="item-total">$${item.total ? item.total.toFixed(2) : '0.00'}</strong>
                    </td>
                    <td class="text-center">
                        <button type="button" class="btn btn-danger btn-sm remove-item" data-index="${item.index}">
                            <i class="ri-delete-bin-line"></i>
                        </button>
                    </td>
                </tr>
            `;
        });
        $('#orderItemsBody').html(html);
    }

    // Prevenir envío del formulario cuando se presiona Enter en los inputs de productos
    $(document).on('keypress', '.quantity-input, .price-input, .discount-input', function(e) {
        if (e.which === 13) { // Enter key
            e.preventDefault();
            $(this).blur(); // Quitar foco del input
            return false;
        }
    });

    // Event listeners temporalmente deshabilitados para debugging
    // $('#orderForm input').on('keypress', function(e) { ... });
    // $(document).on('focus', '.quantity-input, .price-input, .discount-input', function() { ... });

    // Actualizar cantidad, precio o descuento
    $(document).on('input', '.quantity-input, .price-input, .discount-input', function() {
        const index = $(this).data('index');
        const item = orderItems.find(i => i.index === index);
        
        if ($(this).hasClass('quantity-input')) {
            item.quantity = parseInt($(this).val()) || 1;
        } else if ($(this).hasClass('price-input')) {
            item.unit_price = parseFloat($(this).val()) || 0;
        } else if ($(this).hasClass('discount-input')) {
            item.discount_percentage = parseFloat($(this).val()) || 0;
        }

        // Calcular total del item
        let itemTotal = item.quantity * item.unit_price;
        if (item.discount_percentage > 0) {
            itemTotal -= (itemTotal * item.discount_percentage / 100);
        }
        item.total = itemTotal;

        // Actualizar display del total
        $(this).closest('tr').find('.item-total').text('$' + itemTotal.toFixed(2));
        
        updateTotals();
    });

    // Eliminar producto
    $(document).on('click', '.remove-item', function() {
        const index = $(this).data('index');
        orderItems = orderItems.filter(item => item.index !== index);
        renderOrderItems();
        updateTotals();
    });

    // Actualizar descuento global y envío
    $('#global_discount_percentage, #shipping_cost').on('input', function() {
        updateTotals();
    });

    // Calcular envío automático
    $('#calculateShippingBtn').click(function() {
        calculateShipping();
    });

    // Función para calcular envío automático usando el sistema real
    function calculateShipping() {
        const country_id = $('#country_id').val();
        const state = $('#state').val();
        const city = $('#city').val();
        const zip = $('#zip').val();
        
        if (!state || !city) {
            Swal.fire({
                icon: 'warning',
                title: 'Datos incompletos',
                text: 'Complete provincia/departamento y ciudad para calcular el envío'
            });
            return;
        }

        // Calcular peso total y subtotal para el envío
        let totalWeight = 0;
        let subtotalForShipping = 0;
        
        if (orderItems.length === 0) {
            // Usar valores por defecto para cálculo estimado
            totalWeight = 1; // 1kg por defecto
            subtotalForShipping = 1000; // $1000 por defecto
        } else {
            // Calcular con los productos agregados
            orderItems.forEach(function(item) {
                subtotalForShipping += item.total;
                // Asumir peso promedio si no hay datos específicos del producto
                totalWeight += item.quantity * 0.5; // 0.5kg por producto promedio
            });
        }

        // Mostrar loading
        $('#calculateShippingBtn').prop('disabled', true).html('<i class="ri-loader-line fa-spin"></i>');

        // Llamar al sistema real de cálculo de envío
        $.ajax({
            url: '{{ route("shipping-rates.calculate") }}',
            method: 'POST',
            data: {
                postal_code: zip,
                province: state,
                weight: totalWeight,
                total_amount: subtotalForShipping,
                _token: '{{ csrf_token() }}'
            },
            success: function(response) {
                if (response.status && response.shipping_cost !== undefined) {
                    $('#shipping_cost').val(response.shipping_cost.toFixed(2));
                    updateTotals();
                    
                    let message = `Costo de envío: $${response.shipping_cost.toFixed(2)}`;
                    if (response.shipping_method) {
                        message += `\nMétodo: ${response.shipping_method}`;
                    }
                    if (response.delivery_time) {
                        message += `\nTiempo estimado: ${response.delivery_time}`;
                    }
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'Envío calculado',
                        text: message,
                        timer: 3000,
                        showConfirmButton: false
                    });
                } else {
                    // Fallback al cálculo básico si no hay zonas configuradas
                    let shippingCost = 0;
                    if (subtotalForShipping >= 500) {
                        shippingCost = 0; // Envío gratis
                    } else {
                        shippingCost = Math.max(50, totalWeight * 15); // Mínimo $50
                    }
                    
                    $('#shipping_cost').val(shippingCost.toFixed(2));
                    updateTotals();
                    
                    Swal.fire({
                        icon: 'info',
                        title: 'Cálculo estimado',
                        text: `Costo estimado: $${shippingCost.toFixed(2)} (Configure zonas de envío para cálculo exacto)`,
                        timer: 3000,
                        showConfirmButton: false
                    });
                }
            },
            error: function() {
                // Fallback al cálculo básico en caso de error
                let shippingCost = 0;
                if (subtotalForShipping >= 500) {
                    shippingCost = 0; // Envío gratis
                } else {
                    shippingCost = Math.max(50, totalWeight * 15); // Mínimo $50
                }
                
                $('#shipping_cost').val(shippingCost.toFixed(2));
                updateTotals();
                
                Swal.fire({
                    icon: 'warning',
                    title: 'Cálculo estimado',
                    text: `Costo estimado: $${shippingCost.toFixed(2)} (Error al conectar con sistema de envíos)`,
                    timer: 3000,
                    showConfirmButton: false
                });
            },
            complete: function() {
                $('#calculateShippingBtn').prop('disabled', false).html('<i class="ri-calculator-line"></i>');
            }
        });
    }

    // Actualizar totales
    function updateTotals() {
        let subtotal = 0;
        orderItems.forEach(function(item) {
            subtotal += item.total;
        });

        const globalDiscountPercentage = parseFloat($('#global_discount_percentage').val()) || 0;
        const globalDiscount = subtotal * globalDiscountPercentage / 100;
        const subtotalWithDiscount = subtotal - globalDiscount;
        const shippingCost = parseFloat($('#shipping_cost').val()) || 0;
        const grandTotal = subtotalWithDiscount + shippingCost;

        $('#subtotalAmount').text('$' + subtotal.toFixed(2));
        $('#discountPercentage').text(globalDiscountPercentage + '%');
        $('#discountAmount').text('-$' + globalDiscount.toFixed(2));
        $('#subtotalWithDiscountAmount').text('$' + subtotalWithDiscount.toFixed(2));
        $('#grandTotalAmount').text('$' + grandTotal.toFixed(2));
    }

    // Enviar formulario
    $('#orderForm').on('submit', function(e) {
        e.preventDefault();
        
        console.log('🚨 SUBMIT DETECTADO - Origen:', e);
        console.log('🚨 SUBMIT - isSubmitting:', isSubmitting);
        console.log('🚨 SUBMIT - Stack:', new Error().stack);

        // Prevenir envíos múltiples
        if (isSubmitting) {
            console.log('🚨 SUBMIT BLOQUEADO - Ya está enviando');
            return false;
        }

        if (orderItems.length === 0) {
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Debe agregar al menos un producto a la orden'
            });
            return false;
        }

        // Marcar como enviando
        isSubmitting = true;

        const formData = new FormData(this);
        const itemsData = orderItems.map(item => ({
            product_id: item.product_id,
            quantity: item.quantity,
            unit_price: item.unit_price,
            discount_percentage: item.discount_percentage
        }));
        
        console.log('Datos de items a enviar:', itemsData);
        formData.append('items', JSON.stringify(itemsData));
        
        // Debug: mostrar todos los datos del formulario
        console.log('Datos del formulario:');
        for (let [key, value] of formData.entries()) {
            console.log(key, value);
        }

        $('#submitBtn').prop('disabled', true).html('<i class="ri-loader-line fa-spin me-1"></i>Creando...');

        $.ajax({
            url: '{{ route("admin.orders.store") }}',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                console.log('Respuesta del servidor:', response);
                
                if (response.status) {
                    showAlert({
                        icon: 'success',
                        title: 'Éxito',
                        text: response.message
                    });
                    
                    // Redirigir después de mostrar el mensaje
                    setTimeout(() => {
                        window.location.href = '{{ route("orders.index") }}';
                    }, 1500);
                } else {
                    showAlert({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Error al crear la orden'
                    });
                }
            },
            error: function(xhr) {
                console.log('Error en AJAX:', xhr);
                console.log('Status:', xhr.status);
                console.log('Response:', xhr.responseText);
                
                let errorMessage = 'Error al crear la orden';
                
                if (xhr.responseJSON) {
                    if (xhr.responseJSON.errors) {
                        const errors = Object.values(xhr.responseJSON.errors).flat();
                        errorMessage = errors.join('\n');
                    } else if (xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    }
                } else if (xhr.responseText) {
                    errorMessage += ': ' + xhr.responseText.substring(0, 200);
                }
                
                showAlert({
                    icon: 'error',
                    title: 'Error de validación',
                    text: errorMessage
                });
            },
            complete: function() {
                isSubmitting = false; // Permitir envíos nuevamente
                $('#submitBtn').prop('disabled', false).html('<i class="ri-save-line me-1"></i>Crear Orden');
            }
        });
    });

    // Seleccionar cliente desde el modal
    $(document).on('click', '.select-client-btn', function() {
        const userId = $(this).data('user-id');
        const row = $(this).closest('tr');
        const userName = row.data('name');
        const userEmail = row.data('email');
        const userMobile = row.data('mobile');
        const userAddress = row.data('address');
        const userApartment = row.data('apartment');
        const userCity = row.data('city');
        const userState = row.data('state');
        const userZip = row.data('zip');
        const userCountry = row.data('country');
        
        console.log('Datos del cliente:', { 
            userId, userName, userEmail, userMobile, userAddress, 
            userApartment, userCity, userState, userZip, userCountry 
        });
        
        // Completar campos del formulario
        const names = userName.split(' ');
        $('#first_name').val(names[0] || '');
        $('#last_name').val(names.slice(1).join(' ') || '');
        $('#email').val(userEmail || '');
        $('#mobile').val(userMobile || '');
        $('#address').val(userAddress || '');
        $('#apartment').val(userApartment || '');
        $('#city').val(userCity || '');
        $('#state').val(userState || '');
        $('#zip').val(userZip || '');
        if (userCountry) {
            $('#country_id').val(userCountry).trigger('change');
        }
        
        // Seleccionar en el select principal
        $('#user_id').val(userId);
        
        // Cerrar modal
        $('#newClientModal').modal('hide');
        
        // Toast sutil para confirmar selección (sin interrumpir el flujo)
        showToast({
            icon: 'success',
            text: `${userName} seleccionado`
        });
    });


    // Limpiar búsqueda de clientes
    $('#clearClientSearch').click(function() {
        $('#clientSearchInput').val('');
        $('#clientTableBody tr').removeClass('client-visible client-hidden');
        currentClientPage = 1;
        updateClientPagination();
    });

    // Variables para paginación de clientes
    let clientsPerPage = 10;
    let currentClientPage = 1;

    function updateClientPagination() {
        // Obtener solo las filas que coinciden con la búsqueda
        const matchingRows = $('#clientTableBody tr.client-visible, #clientTableBody tr:not(.client-hidden):not(.client-visible)');
        const totalItems = matchingRows.length;
        const totalPages = Math.ceil(totalItems / clientsPerPage);
        const startIndex = (currentClientPage - 1) * clientsPerPage;
        const endIndex = startIndex + clientsPerPage;

        // Ocultar todas las filas primero
        $('#clientTableBody tr').hide();
        
        // Mostrar solo las filas de la página actual que coinciden con búsqueda
        matchingRows.slice(startIndex, endIndex).fadeIn(200);

        // Actualizar controles de paginación
        $('#prevClientPage').prop('disabled', currentClientPage === 1);
        $('#nextClientPage').prop('disabled', currentClientPage === totalPages || totalPages === 0);
        $('#clientPageInfo').text(`Página ${currentClientPage} de ${totalPages || 1}`);
        
        // Actualizar contador con animación suave
        const itemsShowing = Math.min(clientsPerPage, totalItems - startIndex);
        $('#clientCount').fadeOut(100, function() {
            $(this).text(`Mostrando ${itemsShowing} de ${totalItems} clientes`).fadeIn(100);
        });
    }

    // Navegación de páginas de clientes
    $('#prevClientPage').click(function() {
        if (currentClientPage > 1) {
            currentClientPage--;
            updateClientPagination();
        }
    });

    $('#nextClientPage').click(function() {
        const visibleRows = $('#clientTableBody tr:visible');
        const totalPages = Math.ceil(visibleRows.length / clientsPerPage);
        if (currentClientPage < totalPages) {
            currentClientPage++;
            updateClientPagination();
        }
    });

    // Reiniciar paginación cuando se abre el modal
    $('#newClientModal').on('shown.bs.modal', function() {
        $('#clientSearchInput').val(''); // Limpiar búsqueda
        $('#clientTableBody tr').removeClass('client-visible client-hidden'); // Limpiar filtros
        currentClientPage = 1;
        updateClientPagination();
        
        // Dar foco al campo de búsqueda automáticamente
        setTimeout(() => {
            $('#clientSearchInput').focus();
        }, 100);
    });

    // Función de búsqueda y filtrado de clientes con transiciones suaves
    function searchAndFilterClients() {
        const searchTerm = $('#clientSearchInput').val().toLowerCase();
        
        // Agregar clase loading para suavizar el cambio
        $('#clientTableBody').addClass('search-loading');
        
        setTimeout(() => {
            $('#clientTableBody tr').each(function() {
                const name = ($(this).data('name') || '').toString().toLowerCase();
                const email = ($(this).data('email') || '').toString().toLowerCase();
                const mobile = ($(this).data('mobile') || '').toString().toLowerCase();
                const address = ($(this).data('address') || '').toString().toLowerCase();
                
                const matches = !searchTerm || 
                    name.includes(searchTerm) || 
                    email.includes(searchTerm) || 
                    mobile.includes(searchTerm) || 
                    address.includes(searchTerm);
                
                if (matches) {
                    $(this).addClass('client-visible').removeClass('client-hidden');
                } else {
                    $(this).addClass('client-hidden').removeClass('client-visible');
                }
            });
            
            currentClientPage = 1; // Reiniciar a primera página al buscar
            
            // Pequeño delay para las transiciones CSS
            setTimeout(() => {
                updateClientPagination();
                $('#clientTableBody').removeClass('search-loading');
            }, 150);
        }, 50);
    }

    // Buscar clientes en tiempo real
    $('#clientSearchInput').on('input', searchAndFilterClients);


    // Resetear estado del botón al cargar la página
    $('#submitBtn').prop('disabled', false).html('<i class="ri-save-line me-1"></i>Crear Orden');
    isSubmitting = false;

    // Debug function para detectar qué está cambiando el botón
    function debugButtonState() {
        console.log('Estado del botón:', {
            disabled: $('#submitBtn').prop('disabled'),
            html: $('#submitBtn').html(),
            isSubmitting: isSubmitting
        });
    }

    // Función global para resetear el botón manualmente
    window.resetSubmitButton = function() {
        isSubmitting = false;
        $('#submitBtn').prop('disabled', false).html('<i class="ri-save-line me-1"></i>Crear Orden');
        console.log('Botón reseteado manualmente');
    };

    // Observer deshabilitado para evitar problemas
    // const submitButton = document.getElementById('submitBtn');
    // const observer = new MutationObserver(...
    // observer.observe(submitButton, ...);

    // Cargar productos al abrir la página
    loadProducts();

    // Inicializar Select2 solo para los campos que lo necesitan (no país)
    $('.select2').not('#country_id').select2({
        theme: 'bootstrap4',
        width: '100%',
        placeholder: 'Seleccionar...',
        allowClear: true
    });
});
</script>
@endpush

<!-- Modal Buscar/Nuevo Cliente -->
<div class="modal fade" id="newClientModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="ri-group-line me-2"></i>
                    Seleccione un Cliente - Registrados ({{ $users->count() }} items)
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-0">
                <!-- Toolbar de búsqueda -->
                <div class="bg-light p-3 border-bottom">
                    <div class="row g-2 align-items-center">
                        <div class="col-auto">
                            <span class="badge bg-success rounded-pill">
                                <i class="ri-check-line me-1"></i>
                                Vista Ordenada por:
                            </span>
                        </div>
                        <div class="col-auto">
                            <select id="orderByClient" class="form-select form-select-sm">
                                <option value="name">Nombre</option>
                                <option value="email">Correo</option>
                                <option value="created_at">Fecha Registro</option>
                            </select>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-sm btn-success" id="sortClientBtn">
                                <i class="ri-sort-asc-alpha-down"></i>
                            </button>
                        </div>
                        <div class="col-auto">
                            <button class="btn btn-sm btn-warning" id="clearClientSearch" title="Limpiar búsqueda">
                                <i class="ri-eraser-line"></i>
                            </button>
                        </div>
                        <div class="col-auto ms-auto">
                            <button class="btn btn-sm btn-danger" data-bs-dismiss="modal">
                                <i class="ri-close-line"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Tabla de clientes -->
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    <table class="table table-striped table-hover mb-0">
                        <thead class="table-dark sticky-top">
                            <tr>
                                <th style="cursor: pointer;" data-sort="name">
                                    Nombre Completo
                                    <i class="ri-sort-asc"></i>
                                </th>
                                <th style="cursor: pointer;" data-sort="email">
                                    Email
                                    <i class="ri-sort-asc"></i>
                                </th>
                                <th style="cursor: pointer;" data-sort="mobile">
                                    Teléfono
                                    <i class="ri-sort-asc"></i>
                                </th>
                                <th>Dirección</th>
                                <th style="cursor: pointer;" data-sort="created_at">
                                    Registro
                                    <i class="ri-sort-asc"></i>
                                </th>
                                <th class="text-center">Acción</th>
                            </tr>
                        </thead>
                        <tbody id="clientTableBody">
                            @foreach($users as $user)
                            @php
                                $address = $user->addresses->first();
                            @endphp
                            <tr data-user-id="{{ $user->id }}" 
                                data-name="{{ $user->name }}" 
                                data-email="{{ $user->email }}" 
                                data-mobile="{{ $user->phone ?? ($address->mobile ?? '') }}"
                                data-address="{{ $address->address ?? '' }}"
                                data-apartment="{{ $address->apartment ?? '' }}"
                                data-city="{{ $address->city ?? '' }}"
                                data-state="{{ $address->state ?? '' }}"
                                data-zip="{{ $address->zip ?? '' }}"
                                data-country="{{ $address->country_id ?? '' }}">
                                <td class="fw-bold text-primary">{{ $user->name }}</td>
                                <td>{{ $user->email }}</td>
                                <td>{{ $user->phone ?? ($address->mobile ?? 'No especificado') }}</td>
                                <td>{{ $address->address ?? 'No especificada' }}</td>
                                <td>{{ $user->created_at->format('d/m/Y') }}</td>
                                <td class="text-center">
                                    <button type="button" class="btn btn-sm btn-primary select-client-btn" 
                                            data-user-id="{{ $user->id }}"
                                            title="Seleccionar cliente">
                                        <i class="ri-check-line"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="modal-footer bg-light">
                <div class="row w-100 align-items-center">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-text">
                                <i class="ri-search-line"></i>
                            </span>
                            <input type="text" class="form-control" id="clientSearchInput" 
                                   placeholder="Buscar por nombre, email, teléfono o dirección...">
                        </div>
                    </div>
                    <div class="col-md-6 text-end">
                        <div class="d-flex align-items-center justify-content-end">
                            <!-- Paginación simple -->
                            <div class="me-3">
                                <button class="btn btn-sm btn-outline-primary" id="prevClientPage" disabled>
                                    <i class="ri-arrow-left-s-line"></i>
                                </button>
                                <span class="mx-2 text-muted" id="clientPageInfo">
                                    Página 1
                                </span>
                                <button class="btn btn-sm btn-outline-primary" id="nextClientPage">
                                    <i class="ri-arrow-right-s-line"></i>
                                </button>
                            </div>
                            <span class="text-muted me-3" id="clientCount">
                                Mostrando {{ $users->count() }} de {{ $users->count() }} clientes
                            </span>
                            <button class="btn btn-secondary" data-bs-dismiss="modal">
                                <i class="ri-close-line me-1"></i>
                                Cerrar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>