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

@section('content')
    @include('partials._page-title', [
        'title' => 'Pragas e Doenças',
        'desc' => 'Veja os riscos e doenças associados à sua cultura agrícola e tome decisões informadas para proteger sua plantação.',
    ])

    <div class="panel-body">

        @include('partials._alert')

        <div class="filter-actions">

            <div class="filters">

                <x-entity-selector :entity="'fields'" />
                <div class="hide">
                    <select class="form-select select2" 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>
            </div>
        </div>

        <div class="charts-content">


            <div class="quote small bold">
                Gráficos
            </div>



            <div class="charts"></div>
        
        </div>

        <div class="table-empty hide">
            <div class='quote medium'>Nenhuma praga ou doença cadastradas</div>
            <div class="icon">
                <i class="fal fa-clouds"></i>
            </div>
        </div>


        <x-layouts.redirect-field-cultivation-create />
        
        <div class="charts-empty hide">
            <div class='quote medium'>Não há período de dados suficiente para a análise, tente novamente mais tarde.</div>
            <div class="icon">
                <i class="fal fa-clouds"></i>
            </div>
        </div>

    </div>

@endsection