@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;
        }
    </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>
            <!-- begin::page header -->
            <div class="page-header">
                <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 active" aria-current="page">{{ __('message.list') }}</li>
                    </ol>
                </nav>
            </div>
            <!-- end::page header -->
            <div class="card">

                <div class="card-header d-flex justify-content-end">
                        <a data-toggle="tooltip" data-original-title="Add New Plan"
                                href="{{ asset('add-user-plan') }}"
                                class="btn btn-outline-secondary text-uppercase mr-2">
                                <i class="ti-plus"></i>
                        </a>
                    
                       
                       

                    
                </div>

                <div class="card-body">

                    @if (isset($plans))
                    <div class="container my-5">
                        <div class="row">
                            <!-- Basic Plan Card -->
                             @foreach($plans as $plan)
                                <div class="col-md-4">
                                    <div class="card text-center">
                                        <div class="card-header bg-success text-white text-uppercase">
                                            <h4>{{$plan->plan_name}}</h4>
                                        </div>
                                        <div class="card-body">
                                        <h5 class="card-title">₹ {{$plan->price}}</h5>
                                        <p class="card-text"></p>
                                        <ul class="list-unstyled">
                                            <li class="border-bottom py-1 shadow-sm">{{$plan->number_of_user}} Users</li>
                                            <li class="border-bottom py-1 shadow-sm">{{$plan->days}} Days</li>
                                            <li class="border-bottom py-1 shadow-sm">{{$plan->description}}</li>

                                        </ul>
                                        <a href="{{asset('edit-user-plan/'.$plan->id)}}" class="btn btn-outline-secondary"><i class="ti-pencil-alt fa-lg"></i></a>
                                        <button plan_id="{{$plan->id}}" class="btn btn-outline-secondary delete-plan-btn"><i class="ti-trash fa-lg"></i></button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                        

                        
                    @endif
                </div>
            </div>
        </div>


    </main>
    <!-- end::main content -->
@endsection
@push('footer-script')
    <!-- begin::dataTable -->
   
    <!-- end::dataTable -->
    <script>
        $(document).ready(function() {
          

            //plan delete button code
            $(".delete-plan-btn").click(function(){
                var plan_id = $(this).attr("plan_id");
                

                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: {
                                "plan_id": plan_id
                            },
                            url: "{{asset('delete-plan')}}",
                            dataType: "html",
                            success: function(result) {
                                //console.log(result);
                                swal("success!", "Successfully deleted!", "success");
                                window.location.reload();
                            },
                            error:function(error)
                            {
                                swal("Failed !", "Failed !", "error");
                                window.location.reload();
                            }
                        });
                       
                    }
                });
            });

            

            $(".input_file_upload").on("change",function(){
                $(".import-company-form").submit();
            });

            $(".import-company-form").on("submit", function(event) {
                    // Prevent the default form submission
                    event.preventDefault();
                                  
                    $.ajax({
                        type: "POST",
                        url: "{{asset('import-users')}}",
                        headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },                       
                        data: new FormData(this), 
                        processData: false,
                        contentType: false,
                        cache:false,
                        beforeSend:function()
                        {
                            $(".import-content").html("<h5>Please wait uploading...</h5>");
                        },
                        success: function(response) 
                        {
                            if(response.message=="success")
                            {
                                var div = `<div class='text-success text-center' style='font-size:50px'>
                                <i class='fa fa-check-circle' ></i>
                                <p  style='font-size:20px'>Employee Import Successfully !</p>
                            </div>`;
                                $(".import-content").html(div);
                                setTimeout(function(){
                                    window.location.reload();
                                },3000);
                                
                            }
                            else
                            {
                                //console.log(error);
                                var div = `<div class='text-danger text-center' style='font-size:50px'>
                                <i class='fa fa-times-circle' ></i>
                                <p  style='font-size:20px'>Please check the datasheet !</p>
                            </div>`;
                                $(".import-content").html(div);
                            }
                        },
                        error: function(xhr, status, error) 
                        {
                            //console.log(error);
                            var div = `<div class='text-danger text-center' style='font-size:50px'>
                            <i class='fa fa-times-circle' ></i>
                            <p  style='font-size:20px'>Please check the datasheet !</p>
                        </div>`;
                            $(".import-content").html(div);
                        }
                    });
            });


            // Delete Multiple
            $(".multiple-delete-btn").click(function() {
                var URL = "{{ asset('users-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();
                            }
                        });
                      
                    }
                });

            });

           
        });

        $(".apply-button").click(function(){
            $(".filter-form-box").addClass("d-none");
        });
        

        //filter company code
        $(".filter-company-btn").click(function(){
           
            if($(".filter-form-box").hasClass("d-none"))
            {
                $(".filter-form-box").removeClass("d-none");
            }
            else
            {
                $(".filter-form-box").addClass("d-none");
            }
        });

        
    
         //change status code
       $(".status-change").on("change",function(){
            
            var check_val = 0;
            if( $(this).is(":checked"))
            {
                check_val = 1;
            }
           
            var id = $(this).val();
            
            $.ajax({
                type: "post",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: "{{asset('change-user-status')}}",
                data:{
                    user_id:id,
                    status:check_val
                },
                dataType: "html",
                success: function(result) 
                {   console.log(result);
                    var allData = JSON.parse(result);
                    
                    if(allData.message=="success")
                    {
                        $('.toast').removeClass('d-none');
                        $('.toast').toast('show');
                    }
                    else
                    {
                        var div = `
                        <div class="toast-body bg-danger text-white">
                                <i class="fa fa-times-circle-o fa-lg"></i>&nbsp Status Update Failed
                            
                        </div>
                    `;

                    $('.toast').removeClass('d-none');
                        $('.toast').toast('show');
                        $('.toast').html(div);
                    }
                },
                error:function(xhr,status,error)
                {
                    console.log(error);
                    var div = `
                        <div class="toast-body bg-danger text-white">
                                <i class="fa fa-times-circle-o fa-lg"></i>&nbsp Status Update Failed
                            
                        </div>
                    `;

                    $('.toast').removeClass('d-none');
                        $('.toast').toast('show');
                        $('.toast').html(div);

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