@extends('layouts.app')

@section('content')

<div class="container-fluid py-5 mt-3">

{{-- Current Subscription Section --}}
@if(isset($currentSubscription) && $currentSubscription)
    <div class="row mb-5">
        <div class="col-md-12">
            <div class="card border-success shadow">
                <div class="card-header bg-success text-white">
                    <h4 class="mb-0">
                        <i class="fas fa-crown me-2"></i>
                        Current Subscription
                    </h4>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="text-success">{{ $currentSubscription['data']['name'] }}</h5>
                            <p class="text-muted mb-2">{{ $currentSubscription['data']['description'] }}</p>
                            <p class="text-muted mb-2">
                                <strong>Status:</strong> 
                                <span class="badge bg-{{ $currentSubscription['data']['status'] == 'active' ? 'success' : 'warning' }}">
                                    {{ ucfirst($currentSubscription['data']['status']) }}
                                </span>
                            </p>
                            <p class="text-muted mb-2">
                                <strong>Price:</strong> KES {{ number_format($currentSubscription['data']['price']) }}
                            </p>
                        </div>
                        <div class="col-md-6">
                            <p class="text-muted mb-2">
                                {{-- the value ends_at is null for lifetime plans --}}
                                @if($currentSubscription['data']['ends_at'])
                                <p class="text-muted mb-2">
                                    <strong>Start Date:</strong> 
                                    {{ \Carbon\Carbon::parse($currentSubscription['data']['starts_at'])->timezone(config('app.timezone'))->format('M d, Y H:i:s') }}
                                </p>
                                @else
                                <p class="text-muted mb-2">
                                    <strong>Start Date:</strong> 
                                    {{ 
                                    \Carbon\Carbon::parse($currentSubscription['data']['starts_at'])
                                    ->timezone(config('app.timezone'))
                                    ->format('M d, Y H:i:s') }}
                                </p>
                                @endif
                            </p>
                            <p class="text-muted mb-2">
                                {{-- the value ends_at is null for lifetime plans --}}
                                @if($currentSubscription['data']['ends_at'])
                                <p class="text-muted mb-2">
                                    <strong>End Date:</strong> 
                                    {{ 
                                    \Carbon\Carbon::parse($currentSubscription['data']['ends_at'])->timezone(config('app.timezone'))
                                    ->format('M d, Y H:i:s') }}
                                </p>
                                @else
                                <p class="text-muted mb-2">
                                    <strong>End Date:</strong> 
                                    (Lifetime)
                                </p>
                                @endif
                            </p>
                            <p class="text-muted mb-0">
                                <strong>Days Remaining:</strong> 
                                <span class="text-primary">
                                    {{-- number of days are shown as negatives yet its a future date and also should be whole number --}}
                                    
                                    @if($currentSubscription['data']['ends_at'])
                                        {{ (int) now()->diffInDays(\Carbon\Carbon::parse($currentSubscription['data']['ends_at']), false) }} days
                                    @else
                                        <span class="text-muted">(Lifetime)</span>
                                    @endif
                                </span>
                            </p>
                        </div>
                    </div>
                    
                    <div class="mt-3 pt-3 border-top">
                        <button class="btn btn-outline-danger btn-sm" data-bs-toggle="modal" data-bs-target="#cancelSubscriptionModal">
                            <i class="fas fa-times me-1"></i> Cancel Subscription
                        </button>
                        <button class="btn btn-outline-primary btn-sm ms-2">
                            <i class="fas fa-receipt me-1"></i> View Invoice
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@else
    {{-- No Active Subscription --}}
    <div class="row justify-content-center mb-5">
        <div class="col-md-8">
            <div class="card border-warning shadow">
                <div class="card-body text-center py-4">
                    <i class="fas fa-exclamation-triangle text-warning fa-2x mb-3"></i>
                    <h5 class="text-warning">No Active Subscription</h5>
                    <p class="text-muted mb-0">You are currently on the free tier. Subscribe to a plan to unlock all features.</p>
                </div>
            </div>
        </div>
    </div>
@endif

<div class="mb-12 text-center px-4">
    <h3 class="text-lg sm:text-xl md:text-2xl font-bold text-gray-900 mb-3">
        Subscription Plan and Pricing
    </h3>
    <p class="text-sm sm:text-base md:text-lg text-gray-600 max-w-2xl mx-auto leading-relaxed">
        Try Flaresend WhatsApp API for free. Upgrade for more usage and exclusive features.
    </p>
</div>


{{-- Pricing Plans Section --}}
<div class="container py-5">
    <div class="row justify-content-center g-4">
        @foreach($plans as $plan)
            @php
                $isCurrent = isset($currentSubscription) && $currentSubscription && $currentSubscription['data']['plan_id'] == $plan['id'];
            @endphp

            <div class="col-md-6 col-lg-3">
                <div class="card h-100 shadow-sm border-0 position-relative 
                    {{ $isCurrent ? 'border border-2 border-primary' : '' }}">

                    {{-- Badges --}}
                    @if($plan['is_popular'])
                        <span class="badge bg-warning text-dark position-absolute top-0 translate-middle mt-3 start-50">
                            <i class="fas fa-star me-1"></i> Popular
                        </span>
                    @endif

                    @if($isCurrent)
                        <span class="badge bg-primary text-white position-absolute top-0 start-50 translate-middle mt-3">
                            <i class="fas fa-check me-1"></i> Current Plan
                        </span>
                    @endif

                    {{-- Card Body --}}
                    <div class="card-body d-flex flex-column p-4">
                        <div class="text-center mb-4">
                            <h4 class="fw-bold mb-2 text-dark">{{ $plan['name'] }}</h4>
                            <p class="text-muted small mb-3">{{ $plan['description'] }}</p>
                            @if (!empty($plan['is_custom_pricing']) && $plan['is_custom_pricing'])
                                <h5 class="fw-bold text-primary mb-0">
                                    Contact Us
                                </h5>
                            @else
                                <h5 class="fw-bold text-primary mb-0">
                                    KES {{ number_format($plan['price']) }}
                                </h5>
                                <small class="text-muted">/ {{ $plan['duration_days'] }} days</small>
                            @endif
                        </div>

                        <div class="flex-grow-1 mb-4">
                            <h6 class="fw-semibold mb-3">Features:</h6>
                            <ul class="list-unstyled small">
                                @foreach($plan['features'] as $feature)
                                    <li class="mb-2 d-flex align-items-center">
                                        <i class="fas fa-check text-success me-2"></i> {{ $feature }}
                                    </li>
                                @endforeach
                            </ul>
                        </div>

                        {{-- Buttons --}}
                        <div class="mt-auto">
                            @if($isCurrent)
                                <button class="btn btn-outline-primary w-100 py-2" onclick="window.location.href='{{ route('payment.methods', ['plan_id' => $plan['id']]) }}'">
                                    <i class="fas fa-check me-2"></i> Renew Plan
                                </button>
                            @else
                                @if ($plan['price'] > 0)
                                @if (!empty($plan['is_custom_pricing']) && $plan['is_custom_pricing'])
                                    <button class="btn {{ $plan['is_popular'] ? 'btn-warning text-dark' : 'btn-primary' }} w-100 py-2 select-pay-btn">
                                        Contact Us
                                    </button>
                                @else
                                    <button class="btn {{ $plan['is_popular'] ? 'btn-warning text-dark' : 'btn-primary' }} w-100 py-2 select-pay-btn"
                                            onclick="window.location.href='{{ route('payment.methods', ['plan_id' => $plan['id']]) }}'">
                                        @if(isset($currentSubscription) && $currentSubscription)
                                            @if($plan['price'] > $currentSubscription['data']['price'])
                                                Upgrade Plan
                                            @else
                                                Downgrade Plan
                                            @endif
                                        @else
                                            Subscribe Now
                                        @endif
                                    </button>
                                @endif
                                @endif
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
    

        {{-- Cancel Subscription Modal --}}
        {{-- <div class="modal fade" id="cancelSubscriptionModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Cancel Subscription</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>Are you sure you want to cancel your subscription?</p>
                        <p class="text-muted small">Your subscription will remain active until the end of your billing period on Feb 14, 2024.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Keep Subscription</button>
                        <button type="button" class="btn btn-danger">Cancel Subscription</button>
                    </div>
                </div>
            </div>
        </div> --}}


        <!-- Payment Modal -->
        <div id="payment-modal-bg" class="modal-bg" style="display:none;">
            <div class="modal-box">
                <button class="modal-close" id="modal-close-btn">&times;</button>
                
                <div class="text-center mb-6">
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <svg class="w-8 h-8 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
                        </svg>
                    </div>
                    <h2 class="text-2xl font-bold text-gray-900" id="modal-plan-name"></h2>
                    <div class="text-lg text-gray-600 mt-2" id="modal-plan-details"></div>
                </div>

                <form id="payment-form" class="space-y-4">
                    <div>
                        <label class="modal-label" for="modal-phone">M-Pesa Phone Number</label>
                        <input type="tel" id="modal-phone" class="modal-input" placeholder="e.g. 0712345678" required 
                            pattern="[0-9]{10,12}" title="Enter a valid Kenyan phone number"/>
                        <p class="text-xs text-gray-500 mt-1">Enter your M-Pesa registered phone number</p>
                    </div>
                    
                    <button type="submit" class="modal-btn" id="modal-pay-btn">
                        <span id="modal-pay-btn-text">Pay via M-Pesa</span>
                        <span id="modal-pay-btn-spinner" style="display:none;" class="modal-spinner"></span>
                    </button>
                    
                    <div id="modal-error" class="modal-status failed" style="display:none;"></div>
                </form>

                <div id="modal-status-section" style="display:none;">
                    <div class="text-center py-6">
                        <div class="flex items-center justify-center mb-4">
                            <span id="modal-status-spinner" class="modal-spinner status-pulse"></span>
                        </div>
                        <h3 id="modal-status-text" class="text-lg font-semibold mb-2 modal-status pending">
                            Waiting for payment confirmation...
                        </h3>
                        <p id="modal-status-message" class="text-gray-600 text-sm mb-4">
                            Please complete the payment on your phone. This may take a few moments.
                        </p>
                        <div id="payment-details" class="bg-gray-50 rounded-lg p-4 text-sm text-gray-700 mb-4" style="display:none;">
                            <div class="flex justify-between mb-1">
                                <span>Checkout ID:</span>
                                <span id="checkout-id" class="font-mono"></span>
                            </div>
                            <div class="flex justify-between">
                                <span>Amount:</span>
                                <span id="payment-amount" class="font-semibold"></span>
                            </div>
                        </div>
                        <button class="modal-btn bg-gray-600 hover:bg-gray-700" id="modal-close-status-btn" style="display:none;">
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>

</div>
@endsection