<div class="container-fluid">
    <div class="row align-items-center justify-content-center">
        <div class="col">
            <div class="card my-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3><i class="fas fa-list-alt"></i> Registro de Movimientos de TAGs</h3>
                    <div>
                        <a href="#/hikvision/control-acceso" class="btn btn-primary btn-sm">
                            <i class="fas fa-tachometer-alt"></i> Panel de Control
                        </a>
                        <a href="#/hikvision/config" class="btn btn-secondary btn-sm">
                            <i class="fas fa-cog"></i> Configuración
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <!-- FILTROS DE BÚSQUEDA -->
                    <form ng-submit="buscarMovimientos()">
                        <div class="row">
                            <div class="col-md-3 form-group">
                                <label>Fecha Inicio:</label>
                                <input id="moment_picker_fecha_inicio" moment-picker locale="es" format="DD/MM/YYYY" 
                                       ng-model="moment_picker_fecha_inicio" class="form-control"
                                       change="on_change_moment_picker_fecha_inicio(newValue, oldValue)" />
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Fecha Fin:</label>
                                <input id="moment_picker_fecha_fin" moment-picker locale="es" format="DD/MM/YYYY" 
                                       ng-model="moment_picker_fecha_fin" class="form-control"
                                       change="on_change_moment_picker_fecha_fin(newValue, oldValue)" />
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Dispositivo:</label>
                                <select ng-model="filtros.device_id" class="form-control">
                                    <option value="">Todos los dispositivos</option>
                                    <option ng-repeat="dispositivo in dispositivos" value="{{dispositivo.id}}">
                                        {{dispositivo.nombre}} ({{dispositivo.ubicacion}})
                                    </option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Tipo de Movimiento:</label>
                                <select ng-model="filtros.tipo_movimiento" class="form-control">
                                    <option value="">Todos</option>
                                    <option value="ENTRADA">Entrada</option>
                                    <option value="SALIDA">Salida</option>
                                </select>
                            </div>
                        </div>
                        
                        <!-- FILTROS ADICIONALES -->
                        <div class="row">
                            <div class="col-md-3 form-group">
                                <label>Estado de Procesamiento:</label>
                                <select ng-model="filtros.processed" class="form-control">
                                    <option value="">Todos</option>
                                    <option value="1">Procesados</option>
                                    <option value="0">Pendientes</option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Resultado de Acceso:</label>
                                <select ng-model="filtros.access_result" class="form-control">
                                    <option value="">Todos</option>
                                    <option value="success">Exitoso</option>
                                    <option value="denied">Denegado</option>
                                    <option value="error">Error</option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Puerta:</label>
                                <select ng-model="filtros.door_id" class="form-control">
                                    <option value="">Todas</option>
                                    <option value="1">Puerta 1 (Lectura)</option>
                                    <option value="2">Puerta 2 (Barrera)</option>
                                </select>
                            </div>
                            <div class="col-md-3 form-group">
                                <label>Número de TAG:</label>
                                <input type="text" ng-model="filtros.numero_tag" class="form-control" 
                                       placeholder="Buscar por TAG específico">
                            </div>
                        </div>
                        
                        <!-- BOTONES DE ACCIÓN -->
                        <div class="row mt-3">
                            <div class="col-md-12 text-right">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-search"></i> Buscar Movimientos
                                </button>
                                <button type="button" class="btn btn-info" ng-click="limpiarFiltros()">
                                    <i class="fas fa-eraser"></i> Limpiar Filtros
                                </button>
                                <button type="button" class="btn btn-success" 
                                        ng-click="exportarExcel()" 
                                        ng-disabled="movimientos.length === 0"
                                        ng-if="(modulos_acciones_list | contains:'920402')">
                                    <i class="fas fa-file-excel"></i> Excel
                                </button>
                                <button type="button" class="btn btn-danger" 
                                        ng-click="exportarPdf()" 
                                        ng-disabled="movimientos.length === 0"
                                        ng-if="(modulos_acciones_list | contains:'920403')">
                                    <i class="fas fa-file-pdf"></i> PDF
                                </button>
                                <button type="button" class="btn btn-warning" 
                                        ng-click="sincronizarEventos()" 
                                        ng-disabled="loading">
                                    <i class="fas fa-sync-alt"></i> Sincronizar
                                </button>
                            </div>
                        </div>
                    </form>
                    
                    <!-- ESTADÍSTICAS RÁPIDAS -->
                    <div class="row mt-4" ng-if="movimientos.length > 0">
                        <div class="col-md-12">
                            <div class="alert alert-info">
                                <div class="row text-center">
                                    <div class="col-md-2">
                                        <strong>{{total_registros}}</strong><br>
                                        <small>Total</small>
                                    </div>
                                    <div class="col-md-2">
                                        <strong>{{getCountByType('ENTRADA')}}</strong><br>
                                        <small>Entradas</small>
                                    </div>
                                    <div class="col-md-2">
                                        <strong>{{getCountByType('SALIDA')}}</strong><br>
                                        <small>Salidas</small>
                                    </div>
                                    <div class="col-md-2">
                                        <strong>{{getCountByResult('success')}}</strong><br>
                                        <small>Exitosos</small>
                                    </div>
                                    <div class="col-md-2">
                                        <strong>{{getCountByResult('denied')}}</strong><br>
                                        <small>Denegados</small>
                                    </div>
                                    <div class="col-md-2">
                                        <strong>{{getCountByProcessed(1)}}</strong><br>
                                        <small>Procesados</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- SPINNER DE CARGA -->
                    <div class="mt-4 text-center" ng-if="loading">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Cargando...</span>
                        </div>
                        <p class="mt-2">Cargando datos...</p>
                    </div>
                    
                    <!-- MENSAJE DE ERROR -->
                    <div class="alert alert-danger mt-4" ng-if="mensaje_error">
                        <i class="fas fa-exclamation-triangle"></i> {{ mensaje_error }}
                    </div>
                    
                    <!-- TABLA DE RESULTADOS MEJORADA -->
                    <div class="table-responsive mt-4" ng-if="!loading && movimientos.length > 0">
                        <table class="table table-striped table-hover table-sm">
                            <thead class="thead-dark">
                                <tr>
                                    <th style="width: 100px;">
                                        <i class="fas fa-tag"></i> TAG
                                    </th>
                                    <th style="width: 120px;">
                                        <i class="fas fa-id-card"></i> Nº Económico
                                    </th>
                                    <th style="width: 100px;">
                                        <i class="fas fa-bus"></i> Modalidad
                                    </th>
                                    <th style="width: 120px;">
                                        <i class="fas fa-router"></i> Dispositivo
                                    </th>
                                    <th style="width: 100px;">
                                        <i class="fas fa-map-marker-alt"></i> Ubicación
                                    </th>
                                    <th style="width: 80px;">
                                        <i class="fas fa-door-open"></i> Puerta
                                    </th>
                                    <th style="width: 100px;">
                                        <i class="fas fa-arrows-alt-h"></i> Tipo
                                    </th>
                                    <th style="width: 140px;">
                                        <i class="fas fa-clock"></i> Fecha/Hora
                                    </th>
                                    <th style="width: 100px;">
                                        <i class="fas fa-check-circle"></i> Resultado
                                    </th>
                                    <th style="width: 100px;">
                                        <i class="fas fa-cog"></i> Estado
                                    </th>
                                    <th style="width: 100px;">
                                        <i class="fas fa-code"></i> Evento ISAPI
                                    </th>
                                    <th style="width: 80px;">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="mov in movimientos" 
                                    ng-class="{'table-success': mov.access_result === 'success', 
                                               'table-danger': mov.access_result === 'denied',
                                               'table-warning': mov.access_result === 'error'}">
                                    <td>
                                        <span class="badge badge-primary">{{mov.numero_tag}}</span>
                                    </td>
                                    <td>
                                        <span ng-if="mov.numero_economico">{{mov.numero_economico}}</span>
                                        <span ng-if="!mov.numero_economico" class="text-muted">N/A</span>
                                    </td>
                                    <td>
                                        <small ng-if="mov.modalidad_nombre">{{mov.modalidad_nombre}}</small>
                                        <small ng-if="!mov.modalidad_nombre" class="text-muted">N/A</small>
                                    </td>
                                    <td>
                                        <small><strong>{{mov.dispositivo}}</strong></small>
                                    </td>
                                    <td>
                                        <small>{{mov.ubicacion}}</small>
                                    </td>
                                    <td class="text-center">
                                        <span class="badge" ng-class="{'badge-info': mov.door_id == 1, 'badge-warning': mov.door_id == 2}">
                                            {{mov.door_id || 1}}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge" ng-class="{'badge-success': mov.tipo_movimiento === 'ENTRADA', 
                                                                       'badge-danger': mov.tipo_movimiento === 'SALIDA'}">
                                            {{mov.tipo_movimiento}}
                                        </span>
                                    </td>
                                    <td>
                                        <small>{{mov.fecha_movimiento | date:'dd/MM/yyyy HH:mm:ss'}}</small>
                                    </td>
                                    <td>
                                        <span class="badge" ng-class="{'badge-success': mov.access_result === 'success',
                                                                       'badge-danger': mov.access_result === 'denied',
                                                                       'badge-warning': mov.access_result === 'error',
                                                                       'badge-secondary': !mov.access_result}">
                                            {{mov.access_result ? (mov.access_result === 'success' ? 'Exitoso' : 
                                                                   mov.access_result === 'denied' ? 'Denegado' : 'Error') : 'N/A'}}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge" ng-class="{'badge-success': mov.processed, 'badge-warning': !mov.processed}">
                                            {{mov.processed ? 'Procesado' : 'Pendiente'}}
                                        </span>
                                        <br>
                                        <small class="text-muted" ng-if="mov.processed_at">
                                            {{mov.processed_at | date:'dd/MM HH:mm'}}
                                        </small>
                                    </td>
                                    <td>
                                        <small ng-if="mov.isapi_event_id" class="text-info">
                                            <i class="fas fa-link"></i> {{mov.isapi_event_id | limitTo:8}}...
                                        </small>
                                        <small ng-if="!mov.isapi_event_id" class="text-muted">Manual</small>
                                    </td>
                                    <td>
                                        <div class="btn-group-vertical btn-group-sm">
                                            <button class="btn btn-outline-info btn-sm" 
                                                    ng-click="verDetalleMovimiento(mov)"
                                                    title="Ver detalles">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="btn btn-outline-warning btn-sm" 
                                                    ng-click="reprocesarMovimiento(mov)"
                                                    ng-if="!mov.processed"
                                                    title="Reprocesar">
                                                <i class="fas fa-redo"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr class="table-info">
                                    <td colspan="11" class="text-right"><strong>Total de registros:</strong></td>
                                    <td><strong>{{total_registros}}</strong></td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    
                    <!-- PAGINACIÓN -->
                    <div class="row mt-3" ng-if="!loading && movimientos.length > 0">
                        <div class="col-md-6">
                            <p class="text-muted">
                                Mostrando {{movimientos.length}} de {{total_registros}} registros
                            </p>
                        </div>
                        <div class="col-md-6 text-right">
                            <div class="btn-group" role="group">
                                <button class="btn btn-outline-primary btn-sm" 
                                        ng-click="cambiarPagina(-1)" 
                                        ng-disabled="filtros.offset <= 0">
                                    <i class="fas fa-chevron-left"></i> Anterior
                                </button>
                                <button class="btn btn-outline-primary btn-sm" 
                                        ng-click="cambiarPagina(1)" 
                                        ng-disabled="movimientos.length < filtros.limit">
                                    Siguiente <i class="fas fa-chevron-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- MENSAJE SIN RESULTADOS -->
                    <div class="alert alert-info mt-4" ng-if="!loading && movimientos.length === 0">
                        <div class="text-center">
                            <i class="fas fa-info-circle fa-2x mb-3"></i>
                            <h5>No se encontraron movimientos</h5>
                            <p>No hay movimientos con los criterios de búsqueda especificados.</p>
                            <button class="btn btn-primary" ng-click="limpiarFiltros()">
                                <i class="fas fa-eraser"></i> Limpiar filtros y buscar todo
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- MODAL PARA DETALLES DEL MOVIMIENTO -->
<div class="modal fade" id="modalDetalleMovimiento" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-info-circle"></i> Detalles del Movimiento
                </h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" ng-if="movimiento_detalle">
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-tag"></i> Información del TAG</h6>
                        <table class="table table-sm">
                            <tr>
                                <td><strong>Número TAG:</strong></td>
                                <td>{{movimiento_detalle.numero_tag}}</td>
                            </tr>
                            <tr>
                                <td><strong>Número Económico:</strong></td>
                                <td>{{movimiento_detalle.numero_economico || 'N/A'}}</td>
                            </tr>
                            <tr>
                                <td><strong>Modalidad:</strong></td>
                                <td>{{movimiento_detalle.modalidad_nombre || 'N/A'}}</td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-router"></i> Información del Dispositivo</h6>
                        <table class="table table-sm">
                            <tr>
                                <td><strong>Dispositivo:</strong></td>
                                <td>{{movimiento_detalle.dispositivo}}</td>
                            </tr>
                            <tr>
                                <td><strong>Ubicación:</strong></td>
                                <td>{{movimiento_detalle.ubicacion}}</td>
                            </tr>
                            <tr>
                                <td><strong>Puerta:</strong></td>
                                <td>{{movimiento_detalle.door_id || 'N/A'}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-6">
                        <h6><i class="fas fa-clock"></i> Información del Evento</h6>
                        <table class="table table-sm">
                            <tr>
                                <td><strong>Fecha/Hora:</strong></td>
                                <td>{{movimiento_detalle.fecha_movimiento | date:'dd/MM/yyyy HH:mm:ss'}}</td>
                            </tr>
                            <tr>
                                <td><strong>Tipo:</strong></td>
                                <td>
                                    <span class="badge" ng-class="{'badge-success': movimiento_detalle.tipo_movimiento === 'ENTRADA', 
                                                                   'badge-danger': movimiento_detalle.tipo_movimiento === 'SALIDA'}">
                                        {{movimiento_detalle.tipo_movimiento}}
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td><strong>Resultado:</strong></td>
                                <td>
                                    <span class="badge" ng-class="{'badge-success': movimiento_detalle.access_result === 'success',
                                                                   'badge-danger': movimiento_detalle.access_result === 'denied',
                                                                   'badge-warning': movimiento_detalle.access_result === 'error'}">
                                        {{movimiento_detalle.access_result || 'N/A'}}
                                    </span>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="col-md-6">
                        <h6><i class="fas fa-cog"></i> Estado de Procesamiento</h6>
                        <table class="table table-sm">
                            <tr>
                                <td><strong>Estado:</strong></td>
                                <td>
                                    <span class="badge" ng-class="{'badge-success': movimiento_detalle.processed, 'badge-warning': !movimiento_detalle.processed}">
                                        {{movimiento_detalle.processed ? 'Procesado' : 'Pendiente'}}
                                    </span>
                                </td>
                            </tr>
                            <tr ng-if="movimiento_detalle.processed_at">
                                <td><strong>Procesado en:</strong></td>
                                <td>{{movimiento_detalle.processed_at | date:'dd/MM/yyyy HH:mm:ss'}}</td>
                            </tr>
                            <tr ng-if="movimiento_detalle.isapi_event_id">
                                <td><strong>Evento ISAPI:</strong></td>
                                <td><code>{{movimiento_detalle.isapi_event_id}}</code></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    <i class="fas fa-times"></i> Cerrar
                </button>
                <button type="button" class="btn btn-warning" 
                        ng-click="reprocesarMovimiento(movimiento_detalle)"
                        ng-if="!movimiento_detalle.processed">
                    <i class="fas fa-redo"></i> Reprocesar
                </button>
            </div>
        </div>
    </div>
</div>