@extends('layouts.adminapp')

@section('content')

{{-- Process Manger --}}
 
<div class="card mb-4">
    <div class="card-header">
        <div class="d-flex">
            <div class="mr-auto p-2 align-self-center"><h4>My Orders</h4></div>
            <div class="p-2">              
            <!-- <a class="btn btn-primary" href=""><i class="fa fa-plus"></i> ADD New</a> -->
            </div>           
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                    @php $Slno=0; @endphp
                        <th>Slno</th>
                        <th>Order No.</th>
                        <th>Job Status</th>
                        <th>Rack</th> 
                        <th>Godown</th>                   
                        <th colspan="">Actions</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
              {{-- @if($result) --}}
                <tbody>
                    @foreach($Orders as $Order)
                    <tr>
                        <td >{{++$Slno}}</td>
                        <td>{{ $Order->id}}</td>
                        <td>{{ $Order->status->title}}</td>
                        @if($Order->rack)
                            <td>{{ $Order->rack->title}}</td>
                        @else
                            <td>Not Selected</td>
                        @endif
                        @if($Order->rack)
                            <td>{{ $Order->rack->godown->title}}</td>
                        @else
                            <td>Not Selected</td>
                        @endif
                        <td>
                        <a href="{{route('ProcessDetails.view',$Order->id)}}"><button type="button" class="btn btn-info">View <i class="far fa-eye"></i></button></a>
                        </td>
                        {{--<td>
                            
                            <a href="{{route('InvoicePrint',$Order->id)}}"><button type="button" class="btn btn-secondary">Inovice</i></button></a>
                            
                        </td>--}}
                        <td>
                            <button type="submit" class="btn btn-success mx-2" data-toggle="modal" data-target=".bd-example-modal-lg" onclick="document.getElementById('IDOrder').value={{$Order->id}}" >Billing</button>
                        </td>
                        
                                              
                    </tr>
                    @endforeach
                </tbody>
                
            </table>
        </div>
    </div>
    <div class="card-footer">
    
        <div class="d-flex justify-content-end font-weight-bold"><h5>Total: </h5></div>        
    </div>
</div>



<!-- Invoice Details Modal-->
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Order Billing</h5>
            <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-sm-4">
                    <div class="form-group">
                        <label for="txtName">Product/Service</label>
                        <input type="text" class="form-control" id="txtName" name="name">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="numAmount">Rate</label>
                        <input type="number" class="form-control" id="numAmount" name="amount">
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="form-group">
                        <label for="numQuantity">Quantity</label>
                        <input type="number" class="form-control" id="numQuantity" name="quantity">
                    </div>
                </div>
                <div class="col-sm-2">
                    <button type="button" class="btn btn-outline-success mt-4" onclick="bill()">Add <i class="fas fa-plus"></i></button>
                </div>
            </div>
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th scope="col">Product/Service</th>
                            <th scope="col">Rate</th>
                            <th scope="col">Quantity</th>
                            <th scope="col">Total</th>
                        </tr>
                    </thead>
                    <tbody id="billing">
                        
                    </tbody>
                    <tbody>
                        <tr>
                            <td colspan="3"><b>Grand Total</b></td>
                            <td id="Gtotal"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
        </div>
        <div class="modal-footer">
            <form method="post" action="{{route('processComplete.complete')}}">
            @csrf
            <input type="hidden" id="IDOrder" name="id">
                <div id="hiddenValues">

                </div>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Completed</button>
            </form>    
        </div>
    </div>
  </div>
<script>
    var GrandTotal=0;
    function bill() {
        var Name = document.getElementById('txtName').value;
        var Amount = document.getElementById('numAmount').value;
        var Quantity = document.getElementById('numQuantity').value;
        var Total = Amount*Quantity;
        GrandTotal+=Total;
        billing.innerHTML +='<tr><td>'+Name+'</td><td>'+Amount+'</td><td>'+Quantity+'</td><td>'+Total+'</td>';
        hiddenValues.innerHTML+='<input type="hidden" name="name[]" value="'+Name+'"> <input type="hidden" name="quantity[]" value="'+Quantity+'"> <input type="hidden" name="amount[]" value="'+Amount+'">';
        Gtotal.innerHTML='<b>'+GrandTotal+'</b>';
    }
</script>

</div>


@endsection