<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Resumen - DIAGNOSTIKA</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=roboto:400,500,700&display=swap" rel="stylesheet" />

        <!-- Tailwind CSS -->
        @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
            @vite(['resources/css/app.css', 'resources/js/app.js'])
        @else
            <script src="https://cdn.tailwindcss.com"></script>
        @endif

        <!-- Chart.js -->
        <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.js"></script>
        <!-- Chart.js Data Labels Plugin -->
        <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

        <style>
            @media print {
                body {
                    margin: 0;
                    padding: 0;
                }
                .print-button {
                    display: none;
                }
                header {
                    display: none;
                }
                .page-break {
                    page-break-after: always;
                }
            }

            body {
                font-family: 'Roboto', sans-serif;
            }
        </style>

        @yield('extra-styles')
    </head>
    <body class="bg-gray-50">
        <!-- Barra de herramientas para impresión -->
        <header class="bg-white border-b border-gray-200 sticky top-0 z-50 print:hidden">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex justify-between items-center">
                <div class="flex items-center gap-2">
                    <h1 class="text-lg sm:text-xl font-bold text-blue-900">Resumen Diagnóstica</h1>
                </div>
                <div class="flex gap-2">
                    <button 
                        onclick="window.print()" 
                        class="print-button bg-blue-600 hover:bg-blue-700 text-white px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-semibold flex items-center gap-2 transition"
                    >
                        <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
                        </svg>
                        <span class="hidden sm:inline">Imprimir</span>
                        <span class="sm:hidden">Impr.</span>
                    </button>
                    <a 
                        href="javascript:window.history.back()" 
                        class="bg-gray-600 hover:bg-gray-700 text-white px-3 sm:px-4 py-2 rounded-lg text-sm sm:text-base font-semibold flex items-center gap-2 transition"
                    >
                        <svg class="w-4 h-4 sm:w-5 sm:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                        <span class="hidden sm:inline">Volver</span>
                        <span class="sm:hidden">Atr.</span>
                    </a>
                </div>
            </div>
        </header>

        <!-- Main Content -->
        <main class="max-w-7xl mx-auto px-3 sm:px-6 py-6 sm:py-12">
            @yield('content')
        </main>

        <!-- Footer Info para impresión -->
        <div class="text-center text-gray-500 text-xs py-4 border-t mt-12 print:mt-8">
            <p>Generado por DIAGNOSTIKA - {{ now()->format('d/m/Y H:i') }}</p>
        </div>

        @yield('extra-scripts')
    </body>
</html>
