<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Register Tutor</title>
    <style>
        .hidden { display: none; color: red; margin-bottom: 10px; }
        label { display: block; margin-bottom: 10px; }
        input, select { display: block; margin-bottom: 15px; padding: 5px; }
    </style>
</head>
<body>

<h2>Tutor Registration</h2>

<form id="register-form">
    @csrf
    <input type="text" name="first_name" placeholder="First Name" required>
    <input type="text" name="last_name" placeholder="Last Name" required>
    <input type="text" name="username" placeholder="Username" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="password" name="password" placeholder="Password" required>
    <input type="password" name="password_confirmation" placeholder="Confirm Password" required>

    <label>Choose Subscription Plan:</label>
    <select name="plan_id" id="plan_id" required>
        <option value="">-- Select Plan --</option>
        @foreach($plans as $plan)
            <option value="{{ $plan->id }}">{{ $plan->plan_name }} - ${{ number_format($plan->price, 2) }}</option>
        @endforeach
    </select>

    <p id="error-checkbox" class="hidden">Please click the checkbox before paying.</p>
    <label>
        <input id="check" type="checkbox" required /> I agree to pay and continue
    </label>

    <div id="paypal-button-container"></div>
</form>

<!-- PayPal JS SDK -->
<script src="https://www.paypal.com/sdk/js?client-id={{ env('PAYPAL_CLIENT_ID') }}&components=buttons"></script>

<script>
const form = document.getElementById('register-form');

paypal.Buttons({
    onInit: function(data, actions) {
        actions.disable();
        document.querySelector("#check").addEventListener("change", function(event) {
            if(event.target.checked) {
                actions.enable();
                document.querySelector("#error-checkbox").classList.add("hidden");
            } else {
                actions.disable();
            }
        });
    },

    onClick: function(data, actions) {
        if(!document.querySelector("#check").checked) {
            document.querySelector("#error-checkbox").classList.remove("hidden");
            return actions.reject();
        }
    },

    createOrder: function(data, actions) {
        const planId = document.getElementById('plan_id').value;
        if(!planId) {
            alert('Please select a subscription plan.');
            return;
        }

        return fetch("{{ route('paypal.create-order') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            body: JSON.stringify({ plan_id: planId })
        })
        .then(res => res.json())
        .then(data => data.id);
    },

    onApprove: function(data, actions) {
        const formData = Object.fromEntries(new FormData(form));
        return fetch("{{ route('paypal.capture-order') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            body: JSON.stringify({ orderID: data.orderID, form: formData })
        })
        .then(res => res.json())
        .then(res => {
            if(res.redirect) {
                window.location.href = res.redirect;
            } else if(res.error) {
                alert(res.error);
            }
        });
    },

    onError: function(err) {
        console.error(err);
        alert('Payment error!');
    }

}).render('#paypal-button-container');
</script>

</body>
</html>
