@extends('../../master_layout/admin_master')

@section('title')
<title>{{config('constants.APP_NAME')}} Payment Settings</title>
@endsection

@section('content')
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Mpesa Accounts</h1>
                </div><!-- /.col -->
                
                <!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
    <!-- /.content-header -->

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12">
                    @if(session('message'))
                    <div class="alert alert-{{session('message.type')}} alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                        @if(session('message.type')=='danger')
                        <p class="mb-0"><strong>Sorry!</strong> {!! session('message.text') !!}</p>
                        @else
                        <p class="mb-0"><strong>Success!</strong> {!! session('message.text') !!}</p>
                        @endif
                    </div>
                    @endif
                    <!--  -->
                    <div class="card card-primary">
                        
                        <!-- form start -->
                        <form id="addPayment" method="post" action="{{ route('admin.payment.mpesa_setting_save')}}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="paymentmethod_id" id="" value="{{ ($edit)?$payment->paymentmethod_id:0 }}">
                            <div class="card-body">
                                <h3>Active Account</h3>
                                <div class="row">
                                @php $mpesa_settings = array(); @endphp
                                @if(!empty($settings))
                                    @foreach ($settings as $key => $result) 
                                        @php $mpesa_settings[$result->settingkey_name] = $result->settingkey_value; @endphp
                                        @if($result->settingkey_name == 'sandbox')
                                            <div class="col-md-6"> 
                                                <div class="form-group">
                                                    <label for="paymentmethod_status">{{ $result->settingfield_title }}</label>
                                                    <select name="paymentsetting[{{ $result->paymentmethod_setting_id }}]" id="{{ $result->settingkey_name }}" class="form-control" required>
                                                        <option value="">Select</option>                               
                                                        <option value="on" {{ (isset($result->settingkey_value) && $result->settingkey_value == 'on' )?'selected':'' }}>ON</option>
                                                        <option value="off" {{ (isset($result->settingkey_value) && $result->settingkey_value == 'off' )?'selected':'' }}>OFF</option>
                                                    </select>
                                                </div>
                                            </div>                    
                                        @else
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="name">{{ $result->settingfield_title }}</label>
                                                    <input type="text" class="form-control" name="paymentsetting[{{ $result->paymentmethod_setting_id }}]" id="{{ $result->settingkey_name }}" placeholder=""
                                                        value="{{ (isset($result->settingkey_value) && $result->settingkey_value !='' )?$result->settingkey_value:'' }}" required>
                                                </div>
                                            </div>
                                        @endif

                                    @endforeach    
                                @endif

                                <div class="col-md-6"> 
                                    <div class="form-group">
                                        <label for="is_blocked">Status</label>
                                        <select name="is_blocked" id="is_blocked" class="form-control" required>
                                            <option value="">Select</option>                               
                                            <option value="0" {{ (isset($payment->is_blocked) && $payment->is_blocked == '0' )?'selected':'' }}>Active</option>
                                            <option value="1" {{ (isset($payment->is_blocked) && $payment->is_blocked == '1' )?'selected':'' }}>Inactive</option>
                                        </select>
                                    </div>
                                </div>

                                </div>

                                @if($payment->paymentmethod_id == 2)
                                <!-- Mpesa Transaction Charges -->
                                <div class="border-bottom border-info d-inline-block">
                                    <span class="h5">Transaction Fee</span> 
                                </div>                                
                                <div class="row mt-2">
                                    <div class="col-md-2">Min</div>  
                                    <div class="col-md-2">Max</div>  
                                    <div class="col-md-2">Fee</div>  
                                </div>
                                                                <div id="transaction-fee">
                                    @for($i=0;$i<$fee_counter;$i++) 
                                    <div class="row mt-2 form-fee">
                                        <div class="col-md-2">
                                            <input type="text" name="charge[{{$i}}][min]" class="form-control" value="" placeholder="Min"> 
                                        </div>  
                                        <div class="col-md-2">
                                            <input type="text" name="charge[{{$i}}][max]" class="form-control" value="" placeholder="Max"> 
                                        </div>  
                                        <div class="col-md-2">
                                            <input type="text" name="charge[{{$i}}][fee]" class="form-control" value="" placeholder="Fee"> 
                                        </div>   
                                        <div class="col-md-2">
                                            <a href="javascript:void(0)" class="btn btn-dark remove-fee" id="fee_remove_{{$i}}">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                        </div>
                                    </div>
                                    @endfor
                                </div>
                                <div class="btn-sec mt-3">
                                    <a href="javascript:void(0)" class="btn btn-dark" id="add_fee">
                                        <i class="fa fa-plus"></i> Add
                                    </a>
                                </div>
                                <!-- /Mpesa Transaction Charges -->
                                @endif
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>
                    </div>
                    <!-- /.card -->

                    <div class="card card-primary">
                        
                        <!-- form start -->
                        <form id="addAccount" method="post" action="{{ route('admin.payment.mpesa_account_save')}}" enctype="multipart/form-data">
                            @csrf
                            <div class="card-body">
                                <h3>Mpesa Accounts</h3>
                                <div class="row">
                                    <table id="mpesaAccountsTable" class="table table-bordered table-striped tab table-sm text-sm">
                                        <thead>
                                            <tr>
                                                <th width="10%">Store Number</th>
                                                <th width="10%">Till Number</th>
                                                <th width="">Consumer Key</th>
                                                <th width="">Consumer Secret</th>
                                                <th width="15%">Enable</th>
                                                <th width="15%">Action</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                                                         
                                            <tr><td colspan="6">No Data</td></tr>
                                                                                    </tbody>
                                    </table>
                                </div>

                                <div class="row my-2"><h3 class="card-title"><u>Add Mpesa Account</u></h3></div>
                                <div class="row">

                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Store Number</label>
                                            <input type="text" class="form-control" name="store_number" id="store_number" placeholder="" value="" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Till Number</label>
                                            <input type="text" class="form-control" name="till_number" id="till_number" placeholder="" value="" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Consumer Key</label>
                                            <input type="text" class="form-control" name="consumer_key" id="consumer_key" placeholder="" value="" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Consumer Secret</label>
                                            <input type="text" class="form-control" name="consumer_secret" id="consumer_secret" placeholder="" value="" required>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-group">
                                            <label for="name">Pass Key</label>
                                            <input type="text" class="form-control" name="pass_key" id="pass_key" placeholder="" value="" required>
                                        </div>
                                    </div>
                                

                                </div>
                            </div>
                            <!-- /.card-body -->
                            <div class="card-footer">
                                <button type="submit" class="btn btn-primary">Add</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!--/.col (left) -->

            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </section>
</div>


@endsection

@section('custom_js')

<script>
    $(function() {

        $('#addPayment').validate({
            rules: {
                is_blocked: {
                    required: true,
                }
            },
            messages: {                
                is_blocked: {
                    required: "Please select status",
                }

            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        $('#addAccount').validate({
            rules: {
                store_number: {
                    required: true,
                },
                till_number: {
                    required: true,
                },
                consumer_key: {
                    required: true,
                },
                consumer_secret: {
                    required: true,
                },
                pass_key: {
                    required: true,
                }
            },
            messages: {                
                store_number: {
                    required: "Please enter store number",
                },
                till_number: {
                    required: "Please enter till number",
                },
                consumer_key: {
                    required: "Please enter consumer key",
                },
                consumer_secret: {
                    required: "Please enter consumer secret",
                },
                pass_key: {
                    required: "Please enter pass key",
                }
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });

        $("#mpesaAccountsTable").on("click", ".btn-delete", function(e){ 
            e.preventDefault();
            Swal.fire({
                title: 'Are you sure?',
                text: "You want to delete this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                window.location = $(this).attr('href');
                }
            })
        });

        /*********** Mpesa Transaction Charges ****************/
        @if($payment->paymentmethod_id == 2)                
            var fee_counter = "{{$fee_counter}}";
            //add more fee
            $(document).on("click", '#add_fee', function() { 
                var fee_html = "";
                fee_html += '<div class="row mt-2 form-fee">' +
                                '<div class="col-md-2">' +
                                    '<input type="text" name="charge['+fee_counter+'][min]" class="form-control" value="" placeholder="Min">' +
                                '</div>' +
                                '<div class="col-md-2">' +
                                    '<input type="text" name="charge['+fee_counter+'][max]" class="form-control" value="" placeholder="Max">' +
                                '</div>' +
                                '<div class="col-md-2">' +
                                    '<input type="text" name="charge['+fee_counter+'][fee]" class="form-control" value="" placeholder="Fee">' +
                                '</div>' +
                                '<div class="col-md-2">' +
                                    '<a href="javascript:void(0)" class="btn btn-dark remove-fee" id="fee_remove_{{$i}}">' +
                                        '<i class="fa fa-trash"></i>' +
                                    '</a>' +
                                '</div>' +
                            '</div>';
                        $('#transaction-fee').append(fee_html);
                        fee_counter++;
            });
            $('#transaction-fee').on("click", '.remove-fee', function() {
                $(this).parents('.form-fee').remove();
            });            
        @endif
        /*********** /Mpesa Transaction Charges ****************/
        
    });
</script>
@endsection