@extends('layouts.admin.app')
@section('title', __('trans.specialty.add_new'))

@section('content')
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('trans.specialty.add_new') }}</h3>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.specialties.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <x-inputs.field name="name" label="{{ __('trans.specialty.name') }}" required col="6" />
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('trans.education_systems.name') }} <span class="text-danger">*</span></label>
                            <select name="education_system_id" id="education_system_id" class="form-select select2" required>
                                <option value="">{{ __('trans.all') }}</option>
                                @foreach($systems as $system)
                                    <option value="{{ $system->id }}">{{ $system->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('trans.stage.title') }} <span class="text-danger">*</span></label>
                            <select name="stage_id" id="stages" class="form-select select2" required>
                                <option value="">{{ __('trans.all') }}</option>
                            </select>
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">{{ __('trans.grade.title') }}</label>
                            <select id="grades" class="form-select select2" multiple>
                            </select>
                        </div>

                        <div class="col-md-12 mb-3">
                            <label class="form-label">{{ __('trans.subject.title') }} <span class="text-danger">*</span></label>
                            <select name="subjects[]" id="subjects" class="form-select select2" multiple required>
                            </select>
                        </div>
                    </div>

                    <div class="mt-4">
                        <x-inputs.btn type="submit" text="{{ __('trans.save') }}" action="save" />
                        <a href="{{ route('admin.specialties') }}" class="btn btn-secondary">{{ __('trans.back') }}</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@once
    @push('css')
        <link rel="stylesheet" href="/admin/vendor/libs/select2/select2.css" />
    @endpush
    @push('js')
        <script src="/admin/vendor/libs/select2/select2.js"></script>
    @endpush
@endonce

@push('js')
<script>
    $(document).ready(function() {
        $('.select2').select2({ dir: "rtl" });

        $('#education_system_id').on('change', function() {
            let system_id = $(this).val();
            $('#stages, #grades, #subjects').val(null).trigger('change').empty();
            
            if(system_id) {
                $.post("{{ route('admin.specialties.getStages') }}", { _token: "{{ csrf_token() }}", system_id: system_id }, function(data) {
                    $('#stages').append(new Option("{{ __('trans.all') }}", ""));
                    data.forEach(item => {
                        $('#stages').append(new Option(item.name, item.id));
                    });
                });
            }
        });

        $('#stages').on('change', function() {
            let stage_ids = $(this).val();
            $('#grades, #subjects').val(null).trigger('change').empty();
            
            if(stage_ids && stage_ids.length > 0) {
                $.post("{{ route('admin.specialties.getGrades') }}", { _token: "{{ csrf_token() }}", stage_ids: stage_ids }, function(data) {
                    data.forEach(item => {
                        $('#grades').append(new Option(item.name, item.id));
                    });
                });
            }
        });

        $('#grades').on('change', function() {
            let grade_ids = $(this).val();
            let selected_subjects = $('#subjects').val() || [];
            $('#subjects').empty();
            
            if(grade_ids && grade_ids.length > 0) {
                $.post("{{ route('admin.specialties.getSubjects') }}", { _token: "{{ csrf_token() }}", grade_ids: grade_ids }, function(data) {
                    data.forEach(item => {
                        let isSelected = selected_subjects.includes(item.id.toString());
                        let option = new Option(item.name, item.id, isSelected, isSelected);
                        $('#subjects').append(option);
                    });
                    $('#subjects').trigger('change');
                });
            }
        });
    });
</script>
@endpush