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

@section('content')
    @include('partials._page-title', [
        'title' => 'Gestão Hídrica da cultura',
        'desc' =>
            'Maximize a Eficiência Agrícola: Monitoramento Hídrico e Evapotranspiração para uma Gestão Inteligente da Cultura.',
    ])

    <div class="panel-body">

        @include('partials._alert')

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

        <div class="filter-actions">

            <div class="filters">
                
                @if(count($fields))
                <x-entity-selector :entity="'fields'"></x-entity-selector>
                @endif
                <div>
                    <select class="form-select" name='cultivation_id'>
                    </select>
                </div>

            </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="description mt-1 mb-1"></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">
                
                <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>

    <div class="table-empty hide">
        <div class='quote medium'>Medições para cultivo não encontrada</div>
        <div class="icon">
            <i class="fal fa-clouds"></i>
        </div>
    </div>

    <x-layouts.redirect-field-cultivation-create />
@endsection