@extends('layouts.app')

@section('stitle', __('messages.Orders'))
@section('title', __('messages.CreateNewOrder'))

@section('content')
    <style>
        .table td, .table th { border-top: 1px solid #ebe9f1; padding: 0.72rem; }
    </style>
    <div class="app-content content ">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper container-xxl p-0">

            @if(session()->get('title') == "success")
                <div class="alert alert-success" role="alert">
                    <h4 class="alert-heading">Success</h4>
                    <div class="alert-body">
                        {{ session()->get('message') }}
                    </div>
                </div>
            @elseif (session()->get('title') == "error")
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Error</h4>
                    <div class="alert-body">
                        {{ session()->get('message') }}
                    </div>
                </div>
            @elseif($errors->any())
                <div class="alert alert-danger" role="alert">
                    <h4 class="alert-heading">Error</h4>
                    @foreach ($errors->all() as $error)
                        <div class="alert-danger">{{ $error }}</div>
                    @endforeach
                </div>
            @else
            @endif

            <div class="content-header row">
                <div class="content-header-left col-md-6 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">@yield('title')</h2>
                            <div class="breadcrumb-wrapper"></div>
                        </div>
                    </div>
                </div>
                <div class="content-header-right text-md-right col-md-6 col-12 d-md-block d-none">
                    @include('orders.order_menu')
                </div>
            </div>
            <div class="content-body">
                <form action="{{ route('order.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-2 category_list">
                            <div class="card mt-1">
                                <div class="card-header">
                                    <h4>{{__('messages.Categories')}}</h4>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover table-hover-animation">
                                            <thead>
                                            <tr>
                                                <th>{{__('messages.name')}}</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            @foreach($categories as $category)
                                                <tr id="cate_{{ $category->id }}" class="cate">
                                                    <td>{{ $category->name }}</td>
                                                </tr>
                                            @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="card mt-1 product_list">
                                <div class="card-header">
                                    <h4>{{__('messages.Products')}}</h4>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th>{{__('messages.name')}}</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="card mt-1 modifiers_list d-none">
                                <div class="card-header">
                                    <h4>{{__('messages.Modifiers')}}</h4>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th>{{__('messages.name')}}</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="card mt-1 modifier_options_list d-none">
                                <div class="card-header">
                                    <h4>{{__('messages.ModifierOptions')}}</h4>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover">
                                            <thead>
                                            <tr>
                                                <th>{{__('messages.name')}}</th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-3 order_info">
                            <div class="card mt-1">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-5 col-form-label">
                                            <label class=""><h5>{{__('messages.PaymentMethod')}}</h5></label>
                                        </div>
                                        <div class="col-7">
                                            <select class="select2-size-sm"  name="payment_method_id" required>
                                                <option value="" selected>{{__('messages.selectPaymentMethod')}}</option>
                                                @foreach($payment_method as $pay_method)
                                                    <option value="{{$pay_method->id}}">{{$pay_method->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-5 col-form-label">
                                            <label class=""><h5>{{__('messages.Branch')}}</h5></label>
                                        </div>
                                        <div class="col-7">
                                            <select class="select2-size-sm"  name="branch_id" required>
                                                <option value="" selected>{{__('messages.ChooseBranch')}}</option>
                                                @foreach($branches as $branch)
                                                    <option value="{{$branch->id}}">{{$branch->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-5 col-form-label">
                                            <label class=""><h5>{{__('messages.OrderType')}}</h5></label>
                                        </div>
                                        <div class="col-7">
                                            <select class="select2-size-sm"  name="order_type_id" required>
                                                <option value="" selected>{{__('messages.ChooseOrderType')}}</option>
                                                @foreach($order_types as $order_type)
                                                    <option value="{{$order_type->id}}">{{$order_type->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-5">
                                            <label class=""><h5>{{__('messages.Customer')}}</h5></label>
                                        </div>
                                        <div class="col-7">
                                            <select class="select2-size-sm"  name="customer_id">
                                                <option value="" selected>{{__('messages.ChooseCustomer')}}</option>
                                                @foreach($customers as $customer)
                                                    <option value="{{$customer->id}}">{{$customer->name}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="row mt-1 mb-1">
                                        <div class="col-4"><h5>{{__('messages.DueAt')}}</h5></div>
                                        <div class="col-8 text-right"><a href="#">{{__('messages.Choose')}}</a></div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12"><h5>{{__('messages.ReceiptNotes')}}</h5></div>
                                    </div>
                                    <div class="row mt-1">
                                        <div class="col-12">
                                            <div class="form-label-group">
                                                <textarea class="form-control" name="receipt_notes" id="label-textarea" rows="3" placeholder="{{__('messages.ReceiptNotes')}}"></textarea>
                                                <label for="label-textarea">{{__('messages.ReceiptNotes')}}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-12"><h5>{{__('messages.KitchenNotes')}}</h5></div>
                                    </div>
                                    <div class="row mt-1">
                                        <div class="col-12">
                                            <div class="form-label-group">
                                                <textarea class="form-control" name="kitchen_notes" id="label-textarea" rows="3" placeholder="{{__('messages.KitchenNotes')}}"></textarea>
                                                <label for="label-textarea">{{__('messages.KitchenNotes')}}</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-4 order_items">
                            <div class="card mt-1">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover cart_items">
                                            <thead>
                                            <tr>
                                                <th>{{__('messages.ORDERITEMS')}}</th>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- Bootstrap TouchSpin Spinners Size start -->

                            <!-- Bootstrap TouchSpin Spinners end -->

                            <div class="card mt-1">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-6"><h5>{{__('messages.SubTotal')}}</h5></div>
                                        <div class="col-6 text-right">
                                            <h5>{{Auth::user()->business->currency->symbol}} <span class="it_subtotal">0</span></h5>
                                            <input type="hidden" name="subtotal_amount" class="subtotal_amount">
                                        </div>
                                    </div>
                                    <div class="row mt-1">
                                        <div class="col-6"><h5>{{__('messages.VAT')}}</h5></div>
                                        <div class="col-6 text-right">
                                            <h5>{{Auth::user()->business->currency->symbol}} <span class="it_tax">0</span></h5>
                                            <input type="hidden" name="tax_amount" class="tax_amount">
                                        </div>
                                    </div>
                                    <div class="row mt-1 d-none discount_val">
                                        <div class="col-6"><h5>{{__('messages.discount')}}</h5></div>
                                        <div class="col-6 text-right">
                                            <h5 class="text-danger">{{Auth::user()->business->currency->symbol}} <span class="it_discount_value">0</span></h5>
                                            <input type="hidden" name="discount" class="discount_value">
                                        </div>
                                    </div>
                                    <div class="row mt-1 d-none discounted">
                                        <div class="col-6"><h5>{{__('messages.discountAmount')}}</h5></div>
                                        <div class="col-6 text-right">
                                            <h5>{{Auth::user()->business->currency->symbol}} <span class="it_discount">0</span></h5>
                                            <input type="hidden" name="discount_amount" class="discount_amount">
                                        </div>
                                    </div>
                                    <div class="row mt-1 justify-content-around">
                                        <div class="custom-control custom-control-success custom-radio">
                                            <input type="radio" id="discount_amt" name="discount_type" class="custom-control-input discount_type" value="discount_amount">
                                            <label class="custom-control-label" for="discount_amt">{{__('messages.discountAmount')}}</label>
                                        </div>
                                        <div class="custom-control custom-control-success custom-radio">
                                            <input type="radio" id="discount_rate" name="discount_type" class="custom-control-input discount_type" value="discount_rate" checked>
                                            <label class="custom-control-label" for="discount_rate">{{__('messages.discountRate')}}</label>
                                        </div>
                                    </div>
                                    <div class="row mt-1 align-items-end">
                                        <div class="col-6"><h5>{{__('messages.discount')}}</h5></div>
                                        <div class="col-6 text-right">
                                            <div class="input-group">
                                                <input type="number" class="form-control" placeholder="0" min="1" name="discount_input">
                                                <div class="input-group-append">
                                                    <span class="input-group-text ">%</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="card mt-2">
                                <div class="card-body">
                                    <div class="row mt-1 mb-1">
                                        <div class="col-6"><h5>{{__('messages.Total')}}</h5></div>
                                        <div class="col-6 text-right">
                                            <h5>{{Auth::user()->business->currency->symbol}} <span class="it_total">0</span></h5>
                                            <input type="hidden" name="total_amount" class="total_amount">
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-block btn-next place-order waves-effect waves-float waves-light">{{__('messages.PlaceOrder')}}</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

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


    <div class="modal-size-lg d-inline-block">
        <!-- Modal -->
        <div class="modal fade text-left" id="filter" tabindex="-1" role="dialog" aria-labelledby="myModalLabel17" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <form class="dt_adv_search" method="POST">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel17">Filter</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">

                            <div class="row">
                                <div class="col-12">
                                    <div class="form-row mb-1">
                                        <div class="col-lg-4">
                                            <label>Name:</label>
                                            <input type="text" class="form-control dt-input dt-full-name" data-column="1" placeholder="Alaric Beslier" data-column-index="0" />
                                        </div>
                                        <div class="col-lg-4">
                                            <label>Email:</label>
                                            <input type="text" class="form-control dt-input" data-column="2" placeholder="demo@example.com" data-column-index="1" />
                                        </div>
                                        <div class="col-lg-4">
                                            <label>Post:</label>
                                            <input type="text" class="form-control dt-input" data-column="3" placeholder="Web designer" data-column-index="2" />
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="col-lg-4">
                                            <label>City:</label>
                                            <input type="text" class="form-control dt-input" data-column="4" placeholder="Balky" data-column-index="3" />
                                        </div>
                                        <div class="col-lg-4">
                                            <label>Date:</label>
                                            <div class="form-group mb-0">
                                                <input type="text" class="form-control dt-date flatpickr-range dt-input" data-column="5" placeholder="StartDate to EndDate" data-column-index="4" name="dt_date" />
                                                <input type="hidden" class="form-control dt-date start_date dt-input" data-column="5" data-column-index="4" name="value_from_start_date" />
                                                <input type="hidden" class="form-control dt-date end_date dt-input" name="value_from_end_date" data-column="5" data-column-index="4" />
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <label>Salary:</label>
                                            <input type="text" class="form-control dt-input" data-column="6" placeholder="10000" data-column-index="5" />
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" data-dismiss="modal">Accept</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection

    @push('my_scripts')

    <script>
        // Discount Type Radio Button-(onChange)
        $('.discount_type').on("change", function(){

            $("input[name=discount_input]").val(""); // clear discount input
            $('.discount_amount').val("x");          // clear discounted value

            calcOrder()

            // $(".discounted").addClass('d-none');
            $('.discount_val').addClass('d-none');

            let discount_input_append = $("input[name=discount_input]").next().find('span')[0];
            if(this.value == 'discount_amount'){
                discount_input_append.innerHTML = '{{Auth::user()->business->currency->symbol}}';
            }
            else{
                discount_input_append.innerHTML = '%';
            }
        });

        function calcOrder(){
            // Calculate subtotal
            let sub_total = 0;
            $('.i_price').each(function(){
                sub_total += parseFloat(this.value);
            });
            // Calculate total tax
            let tax_total = 0;
            $('.i_tax').each(function(){
                tax_total += parseFloat(this.value);
            });
            // Calculate total
            sub_total = sub_total - tax_total;
            let total = sub_total + tax_total;

            // Update Total if Discount
            let disc_amt = parseFloat($('.discount_amount').val());
            console.log("DISC", disc_amt);
            if(isNaN(disc_amt)){
                $('.it_total').html(total.toFixed(2));
                $('.total_amount').val(total.toFixed(2));
            }
            else{
                $('.it_total').html(disc_amt.toFixed(2));
                $('.total_amount').val(disc_amt.toFixed(2));
            }

            // Subtotal Amount
            $('.it_subtotal').html(sub_total.toFixed(2));
            $('.subtotal_amount').val(sub_total.toFixed(2));
            // Tax Amount
            $('.it_tax').html(tax_total.toFixed(2));
            $('.tax_amount').val(tax_total.toFixed(2));

        }


        function calcDiscount(discountInputVal, option){
            console.log(typeof discountInputVal);
            let discount =  !isNaN(discountInputVal)
                            ? parseInt(discountInputVal)
                            : parseInt($("input[name=discount_input]").val());
            // if(!isNaN(discountInputVal))
            //     discount = parseInt(discountInputVal);
            // else
            //     discount = parseInt($("input[name=discount_input]").val());

            let subtotal_amt = parseFloat($('.subtotal_amount').val());
            let tax_amount = parseFloat($('.tax_amount').val());
            const rowCount = $('.cart_items > tbody > tr').length

            console.log("Discount Input:", discount);
            console.log("Subtotal Amount:", subtotal_amt);

            if(!isNaN(discount)){ // if discount value is given
                if(rowCount != 0){ // if any order items
                    let discounted_value;
                    let discount_value;
                    if($('.discount_type:checked').val() == 'discount_amount'){
                        discounted_value = subtotal_amt - discount;
                        discount_value = discount;
                    }
                    else{
                        let amt = subtotal_amt * (discount / 100);
                        discounted_value = subtotal_amt - amt;
                        discount_value = amt;
                    }
                    let final_total = discounted_value + tax_amount;
                    $('.it_discount').html(discounted_value.toFixed(2));
                    $('.discount_amount').val(discounted_value.toFixed(2));

                    $('.it_total').html(final_total.toFixed(2));
                    $('.total_amount').val(final_total.toFixed(2));

                    $('.it_discount_value').html(discount_value.toFixed(2));
                    $('.discount_value').val(discount_value.toFixed(2));

                    // $('.discounted').removeClass('d-none');
                    $('.discount_val').removeClass('d-none');
                }
                else{ // No Order Items
                    if(option == 'clear'){
                        $("input[name=discount_input]").val("");
                    }
                    else{
                        Swal.fire({
                            title: 'Error!',
                            text: 'No items in cart!',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            showClass: {
                                popup: 'animate__animated animate__shakeX'
                            },
                            buttonsStyling: false
                        });
                    }
                    // $('.discounted').addClass('d-none');
                    $('.discount_val').addClass('d-none');
                }
            }
            else{ // No Discount Value
                $('.discount_amount').val("x");
                // $('.discounted').addClass('d-none');
                $('.discount_val').addClass('d-none');
            }
        }

        $('input[name=discount_input]').on('blur', function (){
            calcDiscount(this.value);
        })

        $(".category_list").on("click", ".cate", function (e) {
            e.preventDefault();
            let cId = this.id;
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                }
            });
            $.ajax({
                type: 'POST',
                url: "{{ route('order.get_products') }}",
                data: {cId: cId},
                success: function (data) {
                    $(".product_list tbody").html(data.table_data);
                    $(".modifiers_list").addClass("d-none");
                    $(".modifier_options_list").addClass("d-none");
                }
            });
        });


        $(".product_list").on("click", ".addPro", function (e) {
            e.preventDefault();
            let pId = this.id.slice(4);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                }
            });
            $.ajax({
                type: 'POST',
                url: "{{ route('order.get_modifiers') }}",
                data: {pId: pId},
                success: function (data) {
                    $(".modifiers_list").removeClass("d-none");
                    $(".modifiers_list tbody").html(data.table_data);
                    $(".modifier_options_list .addModOption").closest('tr').empty();
                }
            });
        });

            $(".modifiers_list").on("click", ".addMod", function (e) {
            e.preventDefault();
            let mId = this.id.slice(4);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                }
            });
            $.ajax({
                type: 'POST',
                url: "{{ route('order.get_modifier_options') }}",
                data: {mId: mId},
                success: function (data) {
                    $(".modifier_options_list").removeClass("d-none");
                    $(".modifier_options_list tbody").html(data.table_data);
                }
            });
        });

        //

        $(".cart_items").on('click', '.removeItemPro', function () {
            $(this).closest('tr').remove();

            $(".modifiers_list .addMod").closest('tr').empty();
            $(".modifier_options_list .addModOption").closest('tr').empty();

            const rowCount = $('.cart_items > tbody > tr').length
            if(rowCount == 0){
                $(".modifiers_list").addClass("d-none");
                $(".modifier_options_list").addClass("d-none");

                $('.discount_amount').val("x");

                $('.it_total').html("0.00");
                $('.total_amount').val("0.00");
            }

            calcOrder()
            calcDiscount("input[name=discount_input]", 'clear');
        });



        $(".cart_items").on('click', '.bootstrap-touchspin-up', function (e) {
            e.preventDefault();
            var row        = $(this).closest("tr");
            var item_price = row.data('itemprice');
            var item_tax   = row.data('itemtax');
            var item_qty   = row.find('input.i_qty').val();

            var total_item_price = parseFloat(item_price) * parseInt(item_qty);
            var total_item_tax   = parseFloat(item_tax) * parseInt(item_qty);

            row.find('input.i_price').val(total_item_price);
            row.find('input.i_tax').val(total_item_tax);

            row.attr('data-itemprice', total_item_price);
            row.attr('data-itemtax', total_item_tax);

            calcOrder()
            calcDiscount("input[name=discount_input]", 'clear');
        });

        $(".cart_items").on('click', '.bootstrap-touchspin-down', function (e) {
            e.preventDefault();
            var row        = $(this).closest("tr");
            var item_price = row.data('itemprice');
            var item_tax   = row.data('itemtax');
            var item_qty   = row.find('input.i_qty').val();

            var total_item_price = parseFloat(item_price) * parseInt(item_qty);
            var total_item_tax   = parseFloat(item_tax) * parseInt(item_qty);

            row.find('input.i_price').val(total_item_price);
            row.find('input.i_tax').val(total_item_tax);

            row.attr('data-itemprice', total_item_price);
            row.attr('data-itemtax', total_item_tax);

            calcOrder()
            calcDiscount("input[name=discount_input]", "clear");
        });



        $(".product_list").on("click", ".addPro", function (e) {
            e.preventDefault();
            let pId = this.id.substr(4);
            // alert(pId);
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('input[name="_token"]').val()
                }
            });
            $.ajax({
                type: 'POST',
                url: "{{ route('order.add_to_cart') }}",
                data: {pId: pId},
                success: function (data) {
                    console.log(data);
                    if($('.cart_items tr').hasClass('order_item_'+pId))
                    {
                        Swal.fire({
                            title: 'Error!',
                            text: data.pro_name +' Product already added!',
                            icon: 'error',
                            customClass: {
                                confirmButton: 'btn btn-primary'
                            },
                            showClass: {
                                popup: 'animate__animated animate__shakeX'
                            },
                            buttonsStyling: false
                        });

                    } else {
                        $(".cart_items tbody").append(data.table_data);
                        $('.touchspin').TouchSpin({
                            buttondown_class: 'btn btn-primary',
                            buttonup_class: 'btn btn-primary',
                            buttondown_txt: feather.icons['minus'].toSvg(),
                            buttonup_txt: feather.icons['plus'].toSvg()
                        });

                        calcOrder()
                        calcDiscount("input[name=discount_input]", 'clear');
                    }
                }
            });
        });
    </script>


@endpush