@extends('admin.admin')
@section('adminContent')



<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">All Membership</h3>
    </div>
    <div class="text-right col-md-7" style="line-height: 4.5;">
        <button class=" waves-effect waves-light btn-warning btn" onclick="addBtn()" id="addbtn" >Add Member</button>
    </div>
    <div>
        <button class="right-side-toggle waves-effect waves-light btn-inverse btn btn-circle btn-sm pull-right m-l-10"><i class="ti-settings text-white"></i></button>
    </div>
</div>



<!-- Row -->
<div class="row">
    <div class="col-lg-12">

        <div class="card card-default">
            <div class="card-header">
            <form class="form-inline" id="membershipsearch">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" id="search">
  </form>
                <div class="card-actions">
                    <a class="" data-action="collapse"><i class="ti-minus"></i></a>
                    <a class="btn-minimize" data-action="expand"><i class="mdi mdi-arrow-expand"></i></a>
                    <a class="btn-close" data-action="close"><i class="ti-close"></i></a>
                </div>
            </div>
          
            <div class="card-body collapse show">
            <div class="input-group">
                     
                    <!--@if($message=Session::get('success'))-->
                    <!--<div class="alert alert-success text-center">-->
                    <!--    {{$message}}-->
                    <!--</div>-->
                    <!--@elseif($message=Session::get('error'))-->
                    <!--<div class="text-danger text-center">-->
                    <!--    {{$message}}-->
                    <!--</div>-->
                    @if($errors->any())
                    @foreach ($errors->all() as $error)
                    <div class="text-danger text-center">{{ $error }}</div>
                    @endforeach
                    @endif
                    <!--@endif-->
     
                    <div class="table-responsive">
                        <table class="table product-overview">

                            <thead>
                                <tr>
                                    <th>S.No.</th>
                                    <th>Image</th>
                                    <th>Membership Type</th>
                                    <th>Membership Amount</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Number</th>
                                    <th>Membership Date</th>
                                    <th>Order Id</th>
                                    <th class="tdaction">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="table_data">
                               
                            </tbody>
                            
                        </table>
                    </div>
                </div>
        </div>
    </div>
</div>
<!-- Row -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form action="{{url('admin/editMembership')}}" id="formdata" enctype="multipart/form-data" method="post">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="name" class="col-form-label">Membership Type</label>
                            <select name="membership_type" id='membership_type' class="form-control">
                                @foreach($membership as $item)
                                   <option value="{{$item->id}}">{{$item->plan}}</option>
                                   @endforeach
                            </select>
                            <input type="text" hidden value='' class="form-control" name="id" id="user_id"><br>
                            <label for="name" class="col-form-label">Membership Amount</label>
                            <input type="text"  class="form-control" name="membership_amount" id="membership_amount">
                            <label for="name" class="col-form-label">Name</label>
                            <input type="text" class="form-control" name="name" id="name">
                            <label for="name" class="col-form-label">Email</label>
                            <input type="text" class="form-control" name="email" id="email">
                            <label for="name" class="col-form-label">Number</label>
                            <input type="text" class="form-control" name="number" id="number">
                            <label class="control-label">Order Id</label>
                            <input type="text" name="order_id" id="order_id" placeholder="Optional*" class="form-control">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-close btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Update</button>
                    </div>
            </div>
            </form>
        </div>
    </div>
</div>
<!-- ============================================================== -->
<!-- End Container fluid  -->
<!-- ============================================================== -->
<!-- ============================================================== -->


<script>
 function addBtn(){
                      $('#exampleModal').modal('show');
        $('#formdata').attr('action',"{{url('/admin/addMember')}}")
               $('#membership_amount').val('');
                    $('#membership_type').val('');
                    $('#name').val('');
                    $('#email').val('');
                    $('#order_id').val('');
                    $('#number').val('');
    }
    $(document).ready(function() {
        $.ajax({
        type:"get",
        url:"/admin/membershipList",
        success:function(data){
            $('tbody').append(data.data);

        },
        error:function(error){
            console.log(error);
        }

     });
     $(document).on('click', '.pagination a', function(event){
  event.preventDefault(); 
  var page = $(this).attr('href').split('page=')[1];
  fetch_data(page);
 });
 function fetch_data(page)
 {
    $.ajax({
            type:'get',
            url:"/admin/membershipList?page="+page,
            success:function(data){
                console.log(data)
                if (data.data) {
					$("tbody").html(data.data);
				} else {
					$("tbody").html('  <tr><td colspan="16" class="text-center"> No Records Found !</td></tr>');
				}
            },
            error:function(error){
                 console.log(error);
            }

            
           });
   }
 
   
        $('#search').keyup(function(e){
           
           e.preventDefault();
           var formData=$('#search').val();
           $.ajax({
            type:'get',
            url:"/admin/membershipList",
            data:{'search':formData},
            success:function(data){
                console.log(data)
                if (data.data) {
					$("tbody").html(data.data);
				} else {
					$("tbody").html('  <tr><td colspan="16" class="text-center"> No Records Found !</td></tr>');
				}
            },
            error:function(error){
                 console.log(error);
            }

            
           });
        });
        $(document).on('click', '.editBtn', function() {
            let user_id = $(this).val();
            $('#exampleModal').modal('show');
            $('#formdata').attr('action',"{{url('/admin/editMembership')}}")
            $.ajax({
                type: 'get',
                url: "/admin/getMembership/" + user_id,
                success: function(response) {
                    $('#membership_amount').val(response.membership_amount);
                    $('#membership_type').val(response.membership_type);
                    $('#name').val(response.name);
                    $('#email').val(response.email);
                    $('#order_id').val(response.order_id);
                    $('#number').val(response.number);
                    if (response.is_verified == '1') {
                    $('#flexSwitchCheckDefault').attr('checked', 'true');
                } else {
                    $('#flexSwitchCheckDefault').removeAttr('checked');
                }
                    $('#user_id').val(response.id);
                }

            });

        })
        $('.btn-close').on('click', function() {
            $('#exampleModal').modal('hide');
        });
    })
</script>
<script>
 $(document).ready(function(){
        var img=$('img[data-enlargable]').addClass('img-enlargable');
        $(document.body).on('click','img',function(){
    var src = $(this).attr('src');
    $('<div>').css({
        background: 'RGBA(0,0,0,.5) url('+src+') no-repeat center',
        backgroundSize: 'contain',
        width:'100%', height:'100%',
        position:'fixed',
        zIndex:'10000',
        top:'0', left:'0',
        cursor: 'zoom-out'
    }).click(function(){
        $(this).remove();
    }).appendTo('body');
});
    });

</script>




@stop