@extends('layout.master')
@section('content')

                <section class="content pb-5">
                    <div class="container-fluid">
                     <meta name="csrf-token" content="{!! csrf_token() !!}">
                     <div class="row py-sm-5">
                     <div class="col-md-12">
                        <div class="title-section">
                           <p>Membership Features :: {{$page}}</p>
                        </div>
                        <form id="formSubs" enctype="multipart/form-data" method="post">
                            <input name="id" class="form-control" type="hidden" id="id" value="{{@$MembershipFeature->id}}">
                           <div class="card">
                              <div class="card-body">
                                 
                                 <div class="row">
                                    <div class="col-md-6">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="name">Membership Feature Name <span class="text-danger">*</span></label>
                                                <input name="name" class="form-control" type="text" id="name" value="{{@$MembershipFeature->name}}">
                                        </div>
                                    </div>

                                    <div class="col-md-6">
                                       <div class="form-group custom-form-group">
                                            <label class="form-label" for="name">Subscription Type<span class="text-danger">*</span></label>
                                            @php
                                                $subscription_types= @$MembershipFeature->membership_feature_subscription_types;
                                                $subscription_type_id_arr=[];
                                                if(!empty($subscription_types)){
                                                    foreach($subscription_types as $subscription_typearr){
                                                    $subscription_type_id_arr[]=$subscription_typearr->subscription_type_id;
                                                    }    
                                                }
                                                
                                                 @endphp
                                                
                                            <select class="form-control" name="subscription_type_id[]" id="subscription_type_id" multiple>

                                                    @foreach($listData['subscription_types'] as $subscription_type)
                                                    <option value="{{$subscription_type['id']}}" {{ old('subscription_type_id') == $subscription_type['id'] || in_array($subscription_type['id'],$subscription_type_id_arr)? 'selected': ''}}>{{$subscription_type['name']}}</option>
                                                    @endforeach

                                            </select>
                                            
                                        </div>
                                    </div>
                                </div>
                               
                            </div>
                            <div class="card-footer">
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        <button type="submit" class="btn btn-outline-danger">Submit</button>
                                        <a href="{{route('subscription-plans')}}" class="btn btn-outline-dark">Cancel</a>
                                    </div>
                                </div>
                            </div>
                          </div>
                        </form>
                        </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="title-section">
                                    <p>Membership Features</p>
                                </div>
                            </div>
                        </div>

                        <div class="row pt-sm-4 pt-0">
                            <div class="col-md-12">
                                <div class="row align-items-center">
                                    <div class="col-md-12">
                                        <div class="table-responsive">
                                            <table class="table table-striped" id="pincodemasterList">
                                                <thead>
                                                    <tr>
                                                        <th scope="col">Sr. No.</th>
                                                        <th scope="col">Membership Feature Name</th>
                                                        <th scope="col">Subscription Type</th>
                                                        <th scope="col">Action</th>
                                                        
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.js')}}"></script>
<script src="{{asset('assets/plugins/jquery-validation/jquery.validate.min.js')}}"></script>
            
<script>
$(document).ready(function() {
    $("table").on('click','.delete',function(){
        var delete_url=$(this).attr('data-url');
        var data_id=$(this).attr('data-id');
        new swal({
                title: '',
                text: "Are you Sure want to delete ?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#343a40',
                confirmButtonText: "Yes, Delete",
                cancelButtonText: 'No, Cancel'
            },
            function(isConfirm){
              if (isConfirm) {
                $.ajax({
                        url: delete_url,
                        type: "POST",
                        headers: {
                              'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        beforeSend: function () { 
                              $('#custum-loader').removeClass('hidden');
                              $('body').addClass('no-scroll');
                        },
                        success: function (data, textStatus, jqXHR) {
                           $('#custum-loader').addClass('hidden');
                           new swal({
                                title: '',
                                text: "Deleted successfully ?",
                                type: 'success'
                            });
                           $('#row_id_'+data_id).remove();
                        },
                        error: function (jqXHR, textStatus, errorThrown) {

                        }
                    });
              } 
          });

    });

    $("#formSubs").validate({

            rules: {
                'name': {required:true},
                'subscription_type_id[]': {required:true},
            },submitHandler: function(form) {
               //form.preventDefault();
               $.ajax({
                  method: 'POST',
                  url:"{{route('post-subscription-membership-feature')}}",
                  headers: {
                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                  },
                  data: $("#formSubs").serialize(),
                  dataType:'JSON',
                  beforeSend: function () { // Before we send the request, remove the .hidden class from the spinner and default to inline-block.
                      $('#custum-loader').removeClass('hidden');
                      $('body').addClass('no-scroll');
                  },
                  success: function (data) {
                  if(data.status == 'true'){
                      
                      swal({
                          title: "Success",
                          text: data.message,
                          type: "success",
   
                          closeOnConfirm: false,
                          showLoaderOnConfirm: true,
                      },
                      function(){
                          window.location.reload();
                      });
                      
                  }
                  else{
   
                      swal({
   
                        title: "oops!",
                        text: data.message,
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
   
                    });
   
                  }
              },
              error: function () {
                    swal({
                        title: "oops!",
                        text: "Invalid Data",
                        type: "error",
                        closeOnConfirm: false,
                        showLoaderOnConfirm: true,
                    }); 
              },
              complete: function () { // Set our complete callback, adding the .hidden class and hiding the spinner.
                  $('#loader').addClass('hidden');
                  $('body').removeClass('no-scroll');
                  $('#custum-loader').addClass('hidden');
              },
   
        });
            }

        });

        $("#pincodemasterList").DataTable({
                    "language": {
                        "zeroRecords": "No record(s) found."
                    },
                    processing: true,
                    serverSide: true,
                    lengthChange: true,
                    order: [0, 'asc'],
                    searchable: true,
                    bStateSave: false,
                    //responsive: true,
                    ajax: {
                        url: "{{ url('subscription/membership-features/data') }}",
                        data: function(d) {}
                    },

                    columns: [

                        {
                            data: 'DT_RowIndex',
                            name: 'DT_RowIndex',
                            sortable: false
                        },
                        {
                            data: 'name',
                            name: 'name',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'subscription_type',
                            name: 'subscription_type',
                            searchable: true,
                            orderable: true,
                            defaultContent: 'NA'
                        },
                        {
                            data: 'action',
                            name: 'action',
                            searchable: false,
                            orderable: false,
                            defaultContent: 'NA'
                        }
                    ],createdRow: function( row, data, dataIndex){
                        $( row ).attr('id','row_id_'+data.id);
                    },

                });

                //Upload Bulk Booking
            });
        </script>
    @endsection