@extends('layouts.app')
@section('title', __('product.point_of_sales'))

@section('content')

    @include('layouts.partials.breadcrumb',['page_title'=> __( 'product.add_point_of_sale') , 'bread_crumbs'=>array( array('title'=>__('product.products'),'url'=>'/products'),array('title'=> __('product.add_point_of_sale'),'url'=>''))])
    <!-- Main content -->
    <section class="content">
        @php
            $form_class = empty($duplicate_product) ? 'create' : '';
            $is_image_required = !empty($common_settings['is_product_image_required']);
        @endphp
        {!! Form::open(['url' => action([\App\Http\Controllers\ProductController::class, 'store']), 'method' => 'post',
        'id' => 'product_add_form','class' => 'product_form ' . $form_class, 'files' => true ]) !!}
        <div class="box">
            <div class="">

                @component('components.widget', ['title' => __('sale.sales_info'),'class' => '','icon'=>'<i class="fa fa-th-large"></i>',])
                    <style>
                        @font-face {
                            src: url({{ asset('/font/digital_font/digital-7.ttf') }});
                            font-family: 'digital-clock-font';
                        }

                        .scrollable-div {
                            max-height: 500px;
                        }

                        .image-card {
                            width: auto;
                            height: 70px;
                        }

                        .cart-summary-col {
                            border: 1px solid lightgray;
                            min-height: 100px;
                            min-width: 18%;
                            padding: 13px;
                            background-color: #fbfaff;
                        }

                        .cart-summary-numerics {
                            display: inline-block;
                            float: right;
                            font-size: 40px;
                            color: blue;
                            font-family: 'digital-clock-font';
                        }

                        .car-summary-labels {
                            color: blue;
                            font-size: 20px;
                            font-weight: bold;
                        }

                        #cart_summary_row {
                            width: 85%;
                        }

                        .quantity-input {
                            width: 135px;
                            float: left;
                            margin-top: 10px
                        }

                        .qty-dropdown {
                            width: 110px;
                            float: right;
                            margin-top: 10px
                        }

                        .chat-box-width {
                            width: 210px
                        }

                        chat-box-body-height {
                            height: 395px !important;
                        }

                    </style>
                    <div class="row">
                        <div class="col-lg-7 col-12 scrollable-div overflow-auto">
                            <div class="box ">

                                <div class="row ">
                                    <div class="col-lg-4 mx-3">
                                        <form class="form">
                                            <div class="box-body">
                                                <div class="form-group">
                                                    <!--                                      <label class="form-label">User Name</label>-->
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                                        <select class="form-select">
                                                            <option>Budget</option>
                                                            <option>less than 5000$</option>
                                                            <option>5000$ - 10000$</option>
                                                            <option>10000$ - 20000$</option>
                                                            <option>more than 20000$</option>
                                                        </select>
                                                        <span class="input-group-text"><i
                                                                class="fa fa-plus-square-o"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-lg-7 mx-3">
                                        <form class="form">
                                            <div class="box-body">
                                                <div class="form-group">
                                                    <!--                                    <label class="form-label">User Name</label>-->
                                                    <div class="input-group mb-3">
                                                        <span class="input-group-text"><i class="ti-user"></i></span>
                                                        <input type="text" class="form-control" placeholder="Username">
                                                        <span class="input-group-text"><i
                                                                class="fa fa-plus-square-o"></i></span>

                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>

                                <!---------------------- Products Quantity ------------------>
                                <div class="row px-4 pb-4">
                                    <div class="col-12  col-lg-12">
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="table-responsive">
                                                    <table class="table product-overview">
                                                        <thead>
                                                        <tr>
                                                            <th style="width: 10%">Image</th>
                                                            <th style="width: 20%">Product Name</th>
                                                            <th style="width: 10%">Price</th>
                                                            <th style="width: 40%">Quantity</th>
                                                            <th style="text-align:center;width: 10%">Total</th>
                                                            <th style="text-align:center;width: 10%">Action</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>


                                                        </tbody>
                                                        <tfoot>
                                                        <tr>
                                                            <th colspan="5" class="text-end">Sub-Total</th>
                                                            <th><span>Rs.0</span></th>
                                                        </tr>

                                                        <tr>
                                                            <td colspan="5" align="right">Tax</td>
                                                            <td>Rs.0</td>
                                                        </tr>
                                                        <tr>
                                                            <th colspan="5" class="text-end fs-15 fw-700">Payable
                                                                Amount
                                                            </th>
                                                            <th class="fs-15 fw-700"><span
                                                                    id="tr_payable_row">Rs.0</span></th>
                                                        </tr>
                                                        </tfoot>
                                                    </table>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <!-- /.box-body -->
                            </div>

                        </div>
                        <!-- /.box -->
                        <div class="col-lg-5 col-12 scrollable-div overflow-auto">
                            <div class="box">
                                <!-- /.box-header -->
                                <!--------- Products -------->

                                <div class="row p-3">

                                    <div class="col-6 p-3">
                                        <label for="category_id">Category</label>
                                        <select class="form-select select2 search-filter" id="category_id">
                                            <option value="">@lang('app.please_select')</option>
                                            @foreach($categories as $category)
                                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                                            @endforeach
                                        </select>

                                    </div>

                                    <div class="col-6 p-3">
                                        <label for="category_id">Brands</label>
                                        <select class="form-select select2 search-filter" id="brand_id">
                                            <option value="">@lang('app.please_select')</option>
                                            @foreach($brands as $brand)
                                                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                            @endforeach
                                        </select>

                                    </div>
                                    <input type="hidden" value="0" name="sub_total" id="sub_total">
                                    <input type="hidden" value="0" name="items_in_cart" id="items_in_cart">
                                </div>
                                <div class="row p-3" id="product_list">

                                    @foreach($products as $product)

                                        <div class="col-md-3  product-item" style="cursor: pointer;"
                                             data-prodid="{{ $product->id }}"
                                             data-name="{{ $product->product }}"
                                             data-price="{{ $product->max_price }}"
                                             data-image="http://dev-pos.olivecliq.org/uploads/img/{{  $product->image}}">
                                            <div class="card text-center">
                                                <img class="card-img-top image-card"
                                                     src="http://dev-pos.olivecliq.org/uploads/img/{{  $product->image}}"
                                                     alt="{{ $product->product }}">

                                                <div class="card-body">
                                                    <p class="text-center"
                                                       style="font-size: 11px">{{ $product->product }}</p>
                                                    <h5 style="font-size: 12px" class="card-title b-0 px-0">
                                                        Rs. {{ number_format($product->max_price,2) }}</h5>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach

                                </div>

                                <!---------- Products End ------->
                                <!-- /.box -->
                            </div>
                        </div>

                        <div class="box-body">
                            <div class="row px-4 pb-4" id="cart_summary_row">

                                <div class="col-md-2 cart-summary-col">

                                    <div class="col-md-12">
                                        <label class="car-summary-labels">ITEMS</label>
                                    </div>
                                    <div class="col-md-12">
                                        <span class="cart-summary-numerics" id="total_item_in_cart">0.00</span>
                                    </div>
                                </div>

                                <div class="col-md-2 cart-summary-col">
                                    <div class="col-md-12">
                                        <label class="car-summary-labels">SUB TOTAL</label>
                                    </div>
                                    <div class="col-md-12">
                                        <span class="cart-summary-numerics" id="tr_sub_total">0.00</span>
                                    </div>
                                </div>

                                <div class="col-md-2 cart-summary-col">
                                    <div class="col-md-12">
                                        <label class="car-summary-labels">PAYMENT</label>
                                    </div>
                                    <div class="col-md-12">
                                        <span class="cart-summary-numerics">0.00</span>
                                    </div>
                                </div>

                                <div class="col-md-2 cart-summary-col">
                                    <div class="col-md-12">
                                        <label class="car-summary-labels" style="color:red !important;">CHANGE</label>
                                    </div>
                                    <div class="col-md-12">
                                        <span class="cart-summary-numerics" style="color:red !important;">0.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endcomponent
                <div id="chat-box-body" class="show">
                    <div id="chat-circle" class="waves-effect waves-circle btn btn-circle btn-sm btn-warning">
                        <div id="chat-overlay"></div>
                        <span class="fa fa-window-maximize fs-18"><span class="path1"></span><span
                                class="path2"></span></span>
                    </div>

                    <div class="chat-box chat-box-width">
                        <div class="chat-box-header d-flex justify-content-between align-items-center">
                            <div class="btn-group">

                            </div>

                            <div class="chat-box-toggle">
                                <i id="chat-box-toggle" class="">
                                    <span class="icon-Close fs-30"><span class="path1"></span><span
                                            class="path2"></span></span>
                                </i>
                            </div>
                        </div>
                        <div class="chat-box-body">

                            <div class="box-solid bg-orange">
                                <div class="box-body">
                                    <div class="col-md-12">
                                        <strong>
                                            @lang('app.total_items'):
                                        </strong>
                                        <br>
                                        <span class="lead text-bold total_quantity">1.00</span>
                                    </div>
                                    <div class="col-md-12">
                                        <hr>
                                        <strong>
                                            @lang('sale.total_payable'):

                                        </strong>
                                        <br>
                                        <span class="lead text-bold total_payable_span" id="tr_sub_total">₨ 83.75</span>
                                    </div>
                                    <div class="col-md-12">
                                        <hr>
                                        <strong>
                                            @lang('app.total_paying'):
                                        </strong>
                                        <br>
                                        <span class="lead text-bold total_paying">₨ 0.00</span>
                                        <input type="hidden" id="total_paying_input" value="0.00">
                                    </div>
                                    <div class="col-md-12">
                                        <hr>
                                        <strong>
                                            @lang('app.change_return'):
                                        </strong>
                                        <br>
                                        <span class="lead text-bold change_return_span">₨ 0.00</span>
                                        <input class="form-control change_return input_number" required=""
                                               id="change_return" name="change_return" type="hidden" value="0.00">
                                        <!-- <span class="lead text-bold total_quantity">0</span> -->
                                    </div>
                                    <div class="col-md-12">
                                        <hr>
                                        <strong>
                                            @lang('app.balance'):
                                        </strong>
                                        <br>
                                        <span class="lead text-bold balance_due text-danger">₨ 83.75</span>
                                        <input type="hidden" id="in_balance_due" value="83.75">
                                    </div>
                                </div>
                                <!-- /.box-body -->
                            </div>

                        </div>

                    </div>
                </div>
            </div>

            <div class="box-footer text-start">
                <button class="btn btn-success pull-right"><i class="fa fa fa-shopping-cart"></i> @lang('sale.checkout')
                </button>
                <button class="btn btn-info"><i class="fa fa-arrow-left"></i> @lang('sale.continue_shopping')</button>
            </div>
        </div>

        {!! Form::close() !!}

    </section>
    <!-- /.content -->

@endsection

@section('javascript')

    <script>
        $(document).ready(function () {

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(document).on('click', '.product-item', function () {
                addTableRow($(this));
                var item_price = $(this).data('price');
                calculateSubTotal(item_price, '+');
            });

            $(document).on("click", '.delete-row', function () {
                var deleted_row_price = $(this).parent('td').prev('td').text();
                calculateSubTotal(deleted_row_price, '-');
                deleteTableRow($(this));
            });

            $('.search-filter').on('change', function () {
                var filter_id = $(this).attr('id');
                var url = '';
                var data = '';
                if (filter_id == 'category_id') {
                    url = base_path + '/getCategoryWiseProducts';
                    data = {"category_id": $("#" + filter_id).val()}
                } else {
                    url = base_path + '/getBrandWiseProducts';
                    data = {"brand_id": $("#" + filter_id).val()}
                }

                if ($("#" + filter_id).length > 0) {
                    $.ajax({
                        method: 'POST',
                        url: url,
                        dataType: 'json',
                        data: data,
                        success: function (result) {
                            var body = '';
                            if (result.length > 0) {
                                $.each(result, function (key, value) {
                                    let price = (value.max_price)
                                    price = parseFloat(price).toFixed(2);
                                    body += ' <div class="col-md-3  product-item" style="cursor: pointer;" data-name="' + value.product + '"   data-price="' + price + '" data-image="' + value.image_url + '" data-prodid="' + value.id + '">  <div class="card text-center"> <img class="card-img-top image-card" src="' + value.image_url + '" ><div class="card-body"> <p class="text-center" style="font-size: 11px">' + value.product + '</p><h5 style="font-size: 12px" class="card-title b-0 px-0">Rs. ' + price + '</h5></div> </div></div>';
                                });
                                $('#product_list').html('');
                                $('#product_list').html(body)
                            }

                        },
                    });
                }

            })

            $(document).on("change", '.calculate-qty-price', function () {
                var qty = $(this).val();
                var previous_amount = $(this).parent('td').next('td').text();
                var row_price = $(this).parent('td').prev('td').text();
                var total_amount = +row_price * +qty;

                $(this).parent('td').next('td').text(total_amount);
                calculateSubTotal(previous_amount, '-');
                calculateSubTotal(total_amount, '+');

            });

        })


        function calculateSubTotal(item_price, operation) {
            var total_price = $('#sub_total').val();
            var total_item_in_cart = $('#items_in_cart').val();
            if (operation === '+') {
                total_price = +total_price + +item_price;
                total_item_in_cart = +total_item_in_cart + +1;
            } else {
                total_price = total_price - item_price;
                total_item_in_cart = total_item_in_cart - 1;
            }

            $('#sub_total').val(total_price);
            $('#items_in_cart').val(total_item_in_cart);
            $('#tr_sub_total').text('');
            $('#tr_sub_total').html(total_price.toFixed(2));
            $('#tr_payable_row').html(total_price.toFixed(2));
            $('#total_item_in_cart').html(total_item_in_cart.toFixed(2));

        }

        function addTableRow(item) {
            var productID = item.data('prodid');
            var productName = item.data('name');
            var price = item.data('price');
            price = parseFloat(price).toFixed(2);
            var total = price * 1;
            var image = item.data('image');
            var table = $('.product-overview tbody');
            var newRow = '<tr><td><img src="' + image + '" width="80"></td><td>' + productName + '</td><td class="item-price">' + price + '</td><td> <div class="input-group mb-3 input-number quantity-input"><span class="input-group-addon"><i class="fa fa-minus text-danger quantity-down"></i></span><input type="text" class="form-control calculate-qty-price" min="1" value="1"><span class="input-group-addon"><i class="fa fa-plus text-success quantity-up"></i></span></div><div class="qty-dropdown"><select class="form-select" name="" id=""><option value="">Choose</option></select></div></td><td align="center" class="item-total">' + total + '</td><td align="center"><button type="button" class="btn btn-circle btn-danger btn-xs delete-row" title="" data-bs-toggle="tooltip" data-bs-original-title="Delete"><i class="ti-trash"></i></button></td></tr>';
            table.append(newRow);
        }

        function deleteTableRow(row) {
            row.closest('tr').remove();
        }
    </script>


@endsection