{% extends 'impression/base.html.twig' %}

{% block stylesheets %}
<style type="text/css">
	html, body { height: 100%; }
        body {
            font-family: Arial, Calibri, sans-serif;
            color: #003c71;
            margin: 0;
            padding: 0;
        }
        .container {
            width: 750px;
            margin: 0 auto;
            padding: 30px 0 15px 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        .header-section {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        .header-left {
            font-weight: bold;
            font-size: 17px;
            margin-top: 20px;
            color: #003c71;
        }
        .header-right img {
            margin-top: 10px;
        }
        .section {
            margin-top: 35px;
            margin-bottom: 0;
        }
        .section-flex {
            display: flex;
            justify-content: space-between;
        }
        .section-flex > div {
            width: 48%;
        }
        .info-row {
            display: flex;
            margin-bottom: 7px;
        }
        .info-label {
            width: 110px;
            font-size: 13px;
            color: #003c71;
        }
        .info-value {
            width: 240px;
            border-bottom: 1px solid #003c71;
            font-size: 13px;
            color: #222;
            margin-left: 7px;
        }
        .vehicle-flex {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
        }
        .vehicle-flex > div {
            width: 48%;
        }
        .vehicle-row {
            display: flex;
            margin-bottom: 7px;
        }
        .vehicle-label {
            width: 110px;
            font-size: 13px;
            color: #003c71;
        }
        .vehicle-value {
            width: 240px;
            border-bottom: 1px solid #003c71;
            font-size: 13px;
            color: #222;
            margin-left: 7px;
        }
        table.invoice-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 25px;
        }
        table.invoice-table th, table.invoice-table td {
            border: 1px solid #003c71;
            font-size: 13px;
            padding: 5px;
            color: #222;
            height: 25px;
        }
        table.invoice-table th {
            background: #f5f8fa;
            color: #003c71;
            font-weight: bold;
        }
		/* Borderless helper: remove all borders and header fill on marked tables */
		.borderless,
		.borderless th,
		.borderless td,
		.table-produits.borderless,
		.table-produits.borderless th,
		.table-produits.borderless td,
		.simpletable.borderless,
		.simpletable.borderless th,
		.simpletable.borderless td {
			border: none !important;
		}
        .totals-row {
            margin-top: 10px;
            display: flex;
            justify-content: flex-end;
        }
        .totals-table {
            width: 100%;
        }
        .totals-table td {
            font-size: 13px;
            padding: 5px 2px;
        }
        /* One-line totals spanning full width with underlined values */
        .totals-inline {
            width: 100%;
            display: grid;
            grid-template-columns: auto 1fr auto 1fr auto 1fr; /* label/value pairs */
            column-gap: 12px;
            align-items: end;
            margin-top: 10px;
        }
        .total-label { font-size: 13px; color: #003c71; white-space: nowrap; }
        .info-value.total-value {
            width: 100%; /* stretch underline across available space */
            display: inline-block;
            text-align: center;
            border-bottom: 1px solid #003c71; /* ensure underline like info-value */
            margin-left: 7px;
        }
        .total-ttc, .total-ttc-value { font-weight: bold; }
        .signatures {
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
        }
        .signature-box {
            width: 32%;
            border-top: 1px solid #003c71;
            text-align: left;
            font-size: 13px;
            padding-top: 9px;
            color: #003c71;
        }
        .footer {
            margin-top: 32px;
            font-size: 10px;
            color: #222;
            display: flex;
            justify-content: space-between;
        }
        .footer > div {
            width: 32%;
        }

        /* Sticky bottom for screen */
        .bottom-section { margin-top: auto; }

        /* Print behavior: keep signatures/footer at bottom */
        @media print {
            html, body { height: auto; }
			.container { display: block; min-height: auto; width: 100%; margin: 0; padding: 0; }
			/* Ensure tables stretch across printable width */
			table, table.table-produits, table.simpletable { width: 100% !important; }
            .content { padding-bottom: 180px; } /* reserve space for bottom section */
            .bottom-section {
                position: fixed;
                left: 0;
                right: 0;
                bottom: 0;
				width: 100%;
                margin: 0 auto;
                background: #ffffff;
                page-break-inside: avoid; break-inside: avoid;
                page-break-before: avoid; break-before: avoid;
            }
            .signatures, .footer { page-break-inside: avoid; break-inside: avoid; }
            /* Slightly tighter spacing for print */
            .section { margin-top: 20px; }
            .info-row, .vehicle-row { margin-bottom: 5px; }
            table.invoice-table th, table.invoice-table td { padding: 4px; height: 20px; }
        }

	    /* Optional: control printer margins and page size */
	    @page {
	        size: A4 portrait;
	        margin: 10mm;
	    }
</style>

{% endblock %}

{% block body %}
	<div class="container">
		<!-- Header (modern) -->
		<div class="header-section">
			<div class="header-left">
				<div>
					<img src="{{ asset('uploads/magasins/' ~ reparation.getMagasin().photo) }}" height="80px" alt="{{ reparation.getMagasin().titre }} logo">
				</div>
				{{ reparation.getMagasin().titre }} – Ordre de réparation
			</div>
			{% if reparation.getMagasin().network == 'bosch' %}
			<div class="header-right">
				<img src="{{ asset('assets/layouts/layout/img/logo-bosch.png') }}" height="80px" alt="network logo">
			</div>
			{% endif %}
		</div>

		<!-- Info Section (modern) -->
		<div class="section section-flex">
			<div>
				<div class="info-row">
					<span class="info-label">Client:</span>
					<span class="info-value">{{ reparation.getClient.getRaisonSociale() }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">Adresse:</span>
					<span class="info-value">{{ reparation.getClient.getAdresse() }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">Tél.:</span>
					<span class="info-value">{{ reparation.getClient.getTelephone() }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">ICE:</span>
					<span class="info-value">{{ reparation.getClient.getIce() }}</span>
				</div>
			</div>
			<div>
				<div class="info-row">
					<span class="info-label">Date:</span>
					<span class="info-value">{% if reparation.getDateReparation() %}{{ reparation.getDateReparation()|date("d/m/Y") }}{% else %}{{ "now"|date("d/m/Y") }}{% endif %}</span>
				</div>
				<div class="info-row">
					<span class="info-label">N° OR:</span>
					<span class="info-value">{{ reparation.numReparation() }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">Reçu par:</span>
					<span class="info-value">{{ reparation.getUtilisateur() }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">Entrée:</span>
					<span class="info-value">{{ reparation.getDateTimeEntree()|date("d/m/Y H:i") }}</span>
				</div>
				<div class="info-row">
					<span class="info-label">Sortie prévue:</span>
					<span class="info-value">{{ reparation.getDateTimePrevueSortie()|date("d/m/Y H:i") }}</span>
				</div>
			</div>
		</div>

		<!-- Vehicle Section (modern) -->
		{% if reparation.getVehicule %}
		<div class="vehicle-flex">
			<div>
				<div class="vehicle-row">
					<span class="vehicle-label">Marque:</span>
					<span class="vehicle-value">{{ reparation.getVehicule.getMarque() }}</span>
				</div>
				<div class="vehicle-row">
					<span class="vehicle-label">OR:</span>
					<span class="vehicle-value">{{ reparation.numReparation() }}</span>
				</div>
				<div class="vehicle-row">
					<span class="vehicle-label">N° Chassis:</span>
					<span class="vehicle-value">{{ reparation.getVehicule.getNumChassis() }}</span>
				</div>
			</div>
			<div>
				<div class="vehicle-row">
					<span class="vehicle-label">Modèle:</span>
					<span class="vehicle-value">{{ reparation.getVehicule.getModele() }}</span>
				</div>
				<div class="vehicle-row">
					<span class="vehicle-label">N° Immatriculation:</span>
					<span class="vehicle-value">{{ reparation.getVehicule.getImmatriculation() }}</span>
				</div>
				<div class="vehicle-row">
					<span class="vehicle-label">Kilomètrage:</span>
					<span class="vehicle-value">{{ reparation.getKilometrage() }}</span>
				</div>
			</div>
		</div>
		{% endif %}

		<br>
		
		<table class="table-produits" style="text-align:left;">
			<tr>
				<th scope="col">Demande du client:</th>
			</tr>
			<tr>
				<td>
					<div style="min-height:150px">{{ reparation.getDemandeClient()|nl2br|raw }}</div>
				</td>
			</tr>
			<tr>
				<th scope="col">Observations:</th>
			</tr>
			<tr>
				<td>
					<div style="min-height:50px">{{ reparation.getObservations()|nl2br|raw }}</div>
				</td>
			</tr>
		</table>

		<br>

		<table class="table-produits borderless" style="text-align:left;" role="presentation">
			<tr>
				<td style="font-size:10px;">
					Montant approximatif des réparations: {{ reparation.getMontantApproximatif() }} Dhs<br>
					Mode de règlement: <i class="fa fa-square-o"></i> Chèque <i class="fa fa-square-o"></i> Espèce <i class="fa fa-square-o"></i> En compte
					<table class="simpletable borderless" style="text-align:center;font-size:10px;" role="presentation">
						<tr>
							<td style="width:30%">Etat du véhicule
								<table class="simpletable" style="text-align:center;font-size:10px;">
									<tr><th scope="col">Etat</th><th scope="col">Code</th></tr>
									<tr><td>Choc</td><td>B</td></tr>
									<tr><td>Claquement</td><td>C</td></tr>
									<tr><td>Bosse</td><td>D</td></tr>
									<tr><td>Fuite</td><td>L</td></tr>
									<tr><td>Corrossion</td><td>R</td></tr>
									<tr><td>Rayures</td><td>S</td></tr>
									<tr><td>Eclat de pierre</td><td>T</td></tr>
								</table>
							</td>
							<td>
								<img src="{{ asset('assets/global/img/car-drawing.png') }}" height="100px" alt="Schéma véhicule">
							</td>
						</tr>
					</table>
				</td>
				<td style="width:25%">
					<table class="simpletable" style="text-align:center;font-size:10px;border:none;">
						<tr><th scope="col"></th><th scope="col" style="width:20px">Oui</th><th scope="col" style="width:20px">Non</th></tr>
						<tr><td>Carte grise</td><td></td><td></td></tr>
						<tr><td>Outils</td><td></td><td></td></tr>
						<tr><td>Roue de secours</td><td></td><td></td></tr>
						<tr><td>Antenne</td><td></td><td></td></tr>
						<tr><td>Façade radio</td><td></td><td></td></tr>
						<tr><td>Chargeur CD</td><td></td><td></td></tr>
						<tr><td>Livret de bord</td><td></td><td></td></tr>
						<tr><td>Restitution pieces</td><td></td><td></td></tr>
					</table>
				</td>
				<td style="width:25%">
					<table class="simpletable height35" style="text-align:center;font-size:10px;border:none;">
						<tr><th scope="col">Signature du conseiller service</th></tr>
						<tr><td></td></tr>
						<tr><th scope="col">Signature du client</th></tr>
						<tr><td></td></tr>
						<tr><th scope="col">Signature client après reparation</th></tr>
						<tr><td></td></tr>
					</table>
				</td>
			</tr>
		</table>

		
		
		
	</div>

	<div class="page-break"></div>

	<div class="container" style="text-align:center;">
		
		<div style='border:1px solid #003c71;padding:5px 10px;text-align:center;margin-top:5px;'>
			<h1>FICHE SUIVI REPARATIONS</h1>
		</div>

		<div style="text-align:right;margin-top:10px;">Ordre de réparation: {{ reparation.numReparation() }}</div>

		<h3>INTERVENTIONS MAIN D'OEUVRE</h3>

		<table class="simpletable">
			<tr>
				<th scope="col" style="width:60%">Opérations</th>
				<th scope="col" style="width:20%">Nom opérateur</th>
				<th scope="col" style="width:20%">Date d'opération</th>
			</tr>

			{% for i in 0..20 %}
			<tr>
				<td></td><td></td><td></td>
			</tr>
			{% endfor %}
		</table>

		<h3>TRAVAUX EXTERIEURS</h3>

		<table class="simpletable">
			<tr>
				<th scope="col" style="width:20%">N° commande</th>
				<th scope="col" style="width:10%">N° BL</th>
				<th scope="col" style="width:50%">Désignation</th>
				<th scope="col" style="width:20%">Montant</th>
			</tr>

			{% for i in 0..10 %}
			<tr>
				<td></td><td></td><td></td><td></td>
			</tr>
			{% endfor %}
		</table>
		
	</div>
{% endblock %}