<?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>