Profshab/salesforce-sync-pro
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Register Customer | SalesForce Sync Pro</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://unpkg.com/feather-icons"></script>11 <style>12 .sidebar {13 transition: all 0.3s ease;14 }15 .sidebar.collapsed {16 width: 80px;17 }18 .sidebar.collapsed .sidebar-text {19 display: none;20 }21 .sidebar.collapsed .menu-item {22 justify-content: center;23 }24 .content {25 transition: all 0.3s ease;26 }27 .content.expanded {28 margin-left: 80px;29 }30 .customer-type-btn {31 transition: all 0.3s ease;32 }33 .customer-type-btn.active {34 background-color: #1e40af;35 color: white;36 }37 .other-segment-input {38 display: none;39 }40 </style>41</head>42<body class="bg-gray-100">43 <div class="flex h-screen">44 <!-- Sidebar -->45 <div class="sidebar bg-primary-600 text-white w-64 fixed h-full overflow-y-auto z-10">46 <div class="p-4 flex items-center justify-between border-b border-primary-500">47 <div class="flex items-center space-x-2">48 <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full object-cover">49 <span class="sidebar-text font-semibold">John Doe</span>50 </div>51 <button id="toggleSidebar" class="text-white hover:text-primary-200">52 <i data-feather="chevron-left"></i>53 </button>54 </div>55 56 <nav class="mt-6">57 <div class="px-4 py-2 text-xs uppercase font-semibold text-primary-200 tracking-wider sidebar-text">58 Main Navigation59 </div>60 61 <a href="Dashboard.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">62 <i data-feather="home" class="w-5 h-5"></i>63 <span class="ml-3 sidebar-text">Dashboard</span>64 </a>65 66 <a href="Customer.php" class="flex items-center px-4 py-3 text-white bg-primary-700 menu-item">67 <i data-feather="user-plus" class="w-5 h-5"></i>68 <span class="ml-3 sidebar-text">Register New Customer</span>69 </a>70 71 <a href="plan.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">72 <i data-feather="calendar" class="w-5 h-5"></i>73 <span class="ml-3 sidebar-text">Plan for Call</span>74 </a>75 76 <a href="Call_report.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">77 <i data-feather="phone-call" class="w-5 h-5"></i>78 <span class="ml-3 sidebar-text">Call Report</span>79 </a>80 81 <a href="Sales.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">82 <i data-feather="dollar-sign" class="w-5 h-5"></i>83 <span class="ml-3 sidebar-text">Sales</span>84 </a>85 86 <a href="Follow_up.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">87 <i data-feather="refresh-cw" class="w-5 h-5"></i>88 <span class="ml-3 sidebar-text">Follow Up</span>89 </a>90 91 <div class="px-4 py-2 mt-6 text-xs uppercase font-semibold text-primary-200 tracking-wider sidebar-text">92 Account93 </div>94 95 <a href="Profile.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">96 <i data-feather="user" class="w-5 h-5"></i>97 <span class="ml-3 sidebar-text">Profile</span>98 </a>99 100 <a href="../logout.php" class="flex items-center px-4 py-3 text-white hover:bg-primary-700 menu-item">101 <i data-feather="log-out" class="w-5 h-5"></i>102 <span class="ml-3 sidebar-text">Logout</span>103 </a>104 </nav>105 </div>106 107 <!-- Main Content -->108 <div class="content flex-1 ml-64 overflow-y-auto">109 <!-- Top Navigation -->110 <header class="bg-white shadow-sm">111 <div class="flex justify-between items-center px-6 py-4">112 <h1 class="text-2xl font-bold text-gray-800">SOLUTION PLUS SALES FORCE MANAGEMENT SYSTEM</h1>113 114 <div class="flex items-center space-x-4">115 <div class="relative">116 <button class="text-gray-600 hover:text-primary-600">117 <i data-feather="bell"></i>118 </button>119 </div>120 121 <div class="relative">122 <button class="flex items-center space-x-2">123 <img src="http://static.photos/people/200x200/1" class="w-8 h-8 rounded-full object-cover">124 <span class="text-sm font-medium text-gray-700 hidden md:inline">John Doe</span>125 </button>126 </div>127 </div>128 </div>129 </header>130 131 <!-- Customer Registration Content -->132 <main class="p-6">133 <div class="bg-white rounded-xl shadow-sm p-6 mb-6">134 <h2 class="text-xl font-bold text-gray-800 mb-6">Register New Customer</h2>135 136 <div class="flex space-x-4 mb-6">137 <button id="nonIndividualBtn" class="customer-type-btn active px-4 py-2 rounded-lg border border-primary-600 text-primary-600 font-medium">138 Non Individual139 </button>140 <button id="individualBtn" class="customer-type-btn px-4 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium">141 Individual142 </button>143 </div>144 145 <!-- Non Individual Form -->146 <form id="nonIndividualForm" class="space-y-4">147 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">148 <div>149 <label for="customerSegment" class="block text-sm font-medium text-gray-700 mb-1">Customer Segment</label>150 <select id="customerSegment" name="customerSegment" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">151 <option value="Company">Company</option>152 <option value="Organization">Organization</option>153 <option value="Industry">Industry</option>154 <option value="Association">Association</option>155 <option value="Other">Other</option>156 </select>157 </div>158 159 <div id="otherSegmentDiv" class="other-segment-input">160 <label for="otherSegment" class="block text-sm font-medium text-gray-700 mb-1">Specify Segment</label>161 <input type="text" id="otherSegment" name="otherSegment" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">162 </div>163 164 <div class="md:col-span-2">165 <label for="entityName" class="block text-sm font-medium text-gray-700 mb-1">Name (Company/Organization Name)</label>166 <input type="text" id="entityName" name="entityName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>167 </div>168 </div>169 170 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">171 <div>172 <label for="city" class="block text-sm font-medium text-gray-700 mb-1">City</label>173 <input type="text" id="city" name="city" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>174 </div>175 176 <div>177 <label for="tinNumber" class="block text-sm font-medium text-gray-700 mb-1">TIN Number (Optional)</label>178 <input type="text" id="tinNumber" name="tinNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">179 </div>180 181 <div>182 <label for="vrnNumber" class="block text-sm font-medium text-gray-700 mb-1">VRN Number (Optional)</label>183 <input type="text" id="vrnNumber" name="vrnNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">184 </div>185 186 <div>187 <label for="customerScale" class="block text-sm font-medium text-gray-700 mb-1">Customer Scale</label>188 <select id="customerScale" name="customerScale" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">189 <option value="Small">Small</option>190 <option value="Medium">Medium</option>191 <option value="Large">Large</option>192 </select>193 </div>194 </div>195 196 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">197 <div>198 <label for="physicalAddress" class="block text-sm font-medium text-gray-700 mb-1">Physical Address</label>199 <textarea id="physicalAddress" name="physicalAddress" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required></textarea>200 </div>201 202 <div>203 <label for="billingAddress" class="block text-sm font-medium text-gray-700 mb-1">Billing Address</label>204 <textarea id="billingAddress" name="billingAddress" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"></textarea>205 </div>206 </div>207 208 <div class="border-t pt-4 mt-6">209 <h3 class="text-lg font-medium text-gray-800 mb-4">Contact Person</h3>210 211 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">212 <div>213 <label for="contactFirstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>214 <input type="text" id="contactFirstName" name="contactFirstName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>215 </div>216 217 <div>218 <label for="contactLastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>219 <input type="text" id="contactLastName" name="contactLastName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>220 </div>221 222 <div>223 <label for="contactPhone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>224 <input type="tel" id="contactPhone" name="contactPhone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>225 </div>226 227 <div>228 <label for="contactEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>229 <input type="email" id="contactEmail" name="contactEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>230 </div>231 232 <div>233 <label for="contactPosition" class="block text-sm font-medium text-gray-700 mb-1">Position</label>234 <input type="text" id="contactPosition" name="contactPosition" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">235 </div>236 237 <div>238 <label for="contactDepartment" class="block text-sm font-medium text-gray-700 mb-1">Department</label>239 <input type="text" id="contactDepartment" name="contactDepartment" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">240 </div>241 </div>242 </div>243 244 <div class="pt-6 border-t">245 <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">246 Save Customer247 </button>248 </div>249 </form>250 251 <!-- Individual Form (Hidden by default) -->252 <form id="individualForm" class="space-y-4 hidden">253 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">254 <div>255 <label for="individualFirstName" class="block text-sm font-medium text-gray-700 mb-1">First Name</label>256 <input type="text" id="individualFirstName" name="individualFirstName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>257 </div>258 259 <div>260 <label for="individualLastName" class="block text-sm font-medium text-gray-700 mb-1">Last Name</label>261 <input type="text" id="individualLastName" name="individualLastName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>262 </div>263 264 <div>265 <label for="individualPhone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>266 <input type="tel" id="individualPhone" name="individualPhone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>267 </div>268 269 <div>270 <label for="individualEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>271 <input type="email" id="individualEmail" name="individualEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>272 </div>273 274 <div>275 <label for="individualCity" class="block text-sm font-medium text-gray-700 mb-1">City</label>276 <input type="text" id="individualCity" name="individualCity" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>277 </div>278 279 <div>280 <label for="individualCustomerScale" class="block text-sm font-medium text-gray-700 mb-1">Customer Scale</label>281 <select id="individualCustomerScale" name="individualCustomerScale" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">282 <option value="Small">Small</option>283 <option value="Medium">Medium</option>284 <option value="Large">Large</option>285 </select>286 </div>287 288 <div class="md:col-span-2">289 <label for="individualPhysicalAddress" class="block text-sm font-medium text-gray-700 mb-1">Physical Address</label>290 <textarea id="individualPhysicalAddress" name="individualPhysicalAddress" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required></textarea>291 </div>292 293 <div>294 <label for="individualTinNumber" class="block text-sm font-medium text-gray-700 mb-1">TIN Number (Optional)</label>295 <input type="text" id="individualTinNumber" name="individualTinNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">296 </div>297 298 <div>299 <label for="individualVrnNumber" class="block text-sm font-medium text-gray-700 mb-1">VRN Number (Optional)</label>300 <input type="text" id="individualVrnNumber" name="individualVrnNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">301 </div>302 </div>303 304 <div class="pt-6">305 <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">306 Save Customer307 </button>308 </div>309 </form>310 </div>311 312 <!-- Customer List -->313 <div class="bg-white rounded-xl shadow-sm p-6">314 <div class="flex items-center justify-between mb-6">315 <h2 class="text-xl font-bold text-gray-800">Your Customers</h2>316 <div class="relative">317 <input type="text" placeholder="Search customers..." class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary-500 focus:border-primary-500 pl-10">318 <i data-feather="search" class="absolute left-3 top-3 text-gray-400"></i>319 </div>320 </div>321 322 <div class="overflow-x-auto">323 <table class="min-w-full divide-y divide-gray-200">324 <thead class="bg-gray-50">325 <tr>326 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer Code</th>327 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>328 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>329 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th>330 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Registered Date</th>331 <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>332 </tr>333 </thead>334 <tbody class="bg-white divide-y divide-gray-200">335 <tr>336 <td class="px-6 py-4 whitespace-nowrap">337 <div class="text-sm font-medium text-gray-900">SPC-2025-001</div>338 </td>339 <td class="px-6 py-4 whitespace-nowrap">340 <div class="text-sm text-gray-900">ABC Company</div>341 </td>342 <td class="px-6 py-4 whitespace-nowrap">343 <div class="text-sm text-gray-900">+255712345678</div>344 </td>345 <td class="px-6 py-4 whitespace-nowrap">346 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Company</span>347 </td>348 <td class="px-6 py-4 whitespace-nowrap">349 <div class="text-sm text-gray-900">Jun 1, 2023</div>350 </td>351 <td class="px-6 py-4 whitespace-nowrap">352 <button class="text-primary-600 hover:text-primary-900 mr-3">353 <i data-feather="edit" class="w-4 h-4"></i>354 </button>355 </td>356 </tr>357 <tr>358 <td class="px-6 py-4 whitespace-nowrap">359 <div class="text-sm font-medium text-gray-900">SPC-2025-002</div>360 </td>361 <td class="px-6 py-4 whitespace-nowrap">362 <div class="text-sm text-gray-900">John Smith</div>363 </td>364 <td class="px-6 py-4 whitespace-nowrap">365 <div class="text-sm text-gray-900">+255754321987</div>366 </td>367 <td class="px-6 py-4 whitespace-nowrap">368 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Individual</span>369 </td>370 <td class="px-6 py-4 whitespace-nowrap">371 <div class="text-sm text-gray-900">Jun 2, 2023</div>372 </td>373 <td class="px-6 py-4 whitespace-nowrap">374 <button class="text-primary-600 hover:text-primary-900 mr-3">375 <i data-feather="edit" class="w-4 h-4"></i>376 </button>377 </td>378 </tr>379 <tr>380 <td class="px-6 py-4 whitespace-nowrap">381 <div class="text-sm font-medium text-gray-900">SPC-2025-003</div>382 </td>383 <td class="px-6 py-4 whitespace-nowrap">384 <div class="text-sm text-gray-900">XYZ Organization</div>385 </td>386 <td class="px-6 py-4 whitespace-nowrap">387 <div class="text-sm text-gray-900">+255713579246</div>388 </td>389 <td class="px-6 py-4 whitespace-nowrap">390 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Organization</span>391 </td>392 <td class="px-6 py-4 whitespace-nowrap">393 <div class="text-sm text-gray-900">Jun 3, 2023</div>394 </td>395 <td class="px-6 py-4 whitespace-nowrap">396 <button class="text-primary-600 hover:text-primary-900 mr-3">397 <i data-feather="edit" class="w-4 h-4"></i>398 </button>399 </td>400 </tr>401 <tr>402 <td class="px-6 py-4 whitespace-nowrap">403 <div class="text-sm font-medium text-gray-900">SPC-2025-004</div>404 </td>405 <td class="px-6 py-4 whitespace-nowrap">406 <div class="text-sm text-gray-900">Sarah Johnson</div>407 </td>408 <td class="px-6 py-4 whitespace-nowrap">409 <div class="text-sm text-gray-900">+255768432156</div>410 </td>411 <td class="px-6 py-4 whitespace-nowrap">412 <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Individual</span>413 </td>414 <td class="px-6 py-4 whitespace-nowrap">415 <div class="text-sm text-gray-900">Jun 5, 2023</div>416 </td>417 <td class="px-6 py-4 whitespace-nowrap">418 <button class="text-primary-600 hover:text-primary-900 mr-3">419 <i data-feather="edit" class="w-4 h-4"></i>420 </button>421 </td>422 </tr>423 </tbody>424 </table>425 </div>426 427 <div class="flex items-center justify-between mt-4">428 <div class="text-sm text-gray-500">429 Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">42</span> customers430 </div>431 <div class="flex space-x-2">432 <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">433 Previous434 </button>435 <button class="px-3 py-1 border border-primary-600 rounded-md text-sm font-medium text-white bg-primary-600 hover:bg-primary-700">436 1437 </button>438 <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">439 2440 </button>441 <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">442 3443 </button>444 <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">445 Next446 </button>447 </div>448 </div>449 </div>450 </main>451 </div>452 </div>453 454 <!-- Edit Customer Modal -->455 <div id="editCustomerModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center p-4">456 <div class="bg-white rounded-xl w-full max-w-2xl animate-fade-in">457 <div class="flex justify-between items-center px-6 py-4 border-b">458 <h3 class="text-lg font-bold text-gray-900">Edit Customer Information</h3>459 <button onclick="closeModal('editCustomerModal')" class="text-gray-400 hover:text-gray-600">460 <i data-feather="x"></i>461 </button>462 </div>463 464 <form id="editCustomerForm" class="p-6 space-y-4">465 <div class="grid grid-cols-1 md:grid-cols-2 gap-4">466 <div>467 <label for="editCustomerCode" class="block text-sm font-medium text-gray-700 mb-1">Customer Code</label>468 <input type="text" id="editCustomerCode" name="editCustomerCode" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" readonly>469 </div>470 471 <div>472 <label for="editCustomerName" class="block text-sm font-medium text-gray-700 mb-1">Customer Name</label>473 <input type="text" id="editCustomerName" name="editCustomerName" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>474 </div>475 476 <div>477 <label for="editCustomerPhone" class="block text-sm font-medium text-gray-700 mb-1">Phone</label>478 <input type="tel" id="editCustomerPhone" name="editCustomerPhone" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>479 </div>480 481 <div>482 <label for="editCustomerEmail" class="block text-sm font-medium text-gray-700 mb-1">Email</label>483 <input type="email" id="editCustomerEmail" name="editCustomerEmail" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">484 </div>485 486 <div>487 <label for="editCustomerCity" class="block text-sm font-medium text-gray-700 mb-1">City</label>488 <input type="text" id="editCustomerCity" name="editCustomerCity" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required>489 </div>490 491 <div>492 <label for="editCustomerScale" class="block text-sm font-medium text-gray-700 mb-1">Customer Scale</label>493 <select id="editCustomerScale" name="editCustomerScale" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">494 <option value="Small">Small</option>495 <option value="Medium">Medium</option>496 <option value="Large">Large</option>497 </select>498 </div>499 500 <div class="md:col-span-2">501 <label for="editPhysicalAddress" class="block text-sm font-medium text-gray-700 mb-1">Physical Address</label>502 <textarea id="editPhysicalAddress" name="editPhysicalAddress" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500" required></textarea>503 </div>504 505 <div>506 <label for="editTinNumber" class="block text-sm font-medium text-gray-700 mb-1">TIN Number</label>507 <input type="text" id="editTinNumber" name="editTinNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">508 </div>509 510 <div>511 <label for="editVrnNumber" class="block text-sm font-medium text-gray-700 mb-1">VRN Number</label>512 <input type="text" id="editVrnNumber" name="editVrnNumber" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500">513 </div>514 </div>515 516 <div class="pt-6 border-t">517 <button type="submit" class="px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500">518 Save Changes519 </button>520 <button type="button" onclick="closeModal('editCustomerModal')" class="ml-2 px-4 py-2 border border-gray-300 rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500">521 Cancel522 </button>523 </div>524 </form>525 </div>526 </div>527 528 <script>529 // Initialize feather icons530 feather.replace();531 532 // Toggle sidebar533 const toggleSidebar = document.getElementById('toggleSidebar');534 const sidebar = document.querySelector('.sidebar');535 const content = document.querySelector('.content');536 537 toggleSidebar.addEventListener('click', function() {538 sidebar.classList.toggle('collapsed');539 content.classList.toggle('expanded');540 541 if (sidebar.classList.contains('collapsed')) {542 toggleSidebar.innerHTML = '<i data-feather="chevron-right"></i>';543 } else {544 toggleSidebar.innerHTML = '<i data-feather="chevron-left"></i>';545 }546 feather.replace();547 });548 549 // Toggle between non-individual and individual forms550 const nonIndividualBtn = document.getElementById('nonIndividualBtn');551 const individualBtn = document.getElementById('individualBtn');552 const nonIndividualForm = document.getElementById('nonIndividualForm');553 const individualForm = document.getElementById('individualForm');554 555 nonIndividualBtn.addEventListener('click', function() {556 nonIndividualBtn.classList.add('active', 'text-primary-600', 'border-primary-600');557 nonIndividualBtn.classList.remove('text-gray-700', 'border-gray-300');558 individualBtn.classList.remove('active', 'text-primary-600', 'border-primary-600');559 individualBtn.classList.add('text-gray-700', 'border-gray-300');560 nonIndividualForm.classList.remove('hidden');561 individualForm.classList.add('hidden');562 });563 564 individualBtn.addEventListener('click', function() {565 individualBtn.classList.add('active', 'text-primary-600', 'border-primary-600');566 individualBtn.classList.remove('text-gray-700', 'border-gray-300');567 nonIndividualBtn.classList.remove('active', 'text-primary-600', 'border-primary-600');568 nonIndividualBtn.classList.add('text-gray-700', 'border-gray-300');569 individualForm.classList.remove('hidden');570 nonIndividualForm.classList.add('hidden');571 });572 573 // Show/hide other segment input574 const customerSegment = document.getElementById('customerSegment');575 const otherSegmentDiv = document.getElementById('otherSegmentDiv');576 577 customerSegment.addEventListener('change', function() {578 if (this.value === 'Other') {579 otherSegmentDiv.style.display = 'block';580 } else {581 otherSegmentDiv.style.display = 'none';582 }583 });584 585 // Modal functions586 function openModal(modalId) {587 document.getElementById(modalId).classList.remove('hidden');588 document.getElementById(modalId).classList.add('flex');589 }590 591 function closeModal(modalId) {592 document.getElementById(modalId).classList.add('hidden');593 document.getElementById(modalId).classList.remove('flex');594 }595 596 // In a real app, you would fetch customer data when edit button is clicked597 document.querySelectorAll('button[data-feather="edit"]').forEach(button => {598 button.addEventListener('click', function() {599 // Get customer data from the row600 const row = this.closest('tr');601 const code = row.querySelector('td:first-child div').textContent;602 const name = row.querySelector('td:nth-child(2) div').textContent;603 const phone = row.querySelector('td:nth-child(3) div').textContent;604 605 // Fill the edit form (simplified for demo)606 document.getElementById('editCustomerCode').value = code;607 document.getElementById('editCustomerName').value = name;608 document.getElementById('editCustomerPhone').value = phone;609 610 openModal('editCustomerModal');611 });612 });613 614 // Form submissions615 document.getElementById('nonIndividualForm').addEventListener('submit', function(e) {616 e.preventDefault();617 // Here you would typically make an AJAX call to your PHP backend618 console.log('Non-individual form submitted', new FormData(this));619 620 // Show success message621 alert('Customer registered successfully!');622 623 // In a real app, you would update the customer list624 });625 626 document.getElementById('individualForm').addEventListener('submit', function(e) {627 e.preventDefault();628 // Here you would typically make an AJAX call to your PHP backend629 console.log('Individual form submitted', new FormData(this));630 631 // Show success message632 alert('Customer registered successfully!');633 634 // In a real app, you would update the customer list635 });636 637 document.getElementById('editCustomerForm').addEventListener('submit', function(e) {638 e.preventDefault();639 // Here you would typically make an AJAX call to your PHP backend640 console.log('Edit form submitted', new FormData(this));641 642 // Close modal and show success message643 closeModal('editCustomerModal');644 alert('Customer information updated successfully!');645 646 // In a real app, you would update the row in the table647 });648 </script>649</body>650</html>651