780 lines
50 KiB
PHP
780 lines
50 KiB
PHP
<?php
|
|
session_start();
|
|
require_once 'includes/auth_helpers.php';
|
|
redirect_if_not_authenticated();
|
|
redirect_if_no_permission('create_application');
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>New Customer Application</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
|
|
<style>
|
|
.form-section {
|
|
display: none;
|
|
}
|
|
.form-section.active {
|
|
display: block;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="#">Customer Master</a>
|
|
<div class="collapse navbar-collapse">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="index.php">Dashboard</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="logout.php">Logout</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div class="container mt-4">
|
|
<h2>New Customer Application</h2>
|
|
<form action="submit_application.php" method="POST" id="applicationForm">
|
|
<!-- Step 1: Company Details -->
|
|
<div class="form-section active" id="step1">
|
|
<div class="card mb-4">
|
|
<div class="card-header">Company Details</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="company_name" class="form-label">Company Name</label>
|
|
<input type="text" class="form-control" id="company_name" name="company_name" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="company_website" class="form-label">Company Website</label>
|
|
<input type="url" class="form-control" id="company_website" name="company_website">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="company_phone" class="form-label">Company Phone</label>
|
|
<input type="tel" class="form-control" id="company_phone" name="company_phone">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="sales_owner" class="form-label">Sales Owner</label>
|
|
<input type="text" class="form-control" id="sales_owner" name="sales_owner" required>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="payment_terms" class="form-label">Payment Terms</label>
|
|
<input type="text" class="form-control" id="payment_terms" name="payment_terms" required>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="tags" class="form-label">Tags</label>
|
|
<input type="text" class="form-control" id="tags" name="tags">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="notes" class="form-label">Notes</label>
|
|
<textarea class="form-control" id="notes" name="notes" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2: Financial & Credit Details -->
|
|
<div class="form-section" id="step2">
|
|
<div class="card mb-4">
|
|
<div class="card-header">Financial & Credit Details</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="major_product" class="form-label">Major Product of Customer</label>
|
|
<input type="text" class="form-control" id="major_product" name="major_product">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="capital" class="form-label">Capital</label>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="capital" name="capital">
|
|
<select class="form-select" name="capital_currency">
|
|
<option>USD</option>
|
|
<option>EUR</option>
|
|
<option>JPY</option>
|
|
<option>GBP</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="main_shareholders" class="form-label">Main Shareholders</label>
|
|
<input type="text" class="form-control" id="main_shareholders" name="main_shareholders">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="num_employees" class="form-label">Number of Employees</label>
|
|
<input type="number" class="form-control" id="num_employees" name="num_employees">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="payment_terms_ar" class="form-label">Payment Terms AR</label>
|
|
<input type="text" class="form-control" id="payment_terms_ar" name="payment_terms_ar">
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h6>Customer's P/L Information</h6>
|
|
<div class="row">
|
|
<div class="col-md-3 mb-3">
|
|
<label for="pl_year" class="form-label">Year</label>
|
|
<input type="number" class="form-control" id="pl_year" name="pl_year">
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="net_sales" class="form-label">Net Sales</label>
|
|
<input type="number" class="form-control" id="net_sales" name="net_sales">
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="net_income_margin" class="form-label">Net Income Margin</label>
|
|
<input type="number" class="form-control" id="net_income_margin" name="net_income_margin">
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="net_income_margin_ratio" class="form-label">Net Income Margin Ratio (%)</label>
|
|
<input type="number" class="form-control" id="net_income_margin_ratio" name="net_income_margin_ratio">
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h6>ROHM Sales Target (KUS$)</h6>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="sales_target_this_year" class="form-label">This Year</label>
|
|
<input type="number" class="form-control" id="sales_target_this_year" name="sales_target_this_year">
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="sales_target_next_year" class="form-label">Next Year</label>
|
|
<input type="number" class="form-control" id="sales_target_next_year" name="sales_target_next_year">
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="sales_target_after_next" class="form-label">After the Next</label>
|
|
<input type="number" class="form-control" id="sales_target_after_next" name="sales_target_after_next">
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h6>Credit Information</h6>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="credit_rank" class="form-label">Rank</label>
|
|
<input type="text" class="form-control" id="credit_rank" name="credit_rank">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="credit_limit" class="form-label">Limit (KUS$)</label>
|
|
<input type="number" class="form-control" id="credit_limit" name="credit_limit">
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h6>Credit Research</h6>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="credit_research_status" class="form-label">Status</label>
|
|
<input type="text" class="form-control" id="credit_research_status" name="credit_research_status">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="credit_research_reason" class="form-label">Reason</label>
|
|
<input type="text" class="form-control" id="credit_research_reason" name="credit_research_reason">
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="tax_rate_area" class="form-label">Tax Rate/Area (GST TYPE)</label>
|
|
<input type="text" class="form-control" id="tax_rate_area" name="tax_rate_area">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="billing_type" class="form-label">Billing Type</label>
|
|
<input type="text" class="form-control" id="billing_type" name="billing_type">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3: Del-To Informations -->
|
|
<div class="form-section" id="step3">
|
|
<div class="card mb-4">
|
|
<div class="card-header">Del-To Informations</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_code" class="form-label">Del-To Code</label>
|
|
<input type="text" class="form-control" id="del_to_code" name="del_to_code">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="delivery_abbreviation" class="form-label">Abbreviation of Delivery-To</label>
|
|
<input type="text" class="form-control" id="delivery_abbreviation" name="delivery_abbreviation">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="del_to_customer_name" class="form-label">Customer Name</label>
|
|
<input type="text" class="form-control" id="del_to_customer_name" name="del_to_customer_name">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_address_1" class="form-label">Address 1</label>
|
|
<input type="text" class="form-control" id="del_to_address_1" name="del_to_address_1">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_address_2" class="form-label">Address 2</label>
|
|
<input type="text" class="form-control" id="del_to_address_2" name="del_to_address_2">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_address_3" class="form-label">Address 3</label>
|
|
<input type="text" class="form-control" id="del_to_address_3" name="del_to_address_3">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_address_4" class="form-label">Address 4</label>
|
|
<input type="text" class="form-control" id="del_to_address_4" name="del_to_address_4">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_postcode" class="form-label">Postcode (Zip Code)</label>
|
|
<input type="text" class="form-control" id="del_to_postcode" name="del_to_postcode">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_phone" class="form-label">Phone Number</label>
|
|
<input type="text" class="form-control" id="del_to_phone" name="del_to_phone">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_area_code" class="form-label">Area Code</label>
|
|
<input type="text" class="form-control" id="del_to_area_code" name="del_to_area_code">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_transportation_code" class="form-label">Transportation Code</label>
|
|
<input type="text" class="form-control" id="del_to_transportation_code" name="del_to_transportation_code">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_stock_point_code" class="form-label">Stock Point Code</label>
|
|
<input type="text" class="form-control" id="del_to_stock_point_code" name="del_to_stock_point_code">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_recipient_section" class="form-label">Recipient Section</label>
|
|
<input type="text" class="form-control" id="del_to_recipient_section" name="del_to_recipient_section">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_country_code" class="form-label">Country Code</label>
|
|
<input type="text" class="form-control" id="del_to_country_code" name="del_to_country_code">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_shipment_flag" class="form-label">Shipment Flag</label>
|
|
<input type="text" class="form-control" id="del_to_shipment_flag" name="del_to_shipment_flag">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_transport_days" class="form-label">Number of Date for Transport</label>
|
|
<input type="text" class="form-control" id="del_to_transport_days" name="del_to_transport_days">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_shipment_condition_category" class="form-label">Shipment Condition: Category</label>
|
|
<input type="text" class="form-control" id="del_to_shipment_condition_category" name="del_to_shipment_condition_category">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label class="form-label">Transport Service Exist</label>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="del_to_transport_service_exist[]" value="SUN" id="sun">
|
|
<label class="form-check-label" for="sun">SUN</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="del_to_transport_service_exist[]" value="MON" id="mon">
|
|
<label class="form-check-label" for="mon">MON</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="del_to_transport_service_exist[]" value="TUE" id="tue">
|
|
<label class="form-check-label" for="tue">TUE</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="del_to_transport_service_exist[]" value="WED" id="wed">
|
|
<label class="form-check-label" for="wed">WED</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="del_to_transport_service_exist[]" value="THR" id="thr">
|
|
<label class="form-check-label" for="thr">THR</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="del_to_transport_service_exist[]" value="FRI" id="fri">
|
|
<label class="form-check-label" for="fri">FRI</label>
|
|
</div>
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" name="del_to_transport_service_exist[]" value="SAT" id="sat">
|
|
<label class="form-check-label" for="sat">SAT</label>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="del_to_shipment_condition_place" class="form-label">Shipment Condition: Place</label>
|
|
<input type="text" class="form-control" id="del_to_shipment_condition_place" name="del_to_shipment_condition_place">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 4: SOP -->
|
|
<div class="form-section" id="step4">
|
|
<div class="card mb-4">
|
|
<div class="card-header">SOP</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h5>Document Requirements</h5>
|
|
<div class="mb-3">
|
|
<label for="doc_req_do" class="form-label">D/O*</label>
|
|
<input type="text" class="form-control" id="doc_req_do" name="doc_req_do">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="doc_req_packing_list" class="form-label">Packing List*</label>
|
|
<input type="text" class="form-control" id="doc_req_packing_list" name="doc_req_packing_list">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="doc_req_invoice" class="form-label">Invoice*</label>
|
|
<input type="text" class="form-control" id="doc_req_invoice" name="doc_req_invoice">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="doc_req_export_permit" class="form-label">Export Permit</label>
|
|
<select class="form-select" id="doc_req_export_permit" name="doc_req_export_permit">
|
|
<option value="">Choose one</option>
|
|
<option value="YES">Yes</option>
|
|
<option value="NO">No</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="doc_req_po_do_inv" class="form-label">1 PO/1 DO/1 INV</label>
|
|
<select class="form-select" id="doc_req_po_do_inv" name="doc_req_po_do_inv">
|
|
<option value="">Choose one</option>
|
|
<option value="YES">Yes</option>
|
|
<option value="NO">No</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="doc_req_do_inv" class="form-label">1 DO/1 INV</label>
|
|
<select class="form-select" id="doc_req_do_inv" name="doc_req_do_inv">
|
|
<option value="">Choose one</option>
|
|
<option value="YES">Yes</option>
|
|
<option value="NO">No</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="doc_req_others" class="form-label">Others</label>
|
|
<textarea class="form-control" id="doc_req_others" name="doc_req_others" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h5>Packing Requirements</h5>
|
|
<div class="mb-3">
|
|
<label for="pack_req_one_line_carton" class="form-label">One Line One Carton</label>
|
|
<select class="form-select" id="pack_req_one_line_carton" name="pack_req_one_line_carton">
|
|
<option value="">Choose one</option>
|
|
<option value="YES">Yes</option>
|
|
<option value="NO">No</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="pack_req_one_item_carton" class="form-label">One Item One Carton</label>
|
|
<select class="form-select" id="pack_req_one_item_carton" name="pack_req_one_item_carton">
|
|
<option value="">Choose one</option>
|
|
<option value="YES">Yes</option>
|
|
<option value="NO">No</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="pack_req_one_item_pocket" class="form-label">One Item One Pocket</label>
|
|
<select class="form-select" id="pack_req_one_item_pocket" name="pack_req_one_item_pocket">
|
|
<option value="">Choose one</option>
|
|
<option value="YES">Yes</option>
|
|
<option value="NO">No</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="pack_req_thomson_label" class="form-label">Special Thomson Label</label>
|
|
<input type="text" class="form-control" id="pack_req_thomson_label" name="pack_req_thomson_label">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="pack_req_contents_label" class="form-label">Special Contents Label</label>
|
|
<input type="text" class="form-control" id="pack_req_contents_label" name="pack_req_contents_label">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="pack_req_delivery_schedule" class="form-label">Delivery schedule</label>
|
|
<input type="text" class="form-control" id="pack_req_delivery_schedule" name="pack_req_delivery_schedule">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h5>Forwarder Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="forwarder_name" class="form-label">Forwarder Name</label>
|
|
<input type="text" class="form-control" id="forwarder_name" name="forwarder_name">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="forwarder_code" class="form-label">Forwarder Code</label>
|
|
<input type="text" class="form-control" id="forwarder_code" name="forwarder_code">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="forwarder_address" class="form-label">Forwarder Address</label>
|
|
<textarea class="form-control" id="forwarder_address" name="forwarder_address" rows="3"></textarea>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="forwarder_contact_person" class="form-label">Contact Person</label>
|
|
<input type="text" class="form-control" id="forwarder_contact_person" name="forwarder_contact_person">
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="forwarder_phone" class="form-label">Phone</label>
|
|
<input type="tel" class="form-control" id="forwarder_phone" name="forwarder_phone">
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="forwarder_fax" class="form-label">Fax</label>
|
|
<input type="tel" class="form-control" id="forwarder_fax" name="forwarder_fax">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="forwarder_delivery_method" class="form-label">Delivery Method</label>
|
|
<select class="form-select" id="forwarder_delivery_method" name="forwarder_delivery_method">
|
|
<option value="">Choose one</option>
|
|
<option value="AIR">Air</option>
|
|
<option value="SEA">Sea</option>
|
|
<option value="LAND">Land</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="forwarder_delivery_timings" class="form-label">Delivery Timings</label>
|
|
<input type="text" class="form-control" id="forwarder_delivery_timings" name="forwarder_delivery_timings">
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="forwarder_delivery_requirements" class="form-label">Delivery Requirements</label>
|
|
<input type="text" class="form-control" id="forwarder_delivery_requirements" name="forwarder_delivery_requirements">
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h5>Special Instructions</h5>
|
|
<div class="row">
|
|
<div class="col-md-3 mb-3">
|
|
<label for="special_instructions_shipping_mark" class="form-label">Shipping Mark</label>
|
|
<select class="form-select" id="special_instructions_shipping_mark" name="special_instructions_shipping_mark">
|
|
<option value="">Choose one</option>
|
|
<option value="YES">Yes</option>
|
|
<option value="NO">No</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-3 mb-3">
|
|
<label for="special_instructions_fax_documents" class="form-label">Fax Documents</label>
|
|
<select class="form-select" id="special_instructions_fax_documents" name="special_instructions_fax_documents">
|
|
<option value="">Choose one</option>
|
|
<option value="YES">Yes</option>
|
|
<option value="NO">No</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="special_instructions_details" class="form-label">Details</label>
|
|
<input type="text" class="form-control" id="special_instructions_details" name="special_instructions_details">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="special_instructions_attention_to" class="form-label">Attention To</label>
|
|
<input type="text" class="form-control" id="special_instructions_attention_to" name="special_instructions_attention_to">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="special_instructions_fax_number" class="form-label">Fax Number</label>
|
|
<input type="text" class="form-control" id="special_instructions_fax_number" name="special_instructions_fax_number">
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="remarks" class="form-label">Remarks</label>
|
|
<textarea class="form-control" id="remarks" name="remarks" rows="3"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 5: Contacts -->
|
|
<div class="form-section" id="step5">
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
Contacts
|
|
<button type="button" class="btn btn-sm btn-primary" id="addContact"><i class="bi bi-plus-circle"></i> Add Contact</button>
|
|
</div>
|
|
<div class="card-body" id="contactsContainer">
|
|
<!-- Contact 1 -->
|
|
<div class="contact-group border p-3 mb-3">
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="radio" name="contact[0][is_primary]" id="contact_0_is_primary" value="1" checked>
|
|
<label class="form-check-label" for="contact_0_is_primary">Primary Contact</label>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3"><input type="text" name="contact[0][name]" class="form-control" placeholder="Name" required></div>
|
|
<div class="col-md-4 mb-3"><input type="email" name="contact[0][email]" class="form-control" placeholder="Email" required></div>
|
|
<div class="col-md-4 mb-3"><input type="tel" name="contact[0][phone]" class="form-control" placeholder="Phone"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 6: Addresses -->
|
|
<div class="form-section" id="step6">
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
Addresses
|
|
<button type="button" class="btn btn-sm btn-primary" id="addAddress"><i class="bi bi-plus-circle"></i> Add Address</button>
|
|
</div>
|
|
<div class="card-body" id="addressesContainer">
|
|
<!-- Address 1 -->
|
|
<div class="address-group border p-3 mb-3">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<select name="address[0][type]" class="form-select" required>
|
|
<option value="BILLING">Billing</option>
|
|
<option value="SHIPPING">Shipping</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3"><input type="text" name="address[0][line1]" class="form-control" placeholder="Address Line 1" required></div>
|
|
<div class="mb-3"><input type="text" name="address[0][line2]" class="form-control" placeholder="Address Line 2"></div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3"><input type="text" name="address[0][city]" class="form-control" placeholder="City" required></div>
|
|
<div class="col-md-4 mb-3"><input type="text" name="address[0][state]" class="form-control" placeholder="State/Province" required></div>
|
|
<div class="col-md-4 mb-3"><input type="text" name="address[0][postal_code]" class="form-control" placeholder="Postal Code" required></div>
|
|
</div>
|
|
<div class="mb-3"><input type="text" name="address[0][country]" class="form-control" placeholder="Country" required></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 7: Trade References -->
|
|
<div class="form-section" id="step7">
|
|
<div class="card mb-4">
|
|
<div class="card-header d-flex justify-content-between align-items-center">
|
|
Trade References
|
|
<button type="button" class="btn btn-sm btn-primary" id="addTradeReference"><i class="bi bi-plus-circle"></i> Add Trade Reference</button>
|
|
</div>
|
|
<div class="card-body" id="tradeReferencesContainer">
|
|
<!-- Trade Reference 1 -->
|
|
<div class="trade-reference-group border p-3 mb-3">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3"><input type="text" name="trade_reference[0][company_name]" class="form-control" placeholder="Company Name" required></div>
|
|
<div class="col-md-6 mb-3"><input type="text" name="trade_reference[0][contact_person]" class="form-control" placeholder="Contact Person" required></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3"><input type="email" name="trade_reference[0][email]" class="form-control" placeholder="Email" required></div>
|
|
<div class="col-md-6 mb-3"><input type="tel" name="trade_reference[0][phone]" class="form-control" placeholder="Phone"></div>
|
|
</div>
|
|
<div class="mb-3"><input type="text" name="trade_reference[0][address]" class="form-control" placeholder="Address" required></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 8: Bank Details -->
|
|
<div class="form-section" id="step8">
|
|
<div class="card mb-4">
|
|
<div class="card-header">Bank Details</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<label for="bank_name" class="form-label">Bank Name</label>
|
|
<input type="text" class="form-control" id="bank_name" name="bank_name">
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<label for="branch" class="form-label">Branch</label>
|
|
<input type="text" class="form-control" id="branch" name="branch">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3">
|
|
<label for="bsb_number" class="form-label">BSB Number</label>
|
|
<input type="text" class="form-control" id="bsb_number" name="bsb_number">
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="account_number" class="form-label">Account Number</label>
|
|
<input type="text" class="form-control" id="account_number" name="account_number">
|
|
</div>
|
|
<div class="col-md-4 mb-3">
|
|
<label for="account_name" class="form-label">Account Name</label>
|
|
<input type="text" class="form-control" id="account_name" name="account_name">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 9: Declaration -->
|
|
<div class="form-section" id="step9">
|
|
<div class="card mb-4">
|
|
<div class="card-header">Declaration</div>
|
|
<div class="card-body">
|
|
<div class="mb-3">
|
|
<label for="declaration_text" class="form-label">Declaration</label>
|
|
<textarea class="form-control" id="declaration_text" name="declaration_text" rows="5" required>I hereby declare that the information given in this application is true and correct to the best of my knowledge and belief.</textarea>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="signature" class="form-label">Signature</label>
|
|
<div class="border p-2">
|
|
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-secondary mt-2" id="clear-signature">Clear</button>
|
|
<input type="hidden" name="signature" id="signature-data">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between">
|
|
<button type="button" class="btn btn-secondary" id="prevBtn" style="display: none;">Previous</button>
|
|
<button type="button" class="btn btn-primary" id="nextBtn">Next</button>
|
|
<button type="submit" class="btn btn-success" id="submitBtn" style="display: none;">Submit Application</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/signature_pad@4.0.0/dist/signature_pad.umd.min.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
let currentStep = 1;
|
|
const steps = document.querySelectorAll('.form-section');
|
|
const prevBtn = document.getElementById('prevBtn');
|
|
const nextBtn = document.getElementById('nextBtn');
|
|
const submitBtn = document.getElementById('submitBtn');
|
|
|
|
const signaturePad = new SignaturePad(document.getElementById('signature-pad'));
|
|
|
|
document.getElementById('clear-signature').addEventListener('click', function () {
|
|
signaturePad.clear();
|
|
});
|
|
|
|
document.getElementById('applicationForm').addEventListener('submit', function() {
|
|
if (!signaturePad.isEmpty()) {
|
|
document.getElementById('signature-data').value = signaturePad.toDataURL();
|
|
}
|
|
});
|
|
|
|
function showStep(step) {
|
|
steps.forEach((s, index) => {
|
|
s.classList.toggle('active', index + 1 === step);
|
|
});
|
|
prevBtn.style.display = step === 1 ? 'none' : 'inline-block';
|
|
nextBtn.style.display = step === steps.length ? 'none' : 'inline-block';
|
|
submitBtn.style.display = step === steps.length ? 'inline-block' : 'none';
|
|
}
|
|
|
|
nextBtn.addEventListener('click', function() {
|
|
if (currentStep < steps.length) {
|
|
currentStep++;
|
|
showStep(currentStep);
|
|
}
|
|
});
|
|
|
|
prevBtn.addEventListener('click', function() {
|
|
if (currentStep > 1) {
|
|
currentStep--;
|
|
showStep(currentStep);
|
|
}
|
|
});
|
|
|
|
showStep(currentStep);
|
|
|
|
// Add Contact
|
|
let contactIndex = 1;
|
|
document.getElementById('addContact').addEventListener('click', function () {
|
|
const container = document.getElementById('contactsContainer');
|
|
const newContact = document.createElement('div');
|
|
newContact.className = 'contact-group border p-3 mb-3';
|
|
newContact.innerHTML = `
|
|
<button type="button" class="btn-close float-end" aria-label="Close" onclick="this.parentElement.remove()"></button>
|
|
<div class="form-check mb-2">
|
|
<input class="form-check-input" type="radio" name="contact[${contactIndex}][is_primary]" id="contact_${contactIndex}_is_primary" value="1">
|
|
<label class="form-check-label" for="contact_${contactIndex}_is_primary">Primary Contact</label>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3"><input type="text" name="contact[${contactIndex}][name]" class="form-control" placeholder="Name" required></div>
|
|
<div class="col-md-4 mb-3"><input type="email" name="contact[${contactIndex}][email]" class="form-control" placeholder="Email" required></div>
|
|
<div class="col-md-4 mb-3"><input type="tel" name="contact[${contactIndex}][phone]" class="form-control" placeholder="Phone"></div>
|
|
</div>`;
|
|
container.appendChild(newContact);
|
|
contactIndex++;
|
|
});
|
|
|
|
// Add Address
|
|
let addressIndex = 1;
|
|
document.getElementById('addAddress').addEventListener('click', function () {
|
|
const container = document.getElementById('addressesContainer');
|
|
const newAddress = document.createElement('div');
|
|
newAddress.className = 'address-group border p-3 mb-3';
|
|
newAddress.innerHTML = `
|
|
<button type="button" class="btn-close float-end" aria-label="Close" onclick="this.parentElement.remove()"></button>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<select name="address[${addressIndex}][type]" class="form-select" required>
|
|
<option value="BILLING">Billing</option>
|
|
<option value="SHIPPING">Shipping</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3"><input type="text" name="address[${addressIndex}][line1]" class="form-control" placeholder="Address Line 1" required></div>
|
|
<div class="mb-3"><input type="text" name="address[${addressIndex}][line2]" class="form-control" placeholder="Address Line 2"></div>
|
|
<div class="row">
|
|
<div class="col-md-4 mb-3"><input type="text" name="address[${addressIndex}][city]" class="form-control" placeholder="City" required></div>
|
|
<div class="col-md-4 mb-3"><input type="text" name="address[${addressIndex}][state]" class="form-control" placeholder="State/Province" required></div>
|
|
<div class="col-md-4 mb-3"><input type="text" name="address[${addressIndex}][postal_code]" class="form-control" placeholder="Postal Code" required></div>
|
|
</div>
|
|
<div class="mb-3"><input type="text" name="address[${addressIndex}][country]" class="form-control" placeholder="Country" required></div>`;
|
|
container.appendChild(newAddress);
|
|
addressIndex++;
|
|
});
|
|
|
|
// Add Trade Reference
|
|
let tradeReferenceIndex = 1;
|
|
document.getElementById('addTradeReference').addEventListener('click', function () {
|
|
const container = document.getElementById('tradeReferencesContainer');
|
|
const newTradeReference = document.createElement('div');
|
|
newTradeReference.className = 'trade-reference-group border p-3 mb-3';
|
|
newTradeReference.innerHTML = `
|
|
<button type="button" class="btn-close float-end" aria-label="Close" onclick="this.parentElement.remove()"></button>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3"><input type="text" name="trade_reference[${tradeReferenceIndex}][company_name]" class="form-control" placeholder="Company Name" required></div>
|
|
<div class="col-md-6 mb-3"><input type="text" name="trade_reference[${tradeReferenceIndex}][contact_person]" class="form-control" placeholder="Contact Person" required></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3"><input type="email" name="trade_reference[${tradeReferenceIndex}][email]" class="form-control" placeholder="Email" required></div>
|
|
<div class="col-md-6 mb-3"><input type="tel" name="trade_reference[${tradeReferenceIndex}][phone]" class="form-control" placeholder="Phone"></div>
|
|
</div>
|
|
<div class="mb-3"><input type="text" name="trade_reference[${tradeReferenceIndex}][address]" class="form-control" placeholder="Address" required></div>`;
|
|
container.appendChild(newTradeReference);
|
|
tradeReferenceIndex++;
|
|
});
|
|
|
|
// Uncheck other radio buttons when one is selected
|
|
document.getElementById('contactsContainer').addEventListener('change', function(e) {
|
|
if (e.target.type === 'radio' && e.target.checked) {
|
|
document.querySelectorAll('input[type="radio"][name^="contact"]').forEach(radio => {
|
|
if (radio !== e.target) {
|
|
radio.checked = false;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|