@extends('user.layouts.app')

@section('content')
    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Settings</a></li>
            <li class="breadcrumb-item active" aria-current="page">Billing & Upgrade</li>
        </ol>
    </nav>

    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center mb-3 mt-4">Choose a Plan</h2>
            <p class="text-secondary text-center mb-4 pb-2">Choose the features and functionality your team needs today. Easily upgrade as your company grows.</p>
            <div class="container">
                <div class="row">
                    @foreach($plans as $plan)
                        <div class="col-md-4 stretch-card grid-margin grid-margin-md-0">
                            <div class="card">
                                <div class="card-body">
                                    <h4 class="text-center mt-3 mb-4">{{ $plan->name }}</h4>
                                    <i data-feather="{{ $plan->name === 'Free' ? 'award' : ($plan->name === 'Pro' ? 'gift' : 'briefcase') }}" class="text-{{ $plan->name === 'Pro' ? 'success' : 'primary' }} icon-xxl d-block mx-auto my-3"></i>
                                    <h1 class="text-center">${{ number_format($plan->price, 2) }}</h1>
                                    <p class="text-secondary text-center mb-4 fw-light">per month</p>
                                    <h5 class="text-{{ $plan->name === 'Pro' ? 'success' : 'primary' }} text-center mb-4">{{ $plan->monthly_credits }} AI Credits</h5>
                                    <table class="mx-auto">
                                        <tr>
                                            <td><i data-feather="{{ $plan->workspaces > 0 ? 'check' : 'x' }}" class="icon-md text-{{ $plan->workspaces > 0 ? 'primary' : 'danger' }} me-2"></i></td>
                                            <td><p class="{{ $plan->workspaces > 0 ? '' : 'text-secondary' }}">{{ $plan->workspaces }} Workspaces</p></td>
                                        </tr>
                                        <tr>
                                            <td><i data-feather="{{ $plan->teammates > 0 ? 'check' : 'x' }}" class="icon-md text-{{ $plan->teammates > 0 ? 'primary' : 'danger' }} me-2"></i></td>
                                            <td><p class="{{ $plan->teammates > 0 ? '' : 'text-secondary' }}">{{ $plan->teammates }} Teammates</p></td>
                                        </tr>
                                        <tr>
                                            <td><i data-feather="{{ $plan->social_profiles > 0 ? 'check' : 'x' }}" class="icon-md text-{{ $plan->social_profiles > 0 ? 'primary' : 'danger' }} me-2"></i></td>
                                            <td><p class="{{ $plan->social_profiles > 0 ? '' : 'text-secondary' }}">{{ $plan->social_profiles }} Social Profiles</p></td>
                                        </tr>
                                        <tr>
                                            <td><i data-feather="{{ $plan->editor_plugins ? 'check' : 'x' }}" class="icon-md text-{{ $plan->editor_plugins ? 'primary' : 'danger' }} me-2"></i></td>
                                            <td><p class="{{ $plan->editor_plugins ? '' : 'text-secondary' }}">Editor Plugins</p></td>
                                        </tr>
                                        <tr>
                                            <td><i data-feather="{{ $plan->multilingual_copywriting ? 'check' : 'x' }}" class="icon-md text-{{ $plan->multilingual_copywriting ? 'primary' : 'danger' }} me-2"></i></td>
                                            <td><p class="{{ $plan->multilingual_copywriting ? '' : 'text-secondary' }}">Multilingual Copywriting</p></td>
                                        </tr>
                                        <tr>
                                            <td><i data-feather="{{ $plan->advanced_analytics ? 'check' : 'x' }}" class="icon-md text-{{ $plan->advanced_analytics ? 'primary' : 'danger' }} me-2"></i></td>
                                            <td><p class="{{ $plan->advanced_analytics ? '' : 'text-secondary' }}">Advanced Analytics</p></td>
                                        </tr>
                                    </table>
                                    <div class="d-grid">
                                        @if(auth()->user()->currentPlan && auth()->user()->currentPlan->plan_id === $plan->id)
                                            <button class="btn btn-{{ $plan->name === 'Pro' ? 'success' : 'primary' }} mt-4" disabled>Current Plan</button>
                                        @else
                                            <button class="btn btn-{{ $plan->name === 'Pro' ? 'success' : 'primary' }} mt-4 upgrade-plan ladda-button" data-plan-id="{{ $plan->id }}" data-style="expand-right">Select Plan</button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/spin.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/ladda.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Ladda/1.0.0/ladda.jquery.min.js"></script>
    <script>
        $('.upgrade-plan').on('click', function () {
            var button = $(this);
            var l = Ladda.create(this);
            l.start();

            $.ajax({
                url: '',
                type: 'POST',
                data: {
                    plan_id: button.data('plan-id'),
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'JSON',
                success: function (response) {
                    l.stop();
                    location.reload();
                },
                error: function (data) {
                    l.stop();
                    alert('Error changing plan: ' + (data.responseJSON?.error || 'Unknown error'));
                }
            });
        });
    </script>
@endsection