@extends('adminlte::page')
@section('content')
    <?php Fun::lang() ?>
    <div class="page">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="title-add">
                    <div class="pull-left">
                        <h2>Client Item</h2>
                    </div>
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-sm-8 col-md-7 col-xs-12">
                <div class="box-body table-responsive">
                    <table id="datatable_client_payment" class="table table-striped table-bordered table-hover nowrap">
                        <thead>
                        <tr>
                            <th>No</th>
                            <th>Item Name</th>
                            <th>Item Cost</th>
                            <th>Item Price</th>
                            <th>Project</th>
                            <th>Category</th>
                            <th>Sub Category</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <div class="col-sm-4 col-md-5 col-xs-12" style="margin-top: 13px !important;">
                <h3>Item Added To Cart</h3>
                <div class="box-body table-responsive">
                    <table id="cart-buying" class="table table-striped table-bordered table-hover nowrap">
                        <thead>
                        <tr>
                            <th>No</th>
                            <th>Item Name</th>
                            <th>Item Price</th>
                            <th>Project</th>
                            <th>Category</th>
                            <th>Sub Category</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody id="add-cart-tr">
                            <?php
                            if(session()->has('change_item_cart')){
                                $cart = session()->get('change_item_cart');
                                $index = 1;
                                foreach ($cart as $key => $value) {
                                    echo "<tr>
                                            <td>".($index++)."</td>
                                            <td>".$value['item_name']."</td>
                                            <td>".$value['item_price']."</td>
                                            <td>".$value['project']."</td>
                                            <td>".$value['category']."</td>
                                            <td>".$value['subcategory']."</td>
                                            <td>
                                                <a href='javascript:void(0)' class='btn btn-xs btn-danger' onclick='remove_from_cart(this,".$value['item_id'].")' title='Remove item form cart'><i class='fa fa-trash'></i></a>
                                            </td>
                                          </tr>";
                                }
                            } 
                            ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script type="text/javascript">
        function remove_from_cart(obj,item_id){
            var route="{{route('change_item_remove_to_cart')}}";
            $.ajax({
                url:route,
                type:"POST",
                dataType:"JSON",
                data:{
                    "_token":"{{csrf_token()}}",
                    "item_id":item_id
                },
                success:function(data){
                    $(obj).closest('tr').remove();
                    $("#datatable_client_payment").find("tbody").find("tr#"+item_id).find("td").last().html(`<button class='btn btn-info btn-xs' onclick='Item_change_add_to_cart(this,${item_id})' type='button' title='Add item to cart'><i class='glyphicon glyphicon-shopping-cart'></i></button>`);
                },
                error:function(data){

                }
            })
            
        }
        function Item_change_add_to_cart(obj,item_id){
            var route = "{{route('change_item_add_to_cart')}}";
            $("#main-spinner").show();
            $.ajax({
                url:route,
                type:"POST",
                dataType:"JSON",
                data:{
                    "_token":"{{csrf_token()}}",
                    "item_id":item_id
                },
                success:function (data) {
                    $("#main-spinner").hide();
                    var tr=``;var index=0;
                    $.each(data,function(ind,val){
                        tr+=`<tr>
                                <td>${++index}</td>
                                <td>${val.item_name}</td>
                                <td>${val.item_price}</td>
                                <td>${val.project}</td>
                                <td>${val.category}</td>
                                <td>${val.subcategory}</td>
                                <td>
                                    <a href='javascript:void(0)' class='btn btn-xs btn-danger' onclick='remove_from_cart(this,${val.item_id})' title='Remove item form cart'><i class='fa fa-trash'></i></a>
                                </td>
                              </tr>`;
                    });
                    $("tbody#add-cart-tr").empty();
                    $("tbody#add-cart-tr").append(tr);
                    $(obj).closest('tr').find('td:eq(7)').html("<button class='btn btn-danger btn-xs' disabled type='button' title='Add item to cart'><i class='glyphicon glyphicon-shopping-cart'></i></button>");
                },
                error:function(){
                }
            });
        }
        $(document).ready(function() {
            $('#main-spinner').show();
            var index = $('#datatable_client_payment').DataTable({
                ordering: false,
                "serverSide": true,
                "lengthMenu": [
                    [10,20, 30, 50, 100, -1],
                    [10,20, 30, 50, 100, "All"]
                ],
                ajax: "{{ route('get_item_for_change') }}",
                columns: [{
                    data: 'DT_RowIndex'
                },
                    {
                        data: 'item_name'
                    },
                    {
                        data: 'item_cost'
                    },
                    {
                        data: 'item_price'
                    },
                    {
                        data: 'project'
                    },
                    {
                        data: 'category'
                    },
                    {
                        data: 'sub_category'
                    },
                    {
                        data: 'action'
                    },
                ],

                "initComplete": function(settings, json) {
                    $('#main-spinner').hide();
                }
            });
            index.on('order.dt search.dt', function() {
                index.column(0, {
                    search: 'applied',
                    order: 'applied'
                }).nodes().each(function(cell, i) {
                    cell.innerHTML = i + 1;
                });
            }).draw();
            $.fn.dataTable.ext.errMode = 'throw';
        });
    </script>
@endsection