<?php
require_once __DIR__ . '/../../includes/layout.php';
renderHeader('Inventario Inicial', 'inventario_inicial');
?>

<style>
.report-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
.report-header h1 {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.report-header h1 small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 0.5rem;
}

/* Autocomplete suggestions dropdown */
.autocomplete-wrapper {
    position: relative;
}
.autocomplete-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    margin-top: 0.25rem;
}
.autocomplete-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    transition: background-color var(--transition);
}
.autocomplete-item:hover {
    background: var(--surface-hover) !important;
}
.autocomplete-item-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
}
.autocomplete-item-meta {
    font-size: 0.725rem;
    color: var(--text-secondary);
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.no-results {
    padding: 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Calculation summary box */
.summary-box {
    background: rgba(34, 197, 94, 0.06);
    border-radius: var(--radius-sm);
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--success);
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
}
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}
.summary-item {
    display: flex;
    flex-direction: column;
}
.summary-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 700;
    letter-spacing: 0.05em;
}
.summary-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text-primary);
    margin-top: 0.15rem;
    font-family: monospace;
}

/* Premium Badges */
.badge-premium {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
.badge-soft-success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
    border: 1px solid rgba(34, 197, 94, 0.2);
}
.badge-soft-danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
    border: 1px solid rgba(239, 68, 68, 0.2);
}
.badge-soft-muted {
    background: var(--surface-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.table-premium td {
    vertical-align: middle;
}

/* Primary button styling overrides to match premium theme */
.btn-primary {
    background: var(--accent-color) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    box-shadow: var(--shadow-md) !important;
    border: 1px solid var(--accent-color) !important;
}
.btn-primary:hover:not(:disabled) {
    background: transparent !important;
    color: var(--accent-color) !important;
    border: 1px solid var(--accent-color) !important;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg) !important;
}
.btn-primary:disabled {
    background: var(--surface-elevated) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    box-shadow: none !important;
    transform: none !important;
}
</style>

<div class="report-wrap animate-fade-in">
    <div class="report-header">
        <div>
            <h1 style="font-size: 1.5rem; font-family: 'League Spartan'; font-weight: 800;">
                <i class="fas fa-clipboard-list" style="color:var(--accent-color); margin-right:0.5rem;"></i>
                Inventario Inicial / Conteo Físico
            </h1>
            <p style="color:var(--text-secondary); margin-top:0.35rem; font-size:0.875rem;">
                Registre el conteo físico inicial de sus productos por sucursal. El sistema convertirá las presentaciones (cajas, blísteres, botes, etc.) a unidades base automáticamente.
            </p>
        </div>
    </div>

    <!-- Panel de Formulario -->
    <div class="card" style="margin-bottom: 0.5rem;">
        <h3 style="margin-top:0; margin-bottom:1.25rem; font-size:1.1rem; font-family:'League Spartan'; font-weight:700; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem;">
            <i class="fas fa-plus-circle" style="margin-right: 0.5rem; color: var(--accent-color);"></i>
            Registrar Nuevo Conteo
        </h3>

        <form id="formConteoFisico" autocomplete="off">
            <div class="form-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 1rem;">
                <!-- Sucursal -->
                <div class="form-group">
                    <label class="form-label required" for="sucursal_id">Sucursal de Destino</label>
                    <select class="input-select" id="sucursal_id" required>
                        <option value="">-- Cargando Sucursales... --</option>
                    </select>
                </div>

                <!-- Colaborador -->
                <div class="form-group">
                    <label class="form-label required" for="usuario_id">Colaborador / Auditor</label>
                    <select class="input-select" id="usuario_id" required>
                        <option value="">-- Cargando Usuarios... --</option>
                    </select>
                </div>
            </div>

            <div class="form-grid" style="margin-bottom: 1rem;">
                <!-- Producto (Autocomplete) -->
                <div class="form-group span-2 autocomplete-wrapper">
                    <label class="form-label required" for="producto_search">Buscar Producto</label>
                    <input type="text" class="input-text" id="producto_search" placeholder="Escriba nombre, código de barra o código interno..." required disabled>
                    <input type="hidden" id="producto_id">
                    <div class="autocomplete-results" id="autocompleteResults" style="display: none;"></div>
                </div>

                <!-- Tipo de Stock -->
                <div class="form-group">
                    <label class="form-label required" for="tipo_stock">Tipo de Lote / Stock</label>
                    <select class="input-select" id="tipo_stock" required disabled>
                        <option value="facturado" selected>Facturado (Con Factura)</option>
                        <option value="no_facturado">No Facturado (Sin Factura)</option>
                    </select>
                </div>
            </div>

            <div class="form-grid" style="margin-bottom: 1rem;">
                <!-- Presentación -->
                <div class="form-group">
                    <label class="form-label required" for="presentacion_id">Presentación Contada</label>
                    <select class="input-select" id="presentacion_id" required disabled>
                        <option value="">-- Seleccione un producto primero --</option>
                    </select>
                </div>

                <!-- Cantidad -->
                <div class="form-group">
                    <label class="form-label required" for="cantidad">Cantidad del Conteo</label>
                    <input type="number" class="input-text" id="cantidad" min="0.01" step="any" placeholder="Ej. 10" required disabled>
                </div>

                <!-- Costo Unitario de la Presentación (Oculto) -->
                <div class="form-group" style="display: none;">
                    <label class="form-label" for="costo_unitario">Costo por Presentación (Q)</label>
                    <input type="number" class="input-text" id="costo_unitario" min="0" step="any" placeholder="0.00" disabled>
                </div>

                <!-- Fecha de Vencimiento -->
                <div class="form-group">
                    <label class="form-label" for="fecha_vencimiento">Fecha de Vencimiento</label>
                    <input type="date" class="input-text" id="fecha_vencimiento" disabled>
                </div>
            </div>

            <!-- Caja de Resumen de Cálculo (Fórmula) - Restored HTML element -->
            <div class="summary-box" id="infoCalculoBox" style="display: none;">
                <div class="summary-grid">
                    <div class="summary-item">
                        <span class="summary-label">Equivalencia</span>
                        <span class="summary-value" id="calcEquivalencia" style="color: var(--success);">0 unidades base</span>
                    </div>
                </div>
            </div>

            <!-- Acciones -->
            <div style="display: flex; gap: 1rem; align-items: center; justify-content: flex-end; margin-top: 1.5rem; border-top: 1px solid var(--border); padding-top: 1.25rem;">
                <button type="submit" class="btn btn-primary" id="btnSubmit" style="height: 42px; min-width: 200px;" disabled>
                    <i class="fas fa-save"></i> Registrar en Inventario
                </button>
            </div>
        </form>
    </div>

    <!-- Panel de Historial de Registros -->
    <div class="card">
        <h3 style="margin-top:0; margin-bottom:1.25rem; font-size:1.1rem; font-family:'League Spartan'; font-weight:700; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; display: flex; justify-content: space-between; align-items: center;">
            <span>
                <i class="fas fa-history" style="margin-right: 0.5rem; color: var(--accent-color);"></i>
                Historial de Conteos en esta Sucursal
            </span>
            <span id="historialSucursalNombre" style="font-size: 0.85rem; color: var(--text-secondary); font-weight: normal;"></span>
        </h3>

        <div class="table-wrapper">
            <table class="table-premium" id="tablaHistorial">
                <thead>
                    <tr>
                        <th style="width: 140px;">Fecha / Hora</th>
                        <th style="width: 100px;">Código</th>
                        <th>Producto</th>
                        <th style="text-align: right; width: 100px;">Cantidad</th>
                        <th style="width: 120px;">Presentación</th>
                        <th style="width: 110px; text-align: center;">Tipo</th>
                        <th style="text-align: right; width: 120px;">Equiv. Base</th>
                        <th style="width: 120px;">Usuario</th>
                    </tr>
                </thead>
                <tbody id="historialBody">
                    <tr>
                        <td colspan="8" style="text-align: center; color: var(--text-muted); padding: 2rem;">
                            <i class="fas fa-spinner fa-pulse" style="font-size: 1.5rem; margin-bottom: 0.5rem; display: block;"></i>
                            Cargando historial...
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Controles de Paginación -->
        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);">
            <div style="font-size: 0.8rem; color: var(--text-secondary);" id="paginationInfoHistorial">
                Mostrando 0 - 0 de 0 registros
            </div>
            <div class="pagination" id="paginationControlsHistorial" style="display: flex; gap: 0.25rem;">
                <!-- Botones dinámicos -->
            </div>
        </div>
    </div>
</div>

<script src="js/inventario/inventario_inicial.js?v=<?= $assetVersion ?>"></script>
<?php renderFooter(); ?>
