<!DOCTYPE html>
<html lang="en" class="h-100">

<head>
    <!-- meta and links start -->
    <%- include('templet/meta')-%>

</head>

<body>
    <%- include('templet/preloder_topbar_sidebar',{titel: accessdata?.topbardata?.name})-%>
        <!--********** Content body start **********-->

        <div class="content-body">

            <div class="container-fluid" style="min-height: 100vh;">
                <div class="row ">
                    <!-- left side service list part -->
                    <div class="d-none">
                        <input type="hiden" name="sym" value="<%= accessdata.symbol %>">
                        <input type="hiden" name="pls" value="<%= accessdata.plac %>">
                        <input type="hiden" name="thousands_separator" value="<%= accessdata.thousands_separator %>">
                    </div>

                    <div class="col-xl-7 ">
                        <div class="card ">
                            <div class="card-body px-4 py-2 ">
                                <div class="my-3">
                                    <input type="text" class="form-control" id="service_pos_search"
                                        placeholder="Search..">
                                </div>
                                <div class="row img_pos " id="pos_service">
                                    <% if(service_list.length < 1 && login=='master' && cart.store_id==0){ %>
                                        <div class="p-2 center">
                                            <div class="card">
                                                <div class="card-body p-2 ">
                                                    <h3 class="text-center  text-danger">
                                                        <%= language.Please_Select_Store %>
                                                    </h3>
                                                </div>
                                            </div>
                                        </div>
                                        <% }else if(service_list.length < 1){ %>
                                            <div class="p-2 center">
                                                <div class="card">
                                                    <div class="card-body p-2 text-center">
                                                        <img src="../images/empty.png">
                                                        <h3 class="text-center  text-danger">
                                                            <%= language.Not_listed_any_services_yet %>
                                                        </h3>

                                                    </div>
                                                </div>
                                            </div>
                                            <% }else{ %>
                                                <% service_list.forEach(function(data){ %>
                                                    <div class="col-md-2 col-4 p-2 services">
                                                        <div class="card pos_border">
                                                            <div class="card-body p-2 ">
                                                                <div class="new-arrival-product text-center">
                                                                    <a href="#" data-bs-toggle="modal"
                                                                        data-bs-target="#service_type_model"
                                                                        id="POS_service" data-id="<%= data.id %>">
                                                                        <div class="new-arrivals-img-contnent mb-2 p-0">
                                                                            <img class="img-fluid" width="50px"
                                                                                height="50px"
                                                                                src="../../uploads/<%= data.image %>"
                                                                                alt="">
                                                                        </div>

                                                                        <h6>
                                                                            <%= data.name %>
                                                                        </h6>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <% }) %>
                                                        <% } %>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- right side pos part -->

                    <div class="col-xl-5">
                        <div class="row">
                            <div class="col-xl-12">
                                <div class="card">
                                    <div class=" p-3">
                                        <div class="row">

                                            <div class="col-md-12 mb-0">
                                                <% if (roll==1) { %>

                                                    <input type="text" class="form-control w-100"
                                                        value="<%= order_date[0].store_name %>" readonly>
                                                    <% } else { %>

                                                        <input type="hidden" class="form-control w-100"
                                                            value="<%= order_date[0].store_name %>" readonly>
                                                        <% } %>
                                            </div>

                                            <div class="col-md-12 mb-2 mt-2">
                                                <input type="text" class="form-control w-100"
                                                    value="<%= order_date[0].customer_name %>" readonly>
                                            </div>

                                            <div class="col-md-12 mb-2 mt-2 d-none">
                                                <input type="text" class="form-control w-100" id="customer_id"
                                                    value="<%= order_date[0].customer_id %>" readonly>
                                                <input type="text" class="form-control w-100" id="order_id"
                                                    value="<%= order_date[0].id %>" readonly>
                                            </div>

                                            <!-- <div class="col-md-4 my-2">
                                                <button type="button" class="btn btn-sm btn-primary mb-0 w-100 " data-bs-toggle="modal" data-bs-target="#addcustomer">
                                                    <i class="fa fa-plus me-2"></i> Add
                                                </button>
                                            </div> -->

                                            <div class="col-md-6">
                                                <input type="text" class="form-control w-100"
                                                    value="<%= order_date[0].order_id %>" readonly>
                                            </div>

                                            <div class="col-md-6">
                                                <% let new_date=new Date(order_date[0].order_date) %>
                                                    <% let year=new_date.getFullYear() %>
                                                        <% let new_day=(new_date.getDate() < 10 ? '0' : '' ) +
                                                            new_date.getDate() %>
                                                            <% let new_month=((new_date.getMonth()+1) < 10 ? '0' : '' )
                                                                + (new_date.getMonth()+1) %>
                                                                <% let fullDate=`${year}-${new_month}-${new_day}` %>

                                                                    <% let date=new Date(Date.now) %>
                                                                        <% let new_year=date.getFullYear() %>
                                                                            <% let new_new_day=(date.getDate() < 10
                                                                                ? '0' : '' ) + date.getDate() %>
                                                                                <% let
                                                                                    new_new_month=((date.getMonth()+1) <
                                                                                    10 ? '0' : '' ) +
                                                                                    (date.getMonth()+1) %>
                                                                                    <% let
                                                                                        new_fullDate=`${year}-${new_month}-${new_day}`
                                                                                        %>
                                                                                        <input type="date"
                                                                                            class="form-control w-100"
                                                                                            id="edit_POS_order_date"
                                                                                            value="<%=fullDate %>"
                                                                                            min="new_fullDate">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="card-body p-2">
                                        <div class="table-responsive">
                                            <div class="table_pos">
                                                <table
                                                    class="table table-bordered verticle-middle table-responsive text-center">
                                                    <thead class="table_head">
                                                        <tr>
                                                            <th class="col-3">
                                                                <%= language.Service %>
                                                            </th>
                                                            <th class="col-3">
                                                                <%= language.Color %>
                                                            </th>
                                                            <th class="col-2">
                                                                <%= language.Rate %>
                                                            </th>
                                                            <th class="col-3">
                                                                <%= language.Qty %>
                                                            </th>
                                                            <th class="col-1"></th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="POS_service_added_list">
                                                        <% cartservice.forEach(function(x){ %>
                                                            <tr>
                                                                <td>
                                                                    <h5 class="mb-0">
                                                                        <%= x.service_name %>
                                                                    </h5>
                                                                    <span class="mb-0 fs-6">[<%= x.service_type_name %>
                                                                            ]</span>
                                                                </td>
                                                                <td>
                                                                    <input type="color" class="p-2"
                                                                        value="<%= x.service_color %>"
                                                                        id="POS_service_color" data-id="<%= x.id %>">
                                                                </td>
                                                                <td>
                                                                    <input type="number"
                                                                        class="form-control h-25 text-center px-2"
                                                                        value="<%= x.service_type_price %>"
                                                                        name="service_type_price"
                                                                        id="edit_POSservice_type_price"
                                                                        data-id="<%= x.id %>"
                                                                        data-order_id="<%= order_date[0].id %>">
                                                                </td>
                                                                <td>
                                                                    <input type="number"
                                                                        class="form-control h-25 text-center px-2"
                                                                        id="edit_POSservice_type_quntity"
                                                                        value="<%= x.service_quntity %>" min="1"
                                                                        data-id="<%= x.id %>"
                                                                        data-order_id="<%= order_date[0].id %>">
                                                                </td>
                                                                <td>
                                                                    <a class="btn btn-sm" id="edit_remove_service_list"
                                                                        data-id="<%= x.id %>"
                                                                        data-order_id="<%= order_date[0].id %>"><i
                                                                            class="fa fa-trash text-danger"></i></a>
                                                                </td>
                                                            </tr>
                                                            <% }) %>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                        <hr>

                                        <div class="row">
                                            <div class="col-5 d-block ">

                                                <button type="submit" class="btn btn-primary btn-xs px-2 mt-2 w-100"
                                                    data-bs-toggle="modal" data-bs-target="#addons">
                                                    <%= language.Addons %>
                                                </button>
                                                <button type="submit" class="btn btn-primary btn-xs px-2 mt-2  w-100"
                                                    id="edit_POS_coupon_model_show">
                                                    <%= language.Coupon %>
                                                </button>
                                                <!-- <button type="submit"class="btn  btn-success btn-xs mt-2 w-100 px-1" id="edit_POS_payment_model_show">Payment <i class="fas fa-arrow-right mx-2"></i></button> -->
                                                <a type="button" class="btn btn-danger btn-xs me-2 mt-5  w-100"
                                                    href="/order/list">
                                                    <%= language.Go_To_Order %>
                                                </a>

                                            </div>
                                            <div class="col-7 d-block px-4">
                                                <div class="d-flex justify-content-end">
                                                    <p class="mb-0 mx-2 "><small>
                                                            <%= language.Sub_Total %> :
                                                        </small></p>
                                                    <p class="fs-16 text-black font-w600 mb-0 symbol possymbol"
                                                        id="POS_sub_total">
                                                        <%= order_date[0].sub_total.toFixed(2) %>
                                                    </p>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <p class="mb-0 mx-2 "><small>
                                                            <%= language.Addon_Total %> :
                                                        </small></p>
                                                    <p class="fs-16 text-black font-w600 mb-0 symbol possymbol"
                                                        id="POS_addon_total">
                                                        <%= order_date[0].addon_price.toFixed(2) %>
                                                    </p>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <p class="mb-0 mx-2 "><small>
                                                            <%= language.Coupon_Discount %> :
                                                        </small></p>
                                                    <p class="fs-16 text-black font-w600 mb-0 symbol possymbol"
                                                        id="POS_coupon_total">
                                                        <%= order_date[0].coupon_discount.toFixed(2) %>
                                                    </p>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <p class="mb-0 mx-2 " id="POS_tax_percent"><small>
                                                            <%= language.TAX %> (<%=order_date[0].tax%> %) :
                                                        </small></p>
                                                    <p class="fs-16 text-black font-w600 mb-0 symbol possymbol"
                                                        id="POS_tax_total">
                                                        <%= order_date[0].tax_amount.toFixed(2) %>
                                                    </p>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <p class="mb-0 mx-2 "><small>
                                                            <%= language.Gross_Total %> :
                                                        </small></p>
                                                    <p class="fs-16 text-black font-w600 mb-0 symbol possymbol"
                                                        id="POS_gross_total">
                                                        <%= order_date[0].gross_total.toFixed(2) %>
                                                    </p>
                                                </div>
                                                <div class="d-flex justify-content-end">
                                                    <p class="mb-0 mx-2 "><small>
                                                            <%= language.Paid_Amount %> :
                                                        </small></p>
                                                    <p class="fs-16 text-black font-w600 mb-0 symbol possymbol"
                                                        id="POS_paid_amount">
                                                        <%= order_date[0].paid_amount.toFixed(2) %>
                                                    </p>
                                                </div>
                                            </div>

                                        </div>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

            <!--********** Content body end **********-->

            <!-- Modal service type -->
            <div class="modal fade" id="service_type_model">
                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-sm" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <%= language.Select_Service_Type %>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <form id="add_service_pos_cart" method="post" class="need-validation">
                            <input type="hidden" id="pos_order_id" name="order_id" value="<%= order_date[0].id %>">
                            <input type="hidden" id="POS_serviceid1" name="serviceid" value="5">
                            <div class="modal-body" id="pos_servicetypeselect">


                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                                    <%= language.Cancel %>
                                </button>
                                <button type="submit" value="submit" id="edit_service_pos_cart_submit"
                                    class="btn btn-sm  btn-primary">
                                    <%= language.Save %>
                                </button>
                            </div>
                        </form>


                    </div>

                </div>
            </div>

            <!-- Modal addons -->
            <div class="modal fade" id="addons">
                <div class="modal-dialog modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <%= language.Add_Addons %>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                        <form id="add_addons_pos_cart" method="post" class="need-validation">

                                <input type="hidden" id="" name="order_id" value="<%= order_date[0].id %>">

                                <div class="row" id="POS_addons">
                                    <% if(addonlist.length < 1){ %>
                                        <div class="p-2 center">
                                            <div class="card">
                                                <div class="card-body p-2 ">
                                                    <h5 class="text-center  text-danger">
                                                        <%= language.No_addon_List_Found %>
                                                    </h5>
                                                </div>
                                            </div>
                                        </div>
                                        <% } %>
                                            <% addonlist.forEach(function(data){ %>
                                            <label class="col-6 d-flex mb-3 addon-clickable" for="update_customer_read_<%= data.id %>" style="cursor:pointer;">
                                                <div class="col-12 d-flex mb-3">
                                                    <div class="mx-3">
                                                        <input class="form-check-input mt-3" type="checkbox"
                                                            id="update_customer_read_<%= data.id %>" name="addon"
                                                            value="<%= data.id %>"
                                                            <%=order_date[0].addon_data.includes(data.id) ? 'checked'
                                                            : '' %>>
                                                    </div>
                                                    <div class="d-flex flex-column justify-content-between">
                                                        <h5>
                                                            <%= data.addon %>
                                                        </h5>
                                                        <h6 class="symbol">
                                                            <%= data.price %>
                                                        </h6>
                                                    </div>
                                                </div>
                                                </label>
                                                <% }) %>
                                </div>
</div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">
                                        <%= language.Cancel %>
                                    </button>
                                    <button type="submit" value="submit" id="edit_addons_pos_cart_submit"
                                        class="btn btn-sm  btn-primary">
                                        <%= language.Save %>
                                    </button>
                                </div>
                            </form>


                        

                    </div>
                </div>
            </div>

            <!-- Modal coupon -->
            <div class="modal fade" id="POS_coupon_model">
                <div class="modal-dialog modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <%= language.Add_Coupon %>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <div class="modal-body">

                            <div class="row mb-4 " id="coupon_search">
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" placeholder="Enter Coupon Code"
                                        name="coupon_code">
                                    <button class="btn btn-primary" id="edit_POS_coupon_code" type="button">
                                        <%= language.Apply %>
                                    </button>
                                </div>
                            </div>

                            <div class="row" id="coupon_area">

                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <!-- Modal payment -->
            <div class="modal fade" id="POS_payment_model">
                <div class="modal-dialog modal-dialog-scrollable" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">
                                <%= language.Make_Payment %>
                            </h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>

                        <form id="pyment_POS_cart" method="post" class="need-validation">
                            <input type="hidden" id="pos_order_id" name="order_id" value="<%= order_date[0].id %>">
                            <div class="modal-body" id="payment_sum">
                                <div class="row g-2 align-items-center">

                                    <div class="col-12">
                                        <div class="row align-items-center">
                                            <div class="col-md-6 mb-1">
                                                <label class="form-label">
                                                    <%= language.Delivery_Date %>
                                                </label>
                                                <input type="date" class="form-control" name="deliverydate"
                                                    id="deliverydate">

                                                <input type="date" class="form-control" name="deliverydate_hidden"
                                                    id="deliverydate_hidden" hidden>
                                                <input type="hidden" id="POS_gross_order" value="" name="gross">
                                                <input type="hidden" id="POS_subtotal_order" value="" name="sub">
                                            </div>
                                            <div class="col-md-6 mb-1">
                                                <label class="form-label">
                                                    <%= language.Extra_Discount %>
                                                </label>
                                                <input type="number" id="edit_POS_extra_discount_order"
                                                    class="form-control" placeholder="Enter Amount"
                                                    name="extradiscount">
                                                <input type="hidden" id="edit_POS_extra_discount_order_hidden"
                                                    class="form-control" placeholder="Enter Amount" name="">
                                            </div>
                                        </div>
                                        <small><span id="POS_worning" class="text-center text-danger "></span></small>
                                        <hr>

                                        <div class="row">
                                            <div class="col text-sm ">
                                                <%= language.Sub_Total %> :
                                            </div>
                                            <div class="col-auto text-sm payment_val paysymbol" id="payment_subtotal">$
                                                0.00</div>
                                        </div>

                                        <div class="row">
                                            <div class="col text-sm">
                                                <%= language.Addon %> :
                                            </div>
                                            <div class="col-auto text-sm payment_val paysymbol" id="payment_addons">$
                                                0.00</div>
                                        </div>

                                        <div class="row">
                                            <div class="col text-sm">
                                                <%= language.Extra_Discount %> :
                                            </div>
                                            <div class="col-auto text-sm payment_val paysymbol extsymbol"
                                                id="payment_extradiscount">$ 0.00</div>
                                        </div>

                                        <div class="row">
                                            <div class="col text-sm">
                                                <%= language.Coupon_Discount %> :
                                            </div>
                                            <div class="col-auto text-sm payment_val paysymbol"
                                                id="payment_coupondiscount">$ 0.00</div>
                                        </div>

                                        <div class="row">
                                            <div class="col text-sm" id="payment_text_perdent">
                                                <%= language.TAX %> (15%):
                                            </div>
                                            <div class="col-auto text-sm payment_val paysymbol"
                                                id="payment_text_amount"> 0.00</div>
                                        </div>

                                        <hr>

                                        <div class="row">
                                            <div class="col text-sm">
                                                <%= language.Gross_Total %> :
                                            </div>
                                            <div class="col-auto text-sm paysymbol extsymbol" id="payment_grosstotal">
                                                21.00</div>
                                        </div>

                                        <hr>

                                        <div class="row align-items-center">
                                            <div class="col-md-6 mb-1">
                                                <label class="form-label">
                                                    <%= language.Paid_Amount %>
                                                </label>
                                                <input type="number" class="form-control" placeholder="Enter Amount"
                                                    name="paid_amount" id="edit_paid_amount" min="0" required>
                                            </div>
                                            <div class="col-md-6 mb-1">
                                                <label class="form-label">
                                                    <%= language.Payment_Type %>
                                                </label>
                                                <select class="form-control wide" name="payment_type"
                                                    id="POS_payment_type_list" required>
                                                    <option value disabled>Choose Payment Type</option>
                                                    <option value="cash">Cash</option>
                                                    <option value="upi">UPI</option>
                                                    <option value="card">Card</option>
                                                    <option value="cheque">Cheque</option>
                                                    <option value="bank_transfer">Bank Transfer</option>
                                                </select>
                                            </div>

                                        </div>
                                        <span id="POS_worning_paid" class="text-center text-danger "></span>
                                        <hr>

                                        <div class="row">
                                            <div class="col text-sm">
                                                <%= language.Balance %> :
                                            </div>
                                            <div class="col-auto text-sm paysymbol extsymbol pamtsymbol"
                                                id="POS_total_balance"> 0.00</div>
                                        </div>

                                        <hr>

                                        <div class="col-12">
                                            <label class="form-label">
                                                <%= language.Notes %> / <%= language.Remarks %>
                                            </label>
                                            <input type="text" class="form-control" placeholder="Enter Notes"
                                                name="note">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                    <%= language.Cancel %>
                                </button>
                                <button class="btn btn-success" type="submit" value="submit"
                                    id="edit_cart_submit_for_order">
                                    <%= language.Save %> & <%= language.Print %>
                                </button>
                            </div>
                        </form>


                    </div>
                </div>
            </div>

        </div>
        <!--**********************************
            Footer start
        ***********************************-->
        <%- include('templet/footer')-%>

            <!--**********************************
            Footer end
        ***********************************-->

            </div>

            <!--********** Main wrapper end **********-->
            <%- include('templet/script')-%>
                <script>
                    $('#POS_payment_model').on('shown.bs.modal', function () {

                        $('#POS_payment_type_list').select2({
                            dropdownParent: $('#POS_payment_model'),
                            placeholder: 'Select Payment Type(p)',
                            width: '100%',
                            allowClear: true
                        });
                    });
                </script>
</body>



</html>