@extends('layouts.app', [
    'class' => 'measurements index',
])

@section('content')
    @include('partials._page-title', [
        'title' => 'Dados meteorológico para o seu microclima',
        'desc' => 'Acompanhe em tempo real os dados da sua Estação e entenda seu microclima.',
    ])


    <div class="panel-body">

        @include('partials._alert')

        <div class="filter-actions">

            <div class="filters">

                <x-entity-selector :entity="'stations'" :selectedId="$stationId"/>
                <x-form.filter-period :list="[
                    1 => 'Hoje',
                    7 => 'Últimos 7 dias',
                    30 => 'Últimos 30 dias',
                    'CUSTOMIZED' => 'Personalizado',
                ]" :type="'period'" :selectFirst="true" :title="'Períodos'" />


            </div>

            <div class="btns btn-group">

                <div class='hide' data-json="chartTypes">{!! json_encode($chartTypes) !!}</div>

                <a class="btn btn-light btn-full" data-bs-toggle="dropdown" data-bs-auto-close="false">
                    <i class="fa-regular fa-sliders"></i> Gráficos

                    <div class="dropdown dropdown-chart-types">
                        <ul class="dropdown-menu">

                            @foreach ($chartTypes as $type)
                                <li class='{{ $type['is_active'] ? 'active' : '' }}' data-key="{{ $type['key'] }}">
                                    <div class="icon">
                                        <i class="fa-solid fa-check"></i>
                                    </div>
                                    <div class="label">
                                        {{ $type['name'] }}
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                </a>

                <a class="btn btn-light btn-full btn-update"><i class="fa-sharp fa-regular fa-rotate-right"></i>
                    Atualizar</a>
                <a class="btn btn-primary btn-full btn-download"><i class="fa-sharp fa-light fa-download"></i> Exportar</a>
            </div>

        </div>

        <div class="last-records">

            <div class="quote small bold">
                Últimos registros
            </div>

            <div class="measure-cards">

                {{-- Card html model --}}
                {{-- <div class="m-card">

                    <div class="content">
                        <div class="label quote small">
                            Precipitação Acumulada
                        </div>

                        <div class="value quote medium bold">
                            120 mm
                        </div>
                    </div>

                    <div class="icon">
                        <i class="far fa-cloud-showers"></i>
                    </div>
                </div> --}}

            </div>

        </div>

        <div class="charts">

            {{-- Chart html model --}}
            <div class="chart hide">
                
                <div class="content">
                    
                    <div class="header">
    
                        <div class="quote medium bold">
                            Precipitação
                        </div>
    
                    </div>

                    <div class="body">
    
                    </div>

                    <div class="empty-content hide">
    
                            <div class="quote medium">
                                Sem dados para apresentar
                            </div>
    
                            <div class="icon">
                                <i class="fal fa-clouds"></i>
                            </div>
    
                        </div>

                </div>

            </div>

        </div>

    </div>
@endsection