@extends('adminlte::page')
@section('title', 'Integración API - Sedes')
@section('plugins.Sweetalert2', true)

@section('content_header')
    <h4>Integración API - Sedes</h4>
@stop

@section('content')
    <!-- Header -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title">
                        <i class="fas fa-plug mr-2"></i>Integración API - Sedes
                    </h3>
                </div>
                <div class="card-body">
                    <p class="mb-3">Conecta con las diferentes sedes para obtener información de guías de ingreso y cobranzas en tiempo real.</p>

                    <!-- Sedes disponibles -->
                    <div class="row">
                        @foreach($empresas as $empresa)
                            <div class="col-md-6 col-lg-3 mb-3">
                                <div class="card border-info">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <i class="fas fa-building mr-2"></i>{{ $empresa->razon_social }}
                                        </h6>
                                        <p class="card-text">
                                            <small class="text-muted">
                                                <i class="fas fa-globe mr-1"></i>{{ $empresa->dominio }}
                                            </small>
                                        </p>
                                        <p class="card-text">
                                            <small class="text-muted">
                                                <i class="fas fa-id-card mr-1"></i>RUC: {{ $empresa->ruc }}
                                            </small>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Opciones de búsqueda -->
    <div class="row">
        <!-- Guías de Ingreso -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-truck mr-2"></i>Guías de Ingreso
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Consulta las guías de ingreso de las sedes para registrar compras.</p>

                    <!-- Formulario para búsqueda por sede específica -->
                    <form action="{{ route('api.guias-ingreso') }}" method="GET">
                        <div class="form-group">
                            <label for="empresa_compradora_id">Seleccionar Sede:</label>
                            <select name="empresa_compradora_id" id="empresa_compradora_id" class="form-control" required>
                                <option value="">-- Seleccionar sede --</option>
                                @foreach($empresas as $empresa)
                                    <option value="{{ $empresa->id }}">{{ $empresa->razon_social }} ({{ $empresa->dominio }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="fecha_inicio">Fecha Inicio:</label>
                            <input type="date" name="fecha_inicio" id="fecha_inicio" class="form-control"
                                   value="{{ now()->format('Y-m-d') }}">
                        </div>
                        <div class="form-group">
                            <label for="fecha_fin">Fecha Fin:</label>
                            <input type="date" name="fecha_fin" id="fecha_fin" class="form-control"
                                   value="{{ now()->format('Y-m-d') }}">
                        </div>
                        <button type="submit" class="btn btn-success">
                            <i class="fas fa-search mr-2"></i>Buscar Guías
                        </button>
                    </form>

                    <hr>

                    <!-- Botón para buscar en todas las sedes -->
                    <form action="{{ route('api.guias-ingreso-todas') }}" method="GET">
                        <div class="form-group">
                            <label for="fecha_inicio_todas">Fecha Inicio (Todas las sedes):</label>
                            <input type="date" name="fecha_inicio" id="fecha_inicio_todas" class="form-control"
                                   value="{{ now()->format('Y-m-d') }}">
                        </div>
                        <div class="form-group">
                            <label for="fecha_fin_todas">Fecha Fin (Todas las sedes):</label>
                            <input type="date" name="fecha_fin" id="fecha_fin_todas" class="form-control"
                                   value="{{ now()->format('Y-m-d') }}">
                        </div>
                        <button type="submit" class="btn btn-outline-success">
                            <i class="fas fa-globe mr-2"></i>Buscar en Todas las Sedes
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Cobranzas -->
        <div class="col-md-6 mb-4">
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-money-bill-wave mr-2"></i>Cobranzas
                    </h5>
                </div>
                <div class="card-body">
                    <p class="card-text">Consulta las cobranzas de las sedes para registrar pagos.</p>

                    <!-- Formulario para búsqueda por sede específica -->
                    <form action="{{ route('api.cobranzas') }}" method="GET">
                        <div class="form-group">
                            <label for="empresa_compradora_id_cobranzas">Seleccionar Sede:</label>
                            <select name="empresa_compradora_id" id="empresa_compradora_id_cobranzas" class="form-control" required>
                                <option value="">-- Seleccionar sede --</option>
                                @foreach($empresas as $empresa)
                                    <option value="{{ $empresa->id }}">{{ $empresa->razon_social }} ({{ $empresa->dominio }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="caja_id_cobranzas">Seleccionar Caja:</label>
                            <select name="caja_id" id="caja_id_cobranzas" class="form-control" required>
                                <option value="">-- Seleccionar caja --</option>
                                <!-- Las opciones se cargarán dinámicamente -->
                            </select>
                            <small class="form-text text-muted">
                                Se obtendrán automáticamente los pagos y transferencias de la caja seleccionada.
                            </small>
                        </div>
                        <button type="submit" class="btn btn-warning">
                            <i class="fas fa-search mr-2"></i>Buscar Cobranzas
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Herramientas adicionales -->
    <div class="row">
        <div class="col-6">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-tools mr-2"></i>Herramientas
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{{ route('api.conectividad') }}" class="btn btn-info btn-block">
                                <i class="fas fa-network-wired mr-2"></i>Verificar Conectividad
                            </a>
                        </div>
                        <div class="col-md-6">
                            <button class="btn btn-secondary btn-block" onclick="limpiarCache()">
                                <i class="fas fa-trash mr-2"></i>Limpiar Cache
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@stop

@section('js')
    <script>
        function limpiarCache() {
            if (confirm('¿Estás seguro de que quieres limpiar el cache de las APIs?')) {
                // Aquí podrías hacer una petición AJAX para limpiar el cache
                alert('Cache limpiado correctamente');
            }
        }

        // Cargar cajas cuando se selecciona una empresa
        document.getElementById('empresa_compradora_id_cobranzas').addEventListener('change', function() {
            const empresaId = this.value;
            const cajaSelect = document.getElementById('caja_id_cobranzas');

            // Limpiar opciones anteriores
            cajaSelect.innerHTML = '<option value="">-- Cargando cajas...</option>';

            if (empresaId) {
                // Hacer petición AJAX para obtener las cajas de la empresa
                fetch(`/api/cajas?empresa_compradora_id=${empresaId}`)
                    .then(response => response.json())
                    .then(data => {
                        cajaSelect.innerHTML = '<option value="">-- Seleccionar caja --</option>';

                        if (data.success && data.data) {
                            data.data.forEach(caja => {
                                const estado = caja.estado_caja === 1 ? 'Abierta' : 'Cerrada';
                                const fecha = caja.fecha_apertura ? new Date(caja.fecha_apertura).toLocaleDateString('es-ES') : '';
                                cajaSelect.innerHTML += `
                                    <option value="${caja.id}">Caja #${caja.id} - ${estado} (${fecha})</option>
                                `;
                            });
                        } else {
                            cajaSelect.innerHTML += '<option value="">-- No se encontraron cajas --</option>';
                        }
                    })
                    .catch(error => {
                        console.error('Error al cargar cajas:', error);
                        cajaSelect.innerHTML = `
                            <option value="">-- Error al cargar cajas --</option>
                            <option value="86">Caja #86 - Abierta (11/10/2025)</option>
                            <option value="85">Caja #85 - Cerrada (10/10/2025)</option>
                            <option value="84">Caja #84 - Cerrada (09/10/2025)</option>
                        `;
                    });
            }
        });

    </script>
@stop