@extends('include.app')
@section('content')



    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

{{--    <form onsubmit="openThankYouPage()" target="_blank">--}}
    <form action="{{ route('tree.order.save') }}" method="POST" >
        @csrf

        <div class="main-heading">
            <h1>Order a Tree Planting </h1>
        </div>
        <section class="form-sec">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="form-content">
                            <h2>1. Customize Your Card</h2>
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-field">

                            <label>This tree planting and card is...</label>
                            <div class="row">
                                @php
                                    $gift_types = [
                                        'inmemory' => 'In Memory',
                                        'birthday' => 'A Birthday Gift',
                                        'incelebration' => 'In Celebration',
                                        'holiday' => 'A Holiday Gift',
                                        'inhonor' => 'In Honor',
                                        'wedding' => 'A Wedding Gift',
                                    ];
                                @endphp

                                @foreach($gift_types as $id => $label)
                                    <div class="col-lg-4">
                                        <label>
                                            <input type="radio" name="gift_type"  required value="{{ $id }}"> {{ $label }}
                                        </label>
                                    </div>
                                @endforeach
                            </div>

                            <label>Who is the sender?</label>
                            <input type="text" name="sender_name" maxlength="50" placeholder="Sender Name" required>
                            <span id="sender-char-count">0 of 50 max characters</span>

                            <label>Who are we planting the tree for?</label>
                            <input type="text" name="honoree_name" placeholder="Honoree Name" required>

                            <label>What date should appear on the card?</label>
                            <input type="date" name="card_date" value="{{ date('Y-m-d') }}" required>

                            <label>Inside Card Message (optional)</label>
                            <textarea name="card_message" id="card-message" maxlength="500" placeholder="Write your message here."></textarea>
                            <p><span id="char-count">0</span> of 500 max characters</p>
                            <a href="#">Need some condolence message ideas?</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>


        <!-- Section 2: Recipient Address -->
        <section class="section">
            <div class="container">
                <h2>2. Recipient Address</h2>
                <label for="recipient-name">Certificate Name</label>
                <input type="text" id="recipient-name" name="card_recipient_name"  required placeholder="Card Recipient Name">

                <label for="street-address">Street Address</label>
                <input type="text" id="street-address" name="street_address" required placeholder="Street Address">

                <label for="city">City</label>
                <input type="text" id="city" name="recipient_city" required placeholder="City">

                <label for="state">State</label>
                <input type="text" id="state" name="recipient_state" required placeholder="State">

                <label for="zip">ZIP Code</label>
                <input type="text" id="zip" name="recipient_zip" required placeholder="ZIP">
            </div>
        </section>

        <!-- Section 3: Billing Information -->
        <section class="section">
            <div class="container">
                <h2>3. Billing Information</h2>
                <label for="billing-name">Full Name</label>
                <input type="text" id="billing-name" required name="billing_name" placeholder="Full Name">

                <label for="billing-street">Street Address</label>
                <input type="text" id="billing-street" required name="billing_street" placeholder="Street Address">

                <label for="billing-city">City</label>
                <input type="text" id="billing-city" required name="billing-city" placeholder="City">

                <label for="billing-state">State</label>
                <input type="text" id="billing-state" required name="billing-state" placeholder="State">

                <label for="billing-zip">ZIP Code</label>
                <input type="text" id="billing-zip" required name="billing-zip" placeholder="ZIP">

                <label for="email">Email Address</label>
                <input type="email" id="email" name="email" required placeholder="you@email.com">

                <label for="payment">payment Type</label>

                <div class="d-flex">
                    <label for="payment">Credit Card</label>
                    <img src="{{ asset('images/cards.png') }}" alt="card" width="40%
                ">
                </div>

                <input type="hidden" name="paypal_order_id" id="paypal_order_id">

                <div class="container">
                    <div class="payment-card" style="background: #f8f8f8; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); max-width: 500px;">
                        <h4>Pay with Credit/Debit Card</h4>
                        <div id="card-form" class="card_container">
                            <div id="card-name-field-container" style="margin-bottom: 10px;"></div>
                            <div id="card-number-field-container" style="margin-bottom: 10px;"></div>
                            <div id="card-expiry-field-container" style="margin-bottom: 10px;"></div>
                            <div id="card-cvv-field-container" style="margin-bottom: 10px;"></div>
                            {{-- <button id="card-field-submit-button" type="button">Pay Now with Card</button> --}}
                        </div>
                        <p id="result-message" style="color:red;"></p>
                        <div id="paypal-error-message" style="color:red;"></div>
                    </div>
            </div>
        </section>

        <!-- Section 5: Add Trees -->
        <section class="section">
            <div class="container">
                <h2>4. Add Trees</h2>
                <p>Base Package: $14.99 (1 tree)</p>
                <label for="additional-trees">Additional Trees - $99 each</label>
                <input type="number" id="additional-trees" name="additional-trees" min="0" value="0">
            </div>
        </section>

        <!-- Section 6: Review Your Order -->
        <section class="section">
            <div class="container" id="review-order-section">
                <h2>5. Review Your Order</h2>
                <p>Total trees planted: <span id="total-trees">1 tree</span></p>
                <p>Your total for today: <span id="total-cost">$14.99</span></p>
                <button type="submit" id="start-paypal-order">Submit Order</button>
            </div>
        </section>
    </form>
    <script>
        // Update character count for textarea
        const textarea = document.getElementById('card-message');
        const charCount = document.getElementById('char-count');
        textarea.addEventListener('input', () => {
            charCount.textContent = textarea.value.length;
        });
    </script>
   <script src="https://www.paypal.com/sdk/js?client-id={{ env('PAYPAL_CLIENT_ID') }}&buyer-country=US&currency=USD&components=buttons,card-fields&enable-funding=venmo"></script>
   <script>
    window.onload = function () {
        const totalCost = parseFloat(document.getElementById("total-cost").innerText.replace('$', '')) || 14.99;

        const cardFieldsInstance = paypal.CardFields({
            createOrder: function () {
                return fetch(`{{ url('/paypal/create-order') }}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ "total-cost": totalCost })
                })
                .then(async res => {
                    const text = await res.text();
                    console.log("Raw response:", text);
                    try {
                        return JSON.parse(text);
                    } catch (e) {
                        console.error("JSON parsing error:", e);
                        throw new Error("Server returned non-JSON response");
                    }
                })

                .then(data => data?.id);
            },

            onApprove: function(data) {
                document.getElementById('paypal_order_id').value = data.orderID;
                
                return fetch(`{{ url('/paypal/capture-order') }}/${data.orderID}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    // You can submit the form here after successfully capturing the order
                    document.querySelector('form').submit();
                })
                .catch(error => {
                    console.error("Capture error:", error);
                    document.getElementById("result-message").innerText = "Payment capture failed.";
                });
            },
            // onApprove: function (data) {
            //     return fetch(`{{ url('/paypal/capture-order') }}/${data.orderID}`, {
            //         method: 'POST',
            //         headers: {
            //             'Content-Type': 'application/json',
            //             'X-CSRF-TOKEN': '{{ csrf_token() }}'
            //         }
            //     })
            //     .then(res => res.json())
            //     .then(data => {
            //         // document.querySelector('input[name="paypal_order_id"]').value = data.id;
            //         document.querySelector('form').submit();
            //     })
            //     .catch(error => {
            //         console.error("Capture error:", error);
            //         document.getElementById("result-message").innerText = "Payment capture failed.";
            //     });
            // },

            onError: function (err) {
                console.error("CardFields error:", err);
                document.getElementById("result-message").innerText = "Unable to load card form.";
            }
        });

        // Render individual fields manually
        if (cardFieldsInstance.isEligible()) {
            cardFieldsInstance.NameField().render("#card-name-field-container");
            cardFieldsInstance.NumberField().render("#card-number-field-container");
            cardFieldsInstance.ExpiryField().render("#card-expiry-field-container");
            cardFieldsInstance.CVVField().render("#card-cvv-field-container");

            document.getElementById("card-field-submit-button").addEventListener("click", () => {
                cardFieldsInstance.submit().catch(error => {
                    document.getElementById("result-message").innerHTML = `Transaction failed: ${error.message}`;
                });
            });
        } else {
            document.getElementById("card-form").style.display = "none";
        }
    };


   </script>
   
    
    {{-- <script src="https://js.stripe.com/v3/"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <script>
        const stripe = Stripe('{{ env('STRIPE_KEY') }}');
        const elements = stripe.elements();
        const card = elements.create('card');
        card.mount('#card-element');

        const form = document.querySelector('form');
        const cardErrors = document.getElementById('card-errors');
        const paymentMethodInput = document.getElementById('payment-method-id');
        let isSubmitting = false;

        form.addEventListener('submit', async (e) => {
            // Prevent form from submitting by default
            e.preventDefault();

            // Prevent double submission
            if (isSubmitting) return;
            isSubmitting = true;

            // Create payment method via Stripe
            const { paymentMethod, error } = await stripe.createPaymentMethod({
                type: 'card',
                card: card
            });

            if (error) {
                // Show error to user and reset flag
                cardErrors.textContent = error.message;
                isSubmitting = false;
            } else {
                // Clear any previous errors
                cardErrors.textContent = '';

                // Insert payment method ID into hidden input
                paymentMethodInput.value = paymentMethod.id;

                // Submit the form manually now that Stripe validation succeeded
                form.submit();
            }
        });
    </script> --}}



    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const charCountEl = document.getElementById("char-count");
            const cardMessageEl = document.getElementById("card-message");
            const additionalTreesEl = document.getElementById("additional-trees");
            const totalTreesEl = document.getElementById("total-trees");
            const totalCostEl = document.getElementById("total-cost");

            const basePrice = 14.99; // Base price includes 1 tree
            const treePrice = 99;    // Each additional tree

            // Character counter for message
            if (cardMessageEl) {
                cardMessageEl.addEventListener("input", function () {
                    charCountEl.textContent = cardMessageEl.value.length;
                });
            }

            additionalTreesEl.addEventListener("input", function () {
                const additional = parseInt(additionalTreesEl.value) || 0;
                const totalTrees = 1 + additional;
                const totalCost = (basePrice + (additional * treePrice)).toFixed(2);

                totalTreesEl.textContent = `${totalTrees} tree${totalTrees > 1 ? 's' : ''}`;
                totalCostEl.textContent = `$${totalCost}`;
            });
        });
    </script>
{{--    <script>--}}
{{--        function openThankYouPage() {--}}
{{--            window.open('thankyou.blade.php', '_blank');--}}
{{--        }--}}
{{--    </script>--}}


@endsection