@extends('backend.layouts.app-pos')

@section('title', app_name() . ' | ' . __('strings.backend.dashboard.title'))

@push('before-scripts')
<script src="/js/pouchdb.min.js"></script>
@endpush
@push('after-scripts')
<script src="/js/pos.js?v=006"></script>
@endpush

@section('content')
    <div class="row">
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    

                    <form action="" method="post" id="web-pos-search">
                        <div class="input-group">
                            <input id="wp_txt_search" name="wp_txt_search" type="text" class="form-control" placeholder="Search for products ..." aria-label="Search for products ..." aria-describedby="button-addon2">
                            <div class="input-group-append">
                                <button class="btn btn-primary" type="submit" id="wp-btn-submit"><i class="fa fa-search"></i></button>
                            </div>
                        </div>
                    </form>


                </div><!--card-header-->
                <div class="card-body">
                    <div class="scroll_text">
                        @foreach($data['pos_categories'] as $pcats)
                            <a href="javascript:;" onclick="get_products({{ $pcats->id }}, '{{ $pcats->name }}');"><span class="badge badge-info font-lg font-weight-normal">{{ $pcats->name }}</span></a>
                        @endforeach
                    </div>


                    <h3 class="h3 pb-1 pt-3" id="products_list_heading">Popular Products</h3>

                    
                        <div class="container">
                            <div class="row scroll_text" style="height:715px;" id="products_list">

                                @foreach($data['products'] as $product)
                                    {!! \App\Models\Product::productBlock($product, 'webpos') !!}
                                @endforeach
                                
                            </div>
                        </div>
                        

                </div><!--card-body-->
            </div><!--card-->
        </div><!--col-->
        <div class="col-md-3 wp-order-summary">
            <div class="card">
                <div class="card-header">
                    <div class="float-left pt-1"><strong>Order Summary</strong></div>
                    <div class="float-right">
                        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                            <a class="btn btn-primary btn-sm" href="javascript:;">Create</a>
                            <div class="btn-group" role="group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                    <a href="javascript:;" id="btn_create_new_order" class="dropdown-item">Order</a>
                                    <a href="javascript:;" id="btn_create_new_product" class="dropdown-item">Product</a>
                                </div>
                            </div>
                        </div>
                        {{-- <button id="btn_create_new_order" type="button" class="btn btn-primary btn-sm">New Order</button> --}}
                    </div>
                </div><!--card-header-->
                <div class="card-body">
                    <table class="w-100">
                        <tr>
                            <td width="25%" nowrap="nowrap">Order Ref:</td>
                            <td width="55%" id="td_order_ref" style="font-weight: bold;"></td>
                            <td width="20%" nowrap="nowrap" class="text-right">
                                <button onclick="wp_notes_popup();" class="btn btn-success btn-sm" type="button"><i class="far fa-comment"></i></button>
                                <button onclick="wp_switch_order('list');" type="button" class="btn btn-info btn-sm">Switch</button>
                            </td>
                        </tr>
                    </table>
                    
                    <hr />

                    <div class="scroll_text" id="wp_cart" style="height: 376px;">

                    

                    </div>


                    <hr>

                    <div id="wp_order_summary" class="d-none">
                        <div style="background-color:#EEEEEE;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;" class="p-2">
                            <table class="w-100">
                                <tr>
                                    <td width="60%">Subtotal:</td>
                                    <td class="text-right">
                                        <span id="wp_sub_total"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Engraving Charges:</td>
                                    <td class="text-right">
                                        <span id="wp_engraving"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Discount: <a onclick="wp_discount_popup();" href="javascript:;"><i class="fa fa-rocket" aria-hidden="true"></i></a></td>
                                    <td class="text-right">
                                        <span id="wp_discount"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Shipping Charges: <a onclick="wp_shipping_popup();" href="javascript:;"><i class="fa fa-truck" aria-hidden="true"></i></a></td>
                                    <td class="text-right">
                                        <span id="wp_shipping_charges"></span>
                                    </td>
                                </tr>

                                <tr>
                                    <td>Tax: <a onclick="wp_tax_popup();" href="javascript:;"><i class="fa fa-calculator" aria-hidden="true"></i></a></td>
                                    <td class="text-right">
                                        <span id="wp_tax_charges"></span>
                                    </td>
                                </tr>
                            </table>
                            <hr>
                            <table class="w-100">
                                <tr>
                                    <td width="60%">Total:</td>
                                    <td class="text-right">
                                        <span id="wp_grand_total"></span>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <hr>
                        <table class="w-100">
                            <tr>
                                <td class="pt-2">
                                    <label><input type="radio" id="payment_mode_1" name="payment_mode" value="1" /> Already Paid</label>
                                    {{-- <input type="radio" id="payment_mode_2" name="payment_mode" value="2" /> --}} &nbsp;
                                    <label><input type="radio" id="payment_mode_3" name="payment_mode" value="3" /> Pay Later / Cheque</label> <br />
                                    <label><input type="radio" id="payment_mode_13" name="payment_mode" value="13" /> Net 15</label> &nbsp;
                                    <label><input type="radio" id="payment_mode_15" name="payment_mode" value="15" /> Net 30</label> &nbsp;
                                    <label><input type="radio" id="payment_mode_17" name="payment_mode" value="17" /> Arrangements</label>
                                </td>

                                {{-- <td width="33%"><div id="div_payment_mode_1" style="border:solid 1px red;" onclick="wp_set_payment_option(1);" class="p-2 pos-payment-options"><label for="payment_mode_1">Already<br>Paid</label></div></td>
                                {{-- <td width="33%"><div id="div_payment_mode_2" onclick="wp_set_payment_option(2);" class="p-2 pos-payment-options"><label for="payment_mode_2">Send<br>Invoice</label></div></td> -- }}
                                <td width="33%"><div id="div_payment_mode_3" onclick="wp_set_payment_option(3);" class="p-2 pos-payment-options"><label for="payment_mode_3">Pay Later<br>Cheque</label></div></td> --}}
                            </tr>
                        </table>
                        <div class="d-none">
                            
                        </div>
                        <hr>
                        <table class="w-100">
                            <tr>
                                <td width="40%">
                                    Billing Address:
                                </td>
                                <td>
                                    <a href="javascript:;" onclick="wp_billing_popup();" id="link_billing_popup">Same as Shipping Address</a>
                                </td>
                            </tr>
                        </table>
                        <hr>
                        <table class="w-100">
                            <tr>
                                <td>
                                    <label><input type="checkbox" name="send_order_email" id="send_order_email" value="Y" checked /> Send Order Email to Customer</label>
                                </td>
                            </tr>
                        </table>
                        <hr>
                        <table class="w-100">
                            <tr>
                                <td>
                                    <button type="button" onclick="wp_submit_order();" class="btn btn-primary w-100">Submit Order</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                    

                </div><!--card-body-->
            </div><!--card-->
        </div>
    </div><!--row-->



    <!-- STARTING MODALS -->


    <!-- Add Order Item Modal -->
    <form action="" id="frm_wp_add_product" method="post">
        @CSRF
        <input type="hidden" name="order_id" value="">
        
        <div class="modal fade" id="pos_add_item" tabindex="-1" role="dialog" aria-labelledby="pos_add_item_title" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pos_add_item_long_title">Add Item</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
                <div id="selector_parent_product" class="col-xs-12 col-sm-12 col-md-12 d-none">
                    <div class="form-group" id="pos_add_item_parent_container">
                        
                    </div>
                </div>

                <table class="table table-striped" id="add_product_tbl">
                    <tbody>
                    <tr>
                        <td rowspan="6" width="40%"><img id="add_product_img" src="" class="img-fluid"></td>
                        <td id="add_product_name"></td>
                    </tr>
                    <tr>
                        <td id="add_product_sku"></td>
                    </tr>
                    <tr>
                        <td id="add_product_price_txt"></td>
                    </tr>
                    <tr>
                        <td><input type="text" id="add_product_price" name="add_product_price" class="form-control" /></td>
                    </tr>
                    <tr>
                        <td><input type="number" id="add_product_qty" name="add_product_qty" class="form-control" /></td>
                    </tr>
                    
                    </tbody>
                </table>


                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="pos_add_item_button" class="btn btn-primary">Add Item</button>
            </div>
            </div>
        </div>
        </div>

        <input type="hidden" id="hd_id" name="hd_id">
        <input type="hidden" id="hd_sku" name="hd_sku">
        <input type="hidden" id="hd_name" name="hd_name">
        <input type="hidden" id="hd_price" name="hd_price">
        <input type="hidden" id="hd_sale_price" name="hd_sale_price">
        <input type="hidden" id="hd_image" name="hd_image">
        <input type="hidden" id="hd_weight" name="hd_weight">

        <input type="hidden" name="cmd" value="add_item">
    </form>
    <!-- Add Order Item Modal -->


    <!-- Add Order Modal -->
    <form action="" method="post" id="frm_add_order">
        @CSRF
        
        <div class="modal fade" id="pos_add_order" tabindex="-1" role="dialog" aria-labelledby="pos_add_order_title" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pos_add_order_long_title">Create Order</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
                <div id="pos_add_order_messages" class="d-none">

                </div>
                
                <div class="form-group">
                    <label for="order_ref">Order Reference</label>
                    <input required="required" type="text" class="form-control" name="order_ref" id="order_ref" aria-describedby="order-ref-help" placeholder="Enter Order Refernece ...">
                    <small id="order-ref-help" class="form-text text-muted">Please enter the reference of this order.</small>
                </div>

                <div class="form-group">
                    <label for="customer_id">Customer</label>
                    <br>
                    <select required="required" onchange="wp_show_customer_form(this.value);" style="width: 100%;" class="form-control select2" name="customer_id" id="customer_id" aria-describedby="customer-id-help" placeholder="Select Customer">
                        <option id="new_customer_option" value="">Select Customer ...</option>
                        <option value="new">Create New Customer ...</option>
                        @foreach($data['pos_customers'] as $id => $name)
                            <option value="{{ $id }}">{{ $name }}</option>
                        @endforeach
                    </select>
                    <small id="customer-id-help" class="form-text text-muted">Please select the customer of this order.</small>
                    <div id="div_customer_shipping_addresses" class="pt-2 d-none"></div>
                </div>


                <div id="wp_new_order_customer_fields" class="d-none">

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="first_name">First Name</label>
                            <input type="text" class="form-control wp-new-customer-form" id="first_name" name="first_name" placeholder="First Name ...">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="last_name">Last Name</label>
                            <input type="text" class="form-control wp-new-customer-form" id="last_name" name="last_name" placeholder="Last Name ...">
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="email">Email</label>
                            <input type="email" class="form-control wp-new-customer-form" id="email" name="email" placeholder="Email Address ...">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="phone">Phone</label>
                            <input type="text" class="form-control" id="phone" name="phone" placeholder="Phone Number ...">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="company">Company</label>
                        <input type="text" class="form-control" id="company" name="company" placeholder="Company ...">
                    </div>
                    
                    <div class="form-group">
                        <label for="address1">Address</label>
                        <input type="text" class="form-control wp-new-customer-form" id="address1" name="address1" placeholder="Address Line 1">
                    </div>
                    <div class="form-group">
                        <label for="address2">Address 2</label>
                        <input type="text" class="form-control" id="address2" name="address2" placeholder="Address Line 2">
                    </div>
                    <div class="form-group">
                        <label for="country">Country</label>
                        <select id="country" name="country" class="form-control wp-new-customer-form" onchange="get_states(this.value);">
                            <option value="">Please Select ...</option>
                            @foreach($data['countries'] as $id => $name)
                                <option value="{{ $id }}" @if($id == '233') selected="selected" @endif >{{ $name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="city">City</label>
                            <input type="text" class="form-control wp-new-customer-form" id="city" name="city" placeholder="City Name ...">
                        </div>
                        <div class="form-group col-md-4">
                            <label for="state">State</label>
                            <div id="div_state">
                                <select id="state" name="state" class="form-control wp-new-customer-form">
                                    <option value="" selected>Please Select ...</option>
                                    @foreach($data['states'] as $id => $name)
                                        <option value="{{ $id }}">{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-2">
                            <label for="zip">Zip</label>
                            <input type="text" class="form-control wp-new-customer-form" id="zip" name="zip" placeholder="Zip Code ...">
                        </div>
                    </div>
                
                </div>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="pos_add_order_button" class="btn btn-primary">Create Order</button>
            </div>
            </div>
        </div>
        </div>

        <input type="hidden" name="cmd" value="add_order">
    </form>
    <!-- Add Order Modal -->


    <!-- Add Product Modal -->
    <form action="" method="post" id="frm_add_product">
        @CSRF
        
        <div class="modal fade" id="pos_add_product" tabindex="-1" role="dialog" aria-labelledby="pos_add_product_title" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pos_add_product_long_title">Create Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
                <div id="pos_add_product_messages" class="d-none">

                </div>
                
                <div class="form-group">
                    <label for="order_ref">Name (Optional)</label>
                    <input type="text" class="form-control" name="name" id="name" placeholder="Enter Product Name ...">
                </div>
                <div class="form-group">
                    <label for="address1">SKU</label>
                    <input required type="text" class="form-control" id="sku" name="sku" placeholder="Enter Product SKU ...">
                </div>
                <div class="form-group">
                    <label for="address1">Price</label>
                    <input required type="text" class="form-control" id="price_catalog" name="price_catalog" placeholder="Enter Product Price ...">
                </div>
                <div class="form-group">
                    <label for="address1">Sale Price (Optional)</label>
                    <input type="text" class="form-control" id="price_discounted" name="price_discounted" placeholder="Enter Product Sale Price ...">
                </div>
                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" id="pos_add_product_button" class="btn btn-primary">Create Product</button>
            </div>
            </div>
        </div>
        </div>

        <input type="hidden" name="cmd" value="add_product">
    </form>
    <!-- Add Product Modal -->


    <!-- Switch Order Modal -->    
        <div class="modal fade" id="pos_switch_order" tabindex="-1" role="dialog" aria-labelledby="pos_switch_order_title" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pos_switch_order_long_title">Switch Order</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                
                <div id="div_switch_order_list">

                </div>
                
            </div>
            </div>
        </div>
        </div>
    <!-- Switch Order Modal -->

    <!-- Discount Modal -->    
        <form id="frm_wp_pos_discount" action="">
            @CSRF
            <div class="modal fade" id="pos_discount_modal" tabindex="-1" role="dialog" aria-labelledby="pos_discount_modal_title" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pos_discount_modal_long_title">Discount Coupon</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div id="pos_add_discount_messages" class="d-none">

                            </div>
                            
                            <div class="form-group">
                                <label for="discount-type">Discount Type</label><br>
                                <label><input class="wp-discount-type" type="radio" onclick="$('#discount_value').removeAttr('required'); $('#coupon_code').attr('required', 'required'); $('#div_discount_type_coupon').removeClass('d-none'); $('#div_discount_type_manual').addClass('d-none');" name="wp_discount_type" id="wp_discount_type_coupon" value="coupon" checked="checked"> Coupon Discount</label>
                                &nbsp;
                                <label><input class="wp-discount-type" type="radio" onclick="$('#coupon_code').removeAttr('required'); $('#discount_value').attr('required', 'required'); $('#div_discount_type_coupon').addClass('d-none'); $('#div_discount_type_manual').removeClass('d-none');" name="wp_discount_type" id="wp_discount_type_manual" value="manual"> Manual Discount</label>
                            </div>
                            <div id="div_discount_type_coupon">
                                <div class="form-group">
                                    <label for="coupon_code">Coupon Code</label>
                                    <input type="text" class="form-control" name="coupon_code" id="coupon_code" required="required" placeholder="Coupon ...">
                                </div>
                            </div>
                            <div id="div_discount_type_manual" class="d-none">
                                <div class="form-group">
                                    <label for="value-type">Value Type</label><br>
                                    <label><input class="wp-value-type" type="radio" name="wp_value_type" id="wp_value_type_percent" value="percent" checked="checked"> Percentage</label>
                                    &nbsp;
                                    <label><input class="wp-value-type" type="radio" name="wp_value_type" id="wp_value_type_amount" value="amount"> Flat Amount</label>
                                </div>
                                <div class="form-group">
                                    <label for="discount_value">Discount Value</label>
                                    <input type="text" class="form-control" id="discount_value" name="discount_value" placeholder="Discount Value ...">
                                </div>
                                <div class="form-group">
                                    <label><input type="checkbox" id="wp_free_shipping" name="wp_free_shipping" id="wp_free_shipping" value="Y"> Offer Free Shipping</label>
                                </div>
                            </div>
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" id="pos_add_coupon_button" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    <!-- Discount Modal -->


    <!-- Tax Modal -->    
        <form id="frm_wp_pos_tax" action="">
            @CSRF
            <div class="modal fade" id="pos_tax_modal" tabindex="-1" role="dialog" aria-labelledby="pos_tax_modal_title" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pos_Tax_modal_long_title">Tax</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div id="pos_add_tax_messages" class="d-none">

                            </div>
                            
                            <div id="div_tax_input">
                                <div class="form-group">
                                    <label for="tax_charges">Tax Amount</label>
                                    <input type="text" class="form-control" name="tax_charges" id="tax_charges" required="required" placeholder="Tax ...">
                                </div>
                            </div>
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" id="pos_add_tax_button" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    <!-- Tax Modal -->


    <!-- Shipping Modal -->    
        <form id="frm_wp_pos_shipping" action="">
            @CSRF
            <div class="modal fade" id="pos_shipping_modal" tabindex="-1" role="dialog" aria-labelledby="pos_shipping_modal_title" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pos_shipping_modal_long_title">Shipping Charges</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div id="pos_add_shipping_messages" class="d-none">

                            </div>
                            
                            
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="sp_first_name">First Name</label>
                                    <input type="text" class="form-control wp-new-customer-form" id="sp_first_name" name="sp_first_name" placeholder="First Name ...">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="sp_last_name">Last Name</label>
                                    <input type="text" class="form-control wp-new-customer-form" id="sp_last_name" name="sp_last_name" placeholder="Last Name ...">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="sp_phone">Phone</label>
                                    <input type="text" class="form-control" id="sp_phone" name="sp_phone" placeholder="Phone Number ...">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="sp_company">Company</label>
                                    <input type="text" class="form-control" id="sp_company" name="sp_company" placeholder="Company ...">
                                </div>
                            </div>

                            
                            
                            <div class="form-group">
                                <label for="sp_address1">Address</label>
                                <input type="text" class="form-control wp-new-customer-form" id="sp_address1" name="sp_address1" placeholder="Address Line 1">
                            </div>
                            <div class="form-group">
                                <label for="sp_address2">Address 2</label>
                                <input type="text" class="form-control" id="sp_address2" name="sp_address2" placeholder="Address Line 2">
                            </div>
                            <div class="form-group">
                                <label for="sp_country">Country</label>
                                <select id="sp_country" name="sp_country" class="form-control wp-new-customer-form" onchange="get_states(this.value, 'div_sp_state', 'sp_state');">
                                    <option value="">Please Select ...</option>
                                    @foreach($data['countries'] as $id => $name)
                                        <option value="{{ $id }}" @if($id == '233') selected="selected" @endif >{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="sp_city">City</label>
                                    <input type="text" class="form-control wp-new-customer-form" id="sp_city" name="sp_city" placeholder="City Name ...">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="sp_state">State</label>
                                    <div id="div_sp_state">
                                        <select id="sp_state" name="sp_state" class="form-control wp-new-customer-form">
                                            <option value="" selected>Please Select ...</option>
                                            @foreach($data['states'] as $id => $name)
                                                <option value="{{ $id }}">{{ $name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="sp_zip">Zip</label>
                                    <input type="text" class="form-control wp-new-customer-form" id="sp_zip" name="sp_zip" placeholder="Zip Code ...">
                                </div>
                            </div>

                            <div class="d-none" id="div_shipping_services">
                                
                            </div>




                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" id="pos_add_shipping_button" onclick="wp_calculate_shipping();" class="btn btn-info">Calculate Shipping</button>
                            <button type="button" id="pos_select_shipping_button" onclick="wp_select_shipping();" class="btn btn-primary d-none">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    <!-- Shipping Modal -->


    <!-- Billing Modal -->    
        <form id="frm_wp_pos_billing" action="">
            @CSRF
            <div class="modal fade" id="pos_billing_modal" tabindex="-1" role="dialog" aria-labelledby="pos_billing_modal_title" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pos_billing_modal_long_title">Billing Address</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div id="pos_add_billing_messages" class="d-none">

                            </div>
                            
                            <div class="form-group">
                                <label for="bl_email">Email Address</label>
                                <input type="email" class="form-control wp-new-customer-form" id="bl_email" name="bl_email" placeholder="Email Address">
                            </div>
                            
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="bl_first_name">First Name</label>
                                    <input type="text" class="form-control wp-new-customer-form" id="bl_first_name" name="bl_first_name" placeholder="First Name ...">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="bl_last_name">Last Name</label>
                                    <input type="text" class="form-control wp-new-customer-form" id="bl_last_name" name="bl_last_name" placeholder="Last Name ...">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="bl_phone">Phone</label>
                                    <input type="text" class="form-control" id="bl_phone" name="bl_phone" placeholder="Phone Number ...">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="bl_company">Company</label>
                                    <input type="text" class="form-control" id="bl_company" name="bl_company" placeholder="Company ...">
                                </div>
                            </div>

                            
                            
                            <div class="form-group">
                                <label for="bl_address1">Address</label>
                                <input type="text" class="form-control wp-new-customer-form" id="bl_address1" name="bl_address1" placeholder="Address Line 1">
                            </div>
                            <div class="form-group">
                                <label for="bl_address2">Address 2</label>
                                <input type="text" class="form-control" id="bl_address2" name="bl_address2" placeholder="Address Line 2">
                            </div>
                            <div class="form-group">
                                <label for="bl_country">Country</label>
                                <select id="bl_country" name="bl_country" class="form-control wp-new-customer-form" onchange="get_states(this.value, 'div_bl_state', 'bl_state');">
                                    <option value="">Please Select ...</option>
                                    @foreach($data['countries'] as $id => $name)
                                        <option value="{{ $id }}" @if($id == '233') selected="selected" @endif >{{ $name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="bl_city">City</label>
                                    <input type="text" class="form-control wp-new-customer-form" id="bl_city" name="bl_city" placeholder="City Name ...">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="bl_state">State</label>
                                    <div id="div_bl_state">
                                        <select id="bl_state" name="bl_state" class="form-control wp-new-customer-form">
                                            <option value="" selected>Please Select ...</option>
                                            @foreach($data['states'] as $id => $name)
                                                <option value="{{ $id }}">{{ $name }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="bl_zip">Zip</label>
                                    <input type="text" class="form-control wp-new-customer-form" id="bl_zip" name="bl_zip" placeholder="Zip Code ...">
                                </div>
                            </div>
                            
                            
                        </div>
                        <div class="modal-footer">
                            <div class="float-left"><button type="button" class="btn btn-warning" data-dismiss="modal" onclick="wp_save_billing('clear');">Same as Shipping Address</button></div>
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" id="pos_save_billing_button" onclick="wp_save_billing('save');" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    <!-- Billing Modal -->


    <!-- Shipping Modal -->    
        <form id="frm_wp_pos_engraving" action="">
            @CSRF
            <div class="modal fade" id="pos_engraving_modal" tabindex="-1" role="dialog" aria-labelledby="pos_engraving_modal_title" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pos_engraving_modal_long_title">Engraving Text</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <h4 class="pb-2" id="engraving_product_name"></h4>
                            
                            <div class="form-group">
                                <label for="sp_address1">Price (Per Unit / Set)</label>
                                <input type="text" class="form-control wp-new-customer-form" id="engraving_price" name="engraving_price" placeholder="Please enter price ...">
                            </div>

                            <div class="form-group">
                                <label for="sp_address1">Primary Text</label>
                                <input type="text" class="form-control wp-new-customer-form" maxlength="255" id="engraving_text_primary" name="engraving_text_primary" placeholder="Please enter primary text ...">
                            </div>

                            <div class="form-group">
                                <label for="sp_address1">Secondary Text</label>
                                <input type="text" class="form-control wp-new-customer-form" maxlength="255" id="engraving_text_secondary" name="engraving_text_secondary" placeholder="Please enter secondary text ...">
                            </div>
                            
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="button" onclick="wp_engraving_save();" id="pos_saving_engraving_button" class="btn btn-primary">Save</button>
                        </div>
                        <input type="hidden" id="engraving_product_id" name="engraving_product_id" />
                    </div>
                </div>
            </div>
        </form>
    <!-- Shipping Modal -->

    <!-- Notes Modal -->    
        <form id="frm_wp_pos_notes" action="">
            @CSRF
            <div class="modal fade" id="pos_notes_modal" tabindex="-1" role="dialog" aria-labelledby="pos_notes_modal_title" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="pos_notes_modal_long_title">Order Notes</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div>
                                <div class="form-group">
                                    <textarea rows="5" class="form-control" name="order_notes" id="order_notes" placeholder="Notes ..."></textarea>
                                </div>
                            </div>
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            <button type="submit" id="pos_add_notes_button" class="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    <!-- Notes Modal -->

@endsection