@extends('components.dashboard.layouts.master')

@section('title')
    {{ __('Add Course') }}
@endsection
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@endpush

@section('content')
    <div class="app-content content">
        <div class="content-overlay"></div>
        <div class="header-navbar-shadow"></div>
        <div class="content-wrapper">
            <div class="content-header row"></div>
            <div class="content-body">
                <section class="users-list-wrapper">
                    <x-dashboard.layouts.breadcrumb now="{{ __('Add Course') }}">
                        <x-slot:name>{{ __('Courses List') }}</x-slot:name>
                        <x-slot:route>{{ route('teacher.courses.index') }}</x-slot:route>
                    </x-dashboard.layouts.breadcrumb>

                    <section id="basic-form-layouts">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title" id="basic-layout-form">{{ __('Add Course') }}</h4>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-body">
                                            <form id="courseForm" action="{{ route('teacher.courses.store') }}" method="POST" enctype="multipart/form-data">
                                                @csrf

                                                <div class="form-group">
                                                    <label for="title">{{ __('Title') }}</label>
                                                    <input type="text" id="title" name="title" class="form-control" value="{{ old('title') }}" required>
                                                    @error('title')
                                                    <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>
                                                <div class="form-group">
                                                    <label for="description">{{ __('Description') }}</label>
                                                    <textarea id="description" name="description" class="form-control" rows="3" required>{{ old('description') }}</textarea>
                                                    @error('description')
                                                    <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <div class="form-group">
                                                    <label for="status">{{ __('Status') }}</label>
                                                    <select name="status" id="status" class="form-control" required>
                                                        <option value="1" {{ old('status') == '1' ? 'selected' : '' }}>{{ __('Active') }}</option>
                                                        <option value="0" {{ old('status') == '0' ? 'selected' : '' }}>{{ __('Inactive') }}</option>
                                                    </select>
                                                    @error('status')
                                                    <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <div class="form-group">
                                                    <label for="grades">{{ __('Grades') }}</label>
                                                    <select name="grades[]" id="grades" class="form-control select2" multiple required>
                                                        @foreach ($grades as $grade)
                                                            <option value="{{ $grade->id }}" {{ collect(old('grades'))->contains($grade->id) ? 'selected' : '' }}>
                                                                {{ $grade->local_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('grades')
                                                    <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>

                                                <div class="form-group">
                                                    <label for="standardized_test_id">{{ __('Standardized Test') }}</label>
                                                    <select name="standardized_test_id" id="standardized_test_id" class="form-control"  required>
                                                        @foreach ($standardizedTests as $standardizedTest)
                                                            <option value="{{ $standardizedTest->id }}" {{ old('grades') == $grade->id ? 'selected' : '' }}>
                                                                {{ $standardizedTest->name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                    @error('grades')
                                                    <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>


                                                <div class="form-group">
                                                    <label for="image">{{ __('Image') }}</label>
                                                    <input type="file" name="image" id="image" class="form-control" accept="image/*">
                                                    @error('image')
                                                    <small class="text-danger">{{ $message }}</small>
                                                    @enderror
                                                </div>


                                                <div class="form-actions">
                                                    <button id="submitCourseForm" type="submit" class="btn btn-primary">
                                                        <i class="la la-check-square-o"></i> {{ __('Save') }}
                                                    </button>
                                                    <a href="{{ route('teacher.courses.index') }}" class="btn btn-danger text-white mr-1">
                                                        <i class="ft-x"></i> {{ __('Cancel') }}
                                                    </a>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </section>
            </div>
        </div>
    </div>
@endsection
    @section('script')
        @parent
        <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#grades').select2({
                    placeholder: "{{ __('Select Grades') }}",
                    width: '100%'
                });
            });
            document.getElementById('courseForm').addEventListener('submit', function (e) {
                let btn = document.getElementById('submitCourseForm');
                btn.disabled = true;
                btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
            });
        </script>
    @endsection