<?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-step { display: none; }
        .form-step-active { display: block; }
        .card-header { font-weight: bold; }
        .form-section-title { 
            font-weight: bold; 
            margin-top: 1.5rem; 
            margin-bottom: 1rem; 
            border-bottom: 1px solid #dee2e6; 
            padding-bottom: 0.5rem;
        }
    </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>
            <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>
    </nav>
    <div class="container mt-4">
        <h2>New Customer Application</h2>

        <?php if (isset($_SESSION['flash_message'])): ?>
            <div class="alert alert-<?php echo $_SESSION['flash_message']['type']; ?> alert-dismissible fade show" role="alert">
                <?php echo $_SESSION['flash_message']['message']; ?>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <?php unset($_SESSION['flash_message']); ?>
        <?php endif; ?>

        <form action="submit_application.php" method="POST" id="applicationForm">

            <!-- Step 1: Customer Information -->
            <div id="step-1" class="form-step form-step-active">
                <div class="card mb-4">
                    <div class="card-header">PAGE 1 of 6: CUSTOMER INFORMATION</div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-12 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>
                        <div class="mb-3">
                            <label for="company_address" class="form-label">Address</label>
                            <textarea class="form-control" id="company_address" name="company_address" rows="2"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="company_phone" class="form-label">Tel</label>
                                <input type="tel" class="form-control" id="company_phone" name="company_phone">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="fax" class="form-label">Fax</label>
                                <input type="tel" class="form-control" id="fax" name="fax">
                            </div>
                             <div class="col-md-4 mb-3">
                                <label for="email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="gst_reg_no" class="form-label">GST Reg. No.</label>
                                <input type="text" class="form-control" id="gst_reg_no" name="gst_reg_no">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="company_reg_no" class="form-label">Company Reg. No.</label>
                                <input type="text" class="form-control" id="company_reg_no" name="company_reg_no">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="date_of_incorporation" class="form-label">Date of Incorporation</label>
                                <input type="date" class="form-control" id="date_of_incorporation" name="date_of_incorporation">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="country_of_incorporation" class="form-label">Country of Incorporation</label>
                                <input type="text" class="form-control" id="country_of_incorporation" name="country_of_incorporation">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Nature of Business</label>
                            <div class="d-flex">
                                <div class="form-check me-3"><input class="form-check-input" type="radio" name="nature_of_business" id="nature_manufacturing" value="Manufacturing"><label class="form-check-label" for="nature_manufacturing">Manufacturing</label></div>
                                <div class="form-check me-3"><input class="form-check-input" type="radio" name="nature_of_business" id="nature_trading" value="Trading"><label class="form-check-label" for="nature_trading">Trading</label></div>
                                <div class="form-check me-3"><input class="form-check-input" type="radio" name="nature_of_business" id="nature_service" value="Service"><label class="form-check-label" for="nature_service">Service</label></div>
                                <div class="form-check"><input class="form-check-input" type="radio" name="nature_of_business" id="nature_others" value="Others"><label class="form-check-label" for="nature_others">Others</label></div>
                            </div>
                        </div>
                         <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="contact_person_name" class="form-label">Contact Person</label>
                                <input type="text" class="form-control" id="contact_person_name" name="contact_person_name">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="contact_person_designation" class="form-label">Designation</label>
                                <input type="text" class="form-control" id="contact_person_designation" name="contact_person_designation">
                            </div>
                             <div class="col-md-4 mb-3">
                                <label for="contact_person_phone" class="form-label">Contact No</label>
                                <input type="text" class="form-control" id="contact_person_phone" name="contact_person_phone">
                            </div>
                        </div>
                         <div class="row">
                             <div class="col-md-4 mb-3">
                                <label for="contact_person_email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="contact_person_email" name="contact_person_email">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="credit_terms_requested" class="form-label">Credit Terms Requested</label>
                                <input type="text" class="form-control" id="credit_terms_requested" name="credit_terms_requested">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="credit_limit_requested" class="form-label">Credit Limit Requested</label>
                                <input type="text" class="form-control" id="credit_limit_requested" name="credit_limit_requested">
                            </div>
                        </div>

                        <div class="form-section-title">ACCOUNT SET UP FOR</div>
                        <div class="d-flex">
                            <div class="form-check me-3"><input class="form-check-input" type="checkbox" name="account_setup_ar_statement" id="account_setup_ar_statement" value="1"><label class="form-check-label" for="account_setup_ar_statement">A/R Statement</label></div>
                            <div class="form-check me-3"><input class="form-check-input" type="checkbox" name="account_setup_dunning_letter" id="account_setup_dunning_letter" value="1"><label class="form-check-label" for="account_setup_dunning_letter">Dunning Letter</label></div>
                            <div class="form-check"><input class="form-check-input" type="checkbox" name="account_setup_ap_payment" id="account_setup_ap_payment" value="1"><label class="form-check-label" for="account_setup_ap_payment">A/P-Payment</label></div>
                        </div>
                        
                        <div class="form-section-title">DELIVERY TO</div>
                         <div class="mb-3">
                            <label for="del_to_address" class="form-label">Address</label>
                            <textarea class="form-control" id="del_to_address" name="del_to_address" rows="2"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="del_to_tel" class="form-label">Tel</label>
                                <input type="tel" class="form-control" id="del_to_tel" name="del_to_tel">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="del_to_fax" class="form-label">Fax</label>
                                <input type="tel" class="form-control" id="del_to_fax" name="del_to_fax">
                            </div>
                             <div class="col-md-4 mb-3">
                                <label for="del_to_contact_person" class="form-label">Contact Person</label>
                                <input type="text" class="form-control" id="del_to_contact_person" name="del_to_contact_person">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="del_to_designation" class="form-label">Designation</label>
                                <input type="text" class="form-control" id="del_to_designation" name="del_to_designation">
                            </div>
                             <div class="col-md-6 mb-3">
                                <label for="del_to_email" class="form-label">Email</label>
                                <input type="email" class="form-control" id="del_to_email" name="del_to_email">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-end">
                    <button type="button" class="btn btn-primary next-step">Next <i class="bi bi-arrow-right"></i></button>
                </div>
            </div>

            <!-- Step 2: Shareholder/Director Information -->
            <div id="step-2" class="form-step">
                 <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span>PAGE 2 of 6: PARTICULARS OF SHAREHOLDER'S / DIRECTOR'S</span>
                        <button type="button" class="btn btn-sm btn-primary" id="addShareholder"><i class="bi bi-plus-circle"></i> Add More</button>
                    </div>
                    <div class="card-body" id="shareholdersContainer">
                        <!-- Dynamic content will be inserted here -->
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary prev-step"><i class="bi bi-arrow-left"></i> Previous</button>
                    <button type="button" class="btn btn-primary next-step">Next <i class="bi bi-arrow-right"></i></button>
                </div>
            </div>

            <!-- Step 3: Trade References -->
            <div id="step-3" class="form-step">
                <div class="card mb-4">
                     <div class="card-header d-flex justify-content-between align-items-center">
                        <span>PAGE 3 of 6: TRADE REFERENCES</span>
                        <button type="button" class="btn btn-sm btn-primary" id="addTradeReference"><i class="bi bi-plus-circle"></i> Add More</button>
                    </div>
                    <div class="card-body" id="tradeReferencesContainer">
                        <!-- Dynamic content will be inserted here -->
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary prev-step"><i class="bi bi-arrow-left"></i> Previous</button>
                    <button type="button" class="btn btn-primary next-step">Next <i class="bi bi-arrow-right"></i></button>
                </div>
            </div>

            <!-- Step 4: Banker's Information -->
            <div id="step-4" class="form-step">
                <div class="card mb-4">
                    <div class="card-header">PAGE 4 of 6: BANKER'S INFORMATION</div>
                    <div class="card-body">
                         <div class="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="mb-3">
                            <label for="bank_address" class="form-label">Address</label>
                            <textarea class="form-control" id="bank_address" name="bank_address" rows="2"></textarea>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="bank_swift_code" class="form-label">Swift Code</label>
                                <input type="text" class="form-control" id="bank_swift_code" name="bank_swift_code">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="bank_account_no" class="form-label">Account No</label>
                                <input type="text" class="form-control" id="bank_account_no" name="bank_account_no">
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="bank_contact_person" class="form-label">Contact Person</label>
                                <input type="text" class="form-control" id="bank_contact_person" name="bank_contact_person">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="bank_telephone_no" class="form-label">Telephone No</label>
                                <input type="tel" class="form-control" id="bank_telephone_no" name="bank_telephone_no">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="bank_fax_no" class="form-label">Fax No</label>
                                <input type="tel" class="form-control" id="bank_fax_no" name="bank_fax_no">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary prev-step"><i class="bi bi-arrow-left"></i> Previous</button>
                    <button type="button" class="btn btn-primary next-step">Next <i class="bi bi-arrow-right"></i></button>
                </div>
            </div>

            <!-- Step 5: Financial Information -->
            <div id="step-5" class="form-step">
                <div class="card mb-4">
                    <div class="card-header">PAGE 5 of 6: FINANCIAL / CREDIT INFORMATION</div>
                    <div class="card-body">
                       <div class="row">
                           <div class="col-md-4 mb-3">
                                <label for="paid_up_capital" class="form-label">Paid-up Capital</label>
                                <input type="number" class="form-control" id="paid_up_capital" name="paid_up_capital" step="0.01">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="latest_audited_financial_year" class="form-label">For Latest Audited Financial Year</label>
                                <input type="text" class="form-control" id="latest_audited_financial_year" name="latest_audited_financial_year" placeholder="e.g., 2023">
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="currency" class="form-label">Currency</label>
                                <input type="text" class="form-control" id="currency" name="currency" placeholder="e.g., SGD">
                            </div>
                        </div>
                        <div class="row">
                             <div class="col-md-6 mb-3">
                                <label for="shareholder_equity" class="form-label">Shareholder's Equity</label>
                                <input type="number" class="form-control" id="shareholder_equity" name="shareholder_equity" step="0.01">
                            </div>
                             <div class="col-md-6 mb-3">
                                <label for="annual_turnover" class="form-label">Annual Turnover</label>
                                <input type="number" class="form-control" id="annual_turnover" name="annual_turnover" step="0.01">
                            </div>
                        </div>
                         <div class="row">
                             <div class="col-md-6 mb-3">
                                <label for="net_profit_loss" class="form-label">Net Profit / (Loss)</label>
                                <input type="number" class="form-control" id="net_profit_loss" name="net_profit_loss" step="0.01">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary prev-step"><i class="bi bi-arrow-left"></i> Previous</button>
                    <button type="button" class="btn btn-primary next-step">Next <i class="bi bi-arrow-right"></i></button>
                </div>
            </div>

            <!-- Step 6: Declaration -->
            <div id="step-6" class="form-step">
                <div class="card mb-4">
                    <div class="card-header">PAGE 6 of 6: DECLARATION AND AUTHORISATION</div>
                    <div class="card-body">
                        <p class="small">We, the undersigned, hereby apply for credit facility with your company and we declare that the information given above and in any attached documents is true and correct. We authorise you or your representative to obtain any further information you may require from our banker(s) or other sources to determine our credit worthiness and we agree to abide by your standard terms and conditions of sales.</p>
                        <p class="small">We futher undertake to inform you in writing of any changes in our shareholding / directorship / management and registered particulars, and we agree that we are liable for all debts incurred until such notice is received by you.</p>
                        <p class="small">In the event that the credit application is not approved, we understand that you are not obliged to assign any reason for the decision.</p>
                        
                        <div class="row mt-4">
                            <div class="col-md-6 mb-3">
                                <label for="declaration_name" class="form-label">Name</label>
                                <input type="text" class="form-control" id="declaration_name" name="declaration_name">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="declaration_designation" class="form-label">Designation</label>
                                <input type="text" class="form-control" id="declaration_designation" name="declaration_designation">
                            </div>
                        </div>
                         <div class="row">
                            <div class="col-md-6 mb-3">
                                 <label for="declaration_signature" class="form-label">Signature / Company Stamp</label>
                                 <div class="border p-2" style="height: 100px;">
                                     <!-- Placeholder for signature pad or image upload -->
                                     <small class="text-muted">Signature area</small>
                                 </div>
                                <input type="hidden" name="declaration_signature_data" id="declaration_signature_data">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="declaration_date" class="form-label">Date</label>
                                <input type="date" class="form-control" id="declaration_date" name="declaration_date">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-secondary prev-step"><i class="bi bi-arrow-left"></i> Previous</button>
                    <button type="submit" class="btn btn-success"><i class="bi bi-check-circle"></i> Submit Application</button>
                </div>
            </div>
        </form>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        let currentStep = 1;
        const steps = document.querySelectorAll('.form-step');

        function showStep(step) {
            steps.forEach((el, index) => {
                el.classList.toggle('form-step-active', index + 1 === step);
            });
            window.scrollTo(0, 0);
        }

        document.querySelectorAll('.next-step').forEach(button => {
            button.addEventListener('click', () => {
                // Add validation here if needed
                if (currentStep < steps.length) {
                    currentStep++;
                    showStep(currentStep);
                }
            });
        });

        document.querySelectorAll('.prev-step').forEach(button => {
            button.addEventListener('click', () => {
                if (currentStep > 1) {
                    currentStep--;
                    showStep(currentStep);
                }
            });
        });

        // --- Dynamic Rows ---
        let shareholderIndex = 0;
        const addShareholderBtn = document.getElementById('addShareholder');
        const shareholdersContainer = document.getElementById('shareholdersContainer');

        function addShareholderRow() {
            const index = shareholderIndex++;
            const newRow = document.createElement('div');
            newRow.className = 'shareholder-group border rounded p-3 mb-3 position-relative';
            newRow.innerHTML = `
                <button type="button" class="btn-close position-absolute top-0 end-0 p-2" aria-label="Close" onclick="this.parentElement.remove()"></button>
                <div class="row">
                    <div class="col-md-6 mb-2">
                        <label class="form-label">Name</label>
                        <input type="text" name="shareholder[${index}][name]" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-6 mb-2">
                         <label class="form-label">NRIC/FIN No.</label>
                        <input type="text" name="shareholder[${index}][nric_fin]" class="form-control form-control-sm">
                    </div>
                </div>
                <div class="mb-2">
                    <label class="form-label">Address</label>
                    <input type="text" name="shareholder[${index}][address]" class="form-control form-control-sm">
                </div>
                <div class="row">
                     <div class="col-md-6 mb-2">
                        <label class="form-label">% of Shareholding</label>
                        <input type="number" name="shareholder[${index}][perc_of_shareholding]" class="form-control form-control-sm" step="0.01">
                    </div>
                    <div class="col-md-6 mb-2">
                        <label class="form-label">Contact No.</label>
                        <input type="tel" name="shareholder[${index}][contact_no]" class="form-control form-control-sm">
                    </div>
                </div>`;
            shareholdersContainer.appendChild(newRow);
        }

        if(addShareholderBtn) addShareholderBtn.addEventListener('click', addShareholderRow);
       

        let tradeReferenceIndex = 0;
        const addTradeRefBtn = document.getElementById('addTradeReference');
        const tradeRefsContainer = document.getElementById('tradeReferencesContainer');

        function addTradeReferenceRow() {
            const index = tradeReferenceIndex++;
            const newRow = document.createElement('div');
            newRow.className = 'trade-reference-group border rounded p-3 mb-3 position-relative';
            newRow.innerHTML = `
                <button type="button" class="btn-close position-absolute top-0 end-0 p-2" aria-label="Close" onclick="this.parentElement.remove()"></button>
                <div class="row">
                    <div class="col-md-12 mb-2">
                        <label class="form-label">Company Name</label>
                        <input type="text" name="trade_reference[${index}][company_name]" class="form-control form-control-sm">
                    </div>
                </div>
                <div class="row">
                     <div class="col-md-4 mb-2">
                        <label class="form-label">Contact Person</label>
                        <input type="text" name="trade_reference[${index}][contact_person]" class="form-control form-control-sm">
                    </div>
                    <div class="col-md-4 mb-2">
                        <label class="form-label">Telephone No.</label>
                        <input type="tel" name="trade_reference[${index}][telephone_no]" class="form-control form-control-sm">
                    </div>
                     <div class="col-md-4 mb-2">
                        <label class="form-label">Fax No.</label>
                        <input type="tel" name="trade_reference[${index}][fax_no]" class="form-control form-control-sm">
                    </div>
                </div>`;
            tradeRefsContainer.appendChild(newRow);
        }
        
        if(addTradeRefBtn) addTradeRefBtn.addEventListener('click', addTradeReferenceRow);

        // Initialize first rows
        addShareholderRow();
        addTradeReferenceRow();
        addTradeReferenceRow();

    });
    </script>
</body>
</html>
