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

@section('content')
    @include('partials._page-title', [
        'title' => 'Operações e Manejo',
        'desc' =>
            'Otimize sua produção agrícola! Essas práticas incluem o cuidado com o solo, plantio e colheita, visando tornar sua agricultura mais eficiente e sustentável.',
    ])

    <div class="panel-body">

        @include('partials._alert')

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

        <div class="filter-actions">

            <div class="filters">

                <x-entity-selector :entity="'fields'" />

                <div>
                    <select class="form-select" name='cultivation_id'>
                    </select>
                </div>

            </div>

        </div>

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

        <ul class="nav nav-tabs">
            <li class="nav-item" data-content-item="soil_preparing">
                <a class="nav-link">Preparo de solo</a>
            </li>
            <li class="nav-item" data-content-item="planting_seeding">
                <a class="nav-link">Plantio/Semeadura</a>
            </li>
            <li class="nav-item" data-content-item="pulverization">
                <a class="nav-link active">Pulverização</a>
            </li>
            <li class="nav-item" data-content-item="machine_traffic">
                <a class="nav-link">Tráfego de Máquinas</a>
            </li>
            <li class="nav-item" data-content-item="harvest">
                <a class="nav-link">Colheita</a>
            </li>
        </ul>

        <div class="nav-content">

            <div class="nav-content-item" id="soil_preparing">
                
                <div class="custom-legend">
                    <div class="implode-btn">
                        <button type="button" class="btn btn-light btn-icon">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </div>


                    <div class='item'>
                        <div class='icon tag success'></div>
                        <div class='label'>Favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag warning'></div>
                        <div class='label'>Moderadamente favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag danger'></div>
                        <div class='label'>Não favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-very-dry-soil'></i>
                        </div>
                        <div class='label'>Solo seco</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-very-wet-soil'></i>
                        </div>
                        <div class='label'>Solo muito úmido</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-wet-soil'></i>
                        </div>
                        <div class='label'>Solo úmido</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-rain-presence'></i>
                        </div>
                        <div class='label'>Presença de chuva</div>
                    </div>

                </div>

                <div class="table-responsive ">
                </div>

            </div>

            <div class="nav-content-item" id="planting_seeding">
                <div class="custom-legend">

                    <div class="implode-btn">
                        <button type="button" class="btn btn-light btn-icon">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </div>

                    <div class='item'>
                        <div class='icon tag success'></div>
                        <div class='label'>Favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag warning'></div>
                        <div class='label'>Moderadamente favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag danger'></div>
                        <div class='label'>Não favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-very-dry-soil'></i>
                        </div>
                        <div class='label'>Solo seco</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-very-wet-soil'></i>
                        </div>
                        <div class='label'>Solo muito úmido</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-wet-soil'></i>
                        </div>
                        <div class='label'>Solo úmido</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-rain-presence'></i>
                        </div>
                        <div class='label'>Presença de chuva</div>
                    </div>

                </div>

                <div class="table-responsive ">

                    {{--<table class='table table-calendar hourly pulverization'>
                         <thead>

                            <tr>
                                <th>dom</th>
                                <th>seg</th>
                                <th>ter</th>
                                <th>qua</th>
                                <th>qui</th>
                                <th>sex</th>
                                <th>sáb</th>
                            </tr>

                        </thead>
                        <tbody>

                            <tr>
                                <td>
                                    <div class="tag warning">

                                    </div>
                                </td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                                <td></td>
                            </tr>

                        </tbody>
                    </table> --}}

                </div>

            </div>

            <div class="nav-content-item" id="pulverization">

                <div class="custom-legend">
                    <div class="implode-btn">
                        <button type="button" class="btn btn-light btn-icon">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </div>

                    <div class='item'>
                        <div class='icon tag success'></div>
                        <div class='label'>Favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag warning'></div>
                        <div class='label'>Moderadamente favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag danger'></div>
                        <div class='label'>Não favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-humidity-high'></i>
                        </div>
                        <div class='label'>Alta umidade</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-humidity-low'></i>
                        </div>
                        <div class='label'>Baixa umidade</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-low-thermometer'></i>
                        </div>
                        <div class='label'>Baixa temperatura</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-thermometer-up'></i>
                        </div>
                        <div class='label'>Alta temperatura</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-rain-presence'></i>
                        </div>
                        <div class='label'>Presença de chuva</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-wind-force'></i>
                        </div>
                        <div class='label'>Vento forte</div>
                    </div>

                </div>

                <div class="table-responsive ">

                    {{-- <table class='table table-calendar hourly pulverization'>
                        <thead>

                            <tr>
                                <th class='bolder'>--</th>
                                
                                <th>dom. 13/10</th>
                                <th>seg. 14/10</th>
                                <th>ter. 15/10</th>
                                <th>qua. 16/10</th>
                                <th>qui. 17/10</th>
                            </tr>

                        </thead>
                        <tbody>

                            @for ($i = 0; $i < 24; $i++)
                                <tr>
                                    <td class='bolder'>{{ \Carbon\Carbon::createFromTime($i)->format('H:i') }}</td>
                                    <td>
                                        <div class="tag warning">
                                            
                                        </div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            @endfor

                        </tbody>
                    </table> --}}

                </div>

            </div>

            <div class="nav-content-item" id="machine_traffic">
                 <div class="custom-legend">
                    <div class="implode-btn">
                        <button type="button" class="btn btn-light btn-icon">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </div>

                    <div class='item'>
                        <div class='icon tag success'></div>
                        <div class='label'>Favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag warning'></div>
                        <div class='label'>Moderadamente favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag danger'></div>
                        <div class='label'>Não favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-very-dry-soil'></i>
                        </div>
                        <div class='label'>Solo seco</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-very-wet-soil'></i>
                        </div>
                        <div class='label'>Solo muito úmido</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-wet-soil'></i>
                        </div>
                        <div class='label'>Solo úmido</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-rain-presence'></i>
                        </div>
                        <div class='label'>Presença de chuva</div>
                    </div>

                </div>

                <div class="table-responsive ">
                </div>
            </div>

            <div class="nav-content-item" id="harvest">
                 <div class="custom-legend">
                    <div class="implode-btn">
                        <button type="button" class="btn btn-light btn-icon">
                            <i class="fas fa-chevron-left"></i>
                        </button>
                    </div>
                    <div class='item'>
                        <div class='icon tag success'></div>
                        <div class='label'>Favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag warning'></div>
                        <div class='label'>Moderadamente favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon tag danger'></div>
                        <div class='label'>Não favorável</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-very-dry-soil'></i>
                        </div>
                        <div class='label'>Solo seco</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-very-wet-soil'></i>
                        </div>
                        <div class='label'>Solo muito úmido</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-wet-soil'></i>
                        </div>
                        <div class='label'>Solo úmido</div>
                    </div>
                    <div class='item'>
                        <div class='icon'>
                            <i class='icon-op-tag-rain-presence'></i>
                        </div>
                        <div class='label'>Presença de chuva</div>
                    </div>

                </div>

                <div class="table-responsive ">
                </div>
            </div>

        </div>

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

    </div>
@endsection