{{--
    Card Update Modal / Section
    Include on the billing page: @include('user.partials.update-card', ['stripePublishableKey' => $stripePublishableKey])
--}}
<div id="update-card-section">
    <button type="button" class="btn btn-outline" id="open-update-card-btn">
        Update Card
    </button>

    {{-- Modal overlay --}}
    <div id="update-card-modal" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="update-card-modal-title">
        <div class="modal-backdrop" id="update-card-backdrop"></div>
        <div class="modal-box">
            <div class="modal-header">
                <h3 id="update-card-modal-title">Update Payment Card</h3>
                <button type="button" id="close-update-card-btn" aria-label="Close">&times;</button>
            </div>

            <div id="update-card-error" class="alert alert-danger" style="display:none;"></div>
            <div id="update-card-success" class="alert alert-success" style="display:none;"></div>

            <form id="update-card-form" novalidate>
                @csrf
                <div class="form-group">
                    <label for="card-element">Card details</label>
                    {{-- Stripe Elements mounts here --}}
                    <div id="card-element" class="stripe-card-element"></div>
                    <div id="card-errors" role="alert" class="field-error"></div>
                </div>

                <button type="submit" class="btn btn-primary" id="update-card-submit-btn">
                    <span id="update-card-btn-text">Save Card</span>
                    <span id="update-card-btn-spinner" style="display:none;">Saving…</span>
                </button>
            </form>
        </div>
    </div>
</div>

<style>
#update-card-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.modal-box { position: relative; background: #fff; border-radius: 8px; padding: 28px 32px; width: 100%; max-width: 440px; box-shadow: 0 8px 32px rgba(0,0,0,.18); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.modal-header h3 { margin: 0; font-size: 1.1rem; }
.modal-header button { background: none; border: none; font-size: 1.4rem; cursor: pointer; line-height: 1; }
.stripe-card-element { border: 1px solid #d1d5db; border-radius: 6px; padding: 12px; background: #fafafa; }
.field-error { color: #dc3545; font-size: .85rem; margin-top: 6px; min-height: 1.2em; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: .9rem; }
</style>

<script src="https://js.stripe.com/v3/"></script>
<script>
(function () {
    var publishableKey = @json($stripePublishableKey ?? config('services.stripe.key'));
    if (!publishableKey || !window.Stripe) return;

    var stripe = Stripe(publishableKey);
    var elements = stripe.elements();
    var cardElement = elements.create('card', {
        style: {
            base: { fontSize: '16px', color: '#1a1a1a', '::placeholder': { color: '#9ca3af' } },
            invalid: { color: '#dc3545' }
        }
    });

    var modal        = document.getElementById('update-card-modal');
    var openBtn      = document.getElementById('open-update-card-btn');
    var closeBtn     = document.getElementById('close-update-card-btn');
    var backdrop     = document.getElementById('update-card-backdrop');
    var form         = document.getElementById('update-card-form');
    var errorBox     = document.getElementById('update-card-error');
    var successBox   = document.getElementById('update-card-success');
    var cardErrors   = document.getElementById('card-errors');
    var submitBtn    = document.getElementById('update-card-submit-btn');
    var btnText      = document.getElementById('update-card-btn-text');
    var btnSpinner   = document.getElementById('update-card-btn-spinner');

    var cardMounted = false;

    function openModal() {
        modal.style.display = 'flex';
        errorBox.style.display = 'none';
        successBox.style.display = 'none';
        cardErrors.textContent = '';
        if (!cardMounted) {
            cardElement.mount('#card-element');
            cardMounted = true;
        }
    }

    function closeModal() {
        modal.style.display = 'none';
    }

    openBtn.addEventListener('click', openModal);
    closeBtn.addEventListener('click', closeModal);
    backdrop.addEventListener('click', closeModal);

    cardElement.on('change', function (e) {
        cardErrors.textContent = e.error ? e.error.message : '';
    });

    function setLoading(loading) {
        submitBtn.disabled = loading;
        btnText.style.display = loading ? 'none' : 'inline';
        btnSpinner.style.display = loading ? 'inline' : 'none';
    }

    function showError(msg) {
        errorBox.textContent = msg;
        errorBox.style.display = 'block';
        successBox.style.display = 'none';
    }

    function showSuccess(msg) {
        successBox.textContent = msg;
        successBox.style.display = 'block';
        errorBox.style.display = 'none';
    }

    form.addEventListener('submit', async function (e) {
        e.preventDefault();
        setLoading(true);
        errorBox.style.display = 'none';

        try {
            // Step 1: Get a SetupIntent client_secret from the server
            var siRes = await fetch(@json(route('user.billing.setup-intent')), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                }
            });
            var siData = await siRes.json();
            if (!siRes.ok || siData.error) {
                showError(siData.error || 'Could not initialise card update.');
                setLoading(false);
                return;
            }

            // Step 2: Confirm the SetupIntent with the new card (Stripe handles 3DS if needed)
            var confirmResult = await stripe.confirmCardSetup(siData.client_secret, {
                payment_method: { card: cardElement }
            });
            if (confirmResult.error) {
                showError(confirmResult.error.message);
                setLoading(false);
                return;
            }

            var paymentMethodId = confirmResult.setupIntent.payment_method;

            // Step 3: Send the confirmed payment_method_id to our backend
            var updateRes = await fetch(@json(route('user.billing.update-payment-method')), {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || ''
                },
                body: JSON.stringify({ payment_method_id: paymentMethodId })
            });
            var updateData = await updateRes.json();
            if (!updateRes.ok || updateData.error) {
                showError(updateData.error || 'Card update failed.');
                setLoading(false);
                return;
            }

            showSuccess(updateData.message || 'Card updated successfully.');
            cardElement.clear();
            setTimeout(closeModal, 2000);

        } catch (err) {
            showError('An unexpected error occurred. Please try again.');
        }

        setLoading(false);
    });
})();
</script>