@extends('layouts.admin')

@section('page_title', 'Integraciones')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <h1 class="mb-0">Integraciones</h1>
            <small class="text-muted">Monitoreo de integraciones EDI y API</small>
        </div>
    </div>
@stop

@section('admin_content')

<style>
    .info-box {
        min-height: 70px !important;
        padding: 8px 10px !important;
    }

    .info-box-icon {
        height: 50px !important;
        width: 50px !important;
        font-size: 20px !important;
    }

    .info-box-number {
        font-size: 1.2rem !important;
        font-weight: 700;
    }

    .info-box-text {
        font-size: 0.75rem;
        color: #6c757d;
    }
</style>

<div class="row">
    <div class="col-md-3 col-sm-6 col-12">
        <a href="{{ route('patio.integraciones.index') }}" class="text-decoration-none text-dark">
            <div class="info-box">
                <span class="info-box-icon bg-primary"><i class="fas fa-plug"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Total filtrado</span>
                    <span class="info-box-number">{{ $kpis['total_filtrado'] }}</span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-md-3 col-sm-6 col-12">
        <a href="{{ route('patio.integraciones.index', array_merge(request()->query(), ['estatus' => 'PENDIENTE'])) }}" class="text-decoration-none text-dark">
            <div class="info-box">
                <span class="info-box-icon bg-warning"><i class="fas fa-clock"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Pendientes</span>
                    <span class="info-box-number">{{ $kpis['pendientes'] }}</span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-md-3 col-sm-6 col-12">
        <a href="{{ route('patio.integraciones.index', array_merge(request()->query(), ['estatus' => 'ERROR'])) }}" class="text-decoration-none text-dark">
            <div class="info-box">
                <span class="info-box-icon bg-danger"><i class="fas fa-times-circle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Errores</span>
                    <span class="info-box-number">{{ $kpis['errores'] }}</span>
                </div>
            </div>
        </a>
    </div>

    <div class="col-md-3 col-sm-6 col-12">
        <a href="{{ route('patio.integraciones.index', array_merge(request()->query(), ['estatus' => 'ENVIADO'])) }}" class="text-decoration-none text-dark">
            <div class="info-box">
                <span class="info-box-icon bg-success"><i class="fas fa-check-circle"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Enviadas</span>
                    <span class="info-box-number">{{ $kpis['enviadas'] }}</span>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="card card-outline card-primary">
    <div class="card-header">
        <h3 class="card-title">Filtros</h3>
    </div>

    <div class="card-body">
        <form method="GET" action="{{ route('patio.integraciones.index') }}">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label>Estatus</label>
                        <select name="estatus" class="form-control">
                            <option value="">-- Todos --</option>
                            <option value="PENDIENTE" @selected(request('estatus') === 'PENDIENTE')>PENDIENTE</option>
                            <option value="ENVIADO" @selected(request('estatus') === 'ENVIADO')>ENVIADO</option>
                            <option value="ERROR" @selected(request('estatus') === 'ERROR')>ERROR</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label>Evento</label>
                        <select name="evento" class="form-control">
                            <option value="">-- Todos --</option>
                            <option value="ENTRADA" @selected(request('evento') === 'ENTRADA')>ENTRADA</option>
                            <option value="SALIDA" @selected(request('evento') === 'SALIDA')>SALIDA</option>
                            <option value="ACTUALIZACION" @selected(request('evento') === 'ACTUALIZACION')>ACTUALIZACION</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label>Tipo Integración</label>
                        <select name="tipo_integracion" class="form-control">
                            <option value="">-- Todos --</option>
                            <option value="EDI" @selected(request('tipo_integracion') === 'EDI')>EDI</option>
                            <option value="API" @selected(request('tipo_integracion') === 'API')>API</option>
                            <option value="EMAIL" @selected(request('tipo_integracion') === 'EMAIL')>EMAIL</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label>Contenedor</label>
                        {{-- <div class="input-group input-group-sm"> --}}
                            {{-- <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-cube"></i></span>
                            </div> --}}

                            <input type="text" name="contenedor" class="form-control" id="contenedor"
                                value="{{ request('contenedor') }}" placeholder="Ej. MSKU1234567">
                        {{-- </div> --}}
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group mb-0">
                        <label class="mb-1">&nbsp;</label>

                        <div class="d-flex flex-wrap gap-1">

                            {{-- FILTRAR --}}
                            <button type="submit" class="btn btn-primary btn-sm mr-1">
                                <i class="fas fa-filter mr-1"></i> Filtrar
                            </button>

                            {{-- LIMPIAR --}}
                            <a href="{{ route('patio.integraciones.index') }}"
                            class="btn btn-secondary btn-sm mr-1">
                                <i class="fas fa-broom mr-1"></i> Limpiar
                            </a>

                            {{-- PENDIENTES --}}
                            <a href="{{ route('patio.integraciones.pendientes') }}"
                            class="btn btn-warning btn-sm mr-1">
                                <i class="fas fa-clock mr-1"></i> Pendientes
                            </a>

                            {{-- ERRORES --}}
                            <a href="{{ route('patio.integraciones.errores') }}"
                            class="btn btn-danger btn-sm">
                                <i class="fas fa-times-circle mr-1"></i> Errores
                            </a>

                        </div>
                    </div>
                </div>
        </form>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif

@include('patio.integraciones.partials.table', ['integraciones' => $integraciones])

<div class="mt-3">
    {{ $integraciones->links() }}
</div>

@stop