@extends('layouts.mainlayout')
@section('content')
<div class="row">
    <div class="col-md-12 section-header">
        <h2>
            <span class="icon-i-gota"></span>Historial de Consumo
        </h2>
    </div>
</div>
<p>Tienes <span>{{count($contratos)}}</span> contratos registrados</p>


<div class="table-responsive-sm">
    <table class="table table-width-100">
        <tbody>

            <tr>
                <th>
                    <p><b>Identificador</b></p>
                </th>
                <th>
                    <p><b>Nombre</b></p>
                </th>

                <th>&nbsp;</th>
            </tr>
            @foreach ($contratos as $contrato)
            <tr>
                <td>
                    <p>{{$contrato->id_contrato}}</p>
                </td>
                <td>
                    <p>{{$contrato->nombre}}</p>
                </td>

                <td>
                    <p>
                        <a class="btn btn-custom-sm btn-primary"
                            href="{{route('contratos.historial', ['cliente' => encrypt($contrato->cliente)])}}">
                            Ver histórico de consumo
                        </a>
                    </p>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>
<!--table-responsive-->

@endsection
@push('scripts')
<script>
    document.querySelector("table").addEventListener('click', function(e) {
        var anchor = e.target.closest('a');
        if(anchor !== null) {
        $(".spinner-box").fadeIn(1000)
        }
        }, false);
</script>
@endpush