@extends('layouts.app')


@section('content')





    <div class="pagetitle">
      <h1>Utilitati</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="index.html">Acasa</a></li>
          <li class="breadcrumb-item">Utilitati</li>
          <li class="breadcrumb-item active">Vizualizare</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->

    <section class="section profile">
      <div class="row">
    

        <div class="col-xl-12">

          <div class="card">
            <div class="card-body pt-3">
              <!-- Bordered Tabs -->
              <ul class="nav nav-tabs nav-tabs-bordered">
            @foreach($services as $service)
              <li class="nav-item">
                  <button class="nav-link @if($loop->first) active @endif " data-bs-toggle="tab" data-bs-target="#tab_profile{{$service->id}}">{{$service->name}}</button>
                </li>
            @endforeach             

              </ul>
              <div class="tab-content pt-2">

            @foreach($services as $service_pane)
                <div class="tab-pane fade @if($loop->first) show active @endif profile-overview" id="tab_profile{{$service_pane->id}}">
                   
                            <table class="table table-bordered datatable table-hover">
                                <thead>
                                    <th>AGENTIE</th>
                                    <th>ULTIMUL INDEX</th>
                                    <th>CONSUM</th>
                                    <th>PERIOADA</th>
                                    <th>OPERATOR</th>
                                </thead>
                                <tbody>
                                    @foreach($service_pane->utilities as $index)
                                    <tr>
                                        <td>{{$index->branch->branch}} {{$index->branch->name}}</td>
                                        <th>{{$index->index}}</th>
                                        <td>{{$index->consum}}</td>
                                        <td>{{\Carbon\Carbon::parse($index->created_at)->format('d-m-Y')}}</td>
                                        <td>{{$index->user->username}}</td>
                                    </tr>

                                    @endforeach
                                </tbody>
                            </table>

                 



                    
                </div>

             @endforeach
                

                <div class="tab-pane fade pt-3" id="profile-settings">

                

                </div>

            

              </div><!-- End Bordered Tabs -->

            </div>
          </div>

        </div>
      </div>
    </section>

 

@endsection