@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">
            Portal Payments
        </div>
    </div>
    <br>
    <div class="row">
        <div class="col-lg-12">
            <form id="payment_form" class="form-horizontal" role="form" action="{{route('customer.apply.portalpayments')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <fieldset>  
                    <div class="form-group">
                        <label class="control-label col-lg-4 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-4 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-4 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-4 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-4 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-4 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="form-group">-->
                    <!--    <label for="created_at">Portal Payment Date</label>-->
                    <!--    <input type="text" name="created_at" id="created_at" class="text ui-widget-content ui-corner-all picker_date" style="width:100%;">-->
                    <!--    <span class="fa fa-fw fa-calendar input-suff-span"></span>-->
                    <!--</div>-->
                    <div class="form-group">
                        <div class="col-lg-12 col-md-12">
                            <input type="submit" value="Add" 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(){
       $('.select2').select2();
       $('.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');
   });
</script>
@endpush