@extends('layouts.admin.app')
@section('title', __('trans.student.edit') . ' [ ' . $student->name . ' ]')

@section('content')
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title">@yield('title')</h3>
            <a href="{{ route('admin.students') }}" class="btn btn-secondary">{{ __('trans.back') }}</a>
        </div>
        <div class="card-body">
            <form action="{{ route('admin.students.update', $student->id) }}" class="row" method="POST">@csrf @method('PUT')
                <div class="col-md-6 mb-4">
                    <x-inputs.field name="name" label="{{__('trans.student.name')}}" :value="$student->name" type="text" required />
                </div>

                <div class="col-md-6 mb-4">
                    <x-inputs.field name="email" label="{{__('trans.email')}}" :value="$student->email" type="email" />
                </div>

                <div class="col-md-6 mb-4">
                    <x-inputs.field name="phone" label="{{__('trans.student.phone')}}" :value="$student->phone" type="text" required />
                </div>

                <div class="col-md-6 mb-4">
                    <x-inputs.field name="password" label="{{__('trans.password')}}" type="password" help="{{__('trans.student.password_help')}}" />
                </div>

                <div class="col-md-3 mb-4">
                    <div class="mb-3">
                        <label class="form-label">{{ __('trans.education_systems.title') }}</label>
                        <select name="education_system_id" id="education_system_id" class="form-select" required>
                            <option value="">{{ __('trans.all') }}</option>
                            @foreach($systems as $system)
                                <option value="{{ $system->id }}" {{ $student->education_system_id == $system->id ? 'selected' : '' }}>{{ $system->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

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

                <div class="col-md-3 mb-4">
                    <div class="mb-3">
                        <label class="form-label">{{ __('trans.grade.title') }}</label>
                        <select name="grade_id" id="grade_id" class="form-select" required>
                            <option value="">{{ __('trans.all') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-3 mb-4">
                    <div class="mb-3">
                        <label class="form-label">{{ __('trans.track.title') }}</label>
                        <select name="track_id" id="track_id" class="form-select">
                            <option value="">{{ __('trans.all') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-6 mb-4">
                    <div class="mb-3">
                        <label class="form-label">{{ __('trans.teacher.status') }}</label>
                        <select name="suspended" id="suspended" class="form-select" required>
                            <option value="0" {{ (old('suspended') ?? $student->suspended) == 0 ? 'selected' : '' }}>{{ __('trans.teacher.active') }}</option>
                            <option value="1" {{ (old('suspended') ?? $student->suspended) == 1 ? 'selected' : '' }}>{{ __('trans.teacher.suspended') }}</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-12 mb-4 {{ (old('suspended') ?? $student->suspended) == 1 ? '' : 'd-none' }}" id="suspend_reason_div">
                    <x-inputs.field name="suspend_reason" label="{{__('trans.teacher.suspend_reason')}}" :value="old('suspend_reason') ?? $student->suspend_reason" type="textarea" />
                </div>

                <div class="col-md-12 mb-4">
                    <x-inputs.lfm :showClear="false" name="image" label="{{ __('trans.student.image') }}" type="image" id="student_image" :value="$student->image" />
                </div>

                <div class="col-md-12">
                    <x-inputs.btn type="submit" status="primary" text="{{__('trans.save')}}" action="save" />
                </div>
            </form>
        </div>
    </div>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        var currentStageId = "{{ $student->stage_id }}";
        var currentGradeId = "{{ $student->grade_id }}";
        var currentTrackId = "{{ $student->track_id }}";

        function loadStages(systemId, selectedId) {
            if (systemId) {
                $.get('{{ url("admin/get-stages") }}/' + systemId, function(data) {
                    $('#stage_id').html('<option value="">{{ __("trans.all") }}</option>');
                    $.each(data, function(key, value) {
                        $('#stage_id').append('<option value="' + value.id + '" ' + (value.id == selectedId ? 'selected' : '') + '>' + value.name + '</option>');
                    });
                    if (selectedId) loadGrades(selectedId, currentGradeId);
                });
            }
        }

        function loadGrades(stageId, selectedId) {
            if (stageId) {
                $.get('{{ url("admin/get-grades") }}/' + stageId, function(data) {
                    $('#grade_id').html('<option value="">{{ __("trans.all") }}</option>');
                    $.each(data, function(key, value) {
                        $('#grade_id').append('<option value="' + value.id + '" data-tracks="' + value.has_tracks + '" ' + (value.id == selectedId ? 'selected' : '') + '>' + value.name + '</option>');
                    });
                    if (selectedId) {
                        var hasTracks = $('#grade_id').find(':selected').data('tracks');
                        if (hasTracks) loadTracks(selectedId, currentTrackId);
                    }
                });
            }
        }

        function loadTracks(gradeId, selectedId) {
            if (gradeId) {
                $.get('{{ url("admin/get-tracks") }}/' + gradeId, function(data) {
                    $('#track_id').html('<option value="">{{ __("trans.all") }}</option>');
                    $.each(data, function(key, value) {
                        $('#track_id').append('<option value="' + value.id + '" ' + (value.id == selectedId ? 'selected' : '') + '>' + value.name + '</option>');
                    });
                });
            }
        }

        // Initial Load
        loadStages($('#education_system_id').val(), currentStageId);

        $('#education_system_id').on('change', function() {
            loadStages($(this).val());
            $('#grade_id').html('<option value="">{{ __("trans.all") }}</option>');
            $('#track_id').html('<option value="">{{ __("trans.all") }}</option>');
        });

        $('#stage_id').on('change', function() {
            loadGrades($(this).val());
            $('#track_id').html('<option value="">{{ __("trans.all") }}</option>');
        });

        $('#grade_id').on('change', function() {
            var hasTracks = $(this).find(':selected').data('tracks');
            if (hasTracks) {
                loadTracks($(this).val());
            } else {
                $('#track_id').html('<option value="">{{ __("trans.all") }}</option>');
            }
        });
        $('#suspended').on('change', function() {
            if ($(this).val() == '1') {
                $('#suspend_reason_div').removeClass('d-none');
            } else {
                $('#suspend_reason_div').addClass('d-none');
                $('textarea[name="suspend_reason"]').val('');
            }
        });
    });
</script>
@endpush