Add the following information for both add end edit forms ICE/ IF / TP/ RC/CNSS/RIB/ remove the botton to add attachement file from the table and add it to the forms, where you have to upload the RIB and a print button to print the supplier creationg form

suppliers.html

@@ -176,44 +176,59 @@
                         <tr class="text-left border-b border-gray-700">
                             <th class="px-4 py-3">Supplier ID</th>
                             <th class="px-4 py-3">Name</th>
+                            <th class="px-4 py-3">ICE</th>
+                            <th class="px-4 py-3">IF</th>
+                            <th class="px-4 py-3">TP</th>
+                            <th class="px-4 py-3">RC</th>
+                            <th class="px-4 py-3">CNSS</th>
+                            <th class="px-4 py-3">RIB</th>
                             <th class="px-4 py-3">Contact</th>
                             <th class="px-4 py-3">Email</th>
                             <th class="px-4 py-3">Phone</th>
                             <th class="px-4 py-3">Country</th>
                             <th class="px-4 py-3">Status</th>
-                            <th class="px-4 py-3 text-right">Actions</th>
+<th class="px-4 py-3 text-right">Actions</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr>
                             <td class="px-4 py-3">SUP-001</td>
                             <td class="px-4 py-3">ABC Supplies</td>
+                            <td class="px-4 py-3">123456789</td>
+                            <td class="px-4 py-3">987654321</td>
+                            <td class="px-4 py-3">0612345678</td>
+                            <td class="px-4 py-3">RC12345</td>
+                            <td class="px-4 py-3">CNSS123</td>
+                            <td class="px-4 py-3">RIB123456789</td>
                             <td class="px-4 py-3">John Smith</td>
                             <td class="px-4 py-3">john@abcsupplies.com</td>
                             <td class="px-4 py-3">+212 123 456 789</td>
                             <td class="px-4 py-3">Morocco</td>
                             <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-green-900 text-green-300">Active</span></td>
-                            <td class="px-4 py-3 text-right">
+<td class="px-4 py-3 text-right">
                                 <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn">
                                     <i data-feather="edit" class="w-4 h-4"></i>
                                 </button>
                                 <button class="p-1 text-red-400 hover:text-red-300 delete-btn">
                                     <i data-feather="trash" class="w-4 h-4"></i>
                                 </button>
-                                <button class="p-1 text-green-400 hover:text-green-300 import-btn">
-                                    <i data-feather="file-text" class="w-4 h-4"></i>
-                                </button>
 </td>
                         </tr>
                         <tr>
                             <td class="px-4 py-3">SUP-002</td>
                             <td class="px-4 py-3">XYZ Imports</td>
+                            <td class="px-4 py-3">987654321</td>
+                            <td class="px-4 py-3">123456789</td>
+                            <td class="px-4 py-3">0623456789</td>
+                            <td class="px-4 py-3">RC54321</td>
+                            <td class="px-4 py-3">CNSS456</td>
+                            <td class="px-4 py-3">RIB987654321</td>
                             <td class="px-4 py-3">Sarah Johnson</td>
                             <td class="px-4 py-3">sarah@xyzimports.com</td>
                             <td class="px-4 py-3">+212 234 567 890</td>
                             <td class="px-4 py-3">Morocco</td>
                             <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-green-900 text-green-300">Active</span></td>
-                            <td class="px-4 py-3 text-right">
+<td class="px-4 py-3 text-right">
                                 <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn">
                                     <i data-feather="edit" class="w-4 h-4"></i>
                                 </button>
@@ -228,12 +243,18 @@
                         <tr>
                             <td class="px-4 py-3">SUP-003</td>
                             <td class="px-4 py-3">Global Parts</td>
+                            <td class="px-4 py-3">456789123</td>
+                            <td class="px-4 py-3">789123456</td>
+                            <td class="px-4 py-3">0634567890</td>
+                            <td class="px-4 py-3">RC67890</td>
+                            <td class="px-4 py-3">CNSS789</td>
+                            <td class="px-4 py-3">RIB456789123</td>
                             <td class="px-4 py-3">Michael Brown</td>
                             <td class="px-4 py-3">michael@globalparts.com</td>
                             <td class="px-4 py-3">+212 345 678 901</td>
                             <td class="px-4 py-3">France</td>
                             <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-green-900 text-green-300">Active</span></td>
-                            <td class="px-4 py-3 text-right">
+<td class="px-4 py-3 text-right">
                                 <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn">
                                     <i data-feather="edit" class="w-4 h-4"></i>
                                 </button>
@@ -248,12 +269,18 @@
                         <tr>
                             <td class="px-4 py-3">SUP-004</td>
                             <td class="px-4 py-3">EuroTech</td>
+                            <td class="px-4 py-3">789123456</td>
+                            <td class="px-4 py-3">456789123</td>
+                            <td class="px-4 py-3">0645678901</td>
+                            <td class="px-4 py-3">RC09876</td>
+                            <td class="px-4 py-3">CNSS012</td>
+                            <td class="px-4 py-3">RIB789123456</td>
                             <td class="px-4 py-3">David Wilson</td>
                             <td class="px-4 py-3">david@eurotech.com</td>
                             <td class="px-4 py-3">+212 456 789 012</td>
                             <td class="px-4 py-3">Germany</td>
                             <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-yellow-900 text-yellow-300">Pending</span></td>
-                            <td class="px-4 py-3 text-right">
+<td class="px-4 py-3 text-right">
                                 <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn">
                                     <i data-feather="edit" class="w-4 h-4"></i>
                                 </button>
@@ -268,12 +295,18 @@
                         <tr>
                             <td class="px-4 py-3">SUP-005</td>
                             <td class="px-4 py-3">Maroc Logistics</td>
+                            <td class="px-4 py-3">321654987</td>
+                            <td class="px-4 py-3">654987321</td>
+                            <td class="px-4 py-3">0656789012</td>
+                            <td class="px-4 py-3">RC54321</td>
+                            <td class="px-4 py-3">CNSS345</td>
+                            <td class="px-4 py-3">RIB321654987</td>
                             <td class="px-4 py-3">Ahmed Alami</td>
                             <td class="px-4 py-3">ahmed@maroclogistics.com</td>
                             <td class="px-4 py-3">+212 567 890 123</td>
                             <td class="px-4 py-3">Morocco</td>
                             <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-red-900 text-red-300">Inactive</span></td>
-                            <td class="px-4 py-3 text-right">
+<td class="px-4 py-3 text-right">
                                 <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn">
                                     <i data-feather="edit" class="w-4 h-4"></i>
                                 </button>
@@ -311,6 +344,30 @@
                             <label for="supplierId" class="block text-sm font-medium mb-1">Supplier ID</label>
                             <input type="text" id="supplierId" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500" value="SUP-006" disabled>
                         </div>
+                        <div>
+                            <label for="ice" class="block text-sm font-medium mb-1">ICE</label>
+                            <input type="text" id="ice" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label for="if" class="block text-sm font-medium mb-1">IF</label>
+                            <input type="text" id="if" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label for="tp" class="block text-sm font-medium mb-1">TP</label>
+                            <input type="text" id="tp" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label for="rc" class="block text-sm font-medium mb-1">RC</label>
+                            <input type="text" id="rc" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label for="cnss" class="block text-sm font-medium mb-1">CNSS</label>
+                            <input type="text" id="cnss" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        </div>
+                        <div>
+                            <label for="rib" class="block text-sm font-medium mb-1">RIB</label>
+                            <input type="text" id="rib" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        </div>
                         <div>
                             <label for="contactPerson" class="block text-sm font-medium mb-1">Contact Person</label>
                             <input type="text" id="contactPerson" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
@@ -345,16 +402,26 @@
                                 <option value="Inactive">Inactive</option>
                             </select>
                         </div>
+                        <div class="md:col-span-2">
+                            <label for="ribFile" class="block text-sm font-medium mb-1">RIB File (PDF)</label>
+                            <input type="file" id="ribFile" accept=".pdf" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500">
+                        </div>
                     </div>
-                    <div class="flex justify-end space-x-3 mt-6">
-                        <button type="button" id="cancelBtn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">
-                            Cancel
-                        </button>
-                        <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg">
-                            Save Supplier
+                    <div class="flex justify-between mt-6">
+                        <button type="button" id="printBtn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center">
+                            <i data-feather="printer" class="w-4 h-4 mr-2"></i>
+                            Print Form
                         </button>
+                        <div class="space-x-3">
+                            <button type="button" id="cancelBtn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">
+                                Cancel
+                            </button>
+                            <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg">
+                                Save Supplier
+                            </button>
+                        </div>
                     </div>
-                </form>
+</form>
             </div>
         </div>
     </div>
@@ -436,31 +503,72 @@ responsive: true,
             alert('Supplier saved successfully!');
             supplierModal.classList.add('hidden');
         });
+        // Print functionality
+        document.getElementById('printBtn').addEventListener('click', () => {
+            const printContent = `
+                <div style="font-family: Arial, sans-serif; padding: 20px;">
+                    <h1 style="text-align: center; margin-bottom: 30px;">Supplier Registration Form</h1>
+                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px;">
+                        <div><strong>Supplier ID:</strong> <span id="printSupplierId"></span></div>
+                        <div><strong>Supplier Name:</strong> <span id="printSupplierName"></span></div>
+                        <div><strong>ICE:</strong> <span id="printIce"></span></div>
+                        <div><strong>IF:</strong> <span id="printIf"></span></div>
+                        <div><strong>TP:</strong> <span id="printTp"></span></div>
+                        <div><strong>RC:</strong> <span id="printRc"></span></div>
+                        <div><strong>CNSS:</strong> <span id="printCnss"></span></div>
+                        <div><strong>RIB:</strong> <span id="printRib"></span></div>
+                        <div><strong>Contact Person:</strong> <span id="printContactPerson"></span></div>
+                        <div><strong>Email:</strong> <span id="printEmail"></span></div>
+                        <div><strong>Phone:</strong> <span id="printPhone"></span></div>
+                        <div><strong>Country:</strong> <span id="printCountry"></span></div>
+                        <div><strong>Address:</strong> <span id="printAddress"></span></div>
+                        <div><strong>Status:</strong> <span id="printStatus"></span></div>
+                    </div>
+                    <div style="margin-top: 30px; text-align: right;">
+                        <p>_________________________</p>
+                        <p>Signature</p>
+                    </div>
+                </div>
+            `;
 
-        // Import PDF functionality
-        document.querySelectorAll('.import-btn').forEach(btn => {
-            btn.addEventListener('click', (e) => {
-                const row = e.target.closest('tr');
-                const supplierId = row.querySelector('td:first-child').textContent;
-                const supplierName = row.querySelector('td:nth-child(2)').textContent;
-                
-                // Create file input for PDF import
-                const fileInput = document.createElement('input');
-                fileInput.type = 'file';
-                fileInput.accept = '.pdf';
-                fileInput.click();
-                
-                fileInput.addEventListener('change', (e) => {
-                    const file = e.target.files[0];
-                    if (file) {
-                        alert(`PDF imported successfully for ${supplierName} (${supplierId})`);
-                        // In a real app, upload the file to server and associate with supplier
-                    }
-                });
-            });
+            const printWindow = window.open('', '', 'width=800,height=600');
+            printWindow.document.open();
+            printWindow.document.write(`
+                <html>
+                    <head>
+                        <title>Supplier Registration Form</title>
+                        <style>
+                            body { font-family: Arial, sans-serif; }
+                            @media print {
+                                @page { margin: 0; }
+                                body { margin: 1.6cm; }
+                            }
+                        </style>
+                    </head>
+                    <body onload="window.print();window.close();">
+                        ${printContent}
+                        <script>
+                            document.getElementById('printSupplierId').textContent = document.getElementById('supplierId').value;
+                            document.getElementById('printSupplierName').textContent = document.getElementById('supplierName').value;
+                            document.getElementById('printIce').textContent = document.getElementById('ice').value;
+                            document.getElementById('printIf').textContent = document.getElementById('if').value;
+                            document.getElementById('printTp').textContent = document.getElementById('tp').value;
+                            document.getElementById('printRc').textContent = document.getElementById('rc').value;
+                            document.getElementById('printCnss').textContent = document.getElementById('cnss').value;
+                            document.getElementById('printRib').textContent = document.getElementById('rib').value;
+                            document.getElementById('printContactPerson').textContent = document.getElementById('contactPerson').value;
+                            document.getElementById('printEmail').textContent = document.getElementById('email').value;
+                            document.getElementById('printPhone').textContent = document.getElementById('phone').value;
+                            document.getElementById('printCountry').textContent = document.getElementById('country').value;
+                            document.getElementById('printAddress').textContent = document.getElementById('address').value;
+                            document.getElementById('printStatus').textContent = document.getElementById('status').value;
+                        </script>
+                    </body>
+                </html>
+            `);
+            printWindow.document.close();
         });
-
-        // Edit functionality to populate form with row data
+// Edit functionality to populate form with row data
         document.querySelectorAll('.edit-btn').forEach(btn => {
             btn.addEventListener('click', (e) => {
                 const row = e.target.closest('tr');
@@ -468,12 +576,17 @@ responsive: true,
                 
                 document.getElementById('supplierId').value = cells[0].textContent;
                 document.getElementById('supplierName').value = cells[1].textContent;
-                document.getElementById('contactPerson').value = cells[2].textContent;
-                document.getElementById('email').value = cells[3].textContent;
-                document.getElementById('phone').value = cells[4].textContent;
-                document.getElementById('country').value = cells[5].textContent;
-                
-                const statusText = cells[6].textContent.trim();
+                document.getElementById('ice').value = cells[2].textContent;
+                document.getElementById('if').value = cells[3].textContent;
+                document.getElementById('tp').value = cells[4].textContent;
+                document.getElementById('rc').value = cells[5].textContent;
+                document.getElementById('cnss').value = cells[6].textContent;
+                document.getElementById('rib').value = cells[7].textContent;
+                document.getElementById('contactPerson').value = cells[8].textContent;
+                document.getElementById('email').value = cells[9].textContent;
+                document.getElementById('phone').value = cells[10].textContent;
+                document.getElementById('country').value = cells[11].textContent;
+const statusText = cells[6].textContent.trim();
                 document.getElementById('status').value = 
                     statusText.includes('Active') ? 'Active' : 
                     statusText.includes('Pending') ? 'Pending' : 'Inactive';