@extends('layouts.template')
@section('content')
<section class="expense-summary">
    <div class="container">
        <div class="row ">
            {!!Form::open(['url'=>'logistic/expense/summary/update','method' => 'POST','class' => 'form-horizontal','id'=>'frm_expense','data-toggle' => "validator",'files' => true])!!}
            <h1 class="heading">Expense Summary and listing per Job  <a href="{{ url('logistic/dashboard') }}" title="back"><i class="fa fa-undo" aria-hidden="true"></i></a></h1>
            <div class="table-heading">
                <h4 class="col-md-3 col-sm-3 col-xs-12">Expense Summary </h4>
                <div class="expences_select_error"></div>
                <div class="col-md-9 col-sm-9 col-xs-12 form-inline">
                    <small>Sort by - </small>
                    <div class="form-group select">
                        <label>Supplier Name:</label>
                        <select class="form-control select_supplier" data-error="xyz" name='supplier_name'>
                            <option value=''>Select supplier name</option>
                            @foreach($supplier as $sup_detail)
                            <option value='{{$sup_detail['id']}}'>{{$sup_detail['name']}}</option>
                            @endforeach
                        </select> 
                    </div>
                    <div class="form-group select" >
                        <label>Status:</label>
                        <select class="form-control select_status" name='status' data-error="xyz">
                            <option value='Unpaid'>Unpaid</option>
                            <option value='Paid'>Paid</option>                         
                        </select> 
                    </div>
                </div>
            </div>
            @if (count($errors) > 0)
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
            <div class="table-responsive">
                <table class="table">
                    <thead>
                    <th><label for="area-select">select</label></th>            
                    <th>Supplier Name </th>              
                    <th>Proforma Inv. </th>                
                    <th>Inv Nr </th>              
                    <th>Inv Date </th>               
                    <th>Amount USD </th>              
                    <th>Amount MZM </th>                
                    <th>Discount</th> 
                    <th>Status</th>               
                    <th>Payment Details</th>
                    </thead>
                    <tbody class="first_exp_details">
                        @if(!empty($expense))
                        @foreach($expense as $exp_details)
                        <tr>
                            <td><input type="checkbox" id="select{{$exp_details['id']}}" value="{{$exp_details['id']}}"  name="expences_select[]"><label for="select{{$exp_details['id']}}"></label></td> <!-- class="magic-checkbox area" -->
                            <td>{{$exp_details['name']}}</td>
                            <td>{{$exp_details['performa_inovice'] }}</td>
                            <td>{{$exp_details['invoice_no']}}</td>
                            <td>{{ Helper::convert_to_ddmmyy($exp_details['inovice_date']) }}</td>
                            <td>{{$exp_details['total_amount_usd']}}</td>
                            <td>{{$exp_details['total_amount_mzm']}}</td>
                            <td>{{$exp_details['discount']}}</td>
                            <td>{{$exp_details['status']}}</td>
                            <td><a href="#" data-toggle="modal" data-target="#myModal" data-id="{{$exp_details['id']}}" onclick="showexpense({{$exp_details['id']}})" >Details</a></td>
                        </tr>
                        @endforeach
                        @else
                        <tr>
                            <td><strong>No Data Found</strong></td>
                        </tr>
                        @endif
                    </tbody>
                    <tbody style="display:none;" class="show_specific_details_supplier">
                    </tbody>
                </table>
            </div>
            <div class="form-group submit-btn">
                {!!Form::submit('update status')!!}
            </div>
            {!!Form::close()!!}
        </div>
    </div>
</section>
<!-- modal popup-->
<!-- Modal -->
<div class="payment-modal modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">
        <!-- Modal content-->
        <div class="modal-content">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <div class="modal-body">
                <div class="table-payment">
                    <div class="table-responsive show_specific_expense_details">
                       
                    </div>
                </div>
            </div>
        </div>     
    </div>
</div>
<script>
    var show_url = "{{URL::to('logistic/expense/summary/get_single_expense_data')}}";
    var show_status_url = "{{URL::to('logistic/expense/summary/get_single_supplier_data')}}";
    var _token = "{{csrf_token()}}";
</script>
<script type="text/javascript" src="{{asset('app/js/expense-summary-details.js') }}"></script>
<script type="text/javascript">
    function showexpense(id){
        
        $.ajax({
            url: show_url,
            type: 'POST',
            dataType: 'JSON',
            data: {'id': id, '_token': _token},
            success: function (response) {
                
                var html = '<table class="table">';
                    html+=  '<thead><tr><th>Payment Date</th><th>Invoice no</th><th>Invoice Date</th><th>Total Amount (USD)</th><th>Total Amount (MZM)</th><th>Discount</th><th>Payment Reference Number</th></tr></thead>';
                    html+=  '<tbody>';

                for (var i = 0; i < response.expense.length; i++) {
                    html += '<tr>';
                    html += '<td>' + response.expensedetail[0].payment_date + '</td>';
                    html += '<td>' + response.expense[i].invoice_no + '</td>';
                    html += '<td>' + response.expense[i].inovice_date + '</td>';
                    html += '<td>' + response.expense[i].total_amount_usd + '</td>';
                    html += '<td>' + response.expense[i].total_amount_mzm + '</td>';
                    html += '<td>' + response.expense[i].discount + '</td>';
                    html += '<td>' + response.expensedetail[0].payment_reference_number + '</td>';
                    html += '</tr>';
                }

                html+=  '</tbody>';
                html+=  '</table>';
               
                html+= '<table class="table">';
                html+=  '<thead><tr><th>Booking No</th><th>Packaging</th><th>Weight</th><th>Quantity</th><th>Unit Price</th><th>Sub Total</th></tr></thead>';
                html+=  '<tbody>';

                for (var i = 0; i < response.expensedetail.length; i++) {
                    html += '<tr>';
                    html += '<td>' + response.expensedetail[i].booking_no + '</td>';
                    html += '<td>' + response.cargo_details.packaging + '</td>';
                    html += '<td>' + response.cargo_details.weight + '</td>';
                    html += '<td>' + response.expensedetail[i].quantity + '</td>';
                    html += '<td>' + response.expensedetail[i].unit_price + '</td>';
                    html += '<td>' + response.expensedetail[i].sub_total + '</td>';
                    html += '</tr>';
                }

                html+=  '</tbody>';
                html+=  '</table>';
               
                $('.show_specific_expense_details').html(html);
            }
        });
    }
</script>
@endsection