@extends('adminlte::page')

@section('title', 'Inventario')
@section('plugins.Datatables', true)
@section('content_header')
    <h1>Detalle de Ajustes</h1>
@stop

@section('content')

    <div class="card">
        <div class="card-body">

            <div class="row mb-3">
                <div class="col-md-3">
                    <label for="searchDate">Buscar por Fecha:</label>
                    <input type="date" id="searchDate" class="form-control">
                </div>
                <div class="col-md-1">
                    <button id="filterButton" class="btn btn-primary" style="margin-top: 2.3rem;">Buscar</button>
                </div>
            </div>

            <div class="table-responsive">

                <table class="table table-bordered" id="ajustesTable">
                    <thead>
                        <tr>
                            <th>Fecha</th>
                            <th>Usuario</th>
                            <th>Tipo de Ingreso</th>
                            <th>Tipo de Ajuste</th>
                            <th>Tipo de Pollo</th>
                            <th>Cantidad</th>
                            <th>Peso</th>
                            <th>Descripción</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($ajustes as $ajuste)
                            <tr>
                                <td>{{ $ajuste->created_at->format('d/m/Y') }}</td>
                                <td>{{ $ajuste->user->name }}</td>
                                <td>
                                    {{ $ajuste->tipo_ingreso_id == 1 ? 'CAMION' : 'STOCK' }}
                                </td>
                                <td>
                                    {!! $ajuste->tipo_ajuste == 1
                                        ? ' <span class="badge bg-success">Ingreso</span>'
                                        : ' <span class="badge bg-danger">Salida</span>' !!}
                                </td>
                                <td>{{ $ajuste->tipoPollo->descripcion }}</td>
                                <td>{{ $ajuste->cantidad_pollos }}</td>
                                <td>{{ $ajuste->peso_neto }}</td>
                                <td>{{ $ajuste->descripcion }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="volver-lista-ajustes mt-3">
                <a href="{{ route('inventarios.index') }}" class="btn btn-warning"> Lista de Inventario</a>
            </div>
        </div>
    </div>
@stop

@section('css')

@stop

@section('js')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>

    <script>
        $(document).ready(function() {
            var table = $('#ajustesTable').DataTable({
                "responsive": true,
                "autoWidth": false,
                "paging": true,
                "lengthChange": true,
                "searching": true,
                "ordering": true,
                "info": true,
                "order": [
                    [0, 'desc']
                ],
                "lengthMenu": [
                    [10, 25, 50, -1],
                    [10, 25, 50, "Todos"]
                ],
                "language": {
                    "url": "/js/spanish.json"
                }
            });



            // Modificar el filtro para usar created_at
            $('#filterButton').on('click', function() {
                var selectedDate = $('#searchDate').val(); // Esto será '2025-04-28'

                if (selectedDate) {
                    // Convertimos al formato que usa la tabla: 'DD/MM/YYYY'
                    var formattedDate = moment(selectedDate).format('DD/MM/YYYY');

                    // Buscamos exactamente esa fecha en la columna (por ejemplo, la columna 0)
                    table.column(0).search('^' + formattedDate + '$', true, false).draw();
                } else {
                    table.column(0).search('').draw();
                }
            });


        });
    </script>
@stop