{{-- @extends('teacher.layouts.layouts')

@section('content')
    <style>
        /* Custom styles for checkboxes and forms */
        .form-check-input:checked {
            background-color: #007bff;
            /* Button color */
            border-color: #007bff;
        }

        .form-container {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
        }

        .form-header {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-check {
            margin-left: 20px;
        }

        .form-section {
            margin-bottom: 30px;
        }

        .form-section h4 {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
            border-bottom: 2px solid #007bff;
            padding-bottom: 5px;
        }

        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
            padding: 10px 20px;
            font-size: 16px;
        }

        .curriculum-row {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .curriculum-item {
            flex: 1 1 calc(25% - 10px);
            box-sizing: border-box;
        }
    </style>
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <div class="mt-5 d-flex justify-content-center">
        <div class="w-75 form-container">
            <div class="form-header">Create Teacher</div>

            <!-- Form for Educational Stage Selection -->
            <div class="form-section">
                <h4>Select Educational Stages</h4>
                <form id="stage-form">
                    @csrf
                    <div class="form-group">
                        <div id="educational-stage-checkboxes">
                            @foreach ($stages as $stage)
                                <div class="form-check">
                                    <input type="checkbox" class="form-check-input" id="stage_{{ $stage->id }}"
                                        name="educational_stage_id[]" value="{{ $stage->id }}"
                                        @if (in_array($stage->id, $selectedStages)) checked @endif>
                                    <label class="form-check-label" for="stage_{{ $stage->id }}">
                                        {{ $stage->name }}
                                    </label>
                                </div>
                            @endforeach
                        </div>
                    </div>
                    <button type="button" id="filter-stages" class="btn btn-primary">Filter Stages</button>
                </form>
            </div>

            <!-- Stage Years and Curricula Form -->
            <div id="stage-year-section" class="form-section" style="display:none;">
                <h4>Select Stage Years</h4>
                <form id="stage-year-form">
                    @csrf
                    <div id="selected-stages-container"></div>

                    <div class="form-group">
                        <div id="stage-years-checkboxes">
                            <!-- Stage years will be injected here by AJAX -->
                        </div>
                    </div>
                    <button type="button" id="show-curricula" class="btn btn-primary">Show Curricula</button>
                </form>
            </div>

            <!-- Display Curricula based on selected stage years -->
            <div id="curricula-section" class="form-section" style="display:none;">
                <h4>Curricula for Selected Stage Years</h4>
                <form id="curricula-form">
                    @csrf
                    <div id="curricula-container" class="curriculum-row">
                        <!-- Curricula will be injected here by AJAX -->
                    </div>
                    <input type="hidden" name="selected_stage_year_ids" id="selected-stage-years">
                </form>
            </div>

            <!-- Other form fields -->
            <div id="teacher-form" class="form-section">
                <form method="POST" action="{{ route('teacher.teachers.store') }}" id="main-form">
                    @csrf
                    <!-- Add hidden fields to your form -->
                    <input type="hidden" name="educational_stage_ids" id="educational-stage-ids">
                    <input type="hidden" name="curriculum_ids" id="curriculum-ids">
                    <input type="hidden" name="stage_year_ids" id="stage-year-ids">

                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" class="form-control" id="name" name="name" value="{{ old('name') }}"
                            required>
                    </div>

                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email" value="{{ old('email') }}"
                            required>
                    </div>

                    <div class="form-group">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>

                    <div class="form-group">
                        <label for="password_confirmation">Confirm Password</label>
                        <input type="password" class="form-control" id="password_confirmation" name="password_confirmation"
                            required>
                    </div>

                    <div class="form-group">
                        <label for="phone">Phone</label>
                        <input type="tel" class="form-control" id="phone" name="phone"
                            value="{{ old('phone') }}">
                    </div>

                    <div class="form-group">
                        <label for="address">Address</label>
                        <input type="text" class="form-control" id="address" name="address"
                            value="{{ old('address') }}">
                    </div>

                    <div class="form-group">
                        <label for="age">Age</label>
                        <input type="text" class="form-control" id="age" name="age"
                            value="{{ old('age') }}">
                    </div>
                    <div class="form-group">
                        <label for="zoom_link">Zoom Link</label>
                        <input type="url" class="form-control" id="zoom_link" name="zoom_link" value="{{ old('zoom_link') }}">
                    </div>

                    @if ($errors->any())
                        <div class="alert alert-danger">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <button type="submit" class="btn btn-primary">Create</button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
    $(document).ready(function() {
    // Fetch stage years based on selected educational stages
    $('#filter-stages').click(function() {
        let selectedStages = [];
        $('input[name="educational_stage_id[]"]:checked').each(function() {
            selectedStages.push(parseInt($(this).val())); // Convert to integer
        });

        $.ajax({
            url: '{{ route('teacher.teachers.get-stage-years') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                educational_stage_ids: selectedStages
            },
            success: function(response) {
                $('#stage-years-checkboxes').html(response.stageYearsHtml);
                $('#selected-stages-container').html(response.selectedStagesHtml);
                $('#stage-year-section').show();
            },
            error: function(xhr) {
                console.error('Error fetching stage years:', xhr.responseText);
                alert('An error occurred while fetching stage years. Please check the console for details.');
            }
        });
    });

    // Fetch curricula based on selected stage years
    $('#show-curricula').click(function() {
        let selectedStageYears = [];
        $('input[name="stage_year_ids[]"]:checked').each(function() {
            selectedStageYears.push(parseInt($(this).val())); // Convert to integer
        });

        $.ajax({
            url: '{{ route('teacher.teachers.get-curricula') }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                stage_year_ids: selectedStageYears
            },
            success: function(response) {
                $('#curricula-container').html(response.curriculaHtml);
                $('#curricula-section').show();
                $('#selected-stage-years').val(JSON.stringify(selectedStageYears));
            },
            error: function(xhr) {
                console.error('Error fetching curricula:', xhr.responseText);
                alert('An error occurred while fetching curricula. Please check the console for details.');
            }
        });
    });

    // Handle form submission
    $('#main-form').submit(function(e) {
        e.preventDefault(); // Prevent default form submission

        let selectedStages = [];
        $('input[name="educational_stage_id[]"]:checked').each(function() {
            selectedStages.push(parseInt($(this).val())); // Convert to integer
        });

        let selectedCurricula = [];
        $('input[name="curriculum_ids[]"]:checked').each(function() {
            selectedCurricula.push(parseInt($(this).val())); // Convert to integer
        });

        let selectedStageYears = [];
        $('input[name="stage_year_ids[]"]:checked').each(function() {
            selectedStageYears.push(parseInt($(this).val())); // Convert to integer
        });

        // Set hidden fields
        $('#educational-stage-ids').val(selectedStages); // Use array notation
        $('#curriculum-ids').val(selectedCurricula); // Use array notation
        $('#stage-year-ids').val(selectedStageYears); // Use array notation

        // Serialize the form data including hidden fields
        let formData = $(this).serializeArray();

        // Filter out existing array fields to avoid duplication
        formData = formData.filter(item => !['educational_stage_ids', 'curriculum_ids', 'stage_year_ids'].includes(item.name));

        // Add updated array fields
        formData.push({name: 'educational_stage_ids[]', value: selectedStages});
        formData.push({name: 'curriculum_ids[]', value: selectedCurricula});
        formData.push({name: 'stage_year_ids[]', value: selectedStageYears});

        // Log the data to ensure it's correct
        console.log('Form Data:', formData);

        $.ajax({
            url: $(this).attr('action'),
            method: 'POST',
            data: $.param(formData, true), // Serialize formData array correctly
            success: function(response) {
                alert('Teacher created successfully!');
                window.location.href = response.redirectUrl;
            },
            error: function(xhr) {
                console.error('Form submission error:', xhr.responseText);
                let errors = xhr.responseJSON.errors;
                let errorMessages = Object.values(errors).flat().join('<br>');
                $('.alert-danger').html(errorMessages).show();
            }
        });
    });
});

    </script>
@endsection --}}
{{-- @extends('teacher.layouts.layouts')

@section('content') --}}
    <form id="input-form">
        <div class="mt-5 input-group">
            <input type="text" name="name1[]" placeholder="Name 1">
            <input type="text" name="name2[]" placeholder="Name 2">
            <input type="text" name="name3[]" placeholder="Name 3">
        </div>
        <button type="button" id="add-item">Add Item</button>
        <button type="submit">Submit</button>
    </form>
    <script>
        $(document).ready(function() {
            $('#add-item').click(function() {
                // Clone the input group
                var newInputGroup = $('.input-group:first').clone();

                // Clear the values in the cloned input group
                newInputGroup.find('input').val('');

                // Append the cloned input group to the form
                $('#input-form').append(newInputGroup);
            });

            $('#input-form').submit(function(event) {
                event.preventDefault(); // Prevent the default form submission

                var formData = [];

                // Iterate through each input group
                $('.input-group').each(function() {
                    var itemData = {
                        name1: $(this).find('input[name="name1[]"]').val(),
                        name2: $(this).find('input[name="name2[]"]').val(),
                        name3: $(this).find('input[name="name3[]"]').val(),
                    };
                    formData.push(itemData);
                });

                console.log(formData);


            });
        });
    </script>
{{-- @endsection --}}