@extends('layouts.admin')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card shadow mb-4">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-white">
                    <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-history mr-2"></i>Historial de Compras e Inventario</h6>

                    @can('articulos_compra_store')
                    <a class="btn btn-primary btn-sm shadow-sm" href="{{route('articulo.comprar')}}">
                        <i class="fas fa-plus fa-sm text-white-50 mr-1"></i> Nueva Compra
                    </a>
                    @endcan
                </div>

                <div class="card-body">
                    <form method="GET" action="{{route('articulo.comprarHisto')}}" class="row mb-4 align-items-end">
                        <div class="col-md-3">
                            <label class="small font-weight-bold">Desde:</label>
                            <input type="date" name="inicio" class="form-control" value="{{ $inicio }}">
                        </div>
                        <div class="col-md-3">
                            <label class="small font-weight-bold">Hasta:</label>
                            <input type="date" name="fin" class="form-control" value="{{ $fin }}">
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-info btn-block"><i class="fas fa-filter mr-1"></i> Filtrar</button>
                        </div>
                    </form>

                    <div class="table-responsive">
                        <table class="table table-hover table-bordered" id="table_historial" width="100%" cellspacing="0">
                            <thead class="thead-light">
                                <tr>
                                    <th>Fecha</th>
                                    <th>Producto</th>
                                    <th>Factura</th>
                                    <th>Proveedor</th>
                                    <th>Cantidad</th>
                                    <th>Usuario</th>
                                    <th class="text-center">Acciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($articlos as $art)
                                <tr>
                                    <td>{{ \Carbon\Carbon::parse($art->fecha)->format('d/m/Y') }}</td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img src="{{ $art->img ?? 'https://ui-avatars.com/api/?name='.$art->nombre }}"
                                                class="rounded mr-2" style="width: 35px; height: 35px; object-fit: cover;">
                                            <div>
                                                <div class="font-weight-bold">{{ $art->nombre }}</div>
                                                <small class="text-muted">ID: {{ $art->art_id }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="badge badge-light border">{{ $art->factura }}</span></td>
                                    <td>{{ $art->proveedor ?? 'N/A' }}</td>
                                    <td class="font-weight-bold text-primary">+ {{ $art->cantidad }}</td>
                                    <td><small>{{ $art->usuario }}</small></td>
                                    <td class="text-center">
                                        @can('articulos_hitorial_delete')
                                        <form action="{{route('articulo.compradelete', ['id' => $art->idCom, 'idArt' => $art->art_id])}}" method="GET" class="d-inline">
                                            <button type="submit" class="btn btn-outline-danger btn-sm rounded-circle"
                                                onclick="return confirm('¿Anular esta compra? El stock disminuirá automáticamente.')"
                                                title="Anular Compra">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </form>
                                        @endcan
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $('#table_historial').DataTable({
            "order": [
                [0, "desc"]
            ], // Ordenar por fecha descendente
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            "pageLength": 25
        });
    });
</script>
@endsection