@extends('layouts.mainlayout')
@section('content')
<div class="row">
    <div class="col-md-12 section-header">
        <h3>

            <span class="icon-i-gota"></span> Tu consumo
        </h3>
    </div>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="box-info-destacada naranja">
            <div class="titulo">
                Consumo al día de hoy del medidor <span
                    style="text-decoration: underline; letter-spacing:1px; font-weight: 600;">{{$medidor}}</span>
            </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">{{$consumo->consumoreal}}</strong>
                </div>
            </div>
            <div class="row">
                <div class="col-md-auto">
                    <p>Consumo real: {{$consumo->consumoreal}}</p>
                </div>
                <div class="col-md-auto">
                    <p>Tendencia: {{$consumo->tendencia}}</p>
                </div>
                <div class="col-md-auto">
                    <p>Último consumo: {{$consumo->ultimoconsumo}}</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-auto">
                    <p>Consumo promedio: {{$consumo->consumopromedio}}</p>
                </div>
                <div class="col-md-auto">
                    <p>Consumo estimado: {{$consumo->consumoestimado}}</p>
                </div>
                <div class="col-md-auto">
                    <p>Última lectura: {{$consumo->ultimalectura}}</p>
                </div>
            </div>
        </div>
        <div class="espacio-1"></div>
    </div>
</div>
@endsection