@extends('layouts.app', [
    'class' => 'dashboard table-index',
])

@section('content')

    @include('partials._page-title', [
        'title' => 'Dashboard',
        'desc' => 'Aqui está a lista de estações vinculadas à sua conta.',
    ])


    @include('partials._alert')
    @if($stations->count())

    <div class="measure-cards">
        
        <div class="m-card">
            
                <div class="content">
                    <div class="label quote small">
                        Total Estações
                    </div>

                    <div class="value quote medium bold">
                        {{$totalStations}}
                    </div>
                </div>

                <div class="icon">
                    <i class="icon-station"></i>
                </div>
            </div>

            <div class="m-card">

                <div class="content">
                    <div class="label quote small">
                        Novas Estações
                    </div>

                    <div class="value quote medium bold">
                        {{$lastStations}}+
                    </div>
                </div>

                <div class="icon">
                    <i class="fa fa-line-chart"></i>
                </div>
            </div>

            <div class="m-card">

                <div class="content">
                    <div class="label quote small">
                        Estações online
                    </div>

                    <div class="value quote medium bold">
                        {{$onlineStationsCount}}
                    </div>
                </div>

                <div class="icon">
                    <i class="fa fa-wifi"></i>
                </div>
            </div>

            <div class="m-card">

                <div class="content">
                    <div class="label quote small">
                        Estações offline
                    </div>

                    <div class="value quote medium bold">
                        {{$offlineStationsCount}}
                    </div>
                </div>

                <div class="icon">
                    <i class="fa fa-wifi-slash"></i>
                </div>
            </div>
            
        </div>
    @endif
    <div class="panel-body">


        <div class="table-area">

            <div class="filter-actions">

                @include('partials._filters', [
                    'hasStatus' => true,
                    'selectFirst' => isset($status),
                    'status' => $status,
                    'filterType' => 'is_online',
                    'title' => 'Status',
                    'list' => [
                        1 => 'Online',
                        2 => 'Offline',
                        0 => 'Todos'
                    ],
                    'triggerSubmit' => true

                ])


                <div class="btns btn-group">
                    <a class="btn btn-light btn-full map-btn" data-bs-auto-close="false">
                        <i class="fa-regular fa-sliders"></i> Mapa
                    </a>
                </div> 

            </div>
            @if($stations->count())
                <div class="table-responsive">

                    <table class="table table-ordered">
                        <thead>
                            <tr>
                                <th data-column="id">Id</th>
                                <th data-column="id">Nome</th>
                                <th data-column="id">Fazenda</th>
                                <th data-column="name">Status</th>
                                <th data-column="name">Data de criação</th>
                                <th>Ações</th>
                            </tr>
                        </thead>
                        <tbody>

                            @foreach ($stations as $station)
                                <tr>
                                    <td class='td-id'>{{ $station->id }}</td>
                                    <td>{{ $station->name }}</td>
                                    <td>{{ $station->farm_name }}</td>
                                    <td>
                                        <span class="badge {{$station->is_online ? "badge bg-success" : "badge bg-danger"}}"">{{ $station->is_online ? 'Online' : 'Offline' }}</span>
                                    </td>
                                    <td>{{ $station->created_at->format('d/m/Y H:i') }}</td>
                                    <td class='td-actions'>

                                        <button type="button" class="btn btn-light btn-icon btn-custom-action" data-bs-toggle="dropdown">
                                            <i class="far fa-ellipsis-h"></i>
                                        </button>

                                        <div class="dropdown">
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <a class="dropdown-item open-map" data-station-id="{{ $station->id }}">Mapa</a>
                                                </li>
                                                <li>
                                                    <a class="dropdown-item open-dashboard" data-station-id="{{ $station->id }}">Medições</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="pagination-block">
                    {{ $stations->appends(Request::except('page'))->links() }}
    
                    <div class="pagination-status">
                        {{ $stations->count() * $stations->currentPage() }} / {{ $stations->total() }}
                    </div>
                </div>
            @else
                <div class="table-empty">
                    <div class='quote medium'>Nenhuma estação encontrada</div>
                    <div class="icon">
                        <i class="fal fa-clouds"></i>
                    </div>
                </div>
            @endif
            
        </div>

    </div>
@endsection