@extends('teacher.layouts.layouts')

@section('content')
    @push('css')
        <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>
    @endpush
    <div class="mt-5 d-flex justify-content-center">
        <div class="w-75 form-container">
            <div class="form-header">Create Teacher</div>

            <!-- Other form fields -->
            <div id="teacher-form" class="form-section">
                <form method="POST" action="{{ route('teacher.teachers.store') }}" enctype="multipart/form-data">
                    @csrf

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

                    <!-- Add hidden fields to your form -->


                    {{-- <select name="educational_stage_id[]" class="form-control" id="educationalStageId">
                        @foreach ($stages as $stage)
                            <option value="{{ $stage->id }}">{{ $stage->name }}</option>
                        @endforeach
                    </select>
                    <select  name="stage_year_id[]" class="form-control stageYear" id="stageYear" multiple>
                        <option></option>
                    </select>
                    <select name="curriculum_id[]" class="form-control curriculumId" id="curriculumId" multiple>
                        <option></option>
                    </select> --}}

                    <div id="dynamic-selects">
                        <div class="mt-5 input-group">
                            <select name="educational_stage_id[]" class="form-control educationalStageId"
                                id="educationalStageId">
                                <option value="">Select Educational Stage</option>
                                @foreach ($stages as $stage)
                                    <option value="{{ $stage->id }}">{{ $stage->name }}</option>
                                @endforeach
                            </select>
                            <select name="stage_year_id[]" class="form-control stageYear" id="stageYear">
                                <option value="">Select Stage Year</option>
                            </select>
                            <select name="curriculum_id[]" class="form-control curriculumId" id="curriculumId">
                                <option value="">Select Curriculum</option>
                            </select>
                            <input type="hidden" id="Educational" class="Educational" name="educational_data[]">
                            <button type="button" class="btn btn-danger remove-selects"><i class="fas fa-trash-alt"></i>
                            </button>
                        </div>
                    </div>

                    <button type="button" id="add-selects" class="mt-3 btn btn-secondary">Add More</button>

                    <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="title">Title</label>
                        <input type="text" class="form-control" id="title" name="title" value="{{ old('title') }}"
                            required>
                    </div>

                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="4" required>{{ old('description') }}</textarea>
                    </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>
                    <!-- Image Upload Field -->
                    <div class="form-group">
                        <label for="image">Profile Image</label>
                        <input type="file" class="form-control" id="image" name="image">
                        {{-- @if (isset($teacher) && $teacher->image)
                            <img src="{{ getImageassetUrl($teacher->image) }}" alt="Profile Image" class="image-preview" style="max-width: 100px;">
                        @endif --}}
                    </div>

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

@endsection


@push('js')
    @include('teacher.shared.input_group');
@endpush