@extends('layout')
@section('content')
<!-- begin::main content -->
<style>
   .input_upload{
   width:100px;
   height:35px;
   position:absolute;
   bottom:-34px;
   right:350px;
   }
   .import-content p{
   padding:0;
   margin:0;
   margin-bottom:8px;
   font-size:13px;
   }
   .filter-form-box{
   background-color:#FBFAFA;
   padding:10px 24px;
   position:absolute;
   width:450px;
   border:1px solid #ddd;
   border-radius:5px;
   top:71px;
   z-index:20;
   }
   .filter-form-box input{
   height:40px !important;
   }
   .diamond {
   width: 20px; 
   height: 20px; 
   background-color: #FBFAFA; 
   transform: rotate(45deg);
   position: relative; 
   top:-21px;
   left:0px;
   border-top:1px solid #ddd;
   border-left:1px solid #ddd;
   }
   .seach-input:focus{
   outline:none !important;
   border-top:1px solid #ddd !important;
   border-bottom:1px solid #ddd !important;
   }
   .seach-input{
   height:40px !important;
   border-top:1px solid #ddd !important;
   border-bottom:1px solid #ddd !important;
   border-left:1px solid #ddd !important;
   }
   .live-plan{
    transform:scale(1.1);
   }
</style>
<main class="main-content">
   <div class="container">
      <div class="toast d-none float-right" >
         <div class="toast-body bg-success text-white">
            <i class="fa fa-check fa-lg"></i>&nbsp Status Update Successfully
         </div>
      </div>

      <section class='main-section1'>
          <!-- begin::page header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h3>Plans</h3>
                <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ asset('dashboard') }}">{{ __('message.dashboard') }}</a></li>
                    
                    <li class="breadcrumb-item "><a href="#" class="active text-primary">{{__('message.product')}}</a></li>
                </ol>
                </nav>
            </div>
           
        </div>
        <!-- end::page header -->
        
      </section>


      <div class="card">

        <div class="card-header">
            <h3>Choose Latest Plan</h3>
        </div>
        
         <div class="card-body">
         <x-flashMessage />
         <div class="p-1"></div>
            @if (isset($plans))
                <div class="row">
                    @php
                        $color = ["primary","success","info","danger","warning"];
                    
                    @endphp
                    @foreach($plans as $key=>$plan)
                        
                            <div class="col-md-4 {{$plan->id == $user->plan_id ? 'live-plan' :'' }}">
                                <div class="card" style="width: 18rem;">
                                    <div class="card-header bg-{{$color[$key]}}">
                                        <h3 class="text-center text-bold text-capitalize p-0 m-0">{{$plan->plan_name}}</h3>
                                    </div>
                                    <div class="card-body">
                                        <ul class="list-group list-group-flush text-center">
                                            <li class="list-group-item">Organization Limit : {{$plan->organization_limit}}</li>
                                            <li class="list-group-item">Lead Limit : {{$plan->lead_limit}} {{$plan->lead_type}}</li>
                                            <li class="list-group-item">Contact Limit : {{$plan->contact_limit}} {{$plan->contact_type}}</li>
                                            <li class="list-group-item">Days : {{$plan->days}} </li>
                                        </ul>
                                    </div>
                                    <div class="card-footer d-flex justify-content-center">
                                            <form class="plan-submit-form" action="{{asset('purchase-plan')}}" method="post">
                                                @csrf
                                                <input type="hidden" value="{{$plan->id}}" name="plan_id">
                                                <input type="hidden" value="{{Auth::user()->id}}" name="user_id">
                                                <button type="submit" class="btn btn-outline-primary plan-buy-btn" plan_id="{{$plan->id}}">Buy Now</button>
                                            </form>
                                        
                                    </div>
                                </div>
                            </div>
                       
                        
                    @endforeach
                </div>
            @endif
         </div>
      </div>
    
   </div>
  
</main>
<!-- end::main content -->
@endsection
@push('footer-script')
<!-- begin::dataTable -->
<!-- end::dataTable -->
<script>
   $(document).ready(function() {
       
    // Delete Multiple
    $(".multiple-delete-btn").click(function() {
        var URL = "{{ asset('product-delete-multiple') }}";
        var user_ids = [];
        $('.userids:checkbox:checked').each(function() {
            user_ids.push($(this).val());
        });
    
        swal({
            title: 'Are you sure?',
            text: 'Once deleted, you will not be recover!',
            icon: 'warning',
            dangerMode: true,
            buttons: ["Cancel", "Yes!"],
        }).then(function(value) {
            if (value) {
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

                $.ajax({
                    type: "post",
                    data: {
                        "ids": user_ids
                    },
                    url: URL,
                    dataType: "html",
                    success: function(result) {
                        console.log(result);
                        swal("success!", "Successfully deleted!", "success");
                        window.location.reload();
                    },
                    error:function(xhr,status,error)
                    {
                        swal("failed!", "Failed !", "error");
                        window.location.reload();
                    }
                });
                
            }
        });

    });
   
   
});
  
</script>
@endpush