@extends('layouts.mainlayout')

@section('content')
<!-- Caja de aviso -->
<div class="alerta-mensaje">
    <div class="close-mensaje"></div>
    <h6> <span class="icon-i-campana txt-azul medium-icon"></span> Aviso del día </h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
    </p>
</div><!-- Caja de aviso -->
<!-- Caja de aviso -->
<div class="alerta-mensaje">
    <div class="close-mensaje"></div>
    <h6> <span class="icon-i-campana txt-azul medium-icon"></span> Aviso del día 2</h6>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua.</p>
</div><!-- Caja de aviso -->


<!-- Consumos destacados -->
<div class="row">
    <div class="col-md-6">
        <div class="box-info-destacada azul">
            <div class="titulo">
                Consumo al día de hoy
            </div>
            <div class="row align-items-center no-gutters">
                <div class="col-md-auto col-2 areaIcono">
                    <span class="icon-i-gota"></span>
                </div>
                <div class="col-md-auto col-10">
                    <strong class="consumo">5,250</strong>
                </div>
            </div>
        </div>
        <p>Ut enim ad minim veniam. </p>
        <div class="espacio-1"></div>
    </div>
    <div class="col-md-6">
        <div class="box-info-destacada verde">
            <div class="titulo">
                Saldo actual
            </div>
            <div class="row align-items-center no-gutters">
                <div class="col-md-auto col-2 areaIcono">
                    <span class="icon-i-dinero"></span>
                </div>
                <div class="col-md-auto col-10">
                    <strong class="costo">3,200</strong>
                </div>
            </div>
        </div>
        <p>Ut enim ad minim veniam. </p>
        <div class="espacio-1"></div>
    </div>

</div>
<!--row-->
<!-- Consumos destacados -->
<!-- Tablas -->
<div class="row">
    <div class="col-md-12">

        <!-- Single bloque desplegable -->
        <div class="box-desplegable">
            <h4 class="encabezado-box-desplegable"> <span class="icon-i-documento-1 ico-box-desplegable"></span> Últimas
                facturas </h4>
            <div class="contenido-box-desplegable">
                <div class="table-responsive-sm">
                    <table class="table table-width-100">
                        <tbody>

                            <tr>
                                <th>Cliente</th>
                                <th>Nombre</th>
                                <th>Localidad</th>
                                <th>&nbsp;</th>
                            </tr>

                            <tr>
                                <td>402686</td>
                                <td>MAYO CRUZ WILVER SEBASTIAN</td>
                                <td>Playa del Carmen</td>
                                <td>
                                    <ul class="inline-links">
                                        <li><a href="#"> <span class="icon-i-descarga"></span></a></li>
                                        <li><a href="#"> <span class="icon-i-enviar-mail"></span></a></li>
                                        <li><a href="#"> <span class="icon-i-impresion"></span></a></li>
                                    </ul>
                                </td>
                            </tr>

                            <tr>
                                <td>402686</td>
                                <td>MAYO CRUZ WILVER SEBASTIAN</td>
                                <td>Playa del Carmen</td>
                                <td>
                                    <ul class="inline-links">
                                        <li><a href="#"> <span class="icon-i-descarga"></span></a></li>
                                        <li><a href="#"> <span class="icon-i-enviar-mail"></span></a></li>
                                        <li><a href="#"> <span class="icon-i-impresion"></span></a></li>
                                    </ul>
                                </td>
                            </tr>

                            <tr>
                                <td>402686</td>
                                <td>MAYO CRUZ WILVER SEBASTIAN</td>
                                <td>Playa del Carmen</td>
                                <td>
                                    <ul class="inline-links">
                                        <li><a href="#"> <span class="icon-i-descarga"></span></a></li>
                                        <li><a href="#"> <span class="icon-i-enviar-mail"></span></a></li>
                                        <li><a href="#"> <span class="icon-i-impresion"></span></a></li>
                                    </ul>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!--table-responsive-->
            </div>
        </div>
        <!-- Single bloque desplegable -->


        <!-- Single bloque desplegable -->
        <div class="box-desplegable">
            <h4 class="encabezado-box-desplegable"> <span class="icon-i-documento-1 ico-box-desplegable"></span> Título
                2 </h4>
            <div class="contenido-box-desplegable">
                Otro contenido chulo
            </div>
        </div>
        <!-- Single bloque desplegable -->
    </div>
</div>
@endsection