@extends('crm.layouts.app')

@section('title', 'Billing')

@section('content')
<div x-data="{ cancelModal: false, changePlanModal: false }">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-900">Billing</h1>
            <p class="mt-1 text-sm text-gray-500">Manage your payment methods and view invoices.</p>
        </div>
    </div>

    <div class="grid lg:grid-cols-2 gap-8">
        <!-- Current Subscription -->
        <div class="bg-white border border-gray-200 rounded-xl p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Current Subscription</h3>

        @if($subscription)
            <div class="mb-4">
                <div class="flex items-center justify-between mb-2">
                    <div>
                        <div class="text-2xl font-bold text-gray-900">{{ $subscription->plan->name }} Plan</div>
                        <div class="text-sm text-gray-600">${{ number_format($subscription->plan->price, 2) }}/month</div>
                    </div>
                    <div class="px-3 py-1 rounded-full text-xs font-medium
                        {{ $subscription->status === 'active' ? 'bg-green-100 text-green-800' :
                           ($subscription->status === 'cancelled' ? 'bg-red-100 text-red-800' : 'bg-gray-100 text-gray-800') }}">
                        {{ ucfirst($subscription->status) }}
                    </div>
                </div>

                <div class="text-sm text-gray-600 space-y-1">
                    @if($subscription->renewal_date)
                        <div class="flex items-center">
                            <svg class="w-4 h-4 mr-2 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"/>
                            </svg>
                            <span>{{ $subscription->status === 'cancelled' ? 'Access ends' : 'Renews' }} {{ $subscription->renewal_date->format('M d, Y') }}</span>
                        </div>
                    @endif
                </div>
            </div>

            <div class="flex flex-col gap-2 mt-4">
                @if($subscription->status === 'active')
                    <button @click="cancelModal = true" type="button" class="w-full bg-red-50 hover:bg-red-100 text-red-700 font-medium py-2 px-4 rounded-lg transition-colors border border-red-200">
                        Cancel Subscription
                    </button>
                @elseif($subscription->status === 'cancelled')
                    <form action="{{ route('billing.resume') }}" method="POST">
                        @csrf
                        <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                            Resume Subscription
                        </button>
                    </form>
                @endif

                <button @click="changePlanModal = true" type="button" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors text-center">
                    {{ $subscription->status === 'cancelled' ? 'Resubscribe' : 'Change Plan' }}
                </button>
            </div>
        @else
            <div class="text-center py-8">
                <div class="text-gray-400 mb-4">
                    <svg class="h-12 w-12 mx-auto" 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-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
                <h4 class="text-lg font-medium text-gray-900 mb-2">No Active Subscription</h4>
                <p class="text-gray-600 mb-4">Choose a plan to get started with InkLoop.</p>
                <a href="{{ route('billing.pricing') }}" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors">
                    View Plans
                </a>
            </div>
        @endif
    </div>

        <!-- Payment Method -->
        <div class="bg-white border border-gray-200 rounded-xl p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Payment Method</h3>

            @if($user->pm_type && $user->pm_last_four)
                <div class="flex items-center justify-between mb-4">
                    <div class="flex items-center">
                        <div class="bg-gray-100 rounded-lg p-3 mr-3">
                            @if($user->pm_type === 'visa')
                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
                                    <rect width="24" height="15" x="0" y="4" fill="#0051A5" rx="3"/>
                                    <path fill="#fff" d="M8.5 9h1.5v4H8.5V9zm3.5 0h1v1h-1V9z"/>
                                </svg>
                            @elseif($user->pm_type === 'mastercard')
                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none">
                                    <circle cx="8" cy="12" r="6" fill="#FF5F00"/>
                                    <circle cx="16" cy="12" r="6" fill="#EB001B"/>
                                </svg>
                            @else
                                <svg class="h-6 w-6 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2zm16.5 2.5h-15v-1h15v1z"/>
                                </svg>
                            @endif
                        </div>
                        <div>
                            <div class="font-medium text-gray-900">
                                {{ ucfirst($user->pm_type) }} ending in {{ $user->pm_last_four }}
                            </div>
                            <div class="text-sm text-gray-600">Default payment method</div>
                        </div>
                    </div>
                </div>

                <button
                    onclick="updatePaymentMethod()"
                    class="w-full bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors"
                >
                    Update Payment Method
                </button>
            @else
                <div class="text-center py-8">
                    <div class="text-gray-400 mb-4">
                        <svg class="h-12 w-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path>
                        </svg>
                    </div>
                    <h4 class="text-lg font-medium text-gray-900 mb-2">No Payment Method</h4>
                    <p class="text-gray-600 mb-4">Add a payment method to manage your subscription.</p>
                    <button
                        onclick="addPaymentMethod()"
                        class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
                    >
                        Add Payment Method
                    </button>
                </div>
            @endif
        </div>
    </div>

    <!-- Billing History -->
    <div class="mt-8 bg-white border border-gray-200 rounded-xl p-6">
        <h3 class="text-lg font-semibold text-gray-900 mb-4">Billing History</h3>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-900">Date</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-900">Description</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-900">Amount</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-900">Status</th>
                        <th class="px-4 py-3 text-left text-sm font-medium text-gray-900">Invoice</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <!-- This would be populated with actual billing history -->
                    <tr>
                        <td colspan="5" class="px-4 py-8 text-center text-gray-500">
                            No billing history available
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Help Section -->
    <div class="mt-8 bg-blue-50 border border-blue-200 rounded-xl p-6">
        <h3 class="text-lg font-semibold text-blue-900 mb-2">Need Help?</h3>
        <p class="text-blue-800 mb-4">
            Have questions about billing, need to change your plan, or want to cancel? We're here to help!
        </p>
        <div class="flex flex-col sm:flex-row gap-3">
            <a href="mailto:support@inkloop.com" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors text-center">
                Contact Support
            </a>
            <a href="#" class="bg-white hover:bg-blue-50 text-blue-600 border border-blue-200 font-medium py-2 px-4 rounded-lg transition-colors text-center">
                View FAQ
            </a>
        </div>
    </div>

    <!-- Cancel Subscription Modal -->
    <div x-show="cancelModal" x-cloak class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div x-show="cancelModal"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500/75 transition-opacity"></div>

        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                <div x-show="cancelModal"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave="ease-in duration-200"
                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                    <div class="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
                        <button @click="cancelModal = false" type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-2 focus:outline-offset-2 focus:outline-indigo-600">
                            <span class="sr-only">Close</span>
                            <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <div class="sm:flex sm:items-start">
                        <div class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:size-10">
                            <svg class="size-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
                            </svg>
                        </div>
                        <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
                            <h3 class="text-base font-semibold text-gray-900" id="modal-title">Cancel subscription</h3>
                            <div class="mt-2">
                                <p class="text-sm text-gray-500">Are you sure you want to cancel your subscription? You will retain access until the end of your billing period, but your subscription will not renew.</p>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                        <form action="{{ route('billing.cancel') }}" method="POST" class="inline">
                            @csrf
                            <button type="submit" class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-red-500 sm:ml-3 sm:w-auto">Cancel subscription</button>
                        </form>
                        <button @click="cancelModal = false" type="button" class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">Keep subscription</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Change Plan Modal -->
    <div x-show="changePlanModal" x-cloak class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true">
        <div x-show="changePlanModal"
             x-transition:enter="ease-out duration-300"
             x-transition:enter-start="opacity-0"
             x-transition:enter-end="opacity-100"
             x-transition:leave="ease-in duration-200"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="fixed inset-0 bg-gray-500/75 transition-opacity"></div>

        <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
            <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
                <div x-show="changePlanModal"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave="ease-in duration-200"
                     x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                     x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                     class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
                    <div class="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
                        <button @click="changePlanModal = false" type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-2 focus:outline-offset-2 focus:outline-indigo-600">
                            <span class="sr-only">Close</span>
                            <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    <div>
                        <div class="text-center sm:text-left">
                            <h3 class="text-base font-semibold text-gray-900" id="modal-title">Choose a plan</h3>
                            <p class="mt-2 text-sm text-gray-500">Select the plan that best fits your studio's needs.</p>
                        </div>

                        <div class="mt-6">
                            @php
                                $plans = \App\Models\Plan::where('is_active', true)->orderBy('price', 'asc')->get();
                            @endphp

                            <div class="space-y-4">
                                @foreach($plans as $plan)
                                    <div class="relative flex items-start rounded-lg border border-gray-300 p-4 hover:border-indigo-500 transition-colors {{ $subscription && $subscription->plan_id === $plan->id ? 'ring-2 ring-indigo-500' : '' }}">
                                        <div class="flex-1 min-w-0">
                                            <div class="flex items-center justify-between">
                                                <div>
                                                    <h4 class="text-base font-semibold text-gray-900">{{ $plan->name }}</h4>
                                                    <p class="mt-1 text-sm text-gray-500">{{ $plan->description }}</p>
                                                </div>
                                                <div class="text-right ml-4">
                                                    <span class="text-2xl font-bold text-gray-900">${{ number_format($plan->price, 2) }}</span>
                                                    <span class="text-gray-500">/month</span>
                                                </div>
                                            </div>

                                            @if($subscription && $subscription->plan_id === $plan->id)
                                                <span class="mt-2 inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">Current Plan</span>
                                            @else
                                                <a href="{{ route('billing.checkout', ['plan' => strtolower($plan->name)]) }}" class="mt-2 inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                                                    {{ $subscription->status === 'cancelled' ? 'Resubscribe' : 'Upgrade' }}
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="mt-5 sm:mt-6">
                        <button @click="changePlanModal = false" type="button" class="inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs ring-1 ring-inset ring-gray-300 hover:bg-gray-50">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Payment Method Modal -->
<div id="payment-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-xl max-w-md w-full p-6">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Update Payment Method</h3>

            <form id="payment-form">
                <div id="card-element" class="p-3 border border-gray-300 rounded-lg mb-4">
                    <!-- Stripe Elements will create form elements here -->
                </div>
                <div id="card-errors" role="alert" class="text-red-600 text-sm mb-4"></div>

                <div class="flex space-x-3">
                    <button
                        type="button"
                        onclick="closePaymentModal()"
                        class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors"
                    >
                        Cancel
                    </button>
                    <button
                        type="submit"
                        class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded-lg transition-colors"
                    >
                        Update
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    const stripe = Stripe('{{ config("app.env") === "production" ? config("services.stripe.key") : "pk_test_..." }}');
    let elements, cardElement;

    function addPaymentMethod() {
        showPaymentModal();
    }

    function updatePaymentMethod() {
        showPaymentModal();
    }

    function showPaymentModal() {
        const modal = document.getElementById('payment-modal');
        modal.classList.remove('hidden');

        // Initialize Stripe Elements
        elements = stripe.elements();
        cardElement = elements.create('card', {
            style: {
                base: {
                    fontSize: '16px',
                    color: '#424770',
                    '::placeholder': {
                        color: '#aab7c4',
                    },
                },
            },
        });

        cardElement.mount('#card-element');

        // Handle real-time validation errors from the card Element
        cardElement.on('change', ({error}) => {
            const displayError = document.getElementById('card-errors');
            if (error) {
                displayError.textContent = error.message;
            } else {
                displayError.textContent = '';
            }
        });
    }

    function closePaymentModal() {
        const modal = document.getElementById('payment-modal');
        modal.classList.add('hidden');

        if (cardElement) {
            cardElement.unmount();
        }
    }

    document.getElementById('payment-form').addEventListener('submit', async (event) => {
        event.preventDefault();

        const {token, error} = await stripe.createToken(cardElement);

        if (error) {
            const errorElement = document.getElementById('card-errors');
            errorElement.textContent = error.message;
        } else {
            // Submit token to server
            fetch('{{ route("billing.update-payment-method") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    payment_method: token.id
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Error updating payment method');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error updating payment method');
            });
        }
    });
</script>
@endpush
@endsection