

<div class="content-wrapper">
    <section class="content-header mt-4">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-lg-10">
                    <h4>Point Of Sale</h4>
                </div>
                <div class="col-lg-2">
                    <ol class="breadcrumb float-right">
                        <li class="breadcrumb-item"><a href="<?= base_url('admin/home') ?>">Home</a></li>
                        <li class="breadcrumb-item active">Point Of Sale</li>
                    </ol>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div id="get_categories" class="col-sm-4 dropdown mb-3">
                            <h5 class="card-title">Filter Product By Category</h5>
                            <select class="form-control" id="product_categories">
                                <option value="" selected><?= (isset($categories) && empty($categories)) ? 'No Categories Exist' : 'Select Categories' ?> </option>
                                <?= get_categories_option_html($categories); ?>
                            </select>
                        </div>
                        <div class="col-sm-4">
                        <h5 class="card-title">Search Your Product</h5>
                            <input type="search" name="search_products" class="form-control" id="search_products" value="" placeholder="Search Products">
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-4">
                <div class="row">
                    <div class="col-md-8">
                        <div class="card">
                            <input type="hidden" name="limit" id="limit" value="15" />
                            <input type="hidden" name="offset" id="offset" value="0" />
                            <input type="hidden" name="total" id="total_products" />
                            <input type="hidden" name="current_page" id="current_page" value="0" />
                            <div class="row d-flex justify-content-center p-2 align-content-center" class="img-thumbnail" id="get_products">
                                <!-- product display in this container -->
                            </div>
                            <div class="pagination-container"></div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card">
                            <section class="container content-section mt-4">
                                <form id="pos_form" method="post" action='<?= base_url('admin/point_of_sale/place_order') ?>'>
                                    <div class="mt-2 d-flex justify-content-center">
                                        Already Registered?
                                        <input type="button" class="btn btn-xs btn-secondary mx-5" id="clear_user_search" value="Clear">
                                    </div>
                                    <!-- select user -->
                                    <input type="hidden" name=" <?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>" />
                                    <input type="hidden" name="user_id" id="pos_user_id" value="">
                                    <input type="hidden" name="product_variant_id" value="">
                                    <input type="hidden" name="quantity" value="">
                                    <input type="hidden" name="total" value="">
                                    <div class="mt-2 text-center">
                                        <select class="select_user form-control" id="select_user_id">
                                            <!-- user name display here  -->
                                        </select>
                                    </div>
                                    <div class="mt-3">
                                        Don't Have An Account? Register Here
                                        <div class=""><a href="" class="btn btn-sm btn-success btn-rounded mt-3" data-toggle="modal" data-target="#register">Register</a></div>
                                    </div>
                                    <div class="mt-3">
                                        <p class="h4 mt-4 text-center">Cart</p>
                                    </div>
                                    <div class="row cart-row mt-4 mb-2">
                                        <div class="col-sm-3">
                                            <p class="cart-item h6">Item</p>
                                        </div>
                                        <div class="col-sm-3 ">
                                            <p class="cart-item h6">Price</p>
                                        </div>
                                        <div class="col-sm-4">
                                            <p class="cart-item h6">Quantity</p>
                                        </div>
                                        <div class="col-sm-2">
                                            <p class="cart-item h6"><i class="fas fa-edit"></i></p>
                                        </div>
                                    </div>
                                    <div class="cart-items">
                                    </div>
                                    <div class="d-flex justify-content-end mb-2 mt-3">
                                        <div class="col-lg-4 text-right">
                                            <div class="invoice-detail-item">
                                                <p class="cart-total"><?= labels('subtotal', 'Subtotal') ?></p>
                                                <?php $settings = get_settings('system_settings', true); ?>
                                                <p class="cart-total-price h6 m-1 px-2" id="cart-total-price" data-currency="<?= (isset($settings['currency']) && !empty($settings['currency'])) ?   $settings['currency'] : '';   ?>"></p>
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <p class="h5 text-primary">Delivery type</p>
                                        <div class="mt-4 self_pickup">
                                            <label for="local_pickup">
                                                <input id="local_pickup" type="radio" name="self_pickup[]" value="1" class="self_pickup" checked />
                                                Local Pickup
                                            </label>
                                        </div>
                                        <div class="self_pickup">
                                            <label for="door_step_delivery">
                                                <input id="door_step_delivery" type="radio" name="self_pickup[]" value="0" class="self_pickup" />
                                                Door Step Delivery
                                            </label>
                                        </div>

                                        <p class="h5 text-primary">Payment Methods</p>
                                        <div class="mt-4 cash_payment">
                                            <label for="cod">
                                                <input id="cod" type="radio" name="payment_method[]" value="COD" class="payment_method" />
                                                Cash
                                            </label>
                                        </div>
                                        <div class="card_payment">
                                            <label for="card_payment">
                                                <input id="card_payment" type="radio" name="payment_method[]" value="card_payment" class="payment_method">
                                                Card Payment
                                            </label>
                                        </div>
                                        <div class="bar_code">
                                            <label for="bar_code">
                                                <input id="bar_code" type="radio" name="payment_method[]" value="bar_code" class="payment_method">
                                                Bar Code / QR Code Scan
                                            </label>
                                        </div>
                                        <div class="net_banking">
                                            <label for="net_banking">
                                                <input id="net_banking" type="radio" name="payment_method[]" value="net_banking" class="payment_method">
                                                Net Banking
                                            </label>
                                        </div>
                                        <div class="online_payment">
                                            <label for="online_payment">
                                                <input id="online_payment" type="radio" name="payment_method[]" value="online_payment" class="payment_method">
                                                Online Payment
                                            </label>
                                        </div>
                                        <div class="other">
                                            <label for="other">
                                                <input id="other" type="radio" name="payment_method[]" value="other" class="payment_method">
                                                Other
                                            </label>
                                        </div>
                                        <div class="payment_method_name mt-3">
                                            <p>Enter Payment method Name <input type="text" class="form-control" name="payment_method_name" id="payment_method_name"></p>
                                        </div>
                                        <div class="transaction_id mt-3">
                                            <p>Enter Transaction ID <input type="text" class="form-control" name="transaction_id" id="transaction_id"></p>
                                        </div>
                                    </div>

                                    <div class="text-center mt-4">
                                        <button class="btn btn-sm btn-clear_cart btn-danger mb-2 mx-3" type="submit" id="place_order_btn">Clear Cart</button>
                                        <button class="btn btn-sm btn-purchase btn-primary mb-2" type="submit" id="place_order_btn">Place Order</button>
                                    </div>
                                </form>
                            </section>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<div class="modal fade" id="register">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Register User</h4>
                <button type="button" class="btn-close" data-dismiss="modal"></button>
            </div>
            <!-- Modal body -->
            <div class="modal-body">
                <form method="post" action='<?= base_url('admin/point_of_sale/register_user') ?>' id="register_form">
                    <div class="form-group">
                        <label for="name">Name:</label>
                        <input type="hidden" name=" <?php echo $this->security->get_csrf_token_name(); ?>" value="<?php echo $this->security->get_csrf_hash(); ?>" />
                        <input type="text" class="form-control" id="name" placeholder="Enter Your Name" name="name">
                    </div>
                    <div class="form-group">
                        <label for="mobile">Mobile:</label>
                        <input type="text" maxlength="16" oninput="validateNumberInput(this)" class="form-control" id="mobile" placeholder="Enter Your Mobile Number" name="mobile">
                    </div>
                    <div class="form-group">
                        <label for="password">Password:</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="password" value="12345678" placeholder="Enter Password" name="password">
                            <span class="input-group-text togglePassword" style="cursor: pointer;">
                                <i class="fa fa-eye"></i>
                            </span>

                        </div>
                    </div>
                    <div class="mt-4">
                        <button type="submit" class="btn btn-primary" id="save-register-result-btn" name="register" value="Save">Register</button>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                    <div class="mt-3">
                        <div id="save-register-result"></div>
                    </div>
                </form>
            </div>
            
        </div>
    </div>
</div>
