@extends('Admin.Views.admin')

@include('gis::sidebar')

@push('scripts')
    <script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>

    <script type="text/javascript">
        $('#mapa-lrq').parent().css('min-height', '100%');

        var map = L.map('mapa-lrq', {
            scrollWheelZoom: false
        }).setView([-33.0357, -58.9986], 12);

        var tiles = L.tileLayer('https://mt1.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', {
                maxZoom: 25,
                subdomains:['mt0','mt1','mt2','mt3']
        }).addTo(map);

        @foreach($records AS $fumigation)
            @foreach($fumigation->coordinates AS $coord)
                var marker = new L.Marker([{{ $coord->lat }}, {{ $coord->long }}])
                            .bindTooltip("Registro Nº {{ $fumigation->id }}")
                            .on('click', function(e) {
                                window.location = '{{ route('gis.fumigations.edit', $fumigation->id) }}';
                            })
                            .addTo(map);
            @endforeach
        @endforeach

    </script>
@endpush

@push('styles')
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin=""/>
    <style>
        .btn-xs{
            padding: 2px 4px;
        }
    </style>
@endpush

@section('content')

<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">Filtros de búsqueda</h5>
        <div class="header-elements">
            <div class="list-icons">
                <a class="list-icons-item" data-action="collapse"></a>
            </div>
        </div>
    </div>
    <div style="display: none;">@csrf</div>
    <form
        action="{{ route('gis.map') }}"
        method="get"
        id="filterForm"
    >
        <div class="card-body">
            <div class="row">
                <div class="col-12 col-md-3">
                    <div class="form-group">
                    <x-fieldselectajax label='Propietario' name='person_id' :data='false' template='templateSelectPersons' :items='$model_info->persons' :itemsurl='route("people.persons.find")' itemtext='name' itemindex='id' :parametro='$model_info->person'/>
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="form-group">
                        <x-fieldselect label='Productor' name='productor_id' :data='$data' :items='$model_info->productors' itemtext='name' itemindex='id' />
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="form-group">
                        <x-fieldselect label='Aplicador' name='applicant_id' :data='$data' :items='$model_info->applicants' itemtext='name' itemindex='id' />
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="form-group">
                        <x-fieldselect label='Técnico' name='technician_id' :data='$data' :items='$model_info->technicians' itemtext='name' itemindex='id' />
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="form-group">
                        <x-fieldselect label='Producto' name='product_id' :data='$data' :items='$model_info->products' itemtext='name' itemindex='id' />
                    </div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="form-group">
                        <x-fieldselect label='Equipo' name='equipe_id' :data='$data' :items='$model_info->equipes' itemtext='name' itemindex='id' />
                    </div>
                </div>
                <div class="col-12 col-md-2">
                    <div class="form-group">
                        <x-fieldtext label='Receta' placeholder='Receta' name='prescription' :data='$data' />
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <div class="form-group">
                        <br>
                        <br>
                        <x-forms.label>Fecha desde</x-forms.label>
                        <x-forms.input
                            type="date"
                            name="from"
                            :value="request('from')"
                        />
                    </div>
                </div>
                <div class="col-6 col-md-2">
                    <div class="form-group">
                        <br>
                        <br>
                        <x-forms.label>Fecha hasta</x-forms.label>
                        <x-forms.input
                            type="date"
                            name="to"
                            :value="request('to')"
                        />
                    </div>
                </div>
            </div>
        </div>
        <div class="card-footer text-right">
            <a href="{{ route('gis.map') }}" class="btn btn-secondary">Limpiar</a>
            <button class="btn bg-blue-800" type="submit">
                Filtrar
                <i class="mi-filter-list"></i>
            </button>
        </div>
    </form>
</div>

<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">Mapa de fumigaciones</h5>
        <div class="header-elements">
            <div class="list-icons">
                <a class="list-icons-item" data-action="collapse"></a>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div id="mapa-lrq" style="min-height: 400px; min-width: 100%;"></div>
    </div>
</div>

<div class="card">
    <div class="card-header header-elements-inline">
        <h5 class="card-title">Listado de resultados</h5>
        <div class="header-elements">
            <div class="list-icons">
                <a class="list-icons-item" data-action="collapse"></a>
            </div>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Nº</th>
                        <th>Propietario</th>
                        <th>Productor</th>
                        <th>Aplicador</th>
                        <th>Técnico</th>
                        <th>Equipo</th>
                        <th>Receta</th>
                        <th>Fecha</th>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($records AS $fumigation)
                    <tr>
                        <td>{{ $fumigation->id }}</td>
                        <td>{{ $fumigation->owner->name }}</td>
                        <td>{{ $fumigation->productor->person->name }}</td>
                        <td>{{ $fumigation->applicant->person->name }}</td>
                        <td>{{ @$fumigation->technician->person->name }}</td>
                        <td>{{ $fumigation->equipe->name }}</td>
                        <td>{{ $fumigation->prescription }}</td>
                        <td>{{ $fumigation->created_at }}</td>
                        <td>
                            <a class="btn btn-xs btn-primary" href="{{ route('gis.fumigations.edit', $fumigation->id) }}">
                                <i class="mi mi-visibility"></i>
                            </a>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>

@endsection