@extends('layouts.app')

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

@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"><h2 class="content-header-title float-left ml-1">{{ $order->reference }}</h2></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.update') }}" 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 product_list">
                            <div class="card mt-1">
                                <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>
                        <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.Branch')}}</h5></label>
                                        </div>
                                        <div class="col-7">
                                            <input type="text" class="form-control form-control-sm" readonly value="{{ $branch->name }}">
                                        </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 select2-hidden-accessible" disabled name="order_type_id" required>
                                                <option value="" selected>{{__('messages.ChooseOrderType')}}</option>
                                                @foreach($order_types as $order_type)
                                                    <option {{ $order_type->id === $order->type ? "selected" : "" }} 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>
                                            @foreach($orderProducts as $pro)
                                                <tr class="order_item_{{ $pro->product_id }}" data-itemprice="{{ $pro->price }}">
                                                    <td>{{ $pro->name }} - ({{Auth::user()->business->currency->symbol}} {{ $pro->price }})</td>
                                                    <td>
                                                        <div class="input-group disabled-touchspin input-group-lg">
                                                            <input type="number" class="touchspin i_qty" disabled value="1" />
                                                        </div>
                                                    </td>
                                                    <td class="text-right">
                                                        <button type="button" class="btn btn-danger btn-sm waves-effect waves-float waves-light" disabled>{{__('messages.Delete')}}</button>
                                                        <input type="hidden" class="i_price" value="{{ $pro->price }}">
                                                    </td>
                                                </tr>
                                            @endforeach
                                            </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">{{ $order->subtotal_price }}</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}} 0</h5></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}} {{ $order->total_price }}</h5></div>
                                    </div>
                                    <input type="hidden" name="id" value="{{ $order->id }}">
                                    <button type="submit" class="btn btn-primary btn-block btn-next place-order waves-effect waves-float waves-light">Update Order</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

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



    @endsection
@push('my_scripts')
<script>
        $(".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);
                }
            });
        });

        $(".cart_items").on('click', '.removeItemPro', function () {
            $(this).closest('tr').remove();
            var it_total = 0;
            $('.i_price').each(function(){
                it_total += parseFloat(this.value);
            });
            $('.it_subtotal').html(it_total.toFixed(2));
            $('.subtotal_amount').val(it_total.toFixed(2));
        });



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

            total_i_price = parseFloat(per_i_price)*parseInt(iqty);

            row.find('input.i_price').val(total_i_price);

            var it_total = 0;
            $('.i_price').each(function(){
                it_total += parseFloat(this.value);
            });
            $('.it_subtotal').html(it_total.toFixed(2));
            $('.subtotal_amount').val(it_total.toFixed(2));
        });

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

            total_i_price = parseFloat(per_i_price)*parseInt(iqty);

            row.find('input.i_price').val(total_i_price);

            var it_total = 0;
            $('.i_price').each(function(){
                it_total += parseFloat(this.value);
            });
            $('.it_subtotal').html(it_total.toFixed(2));
            $('.subtotal_amount').val(it_total.toFixed(2));
        });



        $(".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) {
                    if($('.cart_items tr').hasClass('order_item_'+pId))
                    {
                        Swal.fire({
                            title: 'Error!',
                            text: data.itemName+' Item 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()
                        });
                        var it_total = 0;
                        $('.i_price').each(function(){
                            it_total += parseFloat(this.value);
                        });
                        // alert(it_total);
                        $('.it_subtotal').html(it_total.toFixed(2));
                        $('.subtotal_amount').val(it_total.toFixed(2));
                    }
                }
            });




        });
    </script>
    @endpush