@extends('layouts.panel')

@section('content')
    <div class="row g-4">
        <div class="col-12">
            <div class="bg-light rounded h-100 p-4">
                <h6 class="mb-4">Listado de lotes</h6>
                <div class="row mb-2">
                    <div class="col-md-3">
                        <input class="form-control" type="text" id="manzana_search" placeholder="Nro. Manzana">
                    </div>
                </div>
                <div class="table-responsive">

                    <table class="table" id="tabla">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                {{-- <th scope="col">Unidad</th> --}}
                                <th scope="col">Manzana</th>
                                <th scope="col">Lote</th>
                                <th scope="col">Precio contado (USD)</th>
                                <th scope="col">Estado</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($lotes as $lote)
                            <tr>
                                <td>{{$lote->id}}</td>
                                {{-- <td>{{$lote->unidad}}</td> --}}
                                <td>{{$lote->manzano}}</td>
                                <td>{{$lote->lote}}</td>
                                <td>{{$lote->precio_usd}}</td>
                                <td>{{App\Lote::ESTADO[$lote->estado]}}</td>
                                <td class="align-middle text-right">
                                    <a href="{{ route('panel.lotes.edit', $lote->id) }}" class="btn btn-sm btn-icon btn-secondary"><i class="fa fa-pencil-alt"></i> <span class="sr-only">Edit</span></a>

                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script>
    var table = $('#tabla').DataTable({
        dom: 'Brtip',
        order: [],
        buttons: [],
        pageLength: 50,
        responsive: true,
            "language": {
            "lengthMenu": "Mostrando _MENU_ registros por página",
            "zeroRecords": "Sin resultados",
            "info": "Mostrando _PAGE_ de _PAGES_",
            "infoEmpty": "Sin registros",
            "infoFiltered": "(filtrado de _MAX_ registros totales)",
            "search": "Buscar",
            "paginate": {
                "next": "Siguiente",
                "previous": "Anterior"
            }
        }
    });

    $('#manzana_search').on( 'keyup', function () {
    table
        .columns( 1 )
        .search( this.value )
        .draw();
    } );
</script>
@endpush