@extends('layouts.app')

@section('title', 'Vista Previa - ' . $printConfiguration->report_name)

@section('content')
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0 text-gray-800">
                        <i class="fas fa-eye me-2"></i>Vista Previa - {{ $printConfiguration->report_name }}
                    </h1>
                    <p class="text-muted mb-0">Previsualización de la configuración de impresión</p>
                </div>
                <div>
                    <button onclick="window.print()" class="btn btn-primary me-2">
                        <i class="fas fa-print me-2"></i>Imprimir Vista Previa
                    </button>
                    <a href="{{ route('admin.print-config.show', $printConfiguration) }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-left me-2"></i>Volver
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Información de la Empresa (Solo para impresión) -->
    <div class="d-none d-print-block mb-4">
        @if($printConfiguration->company_name)
            <div class="text-center">
                <h2>{{ $printConfiguration->company_name }}</h2>
                @if($printConfiguration->company_address)
                    <p class="mb-1">{{ $printConfiguration->company_address }}</p>
                @endif
                @if($printConfiguration->company_phone || $printConfiguration->company_email)
                    <p class="mb-1">
                        @if($printConfiguration->company_phone)
                            Tel: {{ $printConfiguration->company_phone }}
                        @endif
                        @if($printConfiguration->company_phone && $printConfiguration->company_email)
                            | 
                        @endif
                        @if($printConfiguration->company_email)
                            Email: {{ $printConfiguration->company_email }}
                        @endif
                    </p>
                @endif
            </div>
            <hr>
        @endif
    </div>

    <!-- Información del Reporte -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Información del Reporte</h6>
                    <p class="mb-1"><strong>Tipo:</strong> {{ $printConfiguration->report_type_formatted }}</p>
                    <p class="mb-1"><strong>Nombre:</strong> {{ $printConfiguration->report_name }}</p>
                    <p class="mb-1"><strong>Fecha de Generación:</strong> {{ now()->format('d/m/Y H:i:s') }}</p>
                    <p class="mb-0"><strong>Generado por:</strong> {{ Auth::user()->name }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h6 class="card-title">Configuración de Impresión</h6>
                    <p class="mb-1"><strong>Papel:</strong> {{ $printConfiguration->paper_size_formatted }}</p>
                    <p class="mb-1"><strong>Orientación:</strong> {{ $printConfiguration->orientation_formatted }}</p>
                    <p class="mb-0"><strong>Fuente:</strong> {{ $printConfiguration->font_config['family'] ?? 'Arial' }} {{ $printConfiguration->font_config['size'] ?? 12 }}pt</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Contenido de Muestra -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-file-alt me-2"></i>{{ $sampleData['title'] }}
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover">
                    <thead class="thead-light">
                        <tr>
                            <th>ID</th>
                            <th>Descripción</th>
                            <th>Cantidad</th>
                            <th>Precio Unitario</th>
                            <th>Total</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Producto de Ejemplo 1</td>
                            <td>10</td>
                            <td>$25.00</td>
                            <td>$250.00</td>
                            <td><span class="badge bg-success">Activo</span></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Producto de Ejemplo 2</td>
                            <td>5</td>
                            <td>$15.50</td>
                            <td>$77.50</td>
                            <td><span class="badge bg-success">Activo</span></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Producto de Ejemplo 3</td>
                            <td>8</td>
                            <td>$30.00</td>
                            <td>$240.00</td>
                            <td><span class="badge bg-warning">Pendiente</span></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Producto de Ejemplo 4</td>
                            <td>12</td>
                            <td>$18.75</td>
                            <td>$225.00</td>
                            <td><span class="badge bg-success">Activo</span></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>Producto de Ejemplo 5</td>
                            <td>3</td>
                            <td>$45.00</td>
                            <td>$135.00</td>
                            <td><span class="badge bg-info">En Proceso</span></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr class="table-primary">
                            <th colspan="4" class="text-end">Total:</th>
                            <th>$927.50</th>
                            <th></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

    <!-- Resumen Estadístico -->
    <div class="row mt-4">
        <div class="col-md-3">
            <div class="card border-left-primary">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                        Total Registros
                    </div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">5</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-success">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                        Activos
                    </div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">3</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-warning">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                        Pendientes
                    </div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">1</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card border-left-info">
                <div class="card-body">
                    <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                        En Proceso
                    </div>
                    <div class="h5 mb-0 font-weight-bold text-gray-800">1</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Información Adicional -->
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-info-circle me-2"></i>Información Adicional
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <p><strong>Descripción:</strong> {{ $printConfiguration->description ?: 'Sin descripción' }}</p>
                            <p><strong>Estado:</strong> 
                                @if($printConfiguration->is_active)
                                    <span class="badge bg-success">Activa</span>
                                @else
                                    <span class="badge bg-danger">Inactiva</span>
                                @endif
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Por Defecto:</strong> 
                                @if($printConfiguration->is_default)
                                    <span class="badge bg-primary">Sí</span>
                                @else
                                    <span class="badge bg-secondary">No</span>
                                @endif
                            </p>
                            <p><strong>Orden:</strong> {{ $printConfiguration->sort_order }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pie de Página (Solo para impresión) -->
    <div class="d-none d-print-block mt-4">
        <hr>
        <div class="text-center">
            <small class="text-muted">
                Reporte generado el {{ now()->format('d/m/Y H:i:s') }} por {{ Auth::user()->name }} | 
                Página 1 de 1 | Vista Previa
            </small>
        </div>
    </div>

    <!-- Información de Vista Previa -->
    <div class="alert alert-info mt-4">
        <h5><i class="fas fa-info-circle me-2"></i>Información de Vista Previa</h5>
        <p class="mb-0">
            Esta es una vista previa de cómo se verá el reporte con la configuración actual. 
            Los datos mostrados son de ejemplo y no representan información real del sistema.
        </p>
    </div>
</div>
@endsection

@push('styles')
<style>
    @media print {
        .btn, .card-header, .alert {
            display: none !important;
        }
        
        .card {
            border: none !important;
            box-shadow: none !important;
        }
        
        .table {
            font-size: {{ $printConfiguration->font_config['size'] ?? 12 }}px;
            font-family: {{ $printConfiguration->font_config['family'] ?? 'Arial' }};
        }
        
        .table th, .table td {
            padding: 4px !important;
        }
        
        body {
            font-family: {{ $printConfiguration->font_config['family'] ?? 'Arial' }};
            font-size: {{ $printConfiguration->font_config['size'] ?? 12 }}pt;
            color: {{ $printConfiguration->font_config['color'] ?? '#000000' }};
        }
        
        @if($printConfiguration->font_config['bold'] ?? false)
        .table th {
            font-weight: bold;
        }
        @endif
        
        @page {
            size: {{ $printConfiguration->paper_size ?? 'A4' }} {{ $printConfiguration->orientation ?? 'portrait' }};
            margin: {{ $printConfiguration->margins['top'] ?? 20 }}mm {{ $printConfiguration->margins['right'] ?? 20 }}mm {{ $printConfiguration->margins['bottom'] ?? 20 }}mm {{ $printConfiguration->margins['left'] ?? 20 }}mm;
        }
    }
</style>
@endpush