@extends('adminlte::print')

@section('title', 'Grafici '.$data['Cliente']->Nome)

@section('content_header')
@stop

@section('content')
<style>
    @media print {
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            font-size: 12pt;
        }
        .print-container {
            display: flex;
            flex-direction: column;
            width: 100%;
        }
        .print-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            border-bottom: 2px solid #000;
            padding-bottom: 10px;
        }
        .print-header-logo {
            width: 100px;
            height: 100px;
            margin-right: 20px;
        }
        .print-header-text {
            flex-grow: 1;
        }
        .print-client-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        .print-client-details {
            flex-grow: 1;
        }
        .print-client-details h1, 
        .print-client-details h2 {
            margin: 5px 0;
            font-weight: normal;
        }
        .print-chart {
            width: 100%;
            margin-top: 20px;
        }
        .no-print {
            display: none !important;
        }
    }
    @page {
        size: A4;
        margin: 10mm;
    }
</style>

<div class="no-print" style="display: flex; justify-content: space-start; align-items: center; gap: 10px; margin-bottom: 10px;" >
    <button class="btn btn-primary" onclick="window.print()">Stampa</button>
    <button class="btn btn-danger" onclick="window.close()"><i class="fas fa-fw fa-times"></i> Chiudi</button>
</div>

<div class="print-container">
    <div class="print-header " style="display: flex; align-items: center; justify-content: space-between;"> 
        <div class="print-header-logo">
            @if(!empty($data['profilo']->logo))<img src="{{ route('logo.profilo') }}" alt="Logo" style="max-width: 100%; max-height: 100%;">@endif
        </div>
        <div class="print-header-text">
            {!!$data['profilo']->opzioni['header']!!}
        </div>
        <div class="print-client-info">
            <div class="print-client-details">
                <h1>Nome: {{$data['Cliente']->Nome}}</h1>
                <h2>Altezza: {{$data['Cliente']->Altezza}}cm</h2>
                <h2>Peso: {{$data['Cliente']->Peso}}kg</h2>
                <h2>Età: {{$data['Cliente']->eta}}</h2>
                <h2>Genere: {{$data['Cliente']->Sesso}}</h2>
            </div>
        </div>
    </div>



    <div class="print-chart">
        @livewire('pazienti.chart',['user'=>$data['user']])
    </div>
</div>
@stop

@section('css')
@stop

@section('js')
@stop