@extends('layouts.app', ['pageSlug' => 'pay-extension'])

@section('content')
<div class="splynx_top_nav">
    <div style="float: left">
        <ul class="splynx_breadcrumbs">
            <li><span>Payments/Extensions</span></li>
        </ul>
    </div>
    <div class="clearfix"></div>
    
  @if(Session::has('success'))
    <p class="">{{ Session::get('success') }}</p>
  @endif

</div>
<div class="spl-page-panel">   
    <div class="row">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a class="nav-link active" data-toggle="tab"
                    href="#payment" role="tab" aria-controls="profile">Payments</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab"
                    href="#extension" role="tab" aria-controls="home">Extensions</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active" id="payment" role="tabpanel">
                <div class="col-md-12">
                    <h5>Payments</h5>
                    @if(isset($msg))
                    <h5 class="error">{{$msg}}</h5>
                    @endif
                    <form id="payments_form" class="form-horizontal" role="form" action="{{route('portal.payments.save')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <fieldset>
                        <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" autocomplete="off" 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" autocomplete="off" name="receipt_no" id="receipt_no" value="">
                            </div>
                        </div>
                        <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">
                            <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" {{$disabled}}>
                            </div>
                        </div>

                    </fieldset>

                </form>
                </div>
            </div>
            <div class="tab-pane" id="extension" role="tabpanel">
                <div class="col-md-12">
                    <h5>Extension</h5>
                    @if(isset($msg1))
                    <h5 class="error">{{$msg1}}</h5>
                    @endif
                    <form id="extension_form" class="form-horizontal" role="form" action="{{route('portal.extension.save')}}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <fieldset>
                        <div class="form-group">
                            <label class="control-label col-lg-4 col-md-3">
                                Extensions
                            </label>
                            <div class="col-lg-8 col-md-9">
                                <input type="number" style="width: 100%;" min=1 max=30 required="" class="form-control input-sm" autocomplete="off" name="extensions" id="extensions" value="" {{isset($extdisabled) ? $extdisabled : ''}}>
                            </div>
                        </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="extension_form_submit_btn" {{isset($extdisabled) ? $extdisabled : ''}}>
                            </div>
                        </div>

                        </fieldset>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
$(".select2").select2();
$(function() {

    $("form#payments_form").validate({
            submitHandler: function(form) {
                $('#payments_form_submit_btn').attr('disabled', true);
                form.submit();
                // axios.post('{{route('portal.payments.save')}}', $("form#payments_form").serialize()).then((res)=>{
                // });
            }
    });

    $("form#extension_form").validate({
            submitHandler: function(form) {
                $('#extension_form_submit_btn').attr('disabled', true);
                form.submit();
                //  axios.post('{{route('portal.extension.save')}}', $("form#extension_form").serialize()).then((res)=>{
                // });
            }
    });
    
    $('.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);
        }
    });
});
@if(Session::has('success'))
    alert('x');
@endif

</script>
    
@endpush