@extends('layouts.dashboard')

@section('dashboard')
    @if (session('message'))
        <div class="alert alert-success mb-3">
            {{ session('message') }}
        </div>
    @endif
    <ul class="breadcrumb m-0 p-0">
        <li><a href="/dashboard">Home</a></li>
        <li><strong>Integraciones MercadoLibre</strong></li>
    </ul>
    <h1 class="titulo-h1 mb-4">Integraciones MercadoLibre</h1>

    <ul class="nav nav-tabs text-center border-bottom" id="tab-principal" role="tablist">
        <li class="nav-item">
            <a class="nav-link border-white active show" id="info-usuarios-tab" data-toggle="tab" href="#info-usuarios"
                role="tab" aria-controls="info-usuarios" aria-selected="true">Cuentas</a>
        </li>
        <li class="nav-item">
            <a class="nav-link border-white" id="info-productos-tab" data-toggle="tab" href="#info-productos" role="tab"
                aria-controls="info-productos" aria-selected="false">Productos</a>
        </li>
        <li class="nav-item">
            <a class="nav-link border-white" id="info-ventas-tab" data-toggle="tab" href="#info-ventas" role="tab"
                aria-controls="info-ventas" aria-selected="false">Estados de Facturación</a>
        </li>
        <li class="nav-item">
            <a class="nav-link border-white" id="info-respuestas-rapidas-tab" data-toggle="tab"
                href="#info-respuestas-rapidas" role="tab" aria-controls="info-respuestas-rapidas"
                aria-selected="false">Respuestas Rápidas</a>
        </li>
    </ul>
    <div class="tab-content form-registro" id="content-principal">
        <div class="tab-pane fade active show" id="info-usuarios" role="tabpanel" aria-labelledby="info-usuarios-tab">
            @include('dashboard.integraciones.int-ml-vendedores')
        </div>
        <div class="tab-pane fade" id="info-productos" role="tabpanel" aria-labelledby="info-productos-tab">
            <ul class="nav nav-tabs text-center no-gutters border-bottom" id="tab-productos" role="tablist">
                <li class="nav-item">
                    <a class="nav-link border-white active show" id="info-parametros-productos-tab" data-toggle="tab"
                        href="#info-parametros-productos" role="tab" aria-controls="info-parametros-productos"
                        aria-selected="false">Parámetros Productos</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link border-white" id="info-categorias-productos-tab" data-toggle="tab"
                        href="#info-categorias-productos" role="tab" aria-controls="info-categorias-productos"
                        aria-selected="false">Categorías Productos</a>
                </li>
            </ul>
            <div class="tab-content" id="content-productos">
                <div class="tab-pane fade active show" id="info-parametros-productos" role="tabpanel"
                    aria-labelledby="info-parametros-productos-tab">
                    @include('dashboard.integraciones.int-ml-parametros-productos')
                </div>
                <div class="tab-pane fade" id="info-categorias-productos" role="tabpanel"
                    aria-labelledby="info-categorias-productos-tab">
                    @include('dashboard.integraciones.int-ml-categorias-productos')
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="info-ventas" role="tabpanel" aria-labelledby="info-ventas-tab">
            @include('dashboard.integraciones.int-ml-estados-ventas')
        </div>
        <div class="tab-pane fade" id="info-respuestas-rapidas" role="tabpanel"
            aria-labelledby="info-respuestas-rapidas-tab">
            @include('dashboard.integraciones.int-ml-respuestas-rapidas')
        </div>
    </div>
@endsection