|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Facture Pièces Auto Pro</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
background-color: #f8fafc; |
|
|
} |
|
|
|
|
|
.invoice-container { |
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
background: white; |
|
|
} |
|
|
|
|
|
.header-gradient { |
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); |
|
|
} |
|
|
|
|
|
.payment-card { |
|
|
background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); |
|
|
border-radius: 10px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
border: 1px solid #e5e7eb; |
|
|
} |
|
|
|
|
|
.item-row:hover { |
|
|
background-color: #f9fafb; |
|
|
} |
|
|
|
|
|
.total-section { |
|
|
border-top: 2px dashed #e5e7eb; |
|
|
border-bottom: 2px dashed #e5e7eb; |
|
|
} |
|
|
|
|
|
.btn-primary { |
|
|
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1); |
|
|
} |
|
|
|
|
|
.btn-primary:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 12px rgba(37, 99, 235, 0.15); |
|
|
} |
|
|
|
|
|
.btn-secondary { |
|
|
background: white; |
|
|
border: 1px solid #e5e7eb; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-secondary:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
border-color: #d1d5db; |
|
|
} |
|
|
|
|
|
.edit-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.edit-icon:hover { |
|
|
color: #2563eb; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.signature-stamp { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.stamp { |
|
|
position: absolute; |
|
|
width: 120px; |
|
|
height: 120px; |
|
|
border: 4px solid #b91c1c; |
|
|
border-radius: 50%; |
|
|
opacity: 0.9; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: #b91c1c; |
|
|
font-weight: bold; |
|
|
font-size: 14px; |
|
|
transform: rotate(15deg); |
|
|
right: -20px; |
|
|
top: -20px; |
|
|
background-color: rgba(255, 255, 255, 0.95); |
|
|
pointer-events: none; |
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.stamp:before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 5px; |
|
|
left: 5px; |
|
|
right: 5px; |
|
|
bottom: 5px; |
|
|
border: 2px dashed #b91c1c; |
|
|
border-radius: 50%; |
|
|
opacity: 0.7; |
|
|
} |
|
|
|
|
|
.mask-card-number { |
|
|
font-family: monospace; |
|
|
letter-spacing: 1px; |
|
|
font-size: 16px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.invoice-paper { |
|
|
background: white; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.watermark { |
|
|
position: absolute; |
|
|
opacity: 0.03; |
|
|
font-size: 120px; |
|
|
font-weight: bold; |
|
|
color: #1e40af; |
|
|
transform: rotate(-30deg); |
|
|
top: 40%; |
|
|
left: 20%; |
|
|
z-index: 0; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.form-control { |
|
|
border: 1px solid #e5e7eb; |
|
|
border-radius: 8px; |
|
|
padding: 0.5rem 0.75rem; |
|
|
transition: border-color 0.3s; |
|
|
} |
|
|
|
|
|
.form-control:focus { |
|
|
outline: none; |
|
|
border-color: #2563eb; |
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); |
|
|
} |
|
|
|
|
|
.toggle-switch { |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
width: 50px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
.toggle-switch input { |
|
|
opacity: 0; |
|
|
width: 0; |
|
|
height: 0; |
|
|
} |
|
|
|
|
|
.toggle-slider { |
|
|
position: absolute; |
|
|
cursor: pointer; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: #e5e7eb; |
|
|
transition: .4s; |
|
|
border-radius: 24px; |
|
|
} |
|
|
|
|
|
.toggle-slider:before { |
|
|
position: absolute; |
|
|
content: ""; |
|
|
height: 16px; |
|
|
width: 16px; |
|
|
left: 4px; |
|
|
bottom: 4px; |
|
|
background-color: white; |
|
|
transition: .4s; |
|
|
border-radius: 50%; |
|
|
} |
|
|
|
|
|
input:checked + .toggle-slider { |
|
|
background-color: #1e40af; |
|
|
} |
|
|
|
|
|
input:checked + .toggle-slider:before { |
|
|
transform: translateX(26px); |
|
|
} |
|
|
|
|
|
|
|
|
.pdf-hide { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.pdf-content { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.signature-preview { |
|
|
max-height: 80px; |
|
|
max-width: 200px; |
|
|
border: 1px dashed #d1d5db; |
|
|
margin-top: 10px; |
|
|
} |
|
|
|
|
|
.signature-upload { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.card-logo { |
|
|
height: 30px; |
|
|
margin-right: 10px; |
|
|
} |
|
|
|
|
|
.billing-mode-tabs { |
|
|
display: flex; |
|
|
border-bottom: 1px solid #e5e7eb; |
|
|
margin-bottom: 1rem; |
|
|
} |
|
|
|
|
|
.billing-mode-tab { |
|
|
padding: 0.5rem 1rem; |
|
|
cursor: pointer; |
|
|
border-bottom: 2px solid transparent; |
|
|
} |
|
|
|
|
|
.billing-mode-tab.active { |
|
|
border-bottom-color: #1e40af; |
|
|
color: #1e40af; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.billing-mode-content { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.billing-mode-content.active { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
@media print { |
|
|
.no-print, .pdf-hide { |
|
|
display: none !important; |
|
|
} |
|
|
|
|
|
body, .invoice-container { |
|
|
background: white; |
|
|
box-shadow: none; |
|
|
} |
|
|
|
|
|
.watermark { |
|
|
display: none; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 py-10 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="max-w-5xl mx-auto"> |
|
|
|
|
|
<div class="flex justify-between items-center mb-8 no-print"> |
|
|
<div> |
|
|
<h1 class="text-3xl font-bold text-gray-800">Facturation AutoPro</h1> |
|
|
<p class="text-gray-600">Générateur de factures professionnelles</p> |
|
|
</div> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="printBtn" class="btn-secondary px-4 py-2 rounded-lg font-medium flex items-center"> |
|
|
<i class="fas fa-print mr-2"></i> Imprimer |
|
|
</button> |
|
|
<button id="pdfBtn" class="btn-primary px-4 py-2 rounded-lg text-white font-medium flex items-center"> |
|
|
<i class="fas fa-file-pdf mr-2"></i> Générer PDF |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-sm mb-6 no-print"> |
|
|
<h3 class="font-bold text-lg text-gray-800 mb-4">Paramètres de la facture</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Numéro de facture</label> |
|
|
<input type="text" id="customInvoiceNumber" class="form-control w-full" value="AUTO2023-001"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Date de facture</label> |
|
|
<input type="date" id="customInvoiceDate" class="form-control w-full"> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<label class="block text-gray-700 text-sm font-medium mr-4">Cachet de signature</label> |
|
|
<label class="toggle-switch"> |
|
|
<input type="checkbox" id="stampToggle" checked> |
|
|
<span class="toggle-slider"></span> |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="invoice-container bg-white mb-8" id="invoice"> |
|
|
<div class="invoice-paper"> |
|
|
|
|
|
<div class="watermark pdf-hide">FACTURE</div> |
|
|
|
|
|
|
|
|
<div class="header-gradient px-10 py-8 text-white"> |
|
|
<div class="flex justify-between items-start"> |
|
|
<div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNhciI+PHBhdGggZD0iTTE0IDE2SDlhMiAyIDAgMCAxLTItMnYtM2EyIDIgMCAwIDEgMi0yaDl2NGEyIDIgMCAwIDEtMiAyWiIvPjxwYXRoIGQ9Ik0xOSAxNmgxYTIgMiAwIDAgMCAyLTJ2LTNhMiAyIDAgMCAwLTItMmgxWiIvPjxwYXRoIGQ9Ik0zIDloMTJ2N0gzeiIvPjxwYXRoIGQ9Im05IDkgMiAyIi8+PC9zdmc+" |
|
|
alt="Logo" class="h-10 w-10 mr-3 pdf-hide"> |
|
|
<div> |
|
|
<h2 class="text-3xl font-bold">FACTURE</h2> |
|
|
<p class="text-blue-100 text-sm">Pièces automobiles professionnelles</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-blue-100">N° <span id="invoiceNumber">AUTO2023-<span id="invoiceCounter">001</span></span></p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="font-medium">Date: <span id="invoiceDate">10/07/2023</span></p> |
|
|
<p class="text-blue-100">Échéance: <span id="dueDate">17/07/2023</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 px-10 py-8 border-b"> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-3 pdf-hide"> |
|
|
<h3 class="font-bold text-gray-700 text-lg">Vendeur</h3> |
|
|
<select id="sellerSelect" class="form-control text-sm"> |
|
|
<option value="1">AutoPro Paris</option> |
|
|
<option value="2">MécaDiscount Lyon</option> |
|
|
<option value="3">Pièces Auto Marseille</option> |
|
|
<option value="4">Personnalisé...</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="sellerInfo"> |
|
|
<p class="font-bold text-gray-800 text-lg" id="sellerName">AutoPro Paris</p> |
|
|
<p class="text-gray-600" id="sellerAddress">25 Avenue des Champs-Élysées, 75008 Paris</p> |
|
|
<p class="text-gray-600" id="sellerContact">Tél: 01 45 78 92 10 | SIRET: 123 456 789 00015</p> |
|
|
<p class="text-gray-600" id="sellerEmail">contact@autopro-paris.fr</p> |
|
|
<p class="text-gray-600 mt-2" id="sellerDirector">Directeur: M. Jean DUPONT</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="sellerEditForm" class="hidden mt-4 bg-gray-50 p-4 rounded-lg pdf-hide"> |
|
|
<div class="grid grid-cols-1 gap-3"> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Nom de l'entreprise</label> |
|
|
<input type="text" id="editSellerName" class="form-control w-full" value="AutoPro Paris"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Adresse</label> |
|
|
<input type="text" id="editSellerAddress" class="form-control w-full" value="25 Avenue des Champs-Élysées, 75008 Paris"> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-3"> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Téléphone</label> |
|
|
<input type="text" id="editSellerPhone" class="form-control w-full" value="01 45 78 92 10"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">SIRET</label> |
|
|
<input type="text" id="editSellerSiret" class="form-control w-full" value="123 456 789 00015"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Email</label> |
|
|
<input type="email" id="editSellerEmail" class="form-control w-full" value="contact@autopro-paris.fr"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Directeur</label> |
|
|
<input type="text" id="editSellerDirector" class="form-control w-full" value="M. Jean DUPONT"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Texte cachet</label> |
|
|
<input type="text" id="editStampText" class="form-control w-full" value="LE DIRECTEUR"> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-2 mt-2"> |
|
|
<button id="cancelSellerEdit" class="btn-secondary px-3 py-1 rounded-lg text-sm">Annuler</button> |
|
|
<button id="saveSellerEdit" class="btn-primary px-3 py-1 rounded-lg text-white text-sm">Enregistrer</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-3 pdf-hide"> |
|
|
<h3 class="font-bold text-gray-700 text-lg">Client</h3> |
|
|
<button id="editClientBtn" class="text-gray-500 hover:text-blue-500 edit-icon"> |
|
|
<i class="fas fa-edit"></i> Modifier |
|
|
</button> |
|
|
</div> |
|
|
<div id="clientInfo"> |
|
|
<div class="font-bold text-gray-800 text-lg" id="clientName">M. Pierre MARTIN</div> |
|
|
<div class="text-gray-600" id="clientAddress">12 Rue de la République, 69001 Lyon</div> |
|
|
<div class="text-gray-600" id="clientContact">Tél: 06 12 34 56 78</div> |
|
|
<div class="text-gray-600" id="clientEmail">pierre.martin@example.com</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="clientEditForm" class="hidden mt-4 bg-gray-50 p-4 rounded-lg pdf-hide"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-3"> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Civilité</label> |
|
|
<select id="editClientTitle" class="form-control w-full"> |
|
|
<option value="M.">M.</option> |
|
|
<option value="Mme">Mme</option> |
|
|
<option value="Mlle">Mlle</option> |
|
|
<option value="Société">Société</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Nom</label> |
|
|
<input type="text" id="editClientLastName" class="form-control w-full" value="MARTIN"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Prénom</label> |
|
|
<input type="text" id="editClientFirstName" class="form-control w-full" value="Pierre"> |
|
|
</div> |
|
|
<div class="mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Téléphone</label> |
|
|
<input type="text" id="editClientPhone" class="form-control w-full" value="06 12 34 56 78"> |
|
|
</div> |
|
|
<div class="col-span-2 mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Adresse</label> |
|
|
<input type="text" id="editClientAddress" class="form-control w-full" value="12 Rue de la République, 69001 Lyon"> |
|
|
</div> |
|
|
<div class="col-span-2 mb-3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-1">Email</label> |
|
|
<input type="email" id="editClientEmail" class="form-control w-full" value="pierre.martin@example.com"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end space-x-2 mt-2"> |
|
|
<button id="cancelClientEdit" class="btn-secondary px-3 py-1 rounded-lg text-sm">Annuler</button> |
|
|
<button id="saveClientEdit" class="btn-primary px-3 py-1 rounded-lg text-white text-sm">Enregistrer</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="px-10 py-6 border-b pdf-hide"> |
|
|
<h3 class="font-bold text-gray-700 text-lg mb-4">Méthode de paiement</h3> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<div class="payment-card p-5"> |
|
|
<div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> |
|
|
<div class="mb-3 md:mb-0"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Type de carte</label> |
|
|
<div class="flex items-center"> |
|
|
<img id="cardLogo" src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" class="card-logo"> |
|
|
<select id="cardType" class="form-control"> |
|
|
<option value="VISA">VISA</option> |
|
|
<option value="Mastercard">Mastercard</option> |
|
|
<option value="CB">Carte Bleue</option> |
|
|
<option value="American Express">American Express</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-full md:w-2/3"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Numéro de carte</label> |
|
|
<input type="text" id="cardNumber" class="form-control w-full mask-card-number" |
|
|
placeholder="1234 5678 9012 3456" maxlength="19" value="1234 5678 9012 3456"> |
|
|
<p class="text-sm text-gray-500 mt-1">Paiement par Carte Bancaire: <span id="cardDisplay">1234 56XX XXXX 3456</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="px-10 py-6"> |
|
|
<h3 class="font-bold text-gray-700 text-lg mb-6">Détails de la facture</h3> |
|
|
|
|
|
|
|
|
<div class="billing-mode-tabs pdf-hide"> |
|
|
<div class="billing-mode-tab active" data-tab="manual">Mode Manuel</div> |
|
|
<div class="billing-mode-tab" data-tab="auto">Mode Automatique</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="manualBillingMode" class="billing-mode-content active"> |
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full"> |
|
|
<thead> |
|
|
<tr class="text-left border-b text-gray-600"> |
|
|
<th class="pb-3 font-medium">Désignation</th> |
|
|
<th class="pb-3 font-medium text-right">Qté</th> |
|
|
<th class="pb-3 font-medium text-right">P.U. HT</th> |
|
|
<th class="pb-3 font-medium text-right">TVA</th> |
|
|
<th class="pb-3 font-medium text-right">Total HT</th> |
|
|
<th class="pb-3 font-medium text-right pdf-hide"></th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="invoiceItems"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 pdf-hide"> |
|
|
<button id="addItemBtn" class="btn-secondary px-4 py-2 rounded-lg font-medium flex items-center"> |
|
|
<i class="fas fa-plus mr-2"></i> Ajouter une pièce |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="addItemForm" class="hidden mt-6 bg-gray-50 p-5 rounded-lg pdf-hide"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5"> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Pièce automobile</label> |
|
|
<select id="itemPreset" class="form-control w-full"> |
|
|
<option value="">Sélectionner une pièce</option> |
|
|
<option value="Plaquettes de frein avant">Plaquettes de frein avant</option> |
|
|
<option value="Plaquettes de frein arrière">Plaquettes de frein arrière</option> |
|
|
<option value="Disques de frein">Disques de frein</option> |
|
|
<option value="Kit courroie distribution">Kit courroie distribution</option> |
|
|
<option value="Filtre à air">Filtre à air</option> |
|
|
<option value="Filtre à huile">Filtre à huile</option> |
|
|
<option value="Filtre habitacle">Filtre habitacle</option> |
|
|
<option value="Batterie">Batterie</option> |
|
|
<option value="Ampoule phare">Ampoule phare</option> |
|
|
<option value="Pneu">Pneu</option> |
|
|
<option value="Rétroviseur">Rétroviseur</option> |
|
|
<option value="Essuie-glace">Essuie-glace</option> |
|
|
<option value="custom">Personnalisé...</option> |
|
|
</select> |
|
|
</div> |
|
|
<div id="customItemContainer" class="hidden"> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Désignation personnalisée</label> |
|
|
<input type="text" id="itemCustomDesignation" class="form-control w-full" placeholder="Description de la pièce"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Modèle véhicule</label> |
|
|
<input type="text" id="itemVehicle" class="form-control w-full" placeholder="Ex: Peugeot 308"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Référence</label> |
|
|
<input type="text" id="itemReference" class="form-control w-full" placeholder="Ex: PB308-FA"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-5 mt-4"> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Quantité</label> |
|
|
<input type="number" id="itemQuantity" class="form-control w-full" value="1" min="1"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Prix unitaire HT</label> |
|
|
<input type="number" id="itemPrice" class="form-control w-full" placeholder="0,00" step="0.01" min="0"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">TVA</label> |
|
|
<select id="itemVat" class="form-control w-full"> |
|
|
<option value="20">20%</option> |
|
|
<option value="10">10%</option> |
|
|
<option value="5.5">5,5%</option> |
|
|
<option value="0">0%</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-end"> |
|
|
<button id="cancelAddItem" class="btn-secondary px-3 py-2 rounded-lg mr-2 w-full">Annuler</button> |
|
|
<button id="confirmAddItem" class="btn-primary px-3 py-2 rounded-lg text-white w-full">Ajouter</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="autoBillingMode" class="billing-mode-content pdf-hide"> |
|
|
<div class="bg-gray-50 p-5 rounded-lg"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-5"> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Total TTC</label> |
|
|
<input type="number" id="autoTotalTTC" class="form-control w-full" placeholder="0,00" step="0.01" min="0"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 text-sm font-medium mb-2">Nombre de lignes</label> |
|
|
<select id="autoLineCount" class="form-control w-full"> |
|
|
<option value="1">1 ligne</option> |
|
|
<option value="2">2 lignes</option> |
|
|
<option value="3" selected>3 lignes</option> |
|
|
<option value="4">4 lignes</option> |
|
|
<option value="5">5 lignes</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<button id="generateAutoItems" class="btn-primary px-4 py-2 rounded-lg text-white font-medium w-full"> |
|
|
Générer les lignes de facturation |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="px-10 py-8 total-section"> |
|
|
<div class="flex justify-end"> |
|
|
<div class="w-full md:w-1/2"> |
|
|
<div class="grid grid-cols-2 gap-3 text-gray-700"> |
|
|
<div class="text-right">Total HT:</div> |
|
|
|
|
|
</html> |
