@extends('admin.layout.app')
@section('content')

    <div class="main-body">
        <div class="page-wrapper">
			<div class="page-header card">
                <div class="card-block">
                    <div class="row">
                        <div class="col-sm-10"><h5 class="m-b-5">Recent Orders</h5></div>
                        <div class="col-sm-1"><a href="" class="btn btn-sm btn-danger"><span class="pcoded-micon"><i class="fa fa-download"></i>&nbsp;CSV</span></a></div>
                        <div class="col-sm-1"><a href="" class="btn btn-sm btn-danger"><span class="pcoded-micon"><i class="fa fa-download"></i>&nbsp;PDF</span></a></div>
                    </div>
                    
                </div>
            </div>
            
            <div class="page-body">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-block">
                                <div class="table-responsive">
                                    <table class="table w-auto small">
                                        <thead>
                                        <tr class="bg-primary">
                                            <th class="text-center">#</th>
                                            <th class="text-center">Order ID</th>
                                            <th class="text-center">Status</th>
                                            <th class="text-center">Order By</th>
                                            <th class="text-center">Items</th>
                                            <th class="text-center">AprxAmt</th>
                                            <th class="text-center">Mobile</th>
                                            <th class="text-center">PickupPriority</th>
                                            <th class="text-center">PickupOption</th>
                                            <th class="text-center">Order Date&Time</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach ($recentOrders as $order) 
                                            <tr class="show-order" data-target="{{$order['id']}}" data-url="{{ url('admin/orderShow', $order['id']) }}" data-id="{{$order['id']}}">
                                                <td class="text-center">{{$counter++}}</td>
                                                <td class="text-center">{{$order["id"]}}</td>
                                                @if($order["Status"]=="PENDING")
                                                    <td class="text-center bg-danger">{{$order["Status"]}}</td>
                                                @elseif($order["Status"]=="CANCEL")
                                                    <td class="text-center bg-secondary">{{$order["Status"]}}</td>
                                                @else
                                                    <td class="text-center bg-success">{{$order["Status"]}}</td>
                                                @endif
                                                <td>{{$order["UName"]}}</td>
                                                <td class="text-center">{{$order["TotalItems"]}}</td>
                                                <td class="text-right">{{$order["TotalAmt"]}}</td>
                                                <td class="text-center">{{$order["Mobile"]}}</td>
                                                <td class="text-center">{{$order["PickupPriority"]}}</td>
                                                <td class="text-center">{{$order["PickupOption"]}}</td>
                                                <td class="text-center">{{$order["OrderDate"]}}</td>
                                            </tr>
                                            
                                            <!-- Modal -->
                                            <div class="modal hide" id="{{$order['id']}}" style="display:none;" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                                <div class="modal-dialog modal-lg">
                                                    <div class="modal-content">
                                                        <div class="modal-header">
                                                            <h5 class="modal-title" id="exampleModalLabel">Order Details - {{$order["Status"]}}</h5>
                                                            <button type="button" class="close" aria-label="Close" data-dismiss="modal" onclick="dismissModal({{$order['id']}})"><span aria-hidden="true">&times;</span></button>
                                                        </div>
                                                        <div class="modal-body">
                                                           
                                                        </div>
                                                        @if($order["Status"]=="PENDING")
                                                        <div class="modal-footer">
                                                            <div class="row col-md-12">
                                                                <div class="col-md-3 text-center"></div>
                                                                <div class="col-md-2 text-center"><a href="{{ url('admin/updateOrderStatus', [$order['id'], 'INVOICED', 'Recent']) }}" class="btn btn-primary btn-sm rounded"><b>INVOICED</b></a></div>
                                                                <div class="col-md-3 text-center"><a href="{{ url('admin/updateOrderStatus', [$order['id'], 'INVOICED WITH CHANGE', 'Recent']) }}" class="btn btn-info btn-sm rounded"><b>INVOICED WITH CHANGE</b></a></div>
                                                                <div class="col-md-2 text-center"><a href="{{ url('admin/updateOrderStatus', [$order['id'], 'DISPATCHED', 'Recent']) }}" class="btn btn-success btn-sm rounded"><b>DISPATCHED</b></a></div>
                                                                <div class="col-md-2 text-center"><a href="{{ url('admin/updateOrderStatus', [$order['id'], 'CANCEL', 'Recent']) }}" class="btn btn-danger btn-sm rounded"><b>NO STOCK</b></a></div>
                                                            </div>
                                                        </div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>
                                            
                                        @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('script')
<script type="text/javascript">
       
    $(document).ready(function () {
        
        $('tbody').on('click', '.show-order', function () {
            var userURL = $(this).data('url');
            var OId = $(this).data('id');
            
            $.get(userURL, function (data) {
                var output = "";
                var counter = 1;
                
                $('#'+OId).modal('show');
                
                output+='<div class="row col-md-12" style="font-size:10px;">';
                output+='<div class="col-md-1 text-center"><b>OrdID</b><p>'+data["ODetails"][0].id+'</p></div>';
                output+='<div class="col-md-4 text-center"><b>Order By.</b><p>'+data["ODetails"][0].UName+'</p></div>';
                output+='<div class="col-md-3 text-center"><b>Order Date&Time.</b><p>'+data["ODetails"][0].OrderDate+'</p></div>';
                output+='<div class="col-md-2 text-center"><b>Pickup Option</b><p>'+data["ODetails"][0].PickupOption+'</p></div>';
                output+='<div class="col-md-2 text-center"><b>Pickup Priority</b><p>'+((data["ODetails"][0].PickupPriority).split(" "))[0]+'</p></div>';
                output+='</div>';
                
                output+='<div class="row col-md-12 table-resposive">';
                output+='<table class="table w-auto" style="font-size:12px;">';
                
                output+='<thead class="text-center">';
                output+='<tr>';
                output+='<th class="text-center">#</th>';
                output+='<th class="text-center">Item Name</th>';
                output+='<th class="text-center">Company</th>';
                output+='<th class="text-center">Qty</th>';
                output+='<th class="text-center">Packing</th>';
                output+='<th class="text-center">Category</th>';
                output+='</tr>';
                output+='</thead>';
                
                output+='<tbody>';
                
                for(let i = 0; i < data["OIDetails"].length; i++)
                {
                    var total = parseInt(data["OIDetails"][i].IQty)*parseInt(data["OIDetails"][i].Packing);
                    output+="<tr class='text-center'><td>"+counter+"</td><td>"+data["OIDetails"][i].IName+"</td><td>"+(data["OIDetails"][i].PCompany).substring(0, 10)+"</td><td>"+data["OIDetails"][i].IQty+" | "+total+" "+data["OIDetails"][i].Unit+"</td><td>"+data["OIDetails"][i].Packing+" "+data["OIDetails"][i].Unit+"</td><td>"+data["OIDetails"][i].PCategory+"</td></tr>";
                    counter++;
                }                                                        
                
                output+='</tbody>';
                output+='</table>';
                output+='</div>';
                output+='<hr/>';
                
                $(".modal-body").html(output);
                //document.getElementById("itemDetails"+OId).innerHTML=output;
            })
        });
    
    });
    
    function dismissModal(OId)
        {
            $('#'+OId).modal('hide');
        }
   
</script>
@endsection