@extends('layouts.default')

@section('content')

<style>
    @media print {
        body { font-family: Arial, sans-serif; font-size: 20px; }
        .container { width: 100%; margin: 0 auto; padding: 10px; }
        .logo { text-align: center; margin-bottom: 10px; }
        .logo img { width: 350px; } /* Tamaño del logo */
        h2, h3 { text-align: center; margin: 5px 0; font-size: 38px; }
        h4 { text-align: center; font-size: 12px; }
        table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        th, td { border: 1px solid black; padding: 5px; text-align: center; }
        th { background-color: #f2f2f2; font-size: 29px; }
        .asset-img { width: 150px; height: 90px; object-fit: contain; } /* Imágenes más pequeñas */
        .signature-section { margin-top: 30px; text-align: center; }
        .signature-line { width: 200px; border-top: 1px solid black; margin: 0 auto; }
        .btn { display: none; } /* Ocultar botones al imprimir */
    }
</style>

<div class="container">
    <!-- Logotipo -->
    <div class="logo">
        <img src="{{ asset('img/logo123.png') }}" alt="Logotipo de la empresa">
    </div>

    <!-- Título -->
@foreach ($users as $user)
    <center>
    <h2><b>Reporte de Activos Asignados</b></h2>
   <div class="user-info">
        <!-- Datos del usuario -->
        <p><strong>Usuario:</strong> {{ $user->first_name }} {{ $user->last_name }}</p>
        <p><strong>Departamento:</strong> {{ $user->department ? $user->department->name : 'No asignado' }}</p>
        <p><strong>Correo:</strong> {{ $user->email }}</p>
    </div>
    </center>
@endforeach


    <!-- Botón de impresión -->
    <button onclick="window.print()" class="btn btn-primary">Imprimir</button>

    <!-- Tabla de activos asignados -->
    <table>
        <thead>
            <tr>
                <th>#</th> <!-- Nueva columna para la numeración -->
                <th>Imagen</th>
                <th>Activo</th>
                <th>Ubicación</th>
            </tr>
        </thead>
        <tbody>
            @foreach($user->assets as $asset)
                <tr>
                    <td>{{ $loop->iteration }}</td> <!-- Aquí se muestra el número de fila -->
                    <td>
                        @if($asset->image)
                            <img src="{{ asset('uploads/assets/' . $asset->image) }}" class="asset-img">
                        @else
                            <img src="{{ asset('img/default_asset.png') }}" class="asset-img">
                        @endif
                    </td>
                    <td>{{ $asset->name }}</td>
                    <td>{{ $asset->location->name ?? 'N/A' }}</td>
                </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Firma del usuario -->
    <div class="signature-section">
        <br>
        <br>
        <br>
        <br>
        <div class="signature-line"></div>       
        <p>Firma del Usuario</p>
        <p>{{ $user->name }}</p>
    </div>
</div>

@endsection