@props(['values' => []])



<div class="mt-4">
    <h2 class="{{ $values ? "font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight p-4":"text-xl font-bold" }}">Academic Qualification & Experience</h2>

    <x-input-label :value="__('Type of Tutor')" class="text-lg font-semibold" />
    <div class="subjects grid grid-cols-4 gap-4 mt-2 ">
        @foreach ($tutorType as $type)
        <div class="subject-item flex items-center">
            @if (isset($values) && isset($values->tutor_type_id) && $type->id == $values->tutor_type_id)
            <input type="radio" id="tutor-{{ $type->id }}" name="tutor_type_id" value="{{ $type->id }}"
                checked>
            @else
            <input type="radio" id="tutor-{{ $type->id }}" name="tutor_type_id"
                value="{{ $type->id }}">
            @endif
            <x-input-label for="tutor-{{ $type->id }}" :value="__($type->name)" class="ml-2" />
        </div>
        @endforeach
    </div>
</div>
<div class="mt-4 flex items-center space-x-2 w-full">
    <x-input-label for="experience" :value="__('Years of Teaching Experience')" class="mr-2 w-[245px]" />

    <input class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600 rounded-md shadow-sm  block w-[100px]" id="experience" type="text" name="experience" value="{{ @$values->experience }}" required="required">

    <div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1"></div>
</div>

<div class="mt-4 w-full">
    <x-input-label :value="__('Highest Education Level')" class="text-lg font-semibold" />
    <div class="subjects grid grid-cols-4 gap-4 mt-2 max-md:flex max-md:flex-col">
        @foreach ($highestEducationLevels as $highestEducationLevel)
        <div class="subject-item flex items-center">
            <input
                type="radio"
                id="high-education-level-{{ $highestEducationLevel->id }}"
                name="high_education_level_id"
                value="{{ $highestEducationLevel->id }}"
                onchange="toggleOtherEducationInput()"
                {{ @$highestEducationLevel->id == @$values->high_education_level_id ? 'checked' : '' }}>

            <x-input-label for="high-education-level-{{ $highestEducationLevel->id }}" :value="__($highestEducationLevel->name)" class="ml-2" />
        </div>
        @endforeach

        <div class="subject-item flex items-center">
            <input
                type="radio"
                name="high_education_level_id"
                value="other_eduction_level"
                id="other-education-level"
                onchange="toggleOtherEducationInput()">
            <x-input-label for="other-education-level" :value="__('Others (please specify)')" class="ml-2" />
            <div id="other-education-level-container"></div>
        </div>
    </div>


</div>
<div class="mt-4 w-full">

    @if (!$values)
    <h2 class="text-xl font-bold">Tutor’s Pre-filled Profile (forwarded to Clients)</h2>


    <div class="mt-4">
        <!-- Section 1 -->
        <div class="mb-6">

            <h3 class="text-md font-semibold">1. Please provide us a brief description of yourself for potential
                assignments (in bullet points):</h3>
            <p class="text-sm text-gray-500 italic">(pre-filled when you apply)</p>
            <div class="char-count-wrapper">
                <textarea data-charcount
                   id="short_introduction"
                    name="short_introduction"
                    class="w-full border border-gray-300 p-2 mt-2"
                    rows="4"
                    maxlength="500"
                    placeholder=""></textarea>
                <div class="text-right text-xs text-gray-500 mt-1 char-count-display">
                    0 of 500 max characters
                </div>
                <div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1"></div>

            </div>
        </div>
        <!-- Section 2 -->
        <div class="mb-6">
            <h3 class="text-md font-semibold">2. Please provide us a summary of your Academic Achievements and Teaching Experiences:</h3>
            <p class="text-sm text-gray-500 italic">(Scholarships, mentionable lists, publications and schools/tuition centres taught in)</p>
            <div class="char-count-wrapper">
                <textarea id="teaching_experience" name="teaching_experience" data-charcount class="w-full border border-gray-300 p-2 mt-2" rows="4" maxlength="500" placeholder=""></textarea>
                <div class="text-right text-xs text-gray-500 mt-1 char-count-display">
                    0 of 500 max characters
                </div>
                <div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1"></div>

            </div>

        </div>

        <!-- Section 3 -->
        <div class="mb-6">
            <h3 class="text-md font-semibold">3. Please provide us a track record of your students’ achievements/improvements under your tutelage:</h3>
            <p class="text-sm text-gray-500 italic">Past Grades/Improvement Records of Previous Students</p>
            <div class="char-count-wrapper">
                <textarea id="student_results" name="student_results" data-charcount class="w-full border border-gray-300 p-2 mt-2" rows="4" maxlength="500" placeholder=""></textarea>
                <div class="text-right text-xs text-gray-500 mt-1 char-count-display">0 of 500 max characters</div>
                <div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1"></div>

            </div>

        </div>
    </div>
</div>
@endif
<div class="my-4 w-full" id="preference" >
<div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1"></div>

    <h2 class="{{ $values ? "font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight p-4":"text-xl font-bold" }}">Tutor Specializations</h2>


    @foreach ($gradeSubjects as $grade)
    <div class="mt-4">
        <x-input-label :value="__($grade->name)" class="text-lg font-semibold" />
        <div class="subjects grid grid-cols-4 gap-4 mt-2" >
            @php
            $selectedSubjects = isset($values->tutorPrefrences)
            ? $values->tutorPrefrences->pluck('subject_id')->toArray()
            : [];
            @endphp

            @foreach ($grade->subjects as $subject)
            <div class="subject-item flex items-center parent-container relative" >
                           

                <input
                    type="checkbox"
                    id="subject-{{ $subject->id }}"
                    name="preference[]"
                    value="{{ $subject->id }}"
                    {{ in_array($subject->id, $selectedSubjects) ? 'checked' : '' }}
                    onchange="toggleSpecifyInput(this, '{{ $grade->id }}', '{{ $subject->id }}', '{{ $subject->name }}')">

                <x-input-label for="subject-{{ $subject->id }}" :value="__($subject->name)" class="ml-2" />
                <div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1 absolute right-0 top-11"></div>
                <!-- Input for specifying details -->
                <!-- <input
                    type="text"
                    id="specify-input-grade-{{ $grade->id }}-subject-{{ $subject->id }}"
                    name="grade_{{ $grade->id }}_subject_{{ $subject->id }}"
                    placeholder=""
                    class="ml-2 block w-full border rounded hidden"> -->

            </div>
            @endforeach

        </div>
    </div>
    @endforeach



</div>

<!-- Agreement Section -->
@if (!$values)
<div class="bg-blue-100 p-4 rounded-lg mb-6">
    <p class="text-gray-700">
    Please note that by accepting the Terms and Conditions, you accept the commission charged by Bridgeminds for our service, kindly check and agree to the following: <span class="text-red-500">*</span>
    </p>

    <!-- Checkbox 1: Terms and Conditions -->
    <div class="mt-2">
        <input type="checkbox" id="agree_terms" name="agree_terms" value="1">

        <label for="agree-terms" class="ml-2 text-gray-800">I have read, understood and agree to the terms and conditions.
            <a href="{{ route('terms-condition.show','tutors-tc') }}" target="_blank" class="text-blue-500 underline">(Read Here)</a>
        </label>
        <div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1"></div>

    </div>

    <!-- Checkbox 2: Notifications -->
    <div class="mt-2">
        <input type="checkbox" id="agree_notifications" name="agree_notifications" value="1">
        <label for="agree-notifications" class="ml-2 text-gray-800">I agree to receiving communication via SMS, Whatsapp and emails with regard to tuition assignments.</label>
        <div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1"></div>

    </div>

    <!-- Checkbox 3: Confirmation -->
    <div class="mt-2">
        <input type="checkbox" id="confirm_info" name="confirm_info" value="1">
        <label for="confirm-info" class="ml-2 text-gray-800">I confirm that the information provided is true, accurate and complete to the best of my knowledge.</label>
            <div class="x-input-error text-sm text-red-600 dark:text-red-400 space-y-1"></div>

    </div>
</div>
@endif
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Get all grade type checkboxes
        const gradeTypeCheckboxes = document.querySelectorAll('.gradeType-checkbox');

        gradeTypeCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const gradesDiv = document.getElementById(`grades-${this.value}`);
                // Show or hide grades based on the checkbox state
                gradesDiv.style.display = this.checked ? 'block' : 'none';
            });
        });

        // Get all grade checkboxes
        const gradeCheckboxes = document.querySelectorAll('.grade-checkbox');

        gradeCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const subjectsDiv = document.getElementById(`subjects-${this.value}`);
                // Show or hide subjects based on the checkbox state
                subjectsDiv.style.display = this.checked ? 'block' : 'none';
            });
        });
    });
    document.addEventListener('DOMContentLoaded', () => {
        // Find all textareas with the data-charcount attribute.
        document.querySelectorAll('[data-charcount]').forEach(textarea => {
            // Use the maxlength attribute to know the maximum allowed characters.
            const max = textarea.getAttribute('maxlength');

            // Find the corresponding counter display.
            // Assumes the counter is in a sibling element with class 'char-count-display'
            const counter = textarea.closest('.char-count-wrapper')
                .querySelector('.char-count-display');

            // Update counter on each input event.
            textarea.addEventListener('input', () => {
                counter.textContent = `${textarea.value.length} of ${max} max characters`;
            });

            // Initialize the counter.
            counter.textContent = `${textarea.value.length} of ${max} max characters`;
        });
    });

    function toggleSpecifyInput(checkbox, gradeId, subjectId, subjectname) {
        const check = subjectname.includes('specify');
        if (check) {
            const inputId = `grade_${gradeId }_subject_${subjectId}`;

            if (checkbox.checked) {
                // Create the input element
                const inputField = document.createElement('input');
                inputField.type = 'text';
                inputField.className = 'ml-2 block w-full border rounded';
                inputField.name = `grade_${gradeId }_subject_${subjectId}`; // Adjust the 'name' as needed
                inputField.placeholder = "";
                inputField.id = inputId;

                // Insert the input into the DOM (adjust the parent selector as needed)
                const parentContainer = checkbox.closest('.parent-container'); // Replace with actual selector
                if (parentContainer) {
                    parentContainer.appendChild(inputField);
                }
            } else {
                // Remove the input element if it exists
                const existingInput = document.getElementById(inputId);
                if (existingInput) {
                    existingInput.remove();
                }
            }
        }
    }

    function toggleOtherEducationInput() {
        const inputId = 'other-education-level-input';
        const container = document.getElementById('other-education-level-container');

        // Remove the input if it exists
        const existingInput = document.getElementById(inputId);
        if (existingInput) {
            existingInput.remove();
        }

        // Check if the "Other" option is selected
        const otherRadio = document.getElementById('other-education-level');
        if (otherRadio.checked) {
            const inputField = document.createElement('input');
            inputField.type = 'text';
            inputField.name = 'other_education_level';
            inputField.placeholder = '';
            inputField.id = inputId;
            inputField.classList.add('mt-2', 'w-full', 'rounded-md', 'border-gray-300');

            container.appendChild(inputField);
        }
    }
  
</script>