@extends('layouts.app')

@section('content')
<style type="text/css">
.form-check {
  display: flex;
  align-items: center;
}

.form-check-input {
  order: 2; /* move checkbox to the end */
  margin-left: auto; /* space between text and checkbox */
}

.form-check-label::before {
  font-weight: bold;
}

.bg-light {
    background-color: rgb(223 229 255) !important;
}

</style>
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-md-flex d-block align-items-center justify-content-between my-2 page-header-breadcrumb">
        <div>
        </div>
        <div class="main-dashboard-header-right">

        </div>
    </div>
    <!-- End Page Header -->
    <div class="row">
        <div class="col-xl-6">
            <div class="card custom-card">
                <div class="card-header justify-content-between">
                   <div class="card-title">
                      Create New Commission Plan
                   </div>
                </div>
                <div class="card-body">
                  <form id="planForm" action="{{ route('savedata') }}" method="post">
                    <input type="hidden" name="posttype" value="commisionplan">
                   @csrf
                   <div class="row">
                      <div class="col-md-12 mb-3">
                        <label class="form-label">Commission Plan Name</label>
                        <input type="text" name="name" class="form-control" placeholder="Enter Valid Value" required>
                      </div>

                      
                      <div class="col-md-12 mb-3">
                          <p class="form-label">Select the Services:</p>
                          <select name="type[]" class="form-select" multiple class="form-control">
                              <option value="">Select</option>
                              <option value="pgcollection">Payment Gateway</option>
                              <option value="mobile">Mobile Recharge</option>
                              <option value="dth">DTH Recharge</option>
                              <option value="bbps">Bill Payment</option>
                              <option value="dmt">Money Transfer</option>
                              <option value="payout">Payout</option>
                          </select> 
                      </div>

                      <input type="hidden" name="userid" value="{{@$user->id}}">
                      <div class="col-md-12 text-right">
                         <button type="submit" class="btn btn-primary">Create New Plan</button>
                      </div>
                   </div>
                  </form> 
                  </div>
              </div>
        </div>
    </div>

</div>

@endsection

@section('scripts')
<script type="text/javascript">
    $(document).ready(function () {
        $( "#planForm").validate({
            rules: {
                planname: {
                    required: true
                }
            },
            messages: {
                planname: {
                    required: "Please enter plan name",
                }
            },
            errorElement: "p",
            errorPlacement: function ( error, element ) {
                if ( element.prop("tagName").toLowerCase() === "select" ) {
                    error.insertAfter( element.closest( ".form-group" ).find(".select2") );
                } else {
                    error.insertAfter( element );
                }
            },
            submitHandler: function () {
                var form = $('#planForm');
                form.ajaxSubmit({
                    dataType:'json',
                    beforeSubmit:function(){
                        form.find('button:submit').button('loading');
                    },
                    complete: function () {
                        form.find('button:submit').button('reset');
                    },
                    success:function(data){
                        if(data.status == "success"){
                            form.closest('.modal').modal('hide');
                            msgalert('success', data.message);
                            form[0].reset();
                            $('#datatable').dataTable().api().ajax.reload();
                        }else if(data.status == "failed"){
                            msgalert('warning', data.message);
                        }else{
                             msgalert('warning', data.status);
                        }
                    },
                    error: function(errors) {
                        showError(errors, form);
                    }
                });
            }
        });
    }); 
</script>
@endsection