@extends('layouts.app', ['pageSlug' => 'customerlist'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Portal Payments For Customer</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
</div>
<div class="spl-page-panel">
    <div class="row">
        <div class="col-lg-12">
            <form id="payment_form" class="form-horizontal" role="form" action="{{route('order.save')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <fieldset>  
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-md-3">
                            Select User
                        </label>
                        <div class="col-lg-8 col-md-9"> 
                            <select name="username" class="select2" required style="width: 100%;">
                                <option value=""></option>
                                @foreach($customers as $cu)
                                <option value="{{$cu->username}}">{{$cu->username}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <!--<div class="form-group">-->
                    <!--    <label class="control-label col-lg-4 col-md-3">-->
                    <!--        Amount-->
                    <!--    </label>-->
                    <!--    <div class="col-lg-8 col-md-9">-->
                    <!--        <input type="text" style="width: 100%;" original-value="" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="amount" id="amount" value="" min=1>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--    <label class="control-label col-lg-4 col-md-3">-->
                    <!--        Quantity-->
                    <!--    </label>-->
                    <!--    <div class="col-lg-8 col-md-9">-->
                    <!--        <input type="text" style="width: 100%;" original-value="" force-send="1" required="" class="form-control input-sm" autocomplete="off" name="quantity" id="quantity" value="" min=1>-->
                    <!--    </div>-->
                    <!--</div>-->
                    <!--<div class="form-group">-->
                    <!--    <label class="control-label col-lg-4 col-md-3">-->
                    <!--        Types-->
                    <!--    </label>-->
                    <!--    <div class="col-lg-8 col-md-9">-->
                    <!--        <select name="type" class="select2" id="type" required style="width: 100%;">-->
                    <!--                <option value=""></option>-->
                    <!--                <option value="Subs">Subs</option>-->
                    <!--                @foreach($cateogory_types as $t)-->
                    <!--                <option value="{{$t->type}}">{{$t->type}}</option>-->
                    <!--                @endforeach-->
                    <!--        </select>-->
                    <!--    </div>-->
                    <!--</div>-->
    
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-md-3">
                            Payment Method
                        </label>
                        <div class="col-lg-8 col-md-9">
                            <select name="pay_method" class="select2" id="pay_method" required style="width: 100%;">
                                    <option value=""></option>
                                    @foreach($paymethods as $p)
                                    <option value="{{$p->paymethod}}">{{$p->paymethod}}</option>
                                    @endforeach
                                </select>
                        </div>
                    </div>
                    <div class="form-group ref-block">
                        <label class="control-label col-lg-2 col-md-3">
                            Ref / Account Holder Name
                        </label>
                        <div class="col-lg-8 col-md-9">
                            <input type="text" style="width: 100%;" original-value="" required="" class="form-control input-sm" name="reference" id="reference" value="">
                        </div>
                    </div>
                    <div class="form-group receipt-block">
                        <label class="control-label col-lg-2 col-md-3">
                            Receipt No.
                        </label>
                        <div class="col-lg-8 col-md-9">
                            <input type="number" style="width: 100%;" original-value="" required="" class="form-control input-sm" name="receipt_no" id="receipt_no" value="">
                        </div>
                    </div>
                    @if(\Auth::check() && \Auth::user()->role && \Auth::user()->role->roleName->role == 'admin')
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-md-3">
                            Paid Date
                        </label>
                        <div class="col-lg-8 col-md-9">
                            <input type="text" style="width: 100%;" original-value="" required="" class="form-control input-sm picker_date" autocomplete="off" name="paid_date" id="paid_date" value="">
                        </div>
                    </div>   
                    @endif
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-md-3">
                            Paid Amount
                        </label>
                        <div class="col-lg-8 col-md-9">
                            <input type="number" style="width: 100%;" value="" required="" class="form-control input-sm" name="paid_amount" id="paid_amount" min-value="0">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-md-3">
                            Payment Status
                        </label>
                        <div class="col-lg-8 col-md-9">
                            <select name="paid_status" class="select2" id="paid_status" required style="width: 100%;">
                                <option value=""></option>
                                <option value="paid">Paid</option>
                                <option value="partial">Partial Paid</option>
                                <option value="unpaid">Unpaid</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-lg-2 col-md-3">
                            Attachment
                        </label>
    
                        <div class="col-lg-8 col-md-9">
                            <input type="file" style="width: 100%;" original-value="" force-send="1" class="form-control input-sm" autocomplete="off" name="attachment" id="attachment" value="">
                        </div>
                    </div>
                	<div class="card-body">
						<div class="row m-b-10">
							<div class="offset-lg-1 col-lg-3">
								<b>Type</b>
							</div>
							<div class="col-lg-3">
								<b>Quantity</b>
							</div>	
							<div class="col-lg-3">
								<b>Amount</b>
							</div>
							<div class="col-lg-2 text-right">
								<button title="Add new block" class="add_button btn btn-info"><i class="fa fa-plus"></i></button>
							</div>
						</div>
						<div class="additional-block">
						<div class="row add-new-block">
							<div class="offset-lg-1 col-lg-3">
								<div class="form-group">
									<select name="type[0]" class="form-control" required style="width: 100%;">
                                        <option value=""></option>
                                        <option value="Subs">Subs</option>
                                        @foreach($cateogory_types as $t)
                                        <option value="{{$t->type}}">{{$t->type}}</option>
                                        @endforeach
                                    </select>
									<small class="text-danger">{{ $errors->first("type.*") }}</small>
								</div>
							</div>
							<div class="col-lg-3">
								<div class="form-group">
									<input type="number" style="width: 100%;" original-value="" required="" class="form-control" autocomplete="off" name="quantity[0]" value="" min= "1">
									<small class="text-danger">{{ $errors->first("quantity.*") }}</small>
								</div>
							</div>
							<div class="col-lg-3">
								<div class="form-group">
									<input type="number" style="width: 100%;" original-value="" required="" class="form-control" autocomplete="off" name="amount[0]" value="" min= "0">
									<small class="text-danger">{{ $errors->first("amount.*") }}</small>
								</div>
							</div>
							<div class="col-lg-2">
								<a href="#" class="hide-block remove_field btn btn-sm btn-danger"><i class="fa fa-close"></i></a>
							</div>
						</div></div>
					</div>
                    <div class="form-group">
                        <div class="col-lg-12 col-md-12">
                            <input type="submit" value="Save" class="btn btn-primary btn-sm pull-right" id="payments_form_submit_btn">
                        </div>
                    </div>
    
                </fieldset>
    
            </form>
        </div>
    </div>
</div>
@endsection

@push('js')
<script>
   $(document).ready(function(){
       $('.ref-block').hide();
       $('.receipt-block').hide();
       $('#pay_method').on('change',function(){ 
        if ($(this).val() == 'FNB' || $(this).val() == 'Ewallet'){
            $('.ref-block').show();
            $('#reference').attr('required',true);
        }else{
            $('.ref-block').hide();$('#reference').attr('required',false);
        }
        if ($(this).val() == 'Office Payment'){
            $('.receipt-block').show();
            $('#receipt_no').attr('required',true);
        }else{
            $('.receipt-block').hide();$('#receipt_no').attr('required',false);
        }
       });
        $( ".picker_date" ).datepicker({
            dateFormat : 'yy-mm-dd',
            maxDate:'0'
        }).datepicker("setDate", 'd');
        var max_fields = 10; //maximum input boxes allowed
        var x = 0; //initlal text box count
        $(".add_button").on("click", function(e) {
            e.preventDefault();
            if (x < max_fields) {
                x++;
                var block = $(".add-new-block:last").clone();
                block.find('a').removeClass('hide-block');
                block.find('input').each(function() {
                    this.value = "";
                    this.name = this.name.replace(/\[[0-9]\]+/, '[' + x + ']');
                    // this.attr('required',true);
                }); 
                var select = block.find('select');
                select.attr('name', select.attr('name').replace(/\[[0-9]\]+/, '[' + x + ']'));
                block.appendTo(".additional-block");
            }
        });
        $('.select2').select2();
        $(".additional-block").on("click", ".remove_field", function(e) { //user click on remove text
            e.preventDefault();
            $(this).closest(".add-new-block").remove();
            x--;
        })
   });
</script>
@endpush