@extends('layouts.app')

@section('title', 'Reporte de Movimientos')

@section('content')
<div class="container-fluid">
    <!-- Título de la página -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-history text-info me-2"></i>Reporte de Movimientos
        </h1>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-success" onclick="window.print()">
                <i class="fas fa-print me-2"></i>Imprimir
            </button>
            <a href="{{ route('admin.inventory.reports') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <!-- Filtros -->
    <div class="card mb-4">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0">
                <i class="fas fa-filter me-2"></i>Filtros de Búsqueda
            </h5>
        </div>
        <div class="card-body">
            <form method="GET" action="{{ route('admin.inventory.reports.movements') }}" class="row g-3">
                <div class="col-md-3">
                    <label for="date_from" class="form-label">Fecha Desde</label>
                    <input type="date" class="form-control" id="date_from" name="date_from" 
                           value="{{ request('date_from') }}">
                </div>
                <div class="col-md-3">
                    <label for="date_to" class="form-label">Fecha Hasta</label>
                    <input type="date" class="form-control" id="date_to" name="date_to" 
                           value="{{ request('date_to') }}">
                </div>
                <div class="col-md-3">
                    <label for="type" class="form-label">Tipo</label>
                    <select class="form-select" id="type" name="type">
                        <option value="">Todos los tipos</option>
                        <option value="in" {{ request('type') == 'in' ? 'selected' : '' }}>Entrada</option>
                        <option value="out" {{ request('type') == 'out' ? 'selected' : '' }}>Salida</option>
                        <option value="adjustment" {{ request('type') == 'adjustment' ? 'selected' : '' }}>Ajuste</option>
                        <option value="transfer" {{ request('type') == 'transfer' ? 'selected' : '' }}>Transferencia</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <label for="movement" class="form-label">Movimiento</label>
                    <select class="form-select" id="movement" name="movement">
                        <option value="">Todos los movimientos</option>
                        <option value="in" {{ request('movement') == 'in' ? 'selected' : '' }}>Entrada</option>
                        <option value="out" {{ request('movement') == 'out' ? 'selected' : '' }}>Salida</option>
                    </select>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-search me-2"></i>Filtrar
                    </button>
                    <a href="{{ route('admin.inventory.reports.movements') }}" class="btn btn-outline-secondary">
                        <i class="fas fa-times me-2"></i>Limpiar
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Información del Reporte -->
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">
                <i class="fas fa-info-circle me-2"></i>Información del Reporte
            </h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-2">
                    <strong>Fecha de Generación:</strong><br>
                    {{ now()->format('d/m/Y H:i:s') }}
                </div>
                <div class="col-md-2">
                    <strong>Total de Movimientos:</strong><br>
                    <span class="badge bg-primary fs-6">{{ $movements->total() }}</span>
                </div>
                <div class="col-md-2">
                    <strong>Período:</strong><br>
                    @if(request('date_from') && request('date_to'))
                        {{ request('date_from') }} - {{ request('date_to') }}
                    @else
                        Todos los registros
                    @endif
                </div>
                <div class="col-md-2">
                    <strong>Tipo:</strong><br>
                    {{ request('type') ? ucfirst(request('type')) : 'Todos' }}
                </div>
                <div class="col-md-2">
                    <strong>Movimiento:</strong><br>
                    {{ request('movement') ? ucfirst(request('movement')) : 'Todos' }}
                </div>
                <div class="col-md-2">
                    <strong>Generado por:</strong><br>
                    {{ Auth::user()->name }}
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Movimientos -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                Movimientos de Inventario ({{ $movements->total() }} movimientos)
            </h6>
        </div>
        <div class="card-body">
            @if($movements->count() > 0)
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="movementsTable">
                        <thead class="table-dark">
                            <tr>
                                <th>Fecha</th>
                                <th>Producto</th>
                                <th>Categoría</th>
                                <th>Tipo</th>
                                <th>Movimiento</th>
                                <th>Cantidad</th>
                                <th>Stock Antes</th>
                                <th>Stock Después</th>
                                <th>Almacén</th>
                                <th>Usuario</th>
                                <th>Notas</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($movements as $movement)
                                <tr>
                                    <td>{{ $movement->created_at->format('d/m/Y H:i') }}</td>
                                    <td>
                                        <strong>{{ $movement->product->name }}</strong>
                                        <br><small class="text-muted">{{ $movement->product->code }}</small>
                                    </td>
                                    <td>{{ $movement->product->category->name }}</td>
                                    <td>
                                        <span class="badge bg-{{ $movement->type === 'in' ? 'success' : ($movement->type === 'out' ? 'danger' : 'info') }}">
                                            {{ ucfirst($movement->type) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $movement->movement === 'in' ? 'success' : 'danger' }}">
                                            {{ ucfirst($movement->movement) }}
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <strong>{{ $movement->quantity }}</strong>
                                    </td>
                                    <td class="text-center">{{ $movement->quantity_before }}</td>
                                    <td class="text-center">{{ $movement->quantity_after }}</td>
                                    <td>{{ $movement->warehouse_name ?: 'N/A' }}</td>
                                    <td>{{ $movement->user->name }}</td>
                                    <td>{{ $movement->notes ?: 'Sin notas' }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Paginación -->
                @if($movements->hasPages())
                    <div class="d-flex justify-content-center mt-4">
                        {{ $movements->links() }}
                    </div>
                @endif
            @else
                <div class="text-center text-muted py-5">
                    <i class="fas fa-history fa-4x mb-3"></i>
                    <h4>No hay movimientos</h4>
                    <p class="lead">No se encontraron movimientos con los filtros aplicados.</p>
                    <p>Intente ajustar los filtros de búsqueda o verifique que existan movimientos en el período seleccionado.</p>
                </div>
            @endif
        </div>
    </div>

    <!-- Resumen por Tipo -->
    @if($movements->count() > 0)
        <div class="card mt-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="fas fa-chart-bar me-2"></i>Resumen por Tipo
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    @php
                        $types = $movements->groupBy('type');
                    @endphp
                    @foreach($types as $type => $typeMovements)
                        <div class="col-md-3 mb-3">
                            <div class="card border-left-{{ $type === 'in' ? 'success' : ($type === 'out' ? 'danger' : 'info') }}">
                                <div class="card-body">
                                    <div class="row no-gutters align-items-center">
                                        <div class="col mr-2">
                                            <div class="text-xs font-weight-bold text-{{ $type === 'in' ? 'success' : ($type === 'out' ? 'danger' : 'info') }} text-uppercase mb-1">
                                                {{ ucfirst($type) }}
                                            </div>
                                            <div class="h5 mb-0 font-weight-bold text-gray-800">
                                                {{ $typeMovements->count() }} movimientos
                                            </div>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-{{ $type === 'in' ? 'arrow-up' : ($type === 'out' ? 'arrow-down' : 'exchange-alt') }} fa-2x text-gray-300"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
    // Inicializar DataTable
    $(document).ready(function() {
        $('#movementsTable').DataTable({
            "language": {
                "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
            },
            "pageLength": 25,
            "order": [[0, "desc"]], // Ordenar por fecha descendente
            "columnDefs": [
                { "orderable": false, "targets": [] } // Todas las columnas ordenables
            ]
        });
    });
</script>
@endpush

@push('styles')
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">
<style>
    @media print {
        .btn, .card-header .btn-group {
            display: none !important;
        }
        .card {
            border: none !important;
            box-shadow: none !important;
        }
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>
@endpush
@endsection