@extends('adminlte::page')

@section('title', config('app.name') . ' - Detalle de Ajustes')
@section('plugins.Datatables', true)

@section('content_header')
    <h1><i class="fas fa-clipboard-list"></i> Detalle de Ajustes</h1>
@stop

@section('content')
    <!-- Filtros -->
    <div class="card mb-3">
        <div class="card-header bg-primary text-white">
            <h3 class="card-title mb-0">
                <i class="fas fa-filter mr-2"></i> Filtros
            </h3>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="searchDate">
                            <i class="fas fa-calendar-alt mr-1"></i> Buscar por Fecha:
                        </label>
                        <input type="date" id="searchDate" class="form-control" value="{{ date('Y-m-d') }}">
                    </div>
                </div>
                <div class="col-md-2 d-flex align-items-center">
                    <div class="form-group mb-0 w-100">
                        <div class="btn-group w-100">
                            <button id="filterButton" class="btn btn-primary mr-2">
                                <i class="fas fa-search mr-1"></i> Buscar
                            </button>
                            <button id="clearFilterButton" class="btn btn-secondary">
                                <i class="fas fa-times mr-1"></i> Limpiar
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Ajustes -->
    <div class="card">
        <div class="card-header bg-info text-white">
            <h3 class="card-title mb-0">
                <i class="fas fa-list mr-2"></i> Historial de Ajustes
            </h3>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover mb-0" id="ajustesTable" style="width: 100%">
                    <thead class="bg-light">
                        <tr>
                            <th style="width: 10%;">Fecha</th>
                            <th style="width: 10%;">Usuario</th>
                            <th style="width: 10%;">Tipo de Ingreso</th>
                            <th style="width: 12%;">Tipo de Ajuste</th>
                            <th style="width: 15%;">Tipo de Pollo</th>
                            <th style="width: 8%;" class="text-center">Cantidad</th>
                            <th style="width: 10%;" class="text-right">Peso (kg)</th>
                            <th style="width: 25%;">Descripción</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($ajustes as $ajuste)
                            <tr>
                                <td>{{ $ajuste->created_at->format('d/m/Y') }}</td>
                                <td><strong>{{ $ajuste->user->name }}</strong></td>
                                <td>
                                    @php
                                        $tipoIngreso = $ajuste->tipo_ingreso_id == 1 ? 'CAMION' : ($ajuste->tipo_ingreso_id == 2 ? 'STOCK' : 'BENEFICIADO');
                                    @endphp
                                    <span class="badge badge-info">{{ $tipoIngreso }}</span>
                                </td>
                                <td>
                                    @if($ajuste->tipo_ajuste == 1)
                                        <span class="badge badge-success">Ingreso</span>
                                    @elseif($ajuste->tipo_ajuste == 2)
                                        <span class="badge badge-danger">Salida</span>
                                    @elseif($ajuste->tipo_ajuste == 3)
                                        <span class="badge badge-info">Transferencia</span>
                                    @else
                                        <span class="badge badge-secondary">Otro</span>
                                    @endif
                                </td>
                                <td><strong>{{ $ajuste->tipoPollo->descripcion ?? 'N/A' }}</strong></td>
                                <td class="text-center">{{ number_format($ajuste->cantidad_pollos, 0) }}</td>
                                <td class="text-right">{{ number_format($ajuste->peso_neto, 2) }}</td>
                                <td><small>{{ $ajuste->descripcion }}</small></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Botones de Acción -->
    <div class="card mt-3">
        <div class="card-footer">
            <a href="{{ route('inventarios.index') }}" class="btn btn-warning">
                <i class="fas fa-list mr-2"></i> Lista de Inventario
            </a>
        </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({
                "language": {
                    "url": "/js/spanish.json"
                },
                "order": [
                    [0, 'desc']
                ],
                "lengthMenu": [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Todos"]
                ],
                "pageLength": 10,
                "columnDefs": [
                    {
                        "type": "date",
                        "targets": 0,
                        "render": function(data, type, row) {
                            if (type === 'sort' || type === 'type') {
                                return moment(data, 'DD/MM/YYYY').format('YYYY-MM-DD');
                            }
                            return data;
                        }
                    }
                ]
            });

            // Filtro por fecha
            $('#filterButton').on('click', function() {
                var selectedDate = $('#searchDate').val();
                if (selectedDate) {
                    var formattedDate = moment(selectedDate).format('DD/MM/YYYY');
                    table.column(0).search('^' + formattedDate + '$', true, false).draw();
                } else {
                    table.column(0).search('').draw();
                }
            });

            // Limpiar filtro
            $('#clearFilterButton').on('click', function() {
                $('#searchDate').val('');
                table.column(0).search('').draw();
            });
        });
    </script>
@stop