@extends('layouts.erp_theme_01')
@section('content')
    <input type="hidden" id="gkey" name="gkey" value="{{   request()->get('cno')  }}"/>
    <div class="row mt-3">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    Item Category
                </div>
                <ul class="list-group list-group-flush">
                    @foreach($item_categories as $item)
                        <li class="list-group-item d-flex justify-content-between align-items-start">
                            <div class="ms-2 me-auto">
                                <div class="fw-bold">
                                    <a href="{{ URL::to('/erp/inventory/browse-menu-items') }}?cno={{   request()->get('cno')  }}&category={{ strtolower( $item->name ) }}">
                                        {{ $item->name }}
                                    </a>
                                </div>
                            </div>
                            @if( strcasecmp( $category,$item->name ) == 0  )
                                <span class='badge bg-success rounded-pill'>selected</span>
                            @endif
                        </li>
                    @endforeach
                </ul>

            </div>
        </div>


        <div class="col-md-9">
            @if (session('err_msg_right'))
                <div class="alert alert-info">
                    {{ session('err_msg_right') }}
                </div>
            @endif

            @if(isset($menu_items) && count($menu_items) > 0)
                <div class="row row-cols-1 row-cols-md-3 g-4">
                    @foreach($menu_items as $item)
                        <div class="col-6">
                            <div class="card h-100">
                                <div class="card-header">
                                    <p class="h3">{{ $item->item_name }}</p>
                                    <p class="h5">Unit Cost: <span class='red'>{{ $item->unit_cost  }} ₹</span></p>
                                </div>
                                <div class="card-body">

                                    <div class="d-flex text-start">
                                        <div class="p-2 flex-fill">{{ $item->item_description }}</div>
                                        <div class="p-2 flex-end">
                                            @foreach($menu_item_images as $image)
                                                @if( $image->item_id == $item->id )
                                                    <img src="{{ $image->image_url }}" width="150px"
                                                         class="rounded mx-auto d-block" alt="Menu Item Photo">
                                                    @break;
                                                @endif
                                            @endforeach
                                        </div>

                                    </div>


                                    @php
                                        $cartqty = 0;
                                    @endphp
                                    @foreach($order_items as $order_item)
                                        @if( $item->id == $order_item->item_id)
                                            @php
                                                $cartqty = $order_item->qty;
                                            @endphp
                                            @break
                                        @endif
                                    @endforeach


                                </div>
                                <div class="card-footer">
                                    <div class="d-flex flex-row bd-highlight mb-3">
                                        <div class="p-2 bd-highlight">
                                            <div class="btn-group btn-group-sm" role="group"
                                                 aria-label="Small button group">
                                                <button type="button" class="btn btn-outline-primary ctspinner"
                                                        data-unitcost="{{ $item->unit_cost }}"
                                                        data-target="tbqty{{ $item->id }}" data-step="-1"
                                                        data-item="{{ $item->id }}">-
                                                </button>
                                                <input type="number" readonly step="1" min="0" max="50"
                                                       class="form-controll" value="{{ $cartqty }}"
                                                       id="tbqty{{ $item->id }}">
                                                <button type="button" class="btn btn-outline-primary ctspinner"
                                                        data-unitcost="{{ $item->unit_cost }}"
                                                        data-target="tbqty{{ $item->id }}" data-step="1"
                                                        data-item="{{ $item->id }}">+
                                                </button>
                                            </div>
                                        </div>
                                        <div class="p-2 bd-highlight text-end">
                                            <span class='h5 blue'
                                                  id="vucost{{ $item->id }}">{{ $cartqty * $item->unit_cost }}</span>
                                            <span class='h5 blue'>₹ in total</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="col-md-12 ">
                    <div class="alert alert-info">
                        No item added yet!
                    </div>
                </div>
            @endif


        </div>
    </div>

@endsection


@section('script')

    <script>


        $(".ctspinner").on('click', function () {

            var step = parseInt($(this).attr("data-step"));
            var ctbox = $(this).attr("data-key");
            var target = $(this).attr("data-target");
            var cval = parseInt($("#" + target).val());
            var nval = (cval + step);
            nval = nval >= 0 ? nval : 0;
            $("#" + target).val(nval);
            var key = $("#gkey").val();
            var item = $(this).attr("data-item");
            var unitcost = $(this).attr("data-unitcost");

            var json = {};
            json['enckey'] = key;
            json['item'] = item;
            json['qty'] = nval;


            console.log(json);


            $.ajax({
                type: 'post',
                url: api + "v1/add-item-to-order",
                data: json,
                success: function (data) {
                    data = $.parseJSON(data);
                    if (data.err_code == 7001) {
                        $("#vucost" + item).html((Math.round(nval * unitcost * 100) / 100).toFixed(2));

                    }

                },
                error: function (xhr, status, errorThrown) {
                    console.log(xhr);
                    // alert(  'Something went wrong, please try again');
                }

            });
        });


    </script>

@endsection