templates/upload/review.html.twig line 1

Open in your IDE?
  1. {# templates/upload/review.html.twig #}
  2. {% extends 'admin/baseAdmin.html.twig' %}
  4. {% block title %}Validation IA - Relecture & Correction{% endblock %}
  6. {% block stylesheets %}
  7.     {{ parent() }}
  8.     <style>
  9.         :root {
  10.             --ai-primary: linear-gradient(135deg, #1e40af, #3b82f6);
  11.             --ai-success: linear-gradient(135deg, #10b981, #34d399);
  12.             --ai-warning: linear-gradient(135deg, #f59e0b, #fbbf24);
  13.             --ai-danger: linear-gradient(135deg, #dc2626, #ef4444);
  14.             --ai-info: linear-gradient(135deg, #0ea5e9, #38bdf8);
  15.             --ai-processing: linear-gradient(135deg, #8b5cf6, #a78bfa);
  16.         }
  17.         
  18.         .review-container {
  19.             background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  20.             min-height: 100vh;
  21.         }
  22.         
  23.         .header-gradient {
  24.             background: var(--ai-primary);
  25.             color: white;
  26.             border-radius: 20px;
  27.             padding: 2rem 2.5rem;
  28.             margin-bottom: 2rem;
  29.             position: relative;
  30.             overflow: hidden;
  31.         }
  32.         
  33.         .header-gradient::before {
  34.             content: '';
  35.             position: absolute;
  36.             top: -50%;
  37.             right: -20%;
  38.             width: 300px;
  39.             height: 300px;
  40.             background: rgba(255, 255, 255, 0.1);
  41.             border-radius: 50%;
  42.             filter: blur(40px);
  43.         }
  44.         
  45.         .ai-badge {
  46.             background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  47.             color: white;
  48.             padding: 0.5rem 1rem;
  49.             border-radius: 50px;
  50.             font-weight: 700;
  51.             font-size: 0.85rem;
  52.             display: inline-flex;
  53.             align-items: center;
  54.             gap: 0.5rem;
  55.         }
  56.         
  57.         .card-ai {
  58.             border: none;
  59.             border-radius: 20px;
  60.             box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
  61.             background: white;
  62.             overflow: hidden;
  63.             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  64.         }
  65.         
  66.         .card-ai:hover {
  67.             transform: translateY(-5px);
  68.             box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
  69.         }
  70.         
  71.         .card-header-ai {
  72.             background: var(--ai-primary);
  73.             color: white;
  74.             border: none;
  75.             padding: 1.5rem 2rem;
  76.             border-radius: 20px 20px 0 0 !important;
  77.         }
  78.         
  79.         .card-header-secondary {
  80.             background: linear-gradient(135deg, #374151, #4b5563);
  81.             color: white;
  82.             border: none;
  83.             padding: 1.5rem 2rem;
  84.             border-radius: 20px 20px 0 0 !important;
  85.         }
  86.         
  87.         .stat-card-ai {
  88.             background: white;
  89.             border-radius: 16px;
  90.             padding: 1.5rem;
  91.             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  92.             border-left: 5px solid;
  93.             height: 100%;
  94.             position: relative;
  95.             overflow: hidden;
  96.         }
  97.         
  98.         .stat-card-ai::before {
  99.             content: '';
  100.             position: absolute;
  101.             top: 0;
  102.             left: 0;
  103.             right: 0;
  104.             height: 3px;
  105.             background: inherit;
  106.             opacity: 0.3;
  107.         }
  108.         
  109.         .stat-card-ai.primary { border-left-color: #3b82f6; }
  110.         .stat-card-ai.success { border-left-color: #10b981; }
  111.         .stat-card-ai.warning { border-left-color: #f59e0b; }
  112.         .stat-card-ai.info { border-left-color: #0ea5e9; }
  113.         
  114.         .stat-number-ai {
  115.             font-size: 2.5rem;
  116.             font-weight: 900;
  117.             line-height: 1;
  118.             margin-bottom: 0.5rem;
  119.         }
  120.         
  121.         .stat-number-ai.primary { color: #3b82f6; }
  122.         .stat-number-ai.success { color: #10b981; }
  123.         .stat-number-ai.warning { color: #f59e0b; }
  124.         .stat-number-ai.info { color: #0ea5e9; }
  125.         
  126.         .stat-icon-ai {
  127.             position: absolute;
  128.             right: 1.5rem;
  129.             top: 1.5rem;
  130.             font-size: 2rem;
  131.             opacity: 0.2;
  132.         }
  133.         
  134.         .document-preview-container-ai {
  135.             border: 3px solid white;
  136.             border-radius: 16px;
  137.             overflow: hidden;
  138.             background: white;
  139.             height: 280px;
  140.             display: flex;
  141.             align-items: center;
  142.             justify-content: center;
  143.             cursor: pointer;
  144.             transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  145.             box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
  146.             position: relative;
  147.         }
  148.         
  149.         .document-preview-container-ai:hover {
  150.             transform: translateY(-8px) scale(1.02);
  151.             box-shadow: 0 25px 50px -12px rgba(59, 130, 246, 0.25);
  152.             border-color: #3b82f6;
  153.         }
  154.         
  155.         .document-preview-container-ai:hover::after {
  156.             content: '🔍 Cliquez pour agrandir';
  157.             position: absolute;
  158.             bottom: 0;
  159.             left: 0;
  160.             right: 0;
  161.             background: rgba(59, 130, 246, 0.9);
  162.             color: white;
  163.             text-align: center;
  164.             padding: 0.5rem;
  165.             font-size: 0.85rem;
  166.             font-weight: 600;
  167.         }
  168.         
  169.         .document-preview-ai {
  170.             max-height: 100%;
  171.             max-width: 100%;
  172.             object-fit: contain;
  173.             transition: transform 0.4s ease;
  174.         }
  175.         
  176.         .document-preview-container-ai:hover .document-preview-ai {
  177.             transform: scale(1.05);
  178.         }
  179.         
  180.         .pdf-icon-ai {
  181.             font-size: 5rem;
  182.             color: #dc2626;
  183.             filter: drop-shadow(0 10px 15px rgba(220, 38, 38, 0.2));
  184.             transition: all 0.4s ease;
  185.         }
  186.         
  187.         .document-preview-container-ai:hover .pdf-icon-ai {
  188.             transform: rotate(-5deg) scale(1.1);
  189.             filter: drop-shadow(0 15px 25px rgba(220, 38, 38, 0.3));
  190.         }
  191.         
  192.         .ai-process-steps {
  193.             background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  194.             border-radius: 16px;
  195.             padding: 2rem;
  196.             border-left: 5px solid #0ea5e9;
  197.             position: relative;
  198.             overflow: hidden;
  199.         }
  200.         
  201.         .ai-process-steps::before {
  202.             content: 'IA';
  203.             position: absolute;
  204.             top: 1rem;
  205.             right: 1rem;
  206.             font-size: 3rem;
  207.             font-weight: 900;
  208.             color: rgba(14, 165, 233, 0.1);
  209.         }
  210.         
  211.         .process-step {
  212.             display: flex;
  213.             align-items: flex-start;
  214.             gap: 1rem;
  215.             margin-bottom: 1.5rem;
  216.             padding: 1rem;
  217.             background: white;
  218.             border-radius: 12px;
  219.             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  220.             transition: transform 0.2s ease;
  221.         }
  222.         
  223.         .process-step:hover {
  224.             transform: translateX(5px);
  225.         }
  226.         
  227.         .step-number {
  228.             width: 36px;
  229.             height: 36px;
  230.             background: var(--ai-primary);
  231.             color: white;
  232.             border-radius: 50%;
  233.             display: flex;
  234.             align-items: center;
  235.             justify-content: center;
  236.             font-weight: 900;
  237.             flex-shrink: 0;
  238.         }
  239.         
  240.         .table-container-ai {
  241.             border-radius: 16px;
  242.             overflow: hidden;
  243.             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
  244.         }
  245.         
  246.         .table-header-ai {
  247.             background: linear-gradient(135deg, #374151, #4b5563);
  248.             color: white;
  249.             border: none;
  250.             position: sticky;
  251.             top: 0;
  252.             z-index: 10;
  253.         }
  254.         
  255.         .table-header-ai th {
  256.             border: none;
  257.             font-weight: 700;
  258.             padding: 1.25rem 1rem;
  259.             text-transform: uppercase;
  260.             letter-spacing: 0.5px;
  261.             font-size: 0.85rem;
  262.         }
  263.         
  264.         .table-subheader-ai {
  265.             background: #f3f4f6;
  266.             border-bottom: 2px solid #e5e7eb;
  267.         }
  268.         
  269.         .table-subheader-ai th {
  270.             font-size: 0.8rem;
  271.             color: #6b7280;
  272.             font-weight: 600;
  273.             padding: 0.75rem 1rem;
  274.         }
  275.         
  276.         .table-row-ai {
  277.             background: white;
  278.             border-bottom: 1px solid #f3f4f6;
  279.             transition: all 0.2s ease;
  280.         }
  281.         
  282.         .table-row-ai:hover {
  283.             background: #f9fafb;
  284.             transform: translateY(-1px);
  285.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  286.             z-index: 1;
  287.             position: relative;
  288.         }
  289.         
  290.         .table-cell-ai {
  291.             padding: 1rem;
  292.             vertical-align: middle;
  293.             border: none;
  294.         }
  295.         
  296.         .form-control-ai {
  297.             border: 2px solid #e5e7eb;
  298.             border-radius: 12px;
  299.             padding: 0.75rem 1rem;
  300.             font-size: 0.95rem;
  301.             transition: all 0.2s ease;
  302.             background: white;
  303.         }
  304.         
  305.         .form-control-ai:focus {
  306.             border-color: #3b82f6;
  307.             box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  308.             transform: translateY(-1px);
  309.         }
  310.         
  311.         .time-cell-ai {
  312.             background: #f8fafc;
  313.             min-width: 100px;
  314.         }
  315.         
  316.         .confidence-indicator {
  317.             display: inline-flex;
  318.             align-items: center;
  319.             gap: 0.5rem;
  320.             padding: 0.4rem 0.8rem;
  321.             border-radius: 50px;
  322.             font-size: 0.8rem;
  323.             font-weight: 700;
  324.         }
  325.         
  326.         .confidence-high { background: #d1fae5; color: #065f46; }
  327.         .confidence-medium { background: #fef3c7; color: #92400e; }
  328.         .confidence-low { background: #fee2e2; color: #991b1b; }
  329.         
  330.         .btn-ai-primary {
  331.             background: var(--ai-primary);
  332.             color: white;
  333.             border: none;
  334.             padding: 0.875rem 2rem;
  335.             border-radius: 12px;
  336.             font-weight: 700;
  337.             display: inline-flex;
  338.             align-items: center;
  339.             gap: 0.75rem;
  340.             transition: all 0.3s ease;
  341.         }
  342.         
  343.         .btn-ai-primary:hover {
  344.             transform: translateY(-2px);
  345.             box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.3);
  346.             color: white;
  347.         }
  348.         
  349.         .btn-ai-success {
  350.             background: var(--ai-success);
  351.             color: white;
  352.             border: none;
  353.             padding: 0.875rem 2rem;
  354.             border-radius: 12px;
  355.             font-weight: 700;
  356.             display: inline-flex;
  357.             align-items: center;
  358.             gap: 0.75rem;
  359.             transition: all 0.3s ease;
  360.         }
  361.         
  362.         .btn-ai-success:hover {
  363.             transform: translateY(-2px);
  364.             box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.3);
  365.             color: white;
  366.         }
  367.         
  368.         .btn-ai-outline {
  369.             border: 2px solid #e5e7eb;
  370.             background: white;
  371.             color: #374151;
  372.             padding: 0.875rem 2rem;
  373.             border-radius: 12px;
  374.             font-weight: 700;
  375.             display: inline-flex;
  376.             align-items: center;
  377.             gap: 0.75rem;
  378.             transition: all 0.3s ease;
  379.         }
  380.         
  381.         .btn-ai-outline:hover {
  382.             border-color: #3b82f6;
  383.             color: #3b82f6;
  384.             transform: translateY(-2px);
  385.             box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  386.         }
  387.         
  388.         .ai-validation-alert {
  389.             background: linear-gradient(135deg, #fef3c7, #fde68a);
  390.             border: none;
  391.             border-left: 5px solid #f59e0b;
  392.             border-radius: 12px;
  393.             padding: 1.5rem;
  394.         }
  395.         
  396.         .extraction-highlight {
  397.             background: linear-gradient(120deg, #dbeafe 0%, #dbeafe 100%);
  398.             animation: highlightPulse 2s ease-in-out infinite;
  399.             border-radius: 8px;
  400.             padding: 2px 4px;
  401.             font-weight: 600;
  402.         }
  403.         
  404.         @keyframes highlightPulse {
  405.             0%, 100% { opacity: 1; }
  406.             50% { opacity: 0.8; }
  407.         }
  408.         
  409.         .modal-fullscreen-ai .modal-content {
  410.             border-radius: 0;
  411.             background: #1f2937;
  412.         }
  413.         
  414.         .modal-header-ai {
  415.             background: #374151;
  416.             border-bottom: 1px solid #4b5563;
  417.         }
  418.         
  419.         .modal-title-ai {
  420.             color: white;
  421.             font-weight: 700;
  422.         }
  423.         
  424.         .ai-correction-tag {
  425.             position: absolute;
  426.             top: -10px;
  427.             right: 20px;
  428.             background: #dc2626;
  429.             color: white;
  430.             padding: 0.5rem 1rem;
  431.             border-radius: 0 0 10px 10px;
  432.             font-size: 0.75rem;
  433.             font-weight: 700;
  434.             z-index: 10;
  435.         }
  436.         
  437.         @media (max-width: 768px) {
  438.             .header-gradient {
  439.                 padding: 1.5rem;
  440.                 border-radius: 16px;
  441.             }
  442.             
  443.             .stat-number-ai {
  444.                 font-size: 2rem;
  445.             }
  446.             
  447.             .document-preview-container-ai {
  448.                 height: 220px;
  449.             }
  450.             
  451.             .table-responsive {
  452.                 font-size: 0.85rem;
  453.             }
  454.         }
  455.     </style>
  456. {% endblock %}
  458. {% block body %}
  459.     <div class="container-fluid py-4 review-container">
  460.         
  461.         <!-- En-tête avec IA en vedette -->
  462.         <div class="header-gradient">
  463.             <div class="row align-items-center">
  464.                 <div class="col-md-8">
  465.                     <div class="d-flex align-items-center gap-3 mb-3">
  466.                         <h1 class="h2 fw-bold mb-0">🔄 Validation IA</h1>
  467.                         <span class="ai-badge">
  468.                             <i class="fas fa-robot"></i>
  469.                             Extraction automatisée
  470.                         </span>
  471.                         {# {% if declaration.extractionConfidence %}
  472.                             <span class="confidence-indicator confidence-{{ declaration.extractionConfidence > 80 ? 'high' : declaration.extractionConfidence > 60 ? 'medium' : 'low' }}">
  473.                                 <i class="fas fa-{{ declaration.extractionConfidence > 80 ? 'chart-line' : declaration.extractionConfidence > 60 ? 'chart-bar' : 'exclamation-triangle' }}"></i>
  474.                                 Fiabilité : {{ declaration.extractionConfidence }}%
  475.                             </span>
  476.                         {% endif %} #}
  477.                     </div>
  478.                     <p class="mb-0 opacity-90 fs-5">Relecture & correction des données extraites automatiquement par notre IA</p>
  479.                 </div>
  480.                 <div class="col-md-4 text-md-end mt-3 mt-md-0">
  481.                     <div class="d-flex flex-column flex-md-row gap-2 justify-content-md-end">
  482.                         <span class="info-badge   bg-opacity-20 text-white d-inline-flex align-items-center">
  483.                             <i class="fas fa-file me-2"></i>
  484.                             {{ batch.originalFilename|length > 25 ? batch.originalFilename[:25] ~ '...' : batch.originalFilename }}
  485.                         </span>
  486.                         <a href="{{ path('upload_list') }}" class="btn btn-light btn-sm px-3">
  487.                             <i class="fas fa-arrow-left me-2"></i>Retour
  488.                         </a>
  489.                     </div>
  490.                 </div>
  491.             </div>
  492.         </div>
  494.         <!-- Cartes statistiques IA -->
  495.         <div class="row mb-5">
  496.             <div class="col-xl-3 col-md-6 mb-4">
  497.                 <div class="stat-card-ai primary">
  498.                     <i class="fas fa-list-ul stat-icon-ai primary"></i>
  499.                     <div class="stat-number-ai primary">{{ ligneCount }}</div>
  500.                     <div class="stat-label text-muted mb-2">Lignes détectées</div>
  501.                     <div class="small text-success">
  502.                         <i class="fas fa-check-circle me-1"></i>
  503.                         {{ declaration.correctLines|default(ligneCount) }} correctes
  504.                     </div>
  505.                 </div>
  506.             </div>
  507.             
  508.             <div class="col-xl-3 col-md-6 mb-4">
  509.                 <div class="stat-card-ai success">
  510.                     <i class="fas fa-table stat-icon-ai success"></i>
  511.                     <div class="stat-number-ai success">{{ declaration.tablesDetected|default('1') }}</div>
  512.                     <div class="stat-label text-muted mb-2">Structures analysées</div>
  513.                     <div class="small text-info">
  514.                         <i class="fas fa-brain me-1"></i>
  515.                         Reconnaissance IA
  516.                     </div>
  517.                 </div>
  518.             </div>
  519.             
  520.             <div class="col-xl-3 col-md-6 mb-4">
  521.                 <div class="stat-card-ai warning">
  522.                     <i class="fas fa-edit stat-icon-ai warning"></i>
  523.                     <div class="stat-number-ai warning">{{ declaration.lignes|length }}</div>
  524.                     <div class="stat-label text-muted mb-2">Lignes à vérifier</div>
  525.                     <div class="small text-warning">
  526.                         <i class="fas fa-clock me-1"></i>
  527.                         {{ declaration.pendingCorrections|default('0') }} corrections
  528.                     </div>
  529.                 </div>
  530.             </div>
  531.             
  532.             <div class="col-xl-3 col-md-6 mb-4">
  533.                 <div class="stat-card-ai info">
  534.                     <i class="fas fa-bolt stat-icon-ai info"></i>
  535.                     <div class="stat-number-ai info">{{ declaration.processingTime|default('15') }}s</div>
  536.                     <div class="stat-label text-muted mb-2">Temps de traitement</div>
  537.                     <div class="small text-primary">
  538.                         <i class="fas fa-rocket me-1"></i>
  539.                         Analyse ultra-rapide
  540.                     </div>
  541.                 </div>
  542.             </div>
  543.         </div>
  545.         <!-- Document et processus IA -->
  546.         <div class="row mb-5">
  547.             <div class="col-lg-5 mb-4">
  548.                 <div class="card-ai h-100">
  549.                     <div class="card-header-ai">
  550.                         <h5 class="mb-0">
  551.                             <i class="fas fa-file-image me-2"></i>
  552.                             Document original
  553.                         </h5>
  554.                     </div>
  555.                     <div class="card-body p-4">
  556.                         <!-- Aperçu interactif -->
  557.                         <div class="document-preview-container-ai mb-4" 
  558.                             data-bs-toggle="modal" 
  559.                             data-bs-target="#documentModal"
  560.                             title="Cliquez pour visualiser en haute résolution">
  561.                             {% if batch.extension in ['jpg','jpeg','png','heic','webp','gif','bmp'] %}
  562.                                 <img src="{{ asset('uploads/' ~ batch.storedFilename) }}" 
  563.                                     class="document-preview-ai"
  564.                                     alt="Document original analysé par IA"
  565.                                     id="documentPreviewAi">
  566.                             {% else %}
  567.                                 <div class="text-center">
  568.                                     <i class="fas fa-file-pdf pdf-icon-ai"></i>
  569.                                     <p class="text-dark mt-3 mb-1 fw-semibold">Document PDF analysé</p>
  570.                                     <small class="text-muted">Cliquez pour explorer</small>
  571.                                 </div>
  572.                             {% endif %}
  573.                         </div>
  574.                         
  575.                         <!-- Métriques du document -->
  576.                         <div class="row g-3">
  577.                             <div class="col-6">
  578.                                 <div class="bg-light rounded p-3 text-center">
  579.                                     <div class="text-muted small mb-1">Format</div>
  580.                                     <div class="fw-bold text-dark">{{ batch.extension|upper }}</div>
  581.                                 </div>
  582.                             </div>
  583.                             <div class="col-6">
  584.                                 <div class="bg-light rounded p-3 text-center">
  585.                                     <div class="text-muted small mb-1">Taille</div>
  586.                                     <div class="fw-bold text-dark">{{ (batch.fileSize / 1024 / 1024)|number_format(2) }} Mo</div>
  587.                                 </div>
  588.                             </div>
  589.                             <div class="col-6">
  590.                                 <div class="bg-light rounded p-3 text-center">
  591.                                     <div class="text-muted small mb-1">Date</div>
  592.                                     <div class="fw-bold text-dark">{{ batch.uploadedAt|date('d/m/Y') }}</div>
  593.                                 </div>
  594.                             </div>
  595.                             <div class="col-6">
  596.                                 <div class="bg-light rounded p-3 text-center">
  597.                                     <div class="text-muted small mb-1">Heure</div>
  598.                                     <div class="fw-bold text-dark">{{ batch.uploadedAt|date('H:i') }}</div>
  599.                                 </div>
  600.                             </div>
  601.                         </div>
  602.                         
  603.                         <!-- Actions document -->
  604.                         <div class="d-flex gap-2 mt-4">
  605.                             <a href="{{ asset('uploads/' ~ batch.storedFilename) }}" 
  606.                             class="btn btn-ai-outline flex-grow-1"
  607.                             target="_blank"
  608.                             download="{{ batch.originalFilename }}">
  609.                                 <i class="fas fa-download"></i>
  610.                                 Télécharger
  611.                             </a>
  612.                             <button type="button" 
  613.                                     class="btn btn-ai-primary"
  614.                                     data-bs-toggle="modal" 
  615.                                     data-bs-target="#documentModal">
  616.                                 <i class="fas fa-expand"></i>
  617.                                 Plein écran
  618.                             </button>
  619.                         </div>
  620.                     </div>
  621.                 </div>
  622.             </div>
  623.             
  624.             <div class="col-lg-7 mb-4">
  625.                 <div class="card-ai h-100">
  626.                     <div class="card-header-ai">
  627.                         <h5 class="mb-0">
  628.                             <i class="fas fa-brain me-2"></i>
  629.                             Processus d'extraction IA
  630.                         </h5>
  631.                     </div>
  632.                     <div class="card-body p-4">
  633.                         <div class="ai-process-steps mb-4">
  634.                             <h6 class="text-dark mb-4 fw-bold">
  635.                                 <i class="fas fa-microchip me-2 text-info"></i>
  636.                                 Comment notre IA a analysé votre document :
  637.                             </h6>
  638.                             
  639.                             <div class="process-step">
  640.                                 <div class="step-number">1</div>
  641.                                 <div>
  642.                                     <h6 class="text-dark mb-1 fw-semibold">OCR Avancé</h6>
  643.                                     <p class="text-muted mb-0 small">Reconnaissance optique des caractères pour extraire le texte des images</p>
  644.                                 </div>
  645.                             </div>
  646.                             
  647.                             <div class="process-step">
  648.                                 <div class="step-number">2</div>
  649.                                 <div>
  650.                                     <h6 class="text-dark mb-1 fw-semibold">Écriture manuscrite</h6>
  651.                                     <p class="text-muted mb-0 small">Reconnaissance intelligente de l'écriture manuscrite avec 95% de précision</p>
  652.                                 </div>
  653.                             </div>
  654.                             
  655.                             <div class="process-step">
  656.                                 <div class="step-number">3</div>
  657.                                 <div>
  658.                                     <h6 class="text-dark mb-1 fw-semibold">Structure des tableaux</h6>
  659.                                     <p class="text-muted mb-0 small">Détection automatique de la structure et des relations entre cellules</p>
  660.                                 </div>
  661.                             </div>
  662.                             
  663.                             <div class="process-step">
  664.                                 <div class="step-number">4</div>
  665.                                 <div>
  666.                                     <h6 class="text-dark mb-1 fw-semibold">Validation intelligente</h6>
  667.                                     <p class="text-muted mb-0 small">Vérification cohérence des données et détection des anomalies</p>
  668.                                 </div>
  669.                             </div>
  670.                         </div>
  671.                         
  672.                         <!-- Indicateur de performance IA -->
  673.                         {# {% if declaration.extractionStats %}
  674.                             <div class="border rounded p-3 mb-3">
  675.                                 <div class="d-flex justify-content-between align-items-center mb-2">
  676.                                     <span class="text-dark fw-semibold">
  677.                                         <i class="fas fa-chart-bar me-2 text-primary"></i>
  678.                                         Performance de l'extraction
  679.                                     </span>
  680.                                     <span class="badge bg-primary">{{ declaration.extractionConfidence|default('85') }}%</span>
  681.                                 </div>
  682.                                 <div class="progress" style="height: 8px;">
  683.                                     <div class="progress-bar bg-primary" style="width: {{ declaration.extractionConfidence|default('85') }}%"></div>
  684.                                 </div>
  685.                                 <div class="d-flex justify-content-between mt-2">
  686.                                     <small class="text-muted">{{ declaration.extractionStats.words|default('0') }} mots détectés</small>
  687.                                     <small class="text-muted">{{ declaration.extractionStats.tables|default('0') }} tableaux analysés</small>
  688.                                 </div>
  689.                             </div>
  690.                         {% endif %} #}
  691.                         
  692.                         <!-- Alerte validation -->
  693.                         <div class="ai-validation-alert">
  694.                             <div class="d-flex">
  695.                                 <div class="flex-shrink-0">
  696.                                     <i class="fas fa-user-check text-warning fa-2x"></i>
  697.                                 </div>
  698.                                 <div class="flex-grow-1 ms-3">
  699.                                     <h6 class="alert-heading fw-bold mb-2">Validation humaine requise</h6>
  700.                                     <p class="mb-0 small">Notre IA a extrait les données avec précision, mais votre expertise est essentielle pour valider et corriger si nécessaire.</p>
  701.                                 </div>
  702.                             </div>
  703.                         </div>
  704.                     </div>
  705.                 </div>
  706.             </div>
  707.         </div>
  709.         <!-- FORMULAIRE PRINCIPAL -->
  710.         <form method="post" action="{{ path('upload_review', {id: batch.id}) }}" id="reviewFormAi" class="position-relative">
  711.             <div class="ai-correction-tag">
  712.                 <i class="fas fa-edit me-1"></i>Mode correction
  713.             </div>
  715.             <!-- Informations conducteur -->
  716.             <div class="card-ai mb-4">
  717.                 <div class="card-header-secondary">
  718.                     <h5 class="mb-0">
  719.                         <i class="fas fa-user-tie me-2"></i>
  720.                         Informations du conducteur
  721.                         <small class="opacity-75 ms-2 fw-normal">(Extraites automatiquement)</small>
  722.                     </h5>
  723.                 </div>
  724.                 <div class="card-body p-4">
  725.                     <div class="row g-3">
  726.                         <div class="col-md-6">
  727.                             <label class="form-label fw-bold text-dark mb-2 d-flex align-items-center">
  728.                                 Nom du conducteur
  729.                                 <span class="extraction-highlight ms-2">IA</span>
  730.                             </label>
  731.                             <input type="text" name="nom_client" class="form-control-ai" 
  732.                                 value="{{ declaration.nomClient }}" 
  733.                                 placeholder="Nom et prénom du conducteur" 
  734.                                 required>
  735.                             <small class="text-muted mt-1 d-block">
  736.                                 <i class="fas fa-robot me-1"></i>
  737.                                 Détecté automatiquement depuis le document
  738.                             </small>
  739.                         </div>
  740.                         <div class="col-md-3">
  741.                             <label class="form-label fw-bold text-dark mb-2">Immatriculation</label>
  742.                             <input type="text" name="immatriculation" class="form-control-ai" 
  743.                                 value="{{ declaration.immatriculation }}"
  744.                                 placeholder="AA-123-BB">
  745.                         </div>
  746.                         <div class="col-md-3">
  747.                             <label class="form-label fw-bold text-dark mb-2">N° licence</label>
  748.                             <input type="text" name="numero_licence" class="form-control-ai" 
  749.                                 value="{{ declaration.numeroLicence }}"
  750.                                 placeholder="N° licence">
  751.                         </div>
  752.                         
  753.                         <div class="col-md-4">
  754.                             <label class="form-label fw-bold text-dark mb-2">Agence</label>
  755.                             <input type="text" name="agence" class="form-control-ai" 
  756.                                 value="{{ declaration.agence }}"
  757.                                 placeholder="Agence rattachée">
  758.                         </div>
  759.                         <div class="col-md-4">
  760.                             <label class="form-label fw-bold text-dark mb-2">Date début</label>
  761.                             <input type="date" name="date_debut" class="form-control-ai" 
  762.                                 value="{{ declaration.dateDebut ? declaration.dateDebut|date('Y-m-d') : '' }}">
  763.                         </div>
  764.                         <div class="col-md-4">
  765.                             <label class="form-label fw-bold text-dark mb-2">Date fin</label>
  766.                             <input type="date" name="date_fin" class="form-control-ai" 
  767.                                 value="{{ declaration.dateFin ? declaration.dateFin|date('Y-m-d') : '' }}">
  768.                         </div>
  769.                     </div>
  770.                 </div>
  771.             </div>
  773.             <!-- Tableau des lignes journalières -->
  774.             <div class="card-ai mb-4">
  775.                 <div class="card-header-secondary d-flex justify-content-between align-items-center">
  776.                     <div>
  777.                         <h5 class="mb-0">
  778.                             <i class="fas fa-calendar-alt me-2"></i>
  779.                             Lignes journalières extraites
  780.                             <span class="badge bg-primary ms-2">{{ ligneCount }} lignes</span>
  781.                         </h5>
  782.                         <p class="mb-0 small text-light opacity-75 mt-1">
  783.                             <i class="fas fa-magic me-1"></i>
  784.                             Tableau restructuré automatiquement par l'IA
  785.                         </p>
  786.                     </div>
  787.                     <button type="submit" name="add_line" value="1" class="btn btn-light">
  788.                         <i class="fas fa-plus-circle me-2"></i>
  789.                         Ajouter ligne
  790.                     </button>
  791.                 </div>
  792.                 <div class="card-body p-0">
  793.                     <div class="table-container-ai">
  794.                         <div class="table-responsive">
  795.                             <table class="table table-bordered mb-0">
  796.                                 <thead>
  797.                                     <tr class="table-header-ai">
  798.                                         <th width="130" class="text-center">📅 Date</th>
  799.                                         <th width="160">📍 Départ</th>
  800.                                         <th width="100" class="text-center">🚗 KM départ</th>
  801.                                         <th colspan="2" class="text-center">🌅 Matin</th>
  802.                                         <th colspan="2" class="text-center">☀️ Midi</th>
  803.                                         <th colspan="2" class="text-center">🌙 Soir</th>
  804.                                         <th colspan="2" class="text-center">⏰ Autre</th>
  805.                                         <th width="160">📍 Arrivée</th>
  806.                                         <th width="100" class="text-center">🚗 KM arrivée</th>
  807.                                         <th width="130" class="text-center">➕ Temps annexes</th>
  808.                                         <th width="130" class="text-center">⏱️ Total</th>
  809.                                         <th width="200">💬 Commentaires</th>
  810.                                         <th width="80" class="text-center">⚙️ Actions</th>
  811.                                     </tr>
  812.                                     <tr class="table-subheader-ai">
  813.                                         <th></th><th></th><th></th>
  814.                                         <th class="text-center"><small>Début</small></th>
  815.                                         <th class="text-center"><small>Fin</small></th>
  816.                                         <th class="text-center"><small>Début</small></th>
  817.                                         <th class="text-center"><small>Fin</small></th>
  818.                                         <th class="text-center"><small>Début</small></th>
  819.                                         <th class="text-center"><small>Fin</small></th>
  820.                                         <th class="text-center"><small>Début</small></th>
  821.                                         <th class="text-center"><small>Fin</small></th>
  822.                                         <th></th><th></th><th></th><th></th><th></th>
  823.                                     </tr>
  824.                                 </thead>
  825.                                 <tbody>
  826.                                     {% for ligne in declaration.lignes %}
  827.                                     <tr class="table-row-ai">
  828.                                         <td class="table-cell-ai">
  829.                                             <input type="date" name="lignes[{{ loop.index0 }}][date]" 
  830.                                                 class="form-control-ai" 
  831.                                                 value="{{ ligne.dateJour|date('Y-m-d') }}" 
  832.                                                 required>
  833.                                         </td>
  834.                                         <td class="table-cell-ai">
  835.                                             <input type="text" name="lignes[{{ loop.index0 }}][lieu_depart]" 
  836.                                                 class="form-control-ai" 
  837.                                                 value="{{ ligne.lieuDepart }}"
  838.                                                 placeholder="Lieu de départ">
  839.                                         </td>
  840.                                         <td class="table-cell-ai">
  841.                                             <input type="number" name="lignes[{{ loop.index0 }}][km_depart]" 
  842.                                                 class="form-control-ai text-center" 
  843.                                                 value="{{ ligne.kmDepart }}"
  844.                                                 step="0.1"
  845.                                                 placeholder="0.0">
  846.                                         </td>
  847.                                         
  848.                                         <!-- Matin -->
  849.                                         <td class="table-cell-ai time-cell-ai">
  850.                                             <input type="time" name="lignes[{{ loop.index0 }}][tranche_1_matin_debut]" 
  851.                                                 class="form-control-ai" 
  852.                                                 value="{{ ligne.tranche1MatinDebut }}">
  853.                                         </td>
  854.                                         <td class="table-cell-ai time-cell-ai">
  855.                                             <input type="time" name="lignes[{{ loop.index0 }}][tranche_1_matin_fin]" 
  856.                                                 class="form-control-ai" 
  857.                                                 value="{{ ligne.tranche1MatinFin }}">
  858.                                         </td>
  859.                                         
  860.                                         <!-- Midi -->
  861.                                         <td class="table-cell-ai time-cell-ai">
  862.                                             <input type="time" name="lignes[{{ loop.index0 }}][tranche_2_midi_debut]" 
  863.                                                 class="form-control-ai" 
  864.                                                 value="{{ ligne.tranche2MidiDebut }}">
  865.                                         </td>
  866.                                         <td class="table-cell-ai time-cell-ai">
  867.                                             <input type="time" name="lignes[{{ loop.index0 }}][tranche_2_midi_fin]" 
  868.                                                 class="form-control-ai" 
  869.                                                 value="{{ ligne.tranche2MidiFin }}">
  870.                                         </td>
  871.                                         
  872.                                         <!-- Soir -->
  873.                                         <td class="table-cell-ai time-cell-ai">
  874.                                             <input type="time" name="lignes[{{ loop.index0 }}][tranche_3_soir_debut]" 
  875.                                                 class="form-control-ai" 
  876.                                                 value="{{ ligne.tranche3SoirDebut }}">
  877.                                         </td>
  878.                                         <td class="table-cell-ai time-cell-ai">
  879.                                             <input type="time" name="lignes[{{ loop.index0 }}][tranche_3_soir_fin]" 
  880.                                                 class="form-control-ai" 
  881.                                                 value="{{ ligne.tranche3SoirFin }}">
  882.                                         </td>
  883.                                         
  884.                                         <!-- Autre -->
  885.                                         <td class="table-cell-ai time-cell-ai">
  886.                                             <input type="time" name="lignes[{{ loop.index0 }}][tranche_4_autre_debut]" 
  887.                                                 class="form-control-ai" 
  888.                                                 value="{{ ligne.tranche4AutreDebut }}">
  889.                                         </td>
  890.                                         <td class="table-cell-ai time-cell-ai">
  891.                                             <input type="time" name="lignes[{{ loop.index0 }}][tranche_4_autre_fin]" 
  892.                                                 class="form-control-ai" 
  893.                                                 value="{{ ligne.tranche4AutreFin }}">
  894.                                         </td>
  895.                                         
  896.                                         <td class="table-cell-ai">
  897.                                             <input type="text" name="lignes[{{ loop.index0 }}][lieu_arrivee]" 
  898.                                                 class="form-control-ai" 
  899.                                                 value="{{ ligne.lieuArrivee }}"
  900.                                                 placeholder="Lieu d'arrivée">
  901.                                         </td>
  902.                                         <td class="table-cell-ai">
  903.                                             <input type="number" name="lignes[{{ loop.index0 }}][km_arrivee]" 
  904.                                                 class="form-control-ai text-center" 
  905.                                                 value="{{ ligne.kmArrivee }}"
  906.                                                 step="0.1"
  907.                                                 placeholder="0.0">
  908.                                         </td>
  909.                                         <td class="table-cell-ai">
  910.                                             <input type="text" name="lignes[{{ loop.index0 }}][temps_annexes]" 
  911.                                                 class="form-control-ai text-center" 
  912.                                                 value="{{ ligne.tempsAnnexes }}"
  913.                                                 placeholder="00:00">
  914.                                         </td>
  915.                                         <td class="table-cell-ai">
  916.                                             <input type="text" name="lignes[{{ loop.index0 }}][temps_total]" 
  917.                                                 class="form-control-ai text-center fw-bold" 
  918.                                                 value="{{ ligne.tempsTotal }}"
  919.                                                 placeholder="00:00">
  920.                                         </td>
  921.                                         <td class="table-cell-ai">
  922.                                             <textarea name="lignes[{{ loop.index0 }}][commentaires]" 
  923.                                                     class="form-control-ai" 
  924.                                                     rows="1"
  925.                                                     placeholder="Notes éventuelles...">{{ ligne.commentaires }}</textarea>
  926.                                         </td>
  927.                                         <td class="table-cell-ai text-center">
  928.                                             {% if ligneCount > 1 %}
  929.                                                 <button type="submit" name="delete_line" value="{{ ligne.id }}" 
  930.                                                         class="btn btn-outline-danger btn-sm" 
  931.                                                         onclick="return confirmAI(this)"
  932.                                                         title="Supprimer cette ligne"
  933.                                                         data-line-date="{{ ligne.dateJour|date('d/m/Y') }}">
  934.                                                     <i class="fas fa-trash-alt"></i>
  935.                                                 </button>
  936.                                             {% endif %}
  937.                                         </td>
  938.                                     </tr>
  939.                                     {% endfor %}
  940.                                 </tbody>
  941.                             </table>
  942.                         </div>
  943.                     </div>
  944.                 </div>
  945.             </div>
  947.             <!-- Actions finales -->
  948.             <div class="card-ai">
  949.                 <div class="card-body p-4">
  950.                     <div class="row align-items-center">
  951.                         <div class="col-md-6 mb-3 mb-md-0">
  952.                             <div class="d-flex align-items-center gap-2">
  953.                                 <div class="flex-shrink-0">
  954.                                     <i class="fas fa-shield-alt fa-2x text-primary opacity-75"></i>
  955.                                 </div>
  956.                                 <div class="flex-grow-1">
  957.                                     <h6 class="mb-1 fw-bold">Validation sécurisée</h6>
  958.                                     <p class="mb-0 small text-muted">Toutes les modifications sont tracées et sécurisées</p>
  959.                                 </div>
  960.                             </div>
  961.                         </div>
  962.                         
  963.                         <div class="col-md-6">
  964.                             <div class="d-flex flex-column flex-md-row gap-3 justify-content-md-end">
  965.                                 <a href="{{ path('upload_list') }}" class="btn btn-ai-outline">
  966.                                     <i class="fas fa-arrow-left me-2"></i>
  967.                                     Retour
  968.                                 </a>
  969.                                 
  970.                                 <button type="submit" name="save_draft" value="1" class="btn btn-ai-primary">
  971.                                     <i class="fas fa-save me-2"></i>
  972.                                     Sauvegarder brouillon
  973.                                 </button>
  974.                                 
  975.                                 <button type="button" 
  976.                                         onclick="validateFinalAI()" 
  977.                                         class="btn btn-ai-success">
  978.                                     <i class="fas fa-check-double me-2"></i>
  979.                                     Valider définitivement
  980.                                 </button>
  981.                             </div>
  982.                         </div>
  983.                     </div>
  984.                 </div>
  985.             </div>
  986.         </form>
  987.     </div>
  989.     <!-- Modal document plein écran -->
  990.     <div class="modal fade modal-fullscreen-ai" id="documentModal" tabindex="-1" aria-hidden="true">
  991.         <div class="modal-dialog modal-fullscreen">
  992.             <div class="modal-content">
  993.                 <div class="modal-header modal-header-ai">
  994.                     <h5 class="modal-title modal-title-ai">
  995.                         <i class="fas fa-file-{% if batch.extension == 'pdf' %}pdf{% else %}image{% endif %} me-2"></i>
  996.                         {{ batch.originalFilename }}
  997.                     </h5>
  998.                     <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
  999.                 </div>
  1000.                 <div class="modal-body p-0">
  1001.                     {% if batch.extension == 'pdf' %}
  1002.                         <embed src="{{ asset('uploads/' ~ batch.storedFilename) }}" 
  1003.                             type="application/pdf" 
  1004.                             class="w-100 h-100">
  1005.                     {% else %}
  1006.                         <div class="d-flex align-items-center justify-content-center w-100 h-100">
  1007.                             <img src="{{ asset('uploads/' ~ batch.storedFilename) }}" 
  1008.                                 alt="{{ batch.originalFilename }}"
  1009.                                 class="img-fluid"
  1010.                                 style="max-height: 90vh; object-fit: contain;">
  1011.                         </div>
  1012.                     {% endif %}
  1013.                     
  1014.                     <div class="preview-actions">
  1015.                         <a href="{{ asset('uploads/' ~ batch.storedFilename) }}" 
  1016.                         class="btn btn-primary" 
  1017.                         target="_blank"
  1018.                         download="{{ batch.originalFilename }}">
  1019.                             <i class="fas fa-download me-1"></i>
  1020.                             Télécharger
  1021.                         </a>
  1022.                         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
  1023.                             <i class="fas fa-times me-1"></i>
  1024.                             Fermer
  1025.                         </button>
  1026.                     </div>
  1027.                 </div>
  1028.             </div>
  1029.         </div>
  1030.     </div>
  1031. {% endblock %}
  1033. {% block javascripts %}
  1034.     {{ parent() }}
  1035.     <script>
  1036.         // Fonction de validation finale améliorée
  1037.         function validateFinalAI() {
  1038.             const form = document.getElementById('reviewFormAi');
  1039.             const validateBtn = form.querySelector('button[name="validate_all"]') || 
  1040.                                form.querySelector('[onclick*="validateFinalAI"]');
  1041.             
  1042.             // Vérifier les champs obligatoires
  1043.             const requiredFields = form.querySelectorAll('[required]');
  1044.             const emptyFields = [];
  1045.             
  1046.             requiredFields.forEach(field => {
  1047.                 if (!field.value.trim()) {
  1048.                     emptyFields.push(field);
  1049.                     field.classList.add('is-invalid');
  1050.                 }
  1051.             });
  1052.             
  1053.             if (emptyFields.length > 0) {
  1054.                 // Afficher une notification moderne
  1055.                 if (typeof Swal !== 'undefined') {
  1056.                     Swal.fire({
  1057.                         icon: 'warning',
  1058.                         title: 'Champs manquants',
  1059.                         html: `
  1060.                             <div class="text-start">
  1061.                                 <p>Veuillez remplir les <strong>${emptyFields.length}</strong> champ(s) obligatoire(s) :</p>
  1062.                                 <ul class="mb-0">
  1063.                                     ${emptyFields.slice(0, 3).map(field => 
  1064.                                         `<li>${field.previousElementSibling?.textContent || 'Champ requis'}</li>`
  1065.                                     ).join('')}
  1066.                                     ${emptyFields.length > 3 ? '<li>... et ' + (emptyFields.length - 3) + ' autre(s)</li>' : ''}
  1067.                                 </ul>
  1068.                             </div>
  1069.                         `,
  1070.                         confirmButtonText: 'Corriger',
  1071.                         confirmButtonColor: '#3b82f6'
  1072.                     }).then(() => {
  1073.                         emptyFields[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
  1074.                         emptyFields[0].focus();
  1075.                     });
  1076.                 } else {
  1077.                     alert(`Veuillez remplir ${emptyFields.length} champ(s) obligatoire(s) avant de valider.`);
  1078.                     emptyFields[0].focus();
  1079.                 }
  1080.                 return false;
  1081.             }
  1082.             
  1083.             // Confirmation avec statistiques
  1084.             const lineCount = {{ ligneCount }};
  1085.             const totalHours = calculateTotalHours();
  1086.             
  1087.             if (typeof Swal !== 'undefined') {
  1088.                 Swal.fire({
  1089.                     title: '✅ Validation définitive',
  1090.                     html: `
  1091.                         <div class="text-start">
  1092.                             <p>Êtes-vous sûr de vouloir valider définitivement cette déclaration ?</p>
  1093.                             <div class="alert alert-light border mt-3">
  1094.                                 <div class="row">
  1095.                                     <div class="col-6">
  1096.                                         <small class="text-muted">Lignes :</small><br>
  1097.                                         <strong>${lineCount}</strong>
  1098.                                     </div>
  1099.                                     <div class="col-6">
  1100.                                         <small class="text-muted">Période :</small><br>
  1101.                                         <strong>${form.querySelector('[name="date_debut"]').value} → ${form.querySelector('[name="date_fin"]').value}</strong>
  1102.                                     </div>
  1103.                                 </div>
  1104.                             </div>
  1105.                             <p class="text-danger small mt-3">
  1106.                                 <i class="fas fa-exclamation-triangle me-1"></i>
  1107.                                 Cette action est irréversible.
  1108.                             </p>
  1109.                         </div>
  1110.                     `,
  1111.                     icon: 'question',
  1112.                     showCancelButton: true,
  1113.                     confirmButtonText: 'Oui, valider',
  1114.                     cancelButtonText: 'Annuler',
  1115.                     confirmButtonColor: '#10b981',
  1116.                     cancelButtonColor: '#6b7280',
  1117.                     reverseButtons: true
  1118.                 }).then((result) => {
  1119.                     if (result.isConfirmed) {
  1120.                         // Créer un bouton temporaire pour la validation
  1121.                         const tempInput = document.createElement('input');
  1122.                         tempInput.type = 'hidden';
  1123.                         tempInput.name = 'validate_all';
  1124.                         tempInput.value = '1';
  1125.                         form.appendChild(tempInput);
  1126.                         
  1127.                         // Afficher un loader
  1128.                         Swal.fire({
  1129.                             title: 'Validation en cours...',
  1130.                             text: 'Enregistrement des données validées',
  1131.                             icon: 'info',
  1132.                             showConfirmButton: false,
  1133.                             allowOutsideClick: false,
  1134.                             didOpen: () => {
  1135.                                 Swal.showLoading();
  1136.                                 // Soumettre après un délai
  1137.                                 setTimeout(() => form.submit(), 1000);
  1138.                             }
  1139.                         });
  1140.                     }
  1141.                 });
  1142.             } else {
  1143.                 if (confirm(`Valider définitivement ${lineCount} lignes ? Cette action est irréversible.`)) {
  1144.                     const tempInput = document.createElement('input');
  1145.                     tempInput.type = 'hidden';
  1146.                     tempInput.name = 'validate_all';
  1147.                     tempInput.value = '1';
  1148.                     form.appendChild(tempInput);
  1149.                     form.submit();
  1150.                 }
  1151.             }
  1152.         }
  1153.         
  1154.         // Calculer le total des heures
  1155.         function calculateTotalHours() {
  1156.             const timeInputs = document.querySelectorAll('input[type="time"]');
  1157.             let totalMinutes = 0;
  1158.             
  1159.             timeInputs.forEach(input => {
  1160.                 if (input.value) {
  1161.                     const [hours, minutes] = input.value.split(':').map(Number);
  1162.                     totalMinutes += hours * 60 + minutes;
  1163.                 }
  1164.             });
  1165.             
  1166.             const hours = Math.floor(totalMinutes / 60);
  1167.             const minutes = totalMinutes % 60;
  1168.             return `${hours}h${minutes.toString().padStart(2, '0')}`;
  1169.         }
  1170.         
  1171.         // Confirmation améliorée pour la suppression
  1172.         function confirmAI(button) {
  1173.             const lineDate = button.dataset.lineDate || 'cette ligne';
  1174.             
  1175.             if (typeof Swal !== 'undefined') {
  1176.                 Swal.fire({
  1177.                     title: 'Supprimer la ligne ?',
  1178.                     html: `
  1179.                         <div class="text-start">
  1180.                             <p>Vous allez supprimer la ligne du <strong>${lineDate}</strong>.</p>
  1181.                             <p class="text-danger small">
  1182.                                 <i class="fas fa-exclamation-triangle me-1"></i>
  1183.                                 Cette action ne peut pas être annulée.
  1184.                             </p>
  1185.                         </div>
  1186.                     `,
  1187.                     icon: 'warning',
  1188.                     showCancelButton: true,
  1189.                     confirmButtonText: 'Oui, supprimer',
  1190.                     cancelButtonText: 'Annuler',
  1191.                     confirmButtonColor: '#dc2626',
  1192.                     cancelButtonColor: '#6b7280',
  1193.                     reverseButtons: true
  1194.                 }).then((result) => {
  1195.                     if (result.isConfirmed) {
  1196.                         // Soumettre le formulaire
  1197.                         button.form.submit();
  1198.                     }
  1199.                 });
  1200.                 return false;
  1201.             } else {
  1202.                 return confirm(`Supprimer la ligne du ${lineDate} ?`);
  1203.             }
  1204.         }
  1205.         
  1206.         // Amélioration de l'UX des champs
  1207.         document.addEventListener('DOMContentLoaded', function() {
  1208.             const form = document.getElementById('reviewFormAi');
  1209.             
  1210.             // Highlight automatique des champs corrigés
  1211.             const inputs = form.querySelectorAll('input, textarea');
  1212.             inputs.forEach(input => {
  1213.                 const originalValue = input.value;
  1214.                 
  1215.                 input.addEventListener('change', function() {
  1216.                     if (this.value !== originalValue) {
  1217.                         this.style.borderColor = '#10b981';
  1218.                         this.style.boxShadow = '0 0 0 3px rgba(16, 185, 129, 0.1)';
  1219.                         
  1220.                         // Ajouter un petit badge "modifié"
  1221.                         const parent = this.parentElement;
  1222.                         if (!parent.querySelector('.modified-badge')) {
  1223.                             const badge = document.createElement('span');
  1224.                             badge.className = 'modified-badge position-absolute';
  1225.                             badge.innerHTML = '<i class="fas fa-pencil-alt"></i>';
  1226.                             badge.style.top = '5px';
  1227.                             badge.style.right = '5px';
  1228.                             badge.style.color = '#10b981';
  1229.                             badge.style.fontSize = '0.7rem';
  1230.                             badge.style.zIndex = '5';
  1231.                             parent.style.position = 'relative';
  1232.                             parent.appendChild(badge);
  1233.                         }
  1234.                     }
  1235.                 });
  1236.             });
  1237.             
  1238.             // Navigation clavier améliorée
  1239.             const tableInputs = form.querySelectorAll('.table-container-ai input, .table-container-ai textarea');
  1240.             tableInputs.forEach((input, index) => {
  1241.                 input.addEventListener('keydown', function(e) {
  1242.                     if (e.key === 'Enter' && !e.shiftKey && this.tagName !== 'TEXTAREA') {
  1243.                         e.preventDefault();
  1244.                         const nextIndex = index + (e.ctrlKey ? 10 : 1); // Ctrl+Entrée pour sauter 10 champs
  1245.                         if (nextIndex < tableInputs.length) {
  1246.                             tableInputs[nextIndex].focus();
  1247.                         }
  1248.                     } else if (e.key === 'Tab' && !e.shiftKey) {
  1249.                         if (index === tableInputs.length - 1) {
  1250.                             e.preventDefault();
  1251.                             form.querySelector('button[name="save_draft"]').focus();
  1252.                         }
  1253.                     }
  1254.                 });
  1255.             });
  1256.             
  1257.             // Calcul automatique du temps total
  1258.             function setupTimeCalculation() {
  1259.                 const timeCells = form.querySelectorAll('.time-cell-ai input[type="time"]');
  1260.                 timeCells.forEach(cell => {
  1261.                     cell.addEventListener('change', function() {
  1262.                         const row = this.closest('tr');
  1263.                         const timeInputs = row.querySelectorAll('input[type="time"]');
  1264.                         let totalMinutes = 0;
  1265.                         
  1266.                         // Calculer le temps total entre début et fin pour chaque tranche
  1267.                         for (let i = 0; i < timeInputs.length; i += 2) {
  1268.                             const start = timeInputs[i].value;
  1269.                             const end = timeInputs[i + 1]?.value;
  1270.                             
  1271.                             if (start && end) {
  1272.                                 const [startHours, startMinutes] = start.split(':').map(Number);
  1273.                                 const [endHours, endMinutes] = end.split(':').map(Number);
  1274.                                 const diffMinutes = (endHours * 60 + endMinutes) - (startHours * 60 + startMinutes);
  1275.                                 if (diffMinutes > 0) {
  1276.                                     totalMinutes += diffMinutes;
  1277.                                 }
  1278.                             }
  1279.                         }
  1280.                         
  1281.                         // Mettre à jour le champ temps total
  1282.                         if (totalMinutes > 0) {
  1283.                             const hours = Math.floor(totalMinutes / 60);
  1284.                             const minutes = totalMinutes % 60;
  1285.                             const totalCell = row.querySelector('input[name$="[temps_total]"]');
  1286.                             if (totalCell) {
  1287.                                 totalCell.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
  1288.                             }
  1289.                         }
  1290.                     });
  1291.                 });
  1292.             }
  1293.             
  1294.             setupTimeCalculation();
  1295.             
  1296.             // Auto-complétion pour les lieux récurrents
  1297.             const locationInputs = form.querySelectorAll('input[placeholder*="Lieu"]');
  1298.             const commonLocations = ['Dépôt', 'Garage', 'Siège', 'Client', 'Chantier'];
  1299.             
  1300.             locationInputs.forEach(input => {
  1301.                 const datalist = document.createElement('datalist');
  1302.                 datalist.id = `locations-${Math.random().toString(36).substr(2, 9)}`;
  1303.                 
  1304.                 commonLocations.forEach(location => {
  1305.                     const option = document.createElement('option');
  1306.                     option.value = location;
  1307.                     datalist.appendChild(option);
  1308.                 });
  1309.                 
  1310.                 document.body.appendChild(datalist);
  1311.                 input.setAttribute('list', datalist.id);
  1312.                 input.setAttribute('autocomplete', 'on');
  1313.             });
  1314.             
  1315.             // Modal amélioré
  1316.             const documentModal = document.getElementById('documentModal');
  1317.             if (documentModal) {
  1318.                 documentModal.addEventListener('shown.bs.modal', function() {
  1319.                     // Zoom interactif pour les images
  1320.                     const img = this.querySelector('img');
  1321.                     if (img) {
  1322.                         img.style.cursor = 'zoom-in';
  1323.                         let isZoomed = false;
  1324.                         
  1325.                         img.addEventListener('click', function() {
  1326.                             if (!isZoomed) {
  1327.                                 this.style.transform = 'scale(1.5)';
  1328.                                 this.style.cursor = 'zoom-out';
  1329.                             } else {
  1330.                                 this.style.transform = 'scale(1)';
  1331.                                 this.style.cursor = 'zoom-in';
  1332.                             }
  1333.                             isZoomed = !isZoomed;
  1334.                         });
  1335.                     }
  1336.                 });
  1337.             }
  1338.             
  1339.             // Afficher un message de bienvenue pour la première visite
  1340.             if (!localStorage.getItem('reviewTutorialShown')) {
  1341.                 setTimeout(() => {
  1342.                     if (typeof Swal !== 'undefined') {
  1343.                         Swal.fire({
  1344.                             title: '👋 Bienvenue dans l\'interface de relecture IA',
  1345.                             html: `
  1346.                                 <div class="text-start">
  1347.                                     <p>Notre intelligence artificielle a extrait automatiquement les données de votre document.</p>
  1348.                                     <div class="alert alert-info mt-3">
  1349.                                         <h6><i class="fas fa-lightbulb me-2"></i>Conseils :</h6>
  1350.                                         <ul class="mb-0 small">
  1351.                                             <li>Vérifiez les champs mis en évidence</li>
  1352.                                             <li>Comparez avec le document original</li>
  1353.                                             <li>Utilisez Tab/Entrée pour naviguer rapidement</li>
  1354.                                         </ul>
  1355.                                     </div>
  1356.                                 </div>
  1357.                             `,
  1358.                             icon: 'info',
  1359.                             confirmButtonText: 'Commencer',
  1360.                             confirmButtonColor: '#3b82f6'
  1361.                         });
  1362.                         localStorage.setItem('reviewTutorialShown', 'true');
  1363.                     }
  1364.                 }, 1000);
  1365.             }
  1366.         });
  1367.     </script>
  1368. {% endblock %}