<?php $this->load->view("partial/header"); ?>

<style>
    #page_content {
        max-width: 100% !important;
        padding: 0 !important;
    }

    .register_page {
        display: grid;
        grid-template-columns: 1fr 360px;
        gap: 20px;
        padding: 20px 30px;
        min-height: calc(100vh - 120px);
        background: #f0f4ff;
        max-width: 1400px;
        margin: 0 auto;
        width: 100%;
    }

    .register_left {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .register_right {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .card {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.9);
        border-radius: 14px;
        padding: 16px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }

    .card_title {
        font-size: 13px;
        font-weight: 700;
        color: #555;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #f47f20;
        display: inline-block;
    }

    #page_title {
        font-size: 22px;
        font-weight: 700;
        color: #1a1a2e;
        text-align: center;
        padding: 8px 0 4px;
    }

    .error_message {
        background: rgba(220, 53, 69, 0.1);
        border: 1px solid rgba(220, 53, 69, 0.3);
        border-radius: 8px;
        padding: 10px 14px;
        color: #dc3545;
        font-size: 13px;
        margin: 0 16px;
    }

    .warning_message {
        background: rgba(255, 193, 7, 0.1);
        border: 1px solid rgba(255, 193, 7, 0.3);
        border-radius: 8px;
        padding: 10px 14px;
        color: #856404;
        font-size: 13px;
        margin: 0 16px;
    }

    .top_controls {
        display: flex;
        align-items: stretch;
        gap: 12px;
        flex-wrap: wrap;
    }

    /* Each form/group becomes a pill-card */
    .top_controls form,
    .top_controls>a {
        display: flex;
        align-items: center;
        background: none !important;
    }

    .tc-group {
        display: flex;
        align-items: center;
        gap: 10px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 255, 0.9));
        border: 1.5px solid rgba(244, 127, 32, 0.2);
        border-radius: 14px;
        padding: 10px 16px;
        box-shadow: 0 2px 12px rgba(244, 127, 32, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
        backdrop-filter: blur(8px);
        transition: box-shadow 0.2s, border-color 0.2s;
    }

    .tc-group:hover {
        border-color: rgba(244, 127, 32, 0.45);
        box-shadow: 0 4px 18px rgba(244, 127, 32, 0.15), 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .tc-group label {
        font-weight: 700;
        color: #e87722;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        white-space: nowrap;
        margin: 0;
    }

    .tc-group select {
        border: 1.5px solid #e5e7eb;
        border-radius: 9px;
        padding: 7px 12px;
        font-size: 13.5px;
        font-weight: 600;
        color: #1a1a2e;
        outline: none;
        background: #fff;
        cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s;
        appearance: auto;
    }

    .tc-group select:focus {
        border-color: #f47f20;
        box-shadow: 0 0 0 3px rgba(244, 127, 32, 0.15);
    }

    /* Scan item group stretches */
    .tc-group.scan-group {
        flex: 1;
        min-width: 260px;
    }

    #item {
        flex: 1;
        border: 1.5px solid #e5e7eb !important;
        border-radius: 9px !important;
        padding: 8px 14px !important;
        font-size: 14px !important;
        color: #1a1a2e !important;
        background: #fff !important;
        outline: none !important;
        transition: border-color 0.2s, box-shadow 0.2s !important;
        box-shadow: none !important;
        min-width: 0 !important;
    }

    #item:focus {
        border-color: #f47f20 !important;
        box-shadow: 0 0 0 3px rgba(244, 127, 32, 0.15) !important;
    }

    .orange_btn {
        background: linear-gradient(135deg, #f47f20, #e05f00);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 9px 18px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        box-shadow: 0 3px 10px rgba(244, 127, 32, 0.3);
        transition: all 0.2s;
        white-space: nowrap;
    }

    .orange_btn:hover {
        background: linear-gradient(135deg, #ff8f30, #f47f20);
        box-shadow: 0 5px 14px rgba(244, 127, 32, 0.45);
        transform: translateY(-1px);
        color: white;
        text-decoration: none;
    }

    .red_btn {
        background: linear-gradient(135deg, #dc3545, #c82333);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 9px 18px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3);
        transition: all 0.2s;
        width: 100%;
        margin-top: 6px;
    }

    .red_btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(220, 53, 69, 0.45);
    }

    .green_btn {
        background: linear-gradient(135deg, #28a745, #1e7e34);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 11px 18px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(40, 167, 69, 0.3);
        transition: all 0.2s;
        width: 100%;
        margin-top: 8px;
        letter-spacing: 0.3px;
    }

    .green_btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 5px 14px rgba(40, 167, 69, 0.45);
    }

    #register {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    #register thead tr {
        background: linear-gradient(135deg, #1a1a2e, #0f3460);
    }

    #register thead th {
        color: rgba(255, 255, 255, 0.85);
        padding: 10px 8px;
        text-align: left;
        font-weight: 600;
        font-size: 12px;
        letter-spacing: 0.3px;
    }

    #register tbody tr:not([style*="height"]) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        transition: background 0.15s;
    }

    #register tbody tr:not([style*="height"]):hover {
        background: rgba(244, 127, 32, 0.05);
    }

    #register tbody td {
        padding: 8px;
        color: #333;
        vertical-align: middle;
    }

    #register input[type=text] {
        border: 1px solid #ddd;
        border-radius: 6px;
        padding: 5px 8px;
        font-size: 13px;
        width: 100%;
        outline: none;
        transition: border-color 0.2s;
    }

    #register input[type=text]:focus {
        border-color: #f47f20;
    }

    #register input[type=submit] {
        background: #f47f20;
        color: white;
        border: none;
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
        font-weight: 600;
    }

    .delete_link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, #ff4d4d, #dc3545);
        color: #fff !important;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
        border-radius: 7px;
        padding: 4px 10px;
        letter-spacing: 0.4px;
        box-shadow: 0 2px 6px rgba(220, 53, 69, 0.35);
        transition: all 0.18s;
    }

    .delete_link:hover {
        background: linear-gradient(135deg, #e03131, #c0392b);
        box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
        transform: translateY(-1px);
        color: #fff !important;
        text-decoration: none;
    }

    .no_items_msg {
        text-align: center;
        padding: 24px;
        color: #999;
        font-style: italic;
        font-size: 14px;
    }

    .totals_row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        font-size: 14px;
        color: #444;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    .totals_row:last-child {
        border-bottom: none;
    }

    .totals_row .label {
        color: #666;
    }

    .totals_row .value {
        font-weight: 700;
        color: #1a1a2e;
    }

    .total_final {
        background: linear-gradient(135deg, #1a1a2e, #0f3460);
        border-radius: 10px;
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
    }

    .total_final .label {
        color: rgba(255, 255, 255, 0.7);
        font-size: 13px;
    }

    .total_final .value {
        color: #f47f20;
        font-size: 20px;
        font-weight: 700;
    }

    .customer_search input {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 9px 12px;
        font-size: 13px;
        outline: none;
        transition: border-color 0.2s;
        margin-bottom: 8px;
    }

    .customer_search input:focus {
        border-color: #f47f20;
    }

    .or_divider {
        text-align: center;
        color: #999;
        font-weight: 700;
        font-size: 13px;
        margin: 6px 0;
    }

    .payment_row {
        display: flex;
        gap: 8px;
        margin-bottom: 10px;
    }

    .payment_row select,
    .payment_row input {
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 8px 10px;
        font-size: 13px;
        outline: none;
        transition: border-color 0.2s;
        flex: 1;
    }

    .payment_row select:focus,
    .payment_row input:focus {
        border-color: #f47f20;
    }

    .payments_table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
        margin-top: 8px;
    }

    .payments_table th {
        background: #f8f9fa;
        padding: 6px 8px;
        text-align: left;
        font-weight: 600;
        color: #555;
        border-bottom: 2px solid #eee;
    }

    .payments_table td {
        padding: 6px 8px;
        border-bottom: 1px solid #eee;
        color: #333;
    }

    .comment_area {
        width: 100%;
        border: 1px solid #ddd;
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 13px;
        outline: none;
        resize: vertical;
        min-height: 60px;
        transition: border-color 0.2s;
        font-family: inherit;
    }

    .comment_area:focus {
        border-color: #f47f20;
    }

    .customer_badge {
        background: rgba(244, 127, 32, 0.1);
        border: 1px solid rgba(244, 127, 32, 0.3);
        border-radius: 8px;
        padding: 8px 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
    }

    .customer_badge .name {
        font-weight: 700;
        color: #1a1a2e;
    }

    .customer_badge a {
        color: #dc3545;
        font-size: 12px;
        text-decoration: none;
    }

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

        .register_page {
            grid-template-columns: 1fr 300px;
            gap: 14px;
            padding: 14px 16px;
        }
    }

    @media (max-width: 768px) {

        .register_page {
            grid-template-columns: 1fr;
            gap: 12px;
            padding: 12px;
        }

        /* Right column moves below left on mobile */
        .register_left {
            order: 1;
        }

        .register_right {
            order: 2;
        }

        /* Top controls stack */
        .top_controls {
            flex-direction: column;
            align-items: stretch;
            gap: 8px;
        }

        .top_controls form {
            width: 100%;
        }

        .tc-group {
            width: 100%;
            box-sizing: border-box;
        }

        .tc-group.scan-group {
            min-width: unset;
        }

        .top_controls>a {
            width: 100%;
        }

        .top_controls>a .orange_btn {
            width: 100%;
            text-align: center;
            display: block;
        }

        /* Cart table horizontal scroll */
        .card[style*="overflow:hidden"] {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
        }

        #register {
            min-width: 480px;
        }

        #register thead th {
            padding: 8px 6px;
            font-size: 11px;
        }

        #register tbody td {
            padding: 6px;
            font-size: 12px;
        }

        /* Payment row stack */
        .payment_row {
            flex-direction: column;
            gap: 8px;
        }

        .payment_row select,
        .payment_row input {
            width: 100%;
            box-sizing: border-box;
        }

        .total_final .value {
            font-size: 16px;
        }

        .totals_row {
            font-size: 13px;
        }
    }

    @media (max-width: 480px) {

        .register_page {
            padding: 8px;
        }

        #page_title {
            font-size: 18px !important;
        }

        .card {
            padding: 12px;
        }

        .tc-group {
            padding: 8px 12px;
        }

        .tc-group label {
            font-size: 10px;
        }

        .green_btn,
        .red_btn {
            padding: 10px;
            font-size: 13px;
        }

        /* Hide less critical columns on small mobile */
        #register thead th:nth-child(2),
        #register tbody td:nth-child(2) {
            display: none;
        }

        #register {
            min-width: unset;
            width: 100%;
        }

        /* Shrink inputs in cart */
        #register input[type=text] {
            padding: 4px 6px;
            font-size: 12px;
        }

        #register input[type=submit] {
            padding: 4px 8px;
            font-size: 11px;
        }

        /* Customer search full width */
        .customer_search input {
            box-sizing: border-box;
        }

        .total_final {
            padding: 10px 12px;
        }

        .total_final .value {
            font-size: 15px;
        }

        .card_title {
            font-size: 11px;
        }

        /* Hide Edit column on mobile */
        #register thead th:nth-child(8),
        #register tbody td:nth-child(8) {
            display: none;
        }

        /* Make total column wrap */
        #register tbody td:nth-child(7) {
            white-space: normal;
            min-width: 50px;
        }

        /* Tighten all cells */
        #register thead th,
        #register tbody td {
            padding: 5px 4px !important;
            font-size: 11px !important;
        }
    }
</style>

<div id="page_title"><?php echo $this->lang->line('sales_register'); ?></div>

<?php if (isset($error)): ?>
    <div class="error_message"><?php echo $error; ?></div>
<?php endif; ?>

<?php if (isset($warning)): ?>
    <div class="warning_message"><?php echo $warning; ?></div>
<?php endif; ?>

<div class="register_page">

    <!-- LEFT COLUMN -->
    <div class="register_left">

        <!-- Top Controls -->
        <div class="card" style="padding:18px 20px;">
            <div class="top_controls">

                <?php echo form_open("sales/change_mode", array('id' => 'mode_form')); ?>
                <div class="tc-group">
                    <label><?php echo $this->lang->line('sales_mode'); ?></label>
                    <?php echo form_dropdown('mode', $modes, $mode, 'onchange="$(\'#mode_form\').submit();"'); ?>
                </div>
                </form>

                <?php echo form_open("sales/add", array('id' => 'add_item_form', 'style' => 'flex:1;')); ?>
                <div class="tc-group scan-group">
                    <label><?php echo ($mode == 'sale') ? $this->lang->line('sales_find_or_scan_item') : $this->lang->line('sales_find_or_scan_item_or_receipt'); ?></label>
                    <?php echo form_input(array('name' => 'item', 'id' => 'item', 'size' => '40')); ?>
                </div>
                </form>

                <?php echo anchor(
                    "items/view/-1/width:650",
                    "<span class='orange_btn'>" . $this->lang->line('sales_new_item') . "</span>",
                    array('class' => 'thickbox none', 'title' => $this->lang->line('sales_new_item'))
                ); ?>

            </div>
        </div>

        <!-- Cart Table -->
        <div class="card" style="padding:0;overflow:hidden;">
            <table id="register">
                <thead>
                    <tr>
                        <th style="width:8%;"><?php echo $this->lang->line('common_delete'); ?></th>
                        <th style="width:12%;"><?php echo $this->lang->line('sales_item_number'); ?></th>
                        <th style="width:28%;"><?php echo $this->lang->line('sales_item_name'); ?></th>
                        <th style="width:12%;"><?php echo $this->lang->line('sales_price'); ?></th>
                        <th style="width:8%;"><?php echo $this->lang->line('sales_quantity'); ?></th>
                        <th style="width:8%;"><?php echo $this->lang->line('sales_discount'); ?> %</th>
                        <th style="width:12%;"><?php echo $this->lang->line('sales_total'); ?></th>
                        <th style="width:12%;"><?php echo $this->lang->line('sales_edit'); ?></th>
                    </tr>
                </thead>
                <tbody id="cart_contents">
                    <?php if (count($cart) == 0): ?>
                        <tr>
                            <td colspan="8">
                                <div class="no_items_msg">🛒 <?php echo $this->lang->line('sales_no_items_in_cart'); ?></div>
                            </td>
                        </tr>
                    <?php else: ?>
                        <?php foreach ($cart as $line => $item): ?>
                            <?php echo form_open("sales/edit_item/$line"); ?>
                            <tr>
                                <td><?php echo anchor("sales/delete_item/$line", '<span class="delete_link">Del</span>'); ?></td>
                                <td><?php echo $item['item_number']; ?></td>
                                <td><?php echo $item['name']; ?></td>
                                <td>
                                    <?php if ($items_module_allowed): ?>
                                        <?php echo form_input(array('name' => 'price', 'value' => $item['price'], 'size' => '6')); ?>
                                    <?php else: ?>
                                        <?php echo $item['price']; ?>
                                        <?php echo form_hidden('price', $item['price']); ?>
                                    <?php endif; ?>
                                </td>
                                <td>
                                    <?php if ($item['is_serialized'] == 1): ?>
                                        <?php echo $item['quantity'];
                                        echo form_hidden('quantity', $item['quantity']); ?>
                                    <?php else: ?>
                                        <?php echo form_input(array('name' => 'quantity', 'value' => $item['quantity'], 'size' => '3')); ?>
                                    <?php endif; ?>
                                </td>
                                <td><?php echo form_input(array('name' => 'discount', 'value' => $item['discount'], 'size' => '3')); ?></td>
                                <td><strong><?php echo to_currency($item['price'] * $item['quantity'] - $item['price'] * $item['quantity'] * $item['discount'] / 100); ?></strong></td>
                                <td><?php echo form_submit("edit_item", $this->lang->line('sales_edit_item')); ?></td>
                            </tr>
                            <tr>
                                <td style="color:#888;font-size:12px;"><?php echo $this->lang->line('sales_description_abbrv') . ':'; ?></td>
                                <td colspan="2">
                                    <?php if ($item['allow_alt_description'] == 1): ?>
                                        <?php echo form_input(array('name' => 'description', 'value' => $item['description'], 'size' => '20')); ?>
                                    <?php else: ?>
                                        <?php echo ($item['description'] != '') ? $item['description'] : 'None'; ?>
                                        <?php echo form_hidden('description', $item['description']); ?>
                                    <?php endif; ?>
                                </td>
                                <td></td>
                                <td style="color:#888;font-size:12px;">
                                    <?php if ($item['is_serialized'] == 1) echo $this->lang->line('sales_serial') . ':'; ?>
                                </td>
                                <td colspan="3">
                                    <?php if ($item['is_serialized'] == 1): ?>
                                        <?php echo form_input(array('name' => 'serialnumber', 'value' => $item['serialnumber'], 'size' => '20')); ?>
                                    <?php endif; ?>
                                </td>
                            </tr>
                            <tr style="height:3px">
                                <td colspan="8" style="background:rgba(0,0,0,0.03);"></td>
                            </tr>
                            </form>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>

    </div>

    <!-- RIGHT COLUMN -->
    <div class="register_right">

        <!-- Customer Section -->
        <div class="card">
            <div class="card_title"><?php echo $this->lang->line('sales_select_customer'); ?></div>
            <?php if (isset($customer)): ?>
                <div class="customer_badge">
                    <span class="name">👤 <?php echo $customer; ?></span>
                    <?php echo anchor("sales/delete_customer", '[Remove]'); ?>
                </div>
            <?php else: ?>
                <div class="customer_search">
                    <?php echo form_open("sales/select_customer", array('id' => 'select_customer_form')); ?>
                    <?php echo form_input(array('name' => 'customer', 'id' => 'customer', 'size' => '30', 'value' => $this->lang->line('sales_start_typing_customer_name'))); ?>
                    </form>
                    <div class="or_divider"><?php echo $this->lang->line('common_or'); ?></div>
                    <?php echo anchor(
                        "customers/view/-1/width:700",
                        "<span class='orange_btn' style='width:100%;display:block;text-align:center;'>" . $this->lang->line('sales_new_customer') . "</span>",
                        array('class' => 'thickbox none', 'title' => $this->lang->line('sales_new_customer'))
                    ); ?>
                </div>
            <?php endif; ?>
        </div>

        <!-- Totals Section -->
        <div class="card">
            <div class="card_title">Order Summary</div>
            <div class="totals_row">
                <span class="label"><?php echo $this->lang->line('sales_sub_total'); ?></span>
                <span class="value"><?php echo to_currency($subtotal); ?></span>
            </div>
            <?php foreach ($taxes as $name => $value): ?>
                <div class="totals_row">
                    <span class="label"><?php echo $name; ?></span>
                    <span class="value"><?php echo to_currency($value); ?></span>
                </div>
            <?php endforeach; ?>
            <div class="total_final">
                <span class="label"><?php echo $this->lang->line('sales_total'); ?></span>
                <span class="value"><?php echo to_currency($total); ?></span>
            </div>
        </div>

        <?php if (count($cart) > 0): ?>

            <!-- Payment Section -->
            <div class="card">
                <div class="card_title">Payment</div>

                <div class="totals_row">
                    <span class="label">Payments Total</span>
                    <span class="value"><?php echo to_currency($payments_total); ?></span>
                </div>
                <div class="totals_row" style="margin-bottom:12px;">
                    <span class="label">Amount Due</span>
                    <span class="value" style="color:#dc3545;"><?php echo to_currency($amount_due); ?></span>
                </div>

                <?php echo form_open("sales/add_payment", array('id' => 'add_payment_form')); ?>
                <div class="payment_row">
                    <?php echo form_dropdown('payment_type', $payment_options); ?>
                    <?php echo form_input(array('name' => 'amount_tendered', 'value' => to_currency_no_money($amount_due), 'size' => '10')); ?>
                </div>
                <button type="button" class="orange_btn" id="add_payment_button" style="width:100%;">
                    <?php echo $this->lang->line('sales_add_payment'); ?>
                </button>
                </form>

                <?php if (count($payments) > 0): ?>
                    <table class="payments_table">
                        <thead>
                            <tr>
                                <th><?php echo $this->lang->line('common_delete'); ?></th>
                                <th>Type</th>
                                <th>Amount</th>
                            </tr>
                        </thead>
                        <tbody id="payment_contents">
                            <?php foreach ($payments as $payment_id => $payment): ?>
                                <?php echo form_open("sales/edit_payment/$payment_id", array('id' => 'edit_payment_form' . $payment_id)); ?>
                                <tr>
                                    <td><?php echo anchor("sales/delete_payment/$payment_id", '<span class="delete_link">[Del]</span>'); ?></td>
                                    <td><?php echo $payment['payment_type']; ?></td>
                                    <td style="text-align:right;"><?php echo to_currency($payment['payment_amount']); ?></td>
                                </tr>
                                </form>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php endif; ?>
            </div>

            <?php if (count($payments) > 0): ?>
                <!-- Complete Sale -->
                <div class="card">
                    <div class="card_title">Complete Sale</div>
                    <?php echo form_open("sales/complete", array('id' => 'finish_sale_form')); ?>
                    <label style="font-size:13px;color:#555;display:block;margin-bottom:6px;"><?php echo $this->lang->line('common_comments'); ?>:</label>
                    <textarea name="comment" class="comment_area" rows="3"></textarea>
                    <button type="button" class="green_btn" id="finish_sale_button">
                        ✓ <?php echo $this->lang->line('sales_complete_sale'); ?>
                    </button>
                    </form>

                    <?php echo form_open("sales/cancel_sale", array('id' => 'cancel_sale_form')); ?>
                    <button type="button" class="red_btn" id="cancel_sale_button">
                        ✕ <?php echo $this->lang->line('sales_cancel_sale'); ?>
                    </button>
                    </form>
                </div>
            <?php else: ?>
                <!-- Cancel only -->
                <div class="card">
                    <?php echo form_open("sales/cancel_sale", array('id' => 'cancel_sale_form')); ?>
                    <button type="button" class="red_btn" id="cancel_sale_button">
                        ✕ <?php echo $this->lang->line('sales_cancel_sale'); ?>
                    </button>
                    </form>
                </div>
            <?php endif; ?>

        <?php endif; ?>

    </div>
</div>

<?php $this->load->view("partial/footer"); ?>

<script type="text/javascript">
    $(document).ready(function() {
        $("#item").autocomplete('<?php echo site_url("sales/item_search"); ?>', {
            minChars: 0,
            max: 100,
            selectFirst: false,
            delay: 10,
            formatItem: function(row) {
                return row[1];
            }
        });

        $("#item").result(function(event, data, formatted) {
            $("#add_item_form").submit();
        });

        $('#item').focus();

        $('#item').blur(function() {
            $(this).attr('value', "<?php echo $this->lang->line('sales_start_typing_item_name'); ?>");
        });

        $('#item,#customer').click(function() {
            $(this).attr('value', '');
        });

        $("#customer").autocomplete('<?php echo site_url("sales/customer_search"); ?>', {
            minChars: 0,
            delay: 10,
            max: 100,
            formatItem: function(row) {
                return row[1];
            }
        });

        $("#customer").result(function(event, data, formatted) {
            $("#select_customer_form").submit();
        });

        $('#customer').blur(function() {
            $(this).attr('value', "<?php echo $this->lang->line('sales_start_typing_customer_name'); ?>");
        });

        $("#finish_sale_button").click(function() {
            if (confirm('<?php echo $this->lang->line("sales_confirm_finish_sale"); ?>')) {
                $('#finish_sale_form').submit();
            }
        });

        $("#cancel_sale_button").click(function() {
            if (confirm('<?php echo $this->lang->line("sales_confirm_cancel_sale"); ?>')) {
                $('#cancel_sale_form').submit();
            }
        });

        $("#add_payment_button").click(function() {
            $('#add_payment_form').submit();
        });
    });

    function post_item_form_submit(response) {
        if (response.success) {
            $("#item").attr("value", response.item_id);
            $("#add_item_form").submit();
        }
    }

    function post_person_form_submit(response) {
        if (response.success) {
            $("#customer").attr("value", response.person_id);
            $("#select_customer_form").submit();
        }
    }
</script>