@extends('layouts.app')

@section('content')
<div class="w-full max-w-2xl xl:w-1/2 mx-auto my-8 p-4 sm:p-6 border-2 border-cyan-300 rounded-xl bg-white shadow-lg min-w-[220px]">
    @if(session('error'))
        <div class="mb-4 p-3 bg-red-100 text-red-700 rounded">{{ session('error') }}</div>
    @endif
    <h1 class="text-3xl font-bold mb-8 text-gray-800">Secure Payment</h1>
        @guest
            <div class="mt-4 mb-4 md:mt-0">
                <div class="p-4 rounded-lg bg-black border-l-4 border-black shadow-md flex items-start gap-3 animate-[fadeIn_300ms_ease]">
                    <svg class="w-6 h-6 text-amber-400 flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                        <path fill-rule="evenodd" d="M10 1.5l6 2.25v3.25c0 3.5-2.4 6.7-6 7.5-3.6-.8-6-4-6-7.5V3.75L10 1.5zM9 8a1 1 0 012 0v2a1 1 0 11-2 0V8z" clip-rule="evenodd"/>
                    </svg>
                    <p class="text-amber-400 font-semibold leading-tight">
                        Our servers are fully encrypted at rest with AES-256 and all connections are secured with TLS 1.2+. All sensitive data is handled securely and in compliance with industry standards. We employ strict access controls and regular security audits to ensure your information is protected.
                    </p>
                </div>
            </div>
        <div class="mb-5 p-4 rounded-lg bg-indigo-50 border-l-4 border-green-600 shadow-md flex items-start gap-3 animate-[fadeIn_300ms_ease]">
            <svg class="w-6 h-6 text-green-600 flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7 5 7-5m0 8H3a2 2 0 01-2-2V7a2 2 0 012-2h16a2 2 0 012 2v7a2 2 0 01-2 2z" />
            </svg>
            <p class="text-black-900 font-semibold leading-tight">
                Upon completing your purchase an account will be created for you to manage your subscription and downloads. After purchase, check your email for details and instructions on how to retrieve your purchases.
            </p>
        </div>
        @endguest
    <form id="payment-form" method="POST" action="{{ route('payment.process') }}">
        @csrf
        @guest
        <div id="full-identity-form">
            <div class="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="first_name">First Name</label>
                    <input type="text" name="first_name" id="first_name" class="w-full border rounded px-3 py-2" required placeholder="First Name" value="{{ old('first_name', $prefill['first_name'] ?? '') }}">
                </div>
                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="last_name">Last Name</label>
                    <input type="text" name="last_name" id="last_name" class="w-full border rounded px-3 py-2" required placeholder="Last Name" value="{{ old('last_name', $prefill['last_name'] ?? '') }}">
                </div>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 font-semibold mb-2" for="email">Email Address</label>
                <input type="email" name="email" id="email" class="w-full border rounded px-3 py-2" required placeholder="Enter your email address" value="{{ old('email', $prefill['email'] ?? '') }}">
            </div>
        @else
            @php
                $fullName = Auth::user()->name ?? '';
                $nameParts = preg_split('/\s+/', $fullName, 2, PREG_SPLIT_NO_EMPTY);
                $firstPart = $nameParts[0] ?? '';
                $lastPart = $nameParts[1] ?? '';

                $hasAddress = !empty($prefill['address']) && !empty($prefill['city']) && !empty($prefill['country']);
            @endphp
            <div class="mb-4 p-4 rounded-lg bg-green-50 border border-green-200 text-green-800">
                <p class="font-semibold">
                    Welcome back {{ $firstPart ?: Auth::user()->email }}, you will have access to your plugin download(s) immediately.
                </p>
            </div>
            
            <input type="hidden" name="first_name" value="{{ old('first_name', $firstPart) }}">
            <input type="hidden" name="last_name" value="{{ old('last_name', $lastPart) }}">
            <input type="hidden" name="email" value="{{ old('email', Auth::user()->email) }}">

            @if($hasAddress)
                <div id="address-summary" class="mb-6 p-4 rounded-lg bg-gray-50 border border-gray-200 text-sm">
                    <div class="flex justify-between items-start mb-2">
                        <h4 class="font-bold text-gray-700 uppercase tracking-wide text-xs">Billing Address</h4>
                        <button type="button" onclick="toggleAddressEdit()" class="text-blue-600 hover:text-blue-800 text-xs font-semibold underline">Change</button>
                    </div>
                    <p class="text-gray-600 leading-relaxed italic">
                        {{ $prefill['address'] }}<br>
                        {{ $prefill['city'] }}, {{ $prefill['postal_code'] }}<br>
                        <span id="summary-province-name"></span>
                        <span id="summary-country-name"></span>
                    </p>
                </div>
            @endif
        @endguest

        <div id="address-fields-container" @if(Auth::check() && $hasAddress) style="display: none;" @endif>
            <div class="mb-5 @if(Auth::check()) p-4 bg-blue-50/50 rounded-lg border border-blue-100 @endif">
                @if(Auth::check())
                <div class="flex justify-between items-center mb-4">
                    <h4 class="font-bold text-blue-800 uppercase tracking-wide text-xs">Update Billing Address</h4>
                    <button type="button" onclick="toggleAddressEdit()" class="text-gray-500 hover:text-gray-700 text-xs underline">Cancel</button>
                </div>
                @endif

                <div class="mb-6">
                    <label class="block text-gray-700 font-semibold mb-2" for="address">Address</label>
                    <input type="text" name="address" id="address" class="w-full border rounded px-3 py-2" required placeholder="Street Address" value="{{ old('address', $prefill['address'] ?? '') }}">
                </div>
                <div class="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2" for="city">City</label>
                        <input type="text" name="city" id="city" class="w-full border rounded px-3 py-2" required placeholder="City" value="{{ old('city', $prefill['city'] ?? '') }}">
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2" for="postal_code">Postal Code</label>
                        <input type="text" name="postal_code" id="postal_code" class="w-full border rounded px-3 py-2" required placeholder="Postal Code" value="{{ old('postal_code', $prefill['postal_code'] ?? '') }}">
                    </div>
                </div>
                <div class="mb-6 grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2" for="country">Country</label>
                        <select name="country" id="country" class="w-full border rounded px-3 py-2" required>
                            <option value="">Select Country</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-gray-700 font-semibold mb-2" for="province_id">State/Province</label>
                        <select name="province_id" id="province_id" class="w-full border rounded px-3 py-2" required>
                            <option value="">Select State/Province</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>
        
        @guest
        </div><!-- end full-identity-form -->
        @endguest

        @if(!empty($cartItems) && $cartItems->count())
        <div class="mb-6 border border-gray-200 rounded-lg overflow-hidden">
            <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
                <span class="text-xs font-semibold uppercase tracking-wide text-gray-500">Order Summary</span>
            </div>
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100">
                        <th class="text-left px-4 py-2 text-gray-500 font-medium">Product</th>
                        <th class="text-right px-4 py-2 text-gray-500 font-medium hidden sm:table-cell">SKU</th>
                        <th class="text-right px-4 py-2 text-gray-500 font-medium">Qty</th>
                        <th class="text-right px-4 py-2 text-gray-500 font-medium">Monthly</th>
                        <th class="text-right px-4 py-2 text-gray-500 font-medium">
                            Yearly
                            <span class="block text-xs font-normal text-gray-400 normal-case tracking-normal">per month</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($cartItems as $item)
                    @php
                        $itemQty        = max(1, (int)($item->getQuantity() ?: $item->quantity ?? 1));
                        $monthly        = $item->price * $itemQty;
                        $yearlyTotal    = $monthly * 10;
                        $yearlyPerMonth = $yearlyTotal / 12;
                    @endphp
                    <tr class="border-b border-gray-50 last:border-0">
                        <td class="px-4 py-2.5 text-gray-800 font-medium">{{ $item->product->name ?? $item->name }}</td>
                        <td class="px-4 py-2.5 text-right font-mono text-xs text-gray-400 hidden sm:table-cell">{{ $item->product->sku ?? '—' }}</td>
                        <td class="px-4 py-2.5 text-right font-mono text-gray-700">{{ $itemQty }}</td>
                        <td class="px-4 py-2.5 text-right font-mono text-gray-700">${{ number_format($monthly, 2) }}</td>
                        <td class="px-4 py-2.5 text-right font-mono text-green-700">${{ number_format($yearlyPerMonth, 2) }}</td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot class="border-t border-gray-200 bg-gray-50">
                    <tr>
                        <td class="hidden sm:table-cell" colspan="3"></td>
                        <td class="px-4 py-2 text-right text-xs text-gray-400"></td>
                        <td class="px-4 py-2 text-right text-xs text-green-700 font-medium">saves ${{ number_format($total * 2, 2) }}/yr</td>
                    </tr>
                </tfoot>
            </table>
        </div>
        @endif

        <div class="mb-6 md:flex grid grid-cols-1 md:grid-cols-2 md:gap-6">
            <div class="block">
                <label class="block text-gray-700 font-semibold mb-2">Choose Subscription</label>
                <div class="flex flex-col gap-1">
                    <label class="flex items-center gap-2">
                        <input type="radio" name="plan" value="monthly" {{ old('plan', 'yearly') === 'monthly' ? 'checked' : '' }}>
                        <span>Monthly Total – ${{ number_format($total, 2) }} <span class="text-xs text-gray-500">/month</span></span>
                    </label>
                    <label class="flex items-center gap-2">
                        <input type="radio" name="plan" value="yearly" {{ old('plan', 'yearly') === 'yearly' ? 'checked' : '' }}>
                        <span>Yearly – ${{ number_format($total * 10, 2) }}/year</span>
                    </label>
                    <div id="radio-savings-label" class="ml-8 text-green-700 text-sm font-medium">
                        Save This Year: ${{ number_format($total * 2, 2) }}
                    </div>
                </div>
            </div>
            <div class="block mt-4 md:mt-0">
                <label class="block text-gray-700 font-semibold mb-2">Your Subscription Benefits</label>
                <ul class="list-disc list-inside text-gray-600 text-sm">
                    <li>Access to all plugin updates and upgrades</li>
                    <li>Priority support for issues and questions</li>
                    <li>Cancel anytime, no long-term commitment</li>
                    <li>Early access to new features and plugins</li>
                </ul>
            </div>
        </div>

        <div id="tax-summary" class="mb-6 p-4 rounded-lg bg-indigo-50 border-2 border-indigo-200 shadow-sm hidden">
            <div class="flex justify-between mb-2">
                <span class="text-gray-700">Subtotal:</span>
                <span id="summary-subtotal" class="font-mono">$0.00</span>
            </div>
            <div class="flex justify-between mb-2">
                <span id="summary-tax-label" class="text-gray-700">Tax:</span>
                <span id="summary-tax-amount" class="font-mono">$0.00</span>
            </div>
            <div class="flex justify-between pt-2 border-t border-indigo-200 font-bold text-lg">
                <span class="text-indigo-900">Total Charged:</span>
                <span id="summary-total" class="font-extrabold text-blue-700 font-mono">$0.00</span>
            </div>
        </div>

            <div class="mt-4 mb-4 md:mt-0">
                <div class="p-4 rounded-lg bg-black border-l-4 border-black shadow-md flex items-start gap-3 animate-[fadeIn_300ms_ease]">
                    <svg class="w-6 h-6 text-white flex-shrink-0 mt-0.5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <rect x="3" y="11" width="18" height="10" rx="2" ry="2" stroke-width="2" stroke="currentColor" />
                        <path d="M7 11V8a5 5 0 0110 0v3" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <p class="text-white font-semibold leading-tight">
                        We do not store or reproduce any secure payment details.
                        All payments are processed through Stripe's PCI-compliant infrastructure, ensuring your data is protected with industry-leading security measures.
                    </p>
                </div>
            </div>
        <div class="mt-2 mb-6">
            <label class="mb-2 block text-gray-700 font-semibold">Card Details</label>
            <div id="card-element" class="p-3 border rounded bg-gray-50"></div>
            <div id="card-errors" class="text-red-500 mt-2"></div>
        </div>
        <button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg shadow transition text-lg">Subscribe</button>
        <div class="w-full flex justify-center mt-5"><img src="/images/pbs-black.svg" alt="powered by Stripe" class="w-32 opacity-50"></div>
    </form>
</div>
@endsection

@push('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
                // Simple client-side validation for required fields
                function validateFields() {
                    const requiredFields = [
                        'first_name', 'last_name', 'email', 'address', 'city', 'postal_code', 'country', 'subdivision', 'plan'
                    ];
                    let valid = true;
                    let firstInvalid = null;
                    requiredFields.forEach(function(field) {
                        const el = document.getElementsByName(field)[0] || document.getElementById(field);
                        if (el && !el.value) {
                            el.classList.add('border-red-500');
                            if (!firstInvalid) firstInvalid = el;
                            valid = false;
                        } else if (el) {
                            el.classList.remove('border-red-500');
                        }
                    });
                    if (!valid && firstInvalid) {
                        firstInvalid.focus();
                    }
                    return valid;
                }
        // Prefill and Stripe setup
        window.__prefill = {!! json_encode($prefill ?? []) !!};

        const stripe = Stripe('{{ config('cashier.key') }}');
        const elements = stripe.elements();
        const card = elements.create('card');
        card.mount('#card-element');

        // Country & subdivision setup
        const countrySelect = document.getElementById('country');
        const subdivisionSelect = document.getElementById('province_id');
        const planRadios = document.querySelectorAll('input[name="plan"]');
        const summaryBox = document.getElementById('tax-summary');
        const subtotalEl = document.getElementById('summary-subtotal');
        const taxLabelEl = document.getElementById('summary-tax-label');
        const taxAmountEl = document.getElementById('summary-tax-amount');
        const totalEl = document.getElementById('summary-total');

        window.toggleAddressEdit = function() {
            const container = document.getElementById('address-fields-container');
            const summary = document.getElementById('address-summary');
            if (container.style.display === 'none') {
                container.style.display = 'block';
                if (summary) summary.style.display = 'none';
                const field = document.getElementById('address');
                if (field) field.focus();
            } else {
                container.style.display = 'none';
                if (summary) summary.style.display = 'block';
            }
        };

        function updateTax() {
            const country = countrySelect.value;
            const subdivision = subdivisionSelect.value;
            const plan = document.querySelector('input[name="plan"]:checked')?.value || 'yearly';

            if (!country) {
                summaryBox.classList.add('hidden');
                return;
            }

            fetch(`/api/tax?country=${country}&province_id=${subdivision}&plan=${plan}`)
                .then(res => res.json())
                .then(data => {
                    subtotalEl.textContent = `$${data.subtotal.toFixed(2)}`;
                    taxLabelEl.textContent = `Tax (${data.tax_name} ${data.formatted_tax_rate}):`;
                    taxAmountEl.textContent = `$${data.tax_amount.toFixed(2)}`;
                    totalEl.textContent = `$${data.total.toFixed(2)}`;
                    summaryBox.classList.remove('hidden');
                });
        }

        [countrySelect, subdivisionSelect].forEach(el => {
            el.addEventListener('change', updateTax);
        });

        const savingsLabel = document.getElementById('radio-savings-label');
        function updateSavingsVisibility() {
            const plan = document.querySelector('input[name="plan"]:checked')?.value;
            if (savingsLabel) savingsLabel.style.display = plan === 'yearly' ? '' : 'none';
        }

        planRadios.forEach(radio => {
            radio.addEventListener('change', updateTax);
            radio.addEventListener('change', updateSavingsVisibility);
        });

        updateSavingsVisibility();

            fetch('/api/countries')
            .then(res => res.json())
            .then(countries => {
                countries.forEach(country => {
                    const opt = document.createElement('option');
                    opt.value = country.id;
                    opt.textContent = country.name;
                    countrySelect.appendChild(opt);
                });

                // Now lookup current user address via API
                @auth
                fetch('/api/user/address')
                    .then(res => res.json())
                    .then(userData => {
                        if (userData) {
                            window.__prefill = userData;
                            const summaryCountryEl = document.getElementById('summary-country-name');
                            if (summaryCountryEl) {
                                const matched = countries.find(c => c.id === userData.country);
                                if (matched) summaryCountryEl.textContent = matched.name;
                            }
                            
                            countrySelect.value = userData.country;
                            countrySelect.dispatchEvent(new Event('change'));

                            // Fill other fields too
                            ['address','city','postal_code'].forEach(k => {
                                const field = document.getElementsByName(k)[0] || document.getElementById(k);
                                if (field && userData[k]) field.value = userData[k];
                            });
                        }
                    });
                @endauth

                // Legacy fallback for old prefill method if API fails or guest
                if (!window.__userFetched && window.__prefill && window.__prefill.country) {
                    countrySelect.value = window.__prefill.country;
                    countrySelect.dispatchEvent(new Event('change'));
                }
            });

        countrySelect.addEventListener('change', function() {
            const countryId = this.value;
            subdivisionSelect.innerHTML = '<option value="">Select State/Province</option>';
            if (!countryId) return;
            fetch(`/api/subdivisions/${countryId}`)
                .then(res => res.json())
                .then(subdivisions => {
                    const summaryProvinceEl = document.getElementById('summary-province-name');
                    subdivisions.forEach(sub => {
                        const opt = document.createElement('option');
                        opt.value = sub.id;
                        opt.textContent = sub.name;
                        subdivisionSelect.appendChild(opt);

                        if (summaryProvinceEl && window.__prefill && window.__prefill.province_id == sub.id) {
                            summaryProvinceEl.textContent = sub.name + ', ';
                        }
                    });

                    // Set province_id from API prefill
                    if (window.__prefill && window.__prefill.province_id) {
                        subdivisionSelect.value = window.__prefill.province_id;
                    }
                    updateTax();
                });
        });

        // fill simple inputs in case JS country/subdivision not needed
        if (window.__prefill) {
            ['first_name','last_name','email','address','city','postal_code'].forEach(function(k) {
                if (window.__prefill[k]) {
                    const el = document.getElementsByName(k)[0] || document.getElementById(k);
                    if (el) el.value = window.__prefill[k];
                }
            });
        }

        // Stripe form submission
        const form = document.getElementById('payment-form');
        form.addEventListener('submit', async function(event) {
            event.preventDefault();
            if (!validateFields()) {
                document.getElementById('card-errors').textContent = 'Please complete all required fields.';
                return;
            }
            const {paymentMethod, error} = await stripe.createPaymentMethod({
                type: 'card',
                card: card,
            });
            if (error) {
                document.getElementById('card-errors').textContent = error.message;
            } else {
                // Add paymentMethod.id to the form and submit
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'payment_method_id';
                input.value = paymentMethod.id;
                form.appendChild(input);
                form.submit();
            }
        });
    });
</script>
@endpush