@extends('adminlte::page') @section('content')
    @include('administrator.construction.purchase.payment.form-pay')
	<style>
		#from-account,#to-account,#cheque-no{
			width: 190px !important;
		}
		#select2-bank-to-id-container,#select2-bank-from-id-container,#select2-bank-of-cheque-container{
			width: 165px !important;
		}
	</style>
    <?php Fun::lang()?>
    <div class="title-page">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
                <li><a href="#">Construction</a></li>
                <li><a href="#">Purchase Payment</a></li>
                <li><a href="#">Supplier Payment</a></li>
            </ul>
        </div>
    </div>
    <div class="page">
        <div class="top-content">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="title-page">
                        <div class="pull-left">
                            <h3>Supplier Payment</h3>
                        </div>
                    </div>
                    <div class="pull-right">
                        <a class="button_sm button_info" href="javascript:void(0)" id="filter-toggle-search"><span class="fa fa-plus"></span>  Filter Toggle</a>
                    </div>
                </div>
            </div>
        </div>
        <div class="box-body table-responsive">
            <div class="row" id="toggle-seaching">
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Request by :</strong>
                        {!! Form::text('prepare_by',null, array('class' => 'form-control')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Supplier Name :</strong>
                        {!! Form::select('supplier_id',$supplers,null, array('class' => 'form-control select2')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Project :</strong>
                        {!! Form::select('project',$projects,null, array('class' => 'form-control select2')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Stock Position :</strong>
                        {!! Form::text('stock_position',null, array('class' => 'form-control')) !!}
                    </div>
                </div>
                <div class="col-md-12" style="text-align:right;margin-bottom:40px !important;">
                    <a class="button_sm button_success" href="javascript:void(0)" id="search-submit" onclick="searching()"><span class="fa fa-search"></span> Search</a>
                </div>
            </div>  
            <table id="datatable_purchase_order" class="table table-striped table-bordered table-hover nowrap" widtd="100%">
                <thead>
                <tr>
                    <th>NO</th>
                    <th>Date</th>
                    <th>Request By</th>
                    <th>Project</th>
                    <th>Supplier</th>
                    <th>Phone</th>
                    <th>Stock Position</th>
                    <th>Amount</th>
					<th>Paid Amount</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

        </div>
    </div>

@endsection
@section('js')
    <script type="text/javascript">
			$(document).on('change', '#bank-list', function() {
				var id = $(this).find(':selected').val();
				var fee = 0;
				var payment = $('#payment').val();
				if (id == 2) {
					if (payment <= 400) {
						fee = 2.5;
					} else {
						fee = (0.1 / 100) * payment;
					}
					$('#fee-charge').val(fee);
					$('.fee-charge').css('display', 'block');
				} else {
					$('.fee-charge').css('display', 'none');
				}
			});
			$(document).on("change",".payment-schedule-type-payment",function(){
				let value = $(this).val();
				var div_app_to = ``;
				var div_app_from = ``;
				if(value==11001){
					$("#deposit-schedule-payment-method-from").html("");
					$("#deposit-schedule-payment-method-to").html("");
				}
				else if(value==11002){
					div_app_to = ` 
									<div class="form-group">
										<label class="col-md-5 control-label required">To Bank Name</label>
										<div class="col-md-7">
											<div class="input-group">
												{!! Form::select('bank_to_id',$banks, null, ['id' => 'bank-to-id', 'class' => 'form-control select2','required']) !!}
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-5 control-label required">To Account</label>
										<div class="col-md-7">
											<div class="input-group">
												{!! Form::text('to_account',null, ['id' => 'to-account', 'class' => 'form-control','required']) !!}
											</div>
										</div>
									</div>
								`;
					div_app_from = `
										<div class="form-group">
											<label class="col-md-5 control-label required">From Bank Name</label>
											<div class="col-md-7">
												<div class="input-group">
													{!! Form::select('bank_from_id',$banks, null, ['id' => 'bank-from-id', 'class' => 'form-control select2','required']) !!}
												</div>
											</div>
										</div>
										<div class="form-group">
											<label class="col-md-5 control-label required">From Account No.</label>
											<div class="col-md-7">
												<div class="input-group">
													{!! Form::text('from_account',null, ['id' => 'from-account', 'class' => 'form-control','required']) !!}
												</div>
											</div>  
										</div>`;
					$("#deposit-schedule-payment-method-from").html(div_app_from);
					$("#deposit-schedule-payment-method-to").html(div_app_to);
				}
				else if(value==11013){
					div_app_to = ` 
									<div class="form-group">
										<label class="col-md-5 control-label required">Bank of Cheque</label>
										<div class="col-md-7">
											<div class="input-group">
												{!! Form::select('bank_of_cheque',$banks, null, ['id' => 'bank-of-cheque', 'class' => 'form-control select2','required']) !!}
											</div>
										</div>
									</div>
									<div class="form-group">
										<label class="col-md-5 control-label required">Cheque No.</label>
										<div class="col-md-7">
											<div class="input-group">
												{!! Form::text('cheque_no',null, ['id' => 'cheque-no', 'class' => 'form-control','required']) !!}
											</div>
										</div>
									</div>
								`;
					$("#deposit-schedule-payment-method-from").html("");
					$("#deposit-schedule-payment-method-to").html(div_app_to);
				}
				else {
					div_app = "";
				}
				
				
				$("#bank-from-id").select2();
				$("#bank-to-id").select2();
				$("#bank-of-cheque").select2();
			});
			function make_payment(obj){
				$("#main-spinner").show();
				let href = $(obj).data('href');
				$.ajax({
					type: "GET",
					url: href,
					data: "data",
					dataType: "JSON",
					success: function (data) {
						$("#form-pay").modal("show");
						$("input[name=purchase_id]").val(data.purchase.id);
						$("#supplier").val(data.purchase_info.name);
						$("#total_amount").val(data.purchase.total_amount);
						$("#payment").val(data.purchase.total_amount);
						$("#phone").val(data.purchase_info.phone);
					},
					complete:function(data){
						$("#main-spinner").hide();
					}
				});

			}
            function searching(){
                $("#datatable_purchase_order").DataTable().draw(true);
            }
            let table = $('#datatable_purchase_order').DataTable({
                ordering: false,
                "serverSide": true,
                "scrollY":"600px",
                "scrollCollapse": true,
                "scrollX": true,
                "lengthMenu": [
                    [20, 25, 50, 100, 500],
                    [20, 25, 50, 100, 500]
                ],
                ajax: {
                    url:"{{ route('purchase-payment.purchase_list') }}",
                    type:"GET",
                    data:function(d){
                        d.request_name = $("input[name=prepare_by]").val();
                        d.supplier_id = $("select[name=supplier_id]").val();
                        d.stock_position = $("input[name=stock_position]").val();
                        d.project_id = $("select[name=project]").val();
                    }
                },
                columns: [
                    {data: 'DT_RowIndex'},
                    {data: 'date'},
                    {data: 'request_by'},
                    {data: 'project_name'},
                    {data: 'supplier_id'},
                    {data: 'phone_number'},
                    {data: 'stock_position'},
                    {data: 'amount'},
					{data: 'total_paid'},
                    {data: 'action'},
                ],
                "initComplete": function (settings, json) {
                    $('#main-spinner').hide();
                }
            });

            $.fn.dataTable.ext.errMode = 'throw';
    </script>
@endsection