<x-app-layout>
    <div class="py-12">
        <div class="max-w-4xl mx-auto sm:px-6 lg:px-8">

            <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-8">
                <div class="p-6 text-gray-900">

                    <h1 class="text-2xl font-bold mb-6">Add New Student</h1>

                    {{-- Validation errors --}}
                    @if ($errors->any())
                        <div class="mb-6 p-4 bg-red-100 text-red-700 rounded">
                            <ul class="list-disc ml-5">
                                @foreach ($errors->all() as $err)
                                    <li>{{ $err }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('admin.students.store') }}" method="POST">
                        @csrf

                        {{-- ========================================= --}}
                        {{-- STUDENT INFORMATION --}}
                        {{-- ========================================= --}}
                        <h2 class="text-xl font-semibold mb-4">Student Information</h2>

                        <div class="grid grid-cols-2 gap-4 mb-8">
                            <div>
                                <label class="block mb-1 font-medium">First Name</label>
                                <input type="text" name="student_first_name" class="w-full border-gray-300 rounded" required>
                            </div>

                            <div>
                                <label class="block mb-1 font-medium">Last Name</label>
                                <input type="text" name="student_last_name" class="w-full border-gray-300 rounded" required>
                            </div>

                            <div class="col-span-2">
                                <label class="block mb-1 font-medium">Email</label>
                                <input type="email" name="student_email" class="w-full border-gray-300 rounded" required>
                            </div>

                            <div class="col-span-2">
                                <label class="block mb-1 font-medium">Phone (optional)</label>
                                <input type="text" name="student_phone" class="w-full border-gray-300 rounded">
                            </div>

                            <div class="col-span-2">
                                <label class="block mb-1 font-medium">Date of Birth (optional)</label>
                                <input type="date" name="dob" class="w-full border-gray-300 rounded">
                            </div>
                        </div>

						{{-- ========================================= --}}
						{{-- STUDENT TYPE --}}
						{{-- ========================================= --}}
						<h2 class="text-xl font-semibold mb-4">Student Type</h2>

						<div class="mb-8">
							<label class="block mb-1 font-medium">Select Student Type</label>
							<select name="student_type_id" class="w-full border-gray-300 rounded" required>
								<option value="">Choose a type...</option>
								@foreach ($studentTypes as $type)
									<option value="{{ $type->id }}">{{ $type->name }}</option>
								@endforeach
							</select>
						</div>


                        {{-- ========================================= --}}
                        {{-- PARENT INFORMATION --}}
                        {{-- ========================================= --}}
                        <h2 class="text-xl font-semibold mb-4">Parent / Guardian</h2>

                        <div class="mb-4">
                            <label class="block mb-1 font-medium">Parent Option</label>
                            <select name="parent_option" id="parent_option"
                                class="w-full border-gray-300 rounded"
                                onchange="toggleParentSections()" required>
                                <option value="none">No Parent</option>
                                <option value="existing">Select Existing Parent</option>
                                <option value="new">Create New Parent</option>
                            </select>
                        </div>

                        {{-- EXISTING PARENT --}}
                        <div id="existing_parent_section" class="hidden mb-8">
                            <label class="block mb-1 font-medium">Select Parent</label>
                            <select name="existing_parent_profile_id" class="w-full border-gray-300 rounded">
                                <option value="">Choose parent...</option>
                                @foreach ($parents as $parent)
                                    <option value="{{ $parent->id }}">
                                        {{ $parent->first_name }} {{ $parent->last_name }} ({{ $parent->email }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- NEW PARENT --}}
                        <div id="new_parent_section" class="hidden mb-8">
                            <div class="grid grid-cols-2 gap-4">
                                <div>
                                    <label class="block mb-1 font-medium">First Name</label>
                                    <input type="text" name="parent_first_name" class="w-full border-gray-300 rounded">
                                </div>

                                <div>
                                    <label class="block mb-1 font-medium">Last Name</label>
                                    <input type="text" name="parent_last_name" class="w-full border-gray-300 rounded">
                                </div>

                                <div class="col-span-2">
                                    <label class="block mb-1 font-medium">Email</label>
                                    <input type="email" name="parent_email" class="w-full border-gray-300 rounded">
                                </div>

                                <div class="col-span-2">
                                    <label class="block mb-1 font-medium">Phone (optional)</label>
                                    <input type="text" name="parent_phone" class="w-full border-gray-300 rounded">
                                </div>
                            </div>
                        </div>


                        {{-- ========================================= --}}
                        {{-- BILLING ACCOUNT --}}
                        {{-- ========================================= --}}
                        <h2 class="text-xl font-semibold mb-4">Billing Account</h2>

						<div id="billing-alert" class="hidden mt-4 p-4 rounded-lg border border-yellow-300 bg-yellow-100 text-yellow-900">
							<strong>Existing Billing Account Found</strong><br>
							This email already has a billing account. The student will be linked to it.<br>
							<span id="billing-name-display" class="font-semibold"></span>
						</div>

						<input type="hidden" name="billing_account_id" id="billing_account_id">
						<div id="billing-fields">
						
							<div class="grid grid-cols-2 gap-4 mb-8">
								<div class="col-span-2">
									<label class="block mb-1 font-medium">Billing Account Name</label>
									<input type="text" name="billing_name" class="w-full border-gray-300 rounded" required>
								</div>

								<div class="col-span-2">
									<label class="block mb-1 font-medium">Invoice Email</label>
									<input type="email" name="invoice_email" id="invoice_email" class="w-full border-gray-300 rounded" required>
								</div>

								<div>
									<label class="block mb-1 font-medium">Billing Phone (optional)</label>
									<input type="text" name="billing_phone" class="w-full border-gray-300 rounded">
								</div>

								<div>
									<label class="block mb-1 font-medium">Contact Name (optional)</label>
									<input type="text" name="contact_name" class="w-full border-gray-300 rounded">
								</div>

								<div class="col-span-2">
									<label class="block mb-1 font-medium">Address Line 1</label>
									<input type="text" name="address_line1" class="w-full border-gray-300 rounded" required>
								</div>

								<div class="col-span-2">
									<label class="block mb-1 font-medium">Address Line 2 (optional)</label>
									<input type="text" name="address_line2" class="w-full border-gray-300 rounded">
								</div>

								<div>
									<label class="block mb-1 font-medium">Town / City</label>
									<input type="text" name="town" class="w-full border-gray-300 rounded" required>
								</div>

								<div>
									<label class="block mb-1 font-medium">Postcode</label>
									<input type="text" name="postcode" class="w-full border-gray-300 rounded" required>
								</div>

								<div class="col-span-2">
									<label class="block mb-1 font-medium">Country</label>
									<input type="text" name="country" class="w-full border-gray-300 rounded" required value="United Kingdom">
								</div>
							</div>
						</div>

                        {{-- SUBMIT --}}
                        <button type="submit"
                                class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded">
                            Create Student
                        </button>

                    </form>

                </div>
            </div>

        </div>
    </div>

    {{-- Simple JS for toggling parent sections --}}
    <script>
        function toggleParentSections() {
            const opt = document.getElementById('parent_option').value;

            document.getElementById('existing_parent_section').classList.toggle('hidden', opt !== 'existing');
            document.getElementById('new_parent_section').classList.toggle('hidden', opt !== 'new');
        }
		
function disableBillingFields(disabled) {
    const fields = document.querySelectorAll('#billing-fields input, #billing-fields select');

    fields.forEach(field => {
        field.disabled = disabled;

        if (disabled) {
            field.classList.add('bg-gray-100', 'cursor-not-allowed', 'text-gray-500');
        } else {
            field.classList.remove('bg-gray-100', 'cursor-not-allowed', 'text-gray-500');
        }
    });
}

document.getElementById('invoice_email').addEventListener('change', function () {
    fetch('/admin/billing/check-email?email=' + this.value)
        .then(response => response.json())
        .then(data => {
            if (data.exists) {
                // Show alert
                document.getElementById('billing-alert').classList.remove('hidden');

                // Show account name
                document.getElementById('billing-name-display').textContent =
                    'Billing account: ' + data.billing_name;

                // Set hidden input
                document.getElementById('billing_account_id').value = data.billing_account_id;

                // Disable billing fields
                disableBillingFields(true);
            } else {
                // Hide alert
                document.getElementById('billing-alert').classList.add('hidden');

                // Clear hidden input
                document.getElementById('billing_account_id').value = '';

                // Enable billing fields
                disableBillingFields(false);
            }
        });
});

		
    </script>
</x-app-layout>
