<?php
echo form_open('customers/save/' . $person_info->person_id, array('id' => 'customer_form'));
?>

<style>
    /* ── New Customer Form – WAK POS Redesign ── */
    #required_fields_message {
        display: none;
    }

    #customer_form {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        color: #1f2937;
    }

    #error_message_box {
        list-style: none;
        margin: 0 0 12px;
        padding: 0;
    }

    #error_message_box li {
        background: #fef2f2;
        border: 1px solid #fecaca;
        border-left: 4px solid #e87722;
        border-radius: 7px;
        padding: 8px 12px;
        font-size: 12.5px;
        color: #b91c1c;
        margin-bottom: 6px;
    }

    .nc-required-note {
        background: #fff8f3;
        border-bottom: 1px solid #fde8d5;
        padding: 7px 16px;
        font-size: 11.5px;
        color: #b45309;
        display: flex;
        align-items: center;
        gap: 5px;
        margin-bottom: 16px;
        border-radius: 8px;
    }

    .nc-section {
        background: #ffffff;
        border: 1.5px solid #f0f0f0;
        border-radius: 12px;
        padding: 16px 18px;
        margin-bottom: 14px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    }

    .nc-section-label {
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 1.2px;
        color: #e87722;
        text-transform: uppercase;
        margin-bottom: 14px;
        padding-bottom: 8px;
        border-bottom: 1.5px solid #fde8d5;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .nc-section-label svg {
        width: 15px;
        height: 15px;
        stroke: #e87722;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex-shrink: 0;
    }

    .nc-grid-2 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
    }

    .nc-grid-1 {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .nc-field {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .nc-field label {
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #6b7280 !important;
        letter-spacing: 0.6px !important;
        text-transform: uppercase !important;
        float: none !important;
        width: auto !important;
        text-align: left !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nc-field label .req {
        color: #e87722;
        margin-left: 2px;
    }

    .nc-field input[type="text"],
    .nc-field input[type="email"],
    .nc-field input[type="tel"],
    .nc-field input[type="number"],
    .nc-field textarea,
    .nc-field select {
        height: 38px !important;
        border: 1.5px solid #e5e7eb !important;
        border-radius: 8px !important;
        padding: 0 12px !important;
        font-size: 13.5px !important;
        color: #111827 !important;
        background: #fafafa !important;
        outline: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: border-color 0.15s, box-shadow 0.15s !important;
        box-shadow: none !important;
        margin: 0 !important;
        float: none !important;
    }

    .nc-field input:focus,
    .nc-field textarea:focus,
    .nc-field select:focus {
        border-color: #e87722 !important;
        background: #ffffff !important;
        box-shadow: 0 0 0 3px rgba(232, 119, 34, 0.12) !important;
    }

    .nc-field textarea {
        height: auto !important;
        min-height: 72px !important;
        padding: 9px 12px !important;
        resize: vertical !important;
        line-height: 1.5 !important;
    }

    .nc-checkbox-row {
        display: flex;
        align-items: center;
        gap: 9px;
        padding: 9px 12px;
        background: #fafafa;
        border: 1.5px solid #e5e7eb;
        border-radius: 8px;
        height: 38px;
        box-sizing: border-box;
    }

    .nc-checkbox-row input[type="checkbox"] {
        width: 16px !important;
        height: 16px !important;
        accent-color: #e87722;
        cursor: pointer;
        margin: 0 !important;
        flex-shrink: 0;
    }

    .nc-checkbox-row span {
        font-size: 13px;
        color: #374151;
        font-weight: 500;
    }

    .nc-form-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-top: 6px;
        gap: 10px;
    }

    .nc-btn-submit {
        background: linear-gradient(135deg, #e87722 0%, #c45e10 100%) !important;
        border: none !important;
        border-radius: 9px !important;
        padding: 10px 26px !important;
        font-size: 13.5px !important;
        color: #ffffff !important;
        cursor: pointer !important;
        font-weight: 600 !important;
        letter-spacing: 0.3px !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 7px !important;
        transition: opacity 0.15s, transform 0.1s !important;
        float: none !important;
        width: auto !important;
        height: auto !important;
        line-height: normal !important;
    }

    .nc-btn-submit:hover {
        opacity: 0.9 !important;
        transform: translateY(-1px) !important;
    }

    #customer_form {
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px;
    }

    .nc-section {
        box-sizing: border-box;
        width: 100%;
    }

    .nc-field input,
    .nc-field textarea {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ── Responsive ── */
    @media (max-width: 768px) {

        .nc-grid-2 {
            grid-template-columns: 1fr;
        }

        .nc-section {
            padding: 12px 14px;
            margin-bottom: 10px;
        }

        .nc-section-label {
            font-size: 10px;
            margin-bottom: 10px;
        }

        .nc-field input[type="text"],
        .nc-field input[type="email"],
        .nc-field input[type="tel"],
        .nc-field input[type="number"],
        .nc-field textarea,
        .nc-field select {
            font-size: 14px !important;
            height: 40px !important;
        }

        .nc-checkbox-row {
            height: auto;
            padding: 10px 12px;
        }

        .nc-form-footer {
            padding-top: 10px;
        }

        .nc-btn-submit {
            width: 100% !important;
            justify-content: center !important;
            padding: 12px !important;
        }
    }

    @media (max-width: 480px) {

        .nc-required-note {
            font-size: 11px;
            padding: 6px 12px;
        }

        .nc-field label {
            font-size: 10px !important;
        }

        .nc-field input[type="text"],
        .nc-field input[type="email"],
        .nc-field input[type="tel"],
        .nc-field textarea {
            font-size: 13px !important;
        }
    }
</style>

<ul id="error_message_box"></ul>

<div class="nc-required-note">
    <svg viewBox="0 0 24 24" style="width:13px;height:13px;stroke:#b45309;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0">
        <circle cx="12" cy="12" r="10" />
        <line x1="12" y1="8" x2="12" y2="12" />
        <line x1="12" y1="16" x2="12.01" y2="16" />
    </svg>
    Fields marked <strong style="color:#e87722;margin:0 3px">*</strong> are required
</div>

<!-- ── SECTION 1: Personal Info ── -->
<div class="nc-section">
    <div class="nc-section-label">
        <svg viewBox="0 0 24 24">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
            <circle cx="12" cy="7" r="4" />
        </svg>
        Personal Info
    </div>
    <div class="nc-grid-2">
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_first_name') . '<span class="req">*</span>', 'first_name'); ?>
            <?php echo form_input(array('name' => 'first_name', 'id' => 'first_name', 'value' => $person_info->first_name, 'placeholder' => 'e.g. Kwame')); ?>
        </div>
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_last_name') . '<span class="req">*</span>', 'last_name'); ?>
            <?php echo form_input(array('name' => 'last_name', 'id' => 'last_name', 'value' => $person_info->last_name, 'placeholder' => 'e.g. Mensah')); ?>
        </div>
    </div>
</div>

<!-- ── SECTION 2: Contact Details ── -->
<div class="nc-section">
    <div class="nc-section-label">
        <svg viewBox="0 0 24 24">
            <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.41 2 2 0 0 1 3.6 1.22h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.81a16 16 0 0 0 6.29 6.29l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z" />
        </svg>
        Contact Details
    </div>
    <div class="nc-grid-2">
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_email'), 'email'); ?>
            <?php echo form_input(array('name' => 'email', 'id' => 'email', 'type' => 'email', 'value' => $person_info->email, 'placeholder' => 'email@example.com')); ?>
        </div>
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_phone_number'), 'phone_number'); ?>
            <?php echo form_input(array('name' => 'phone_number', 'id' => 'phone_number', 'value' => $person_info->phone_number, 'placeholder' => '+233 xx xxx xxxx')); ?>
        </div>
    </div>
</div>

<!-- ── SECTION 3: Address ── -->
<div class="nc-section">
    <div class="nc-section-label">
        <svg viewBox="0 0 24 24">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
            <circle cx="12" cy="10" r="3" />
        </svg>
        Address
    </div>
    <div class="nc-grid-1">
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_address_1'), 'address_1'); ?>
            <?php echo form_input(array('name' => 'address_1', 'id' => 'address_1', 'value' => $person_info->address_1, 'placeholder' => 'Street / Area')); ?>
        </div>
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_address_2'), 'address_2'); ?>
            <?php echo form_input(array('name' => 'address_2', 'id' => 'address_2', 'value' => $person_info->address_2, 'placeholder' => 'Landmark / Suite (optional)')); ?>
        </div>
    </div>
    <div class="nc-grid-2" style="margin-top:12px">
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_city'), 'city'); ?>
            <?php echo form_input(array('name' => 'city', 'id' => 'city', 'value' => $person_info->city, 'placeholder' => 'e.g. Accra')); ?>
        </div>
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_state'), 'state'); ?>
            <?php echo form_input(array('name' => 'state', 'id' => 'state', 'value' => $person_info->state, 'placeholder' => 'e.g. Greater Accra')); ?>
        </div>
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_zip'), 'zip'); ?>
            <?php echo form_input(array('name' => 'zip', 'id' => 'zip', 'value' => $person_info->zip, 'placeholder' => 'Optional')); ?>
        </div>
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_country'), 'country'); ?>
            <?php echo form_input(array('name' => 'country', 'id' => 'country', 'value' => $person_info->country, 'placeholder' => 'e.g. Ghana')); ?>
        </div>
    </div>
</div>

<!-- ── SECTION 4: Additional Info ── -->
<div class="nc-section">
    <div class="nc-section-label">
        <svg viewBox="0 0 24 24">
            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
            <polyline points="14 2 14 8 20 8" />
            <line x1="16" y1="13" x2="8" y2="13" />
            <line x1="16" y1="17" x2="8" y2="17" />
            <polyline points="10 9 9 9 8 9" />
        </svg>
        Additional Info
    </div>
    <div class="nc-grid-2">
        <div class="nc-field">
            <?php echo form_label($this->lang->line('customers_account_number'), 'account_number'); ?>
            <?php echo form_input(array('name' => 'account_number', 'id' => 'account_number', 'value' => $person_info->account_number, 'placeholder' => 'Optional account ID')); ?>
        </div>
        <div class="nc-field">
            <?php echo form_label($this->lang->line('customers_taxable'), 'taxable'); ?>
            <div class="nc-checkbox-row">
                <?php echo form_checkbox('taxable', '1', $person_info->taxable == '' ? TRUE : (bool)$person_info->taxable, array('id' => 'taxable')); ?>
                <span>Taxable Customer</span>
            </div>
        </div>
    </div>
    <div class="nc-grid-1" style="margin-top:12px">
        <div class="nc-field">
            <?php echo form_label($this->lang->line('common_comments'), 'comments'); ?>
            <?php echo form_textarea(array('name' => 'comments', 'id' => 'comments', 'value' => $person_info->comments, 'placeholder' => 'Any notes about this customer...')); ?>
        </div>
    </div>
</div>

<!-- ── Footer / Submit ── -->
<div class="nc-form-footer">
    <?php
    echo form_submit(array(
        'name'  => 'submit',
        'id'    => 'submit',
        'value' => $this->lang->line('common_submit'),
        'class' => 'nc-btn-submit'
    ));
    ?>
</div>

<?php echo form_close(); ?>

<script type='text/javascript'>
    $(document).ready(function() {
        $('#customer_form').validate({
            submitHandler: function(form) {
                $(form).ajaxSubmit({
                    success: function(response) {
                        tb_remove();
                        post_person_form_submit(response);
                    },
                    dataType: 'json'
                });
            },
            errorLabelContainer: "#error_message_box",
            wrapper: "li",
            rules: {
                first_name: "required",
                last_name: "required",
                email: "email"
            },
            messages: {
                first_name: "<?php echo $this->lang->line('common_first_name_required'); ?>",
                last_name: "<?php echo $this->lang->line('common_last_name_required'); ?>",
                email: "<?php echo $this->lang->line('common_email_invalid_format'); ?>"
            }
        });
    });
</script>