@extends('layouts.admin')
@section('css')
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
@endsection
@section('content')

            <main class="content">
				<div class="container-fluid p-0">

					<div class="row mb-2 mb-xl-3">
						<div class="col-auto d-none d-sm-block">
							<h3>USER SUBSCRIPTIONS  / LIST - {{ucfirst($status)}} {{ucfirst($type)}}   all list</h3>
							
						
						
						</div>

					</div>
				
@include('components.admin.error-message')
<div class="row mb-3">
  

        @if($status == '')

  <div class="col"><select class="form-control bn-select-option" name="status" id="selectStatus" required>
               <option value="">All Status</option>
        {!! __get_subscription_status_select() !!}
            
            </select></div>
  <div class="col">
      <button id="history-crypto-reset-button" class="btn btn-sm btn-primary">Reset</button>
  </div>
  @else
  <input type="hidden" id="selectStatus" value="{{$status}}" />

  
  @endif
</div>
			        <div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-header pb-0">
                <div class="card-actions float-end">
                    
                </div>
            
            </div>
            <div class="card-body tableRes">
                <table class="table table-responsive table-striped data-table" style="width: 100%;">
                    <thead>
                        <tr>
                            
                            <th >Date</th>
                                                                    <th >Name</th>
                                                                   
                                                                    <th >Plan</th>
                                                                
                                                                    <th >Duration</th>
                                                                    <th >Method</th>
                                                                    <th >Amount</th>
                                            
                                                                
                                                                    <th >Status</th>
                            <th>ACTION</th>
                        </tr>
                    </thead>
                    <tbody>
             
                    </tbody>
                </table>
         
            </div>
        </div>
    </div>

</div>



				</div>
			</main>
<div class="modal fade" id="processModalMd" tabindex="-1" aria-hidden="true" style="display: none;">
    <div class="modal-dialog modal-md" role="document" id="subscriptionModalContent">
        
    </div>
</div>
@endsection
@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js"></script>
 
    <script>
    var editModal = new bootstrap.Modal(document.getElementById('processModalMd'))
         $(function () {
        
         
            var table = $('.data-table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ route('admin.subscription.list.all') }}",
                    data: function (d) {
                        d.type= $('#selectType').val();
                        d.stats = $('#selectStatus').val();
                    }
                },
                columns: [
                    {data: 'created_at', name: 'created_at',searchable: false},
                    {data: 'user', name: 'user', orderable: false},
                    
                    {data: 'plan', name: 'plan', orderable: false,searchable: false},
                    {data: 'duration', name: 'duration', orderable: false,searchable: false},
                    {data: 'method', name: 'method', orderable: false,searchable: false},
                    {data: 'amount', name: 'amount',searchable: false},
                    
                    {data: 'status', name: 'status', orderable: false, searchable: false},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
              
                ],
             
            });
            
            $(".bn-select-option").on('change' , function(){
               
                let v = $(this).val();
               
                console.log(v);
                
              
                table.draw();
            })
            
            $("#history-crypto-reset-button").on('click' , function(){
            $('#selectType').val("");
            $('#selectCoin').val("");
            $('#selectStatus').val("");
            table.search('').draw();
            })
        });
        
        $('body').on('click' ,'.edit_data',  function(){
            let i = $(this).attr("data-name");
            let url = "{{route('admin.subscription.single')}}/"+i
          
            $.ajax({
                url: url,
                type: "GET",
                dataType: "json",
                
                success: function(res){
                    if(res.status == true){
                        $("#subscriptionModalContent").html(res.view);
                        editModal.show();
                    }
                }
            })
        })
        
        $('body').on('click' ,'.process_data', function(){
        var dataname = $(this).attr('data-name');
        var dataurl = $(this).attr('data-url');
        

        if (confirm('are you sure want to process '+dataname+'?')) {

            window.location.href = dataurl;
            

        }
        })
        
    </script>
@endsection