@extends('backend.layouts.app')
@section('content')
    <div class="card page-container" id="page-container">
        <div class="card-body p-lg-25 content-wrap">
            <div class="toolbar" id="kt_toolbar">
                <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                    <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                        data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                        class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                        <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">
                            @if ($method == 'PUT') {{ TranslationManager::translate('Edit Course') }} @else {{ TranslationManager::translate('New Course') }} @endif
                        </h1>
                        <span class="h-20px bcourse-gray-200 bcourse-start mx-4"></span>
                        <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('admin.index') }}"
                                    class="text-muted text-hover-primary">{{ TranslationManager::translate('Home') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-muted">
                                <a href="{{ route('admin.courses.index') }}"
                                    class="text-muted text-hover-primary">{{ TranslationManager::translate('Courses') }}</a>
                            </li>
                            <li class="breadcrumb-item">
                                <span class="bullet bg-gray-200 w-5px h-2px"></span>
                            </li>
                            <li class="breadcrumb-item text-dark">
                                @if ($method == 'PUT') {{ TranslationManager::translate('Edit Course') }} @else {{ TranslationManager::translate('New Course') }} @endif
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--begin::Layout-->
            <div class="d-flex flex-column flex-lg-row mb-17">
                <div class="flex-lg-row-fluid me-0 me-lg-20">
                    <form action="{{ $action }}" class="form mb-15" method="POST" id="kt_careers_form"
                        enctype='multipart/form-data'>
                        @csrf
                        @if ($method == 'PUT')
                            @method('put')
                        @endif

                        <div class="row mb-5">
                            @foreach ($languages as $language)
                                <div class="col-md-6 fv-row" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif >
                                    <label class="required fs-5 fw-bold mb-2">
                                        {{ TranslationManager::translate('Name', $language->code) }}
                                    </label>
                                    <input type="text" class="form-control form-control-solid"
                                        value="{{ $course->getTranslation('name',  $language->code, false) }}"
                                        placeholder="{{ TranslationManager::translate('Name', $language->code) }}"
                                        name="name[{{ $language->code }}]" />
                                </div>
                            @endforeach
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Category') }}</label>
                                <select class="form-select form-select-solid" data-control="select2" data-hide-search="true"
                                    name="category_id" id="category_id">
                                    <option value="">{{ TranslationManager::translate('Select') }}</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ $category->id == $course->category_id ? 'selected' : '' }}>
                                            {{ $category->name }}</option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Instructor') }} </label>
                                <select class="form-select form-select-solid" data-control="select2" data-hide-search="true"
                                    name="user_id" id="user_id">
                                    <option value="">{{ TranslationManager::translate('Select') }}</option>
                                    @foreach ($instructors as $instructor)
                                        <option value="{{ $instructor->id }}"
                                            {{ $instructor->id == $course->user_id ? 'selected' : '' }}>
                                            {{ $instructor->getName() }}</option>
                                    @endforeach
                                </select>
                                @error('user_id')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Level') }}</label>
                                <select class="form-select form-select-solid" data-control="select2" data-hide-search="true"
                                    name="level_id" id="level_id">
                                    <option value="">{{ TranslationManager::translate('Select') }}</option>
                                    @foreach ($levels as $level)
                                        <option value="{{ $level->id }}"
                                            {{ $level->id == $course->level_id ? 'selected' : '' }}>
                                            {{ $level->name }}</option>
                                    @endforeach
                                </select>
                                @error('level_id')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6 fv-row">
                                <label class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Price') }}</label>
                                <input type="number" class="form-control form-control-solid" value="{{ $course->price }}"
                                    placeholder="{{ TranslationManager::translate('Please Enter Price') }}" name="price" />
                                @error('price')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="fs-5 fw-bold mb-2">{{ TranslationManager::translate('Price Before Discount') }}</label>
                                <input type="number" class="form-control form-control-solid" value="{{ $course->price_before_discount }}"
                                    placeholder="{{ TranslationManager::translate('Please Enter Course Price Before Discount') }}" name="price_before_discount" />
                                @error('price_before_discount')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>

                            <div class="col-md-6 fv-row">
                                <label class="fs-5 fw-bold mb-2">{{ TranslationManager::translate('whatsapp group link') }}</label>
                                <input type="text" class="form-control form-control-solid" value="{{ $course->whatsapp }}"
                                    placeholder="{{ TranslationManager::translate('Please Enter whatsapp group link') }}" name="whatsapp" />
                                @error('whatsapp')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('Type') }}</label>
                                <select class="form-select form-select-solid" data-control="select2"
                                    data-hide-search="false" name="type">
                                    <option value="course" {{ ($course->type == 'course') ? 'selected' : '' }}>
                                        {{ TranslationManager::translate('Course') }}
                                    </option>
                                    <option value="diploma" {{ ($course->type == 'diploma') ? 'selected' : '' }}>
                                        {{ TranslationManager::translate('Diploma') }}
                                    </option>
                                </select>
                            </div>

                            <div class="col-md-6 fv-row">
                                <label class="fs-6 fw-bold mb-2">{{ TranslationManager::translate('Certificate Validity (Years)') }}</label>
                                <input type="number" min="1" max="99" class="form-control form-control-solid"
                                    value="{{ $course->validity_years }}"
                                    placeholder="{{ TranslationManager::translate('Leave empty to use site default') }}"
                                    name="validity_years" />
                                @error('validity_years')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>


                        
                        @foreach ($languages as $language)
                            <div class="row mb-5" @if ($language->code == 'ar') dir="rtl" @else dir="ltr" @endif >
                                <div class="col-md-12 fv-row">
                                    <label
                                        class="required fs-5 fw-bold mb-2">{{ TranslationManager::translate('Description', $language->code) }}</label>
                                    <textarea class="form-control form-control-solid ckeditor"
                                        placeholder="{{ TranslationManager::translate('Description', $language->code) }}"
                                        name="description[{{ $language->code }}]">{{ $course->getTranslation('description',  $language->code, false) }}</textarea>
                                    @error("description.$language->code")
                                        <span class="error">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>
                        @endforeach

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Introduction Image') }}</label>
                                <input type="file" class="form-control form-control-solid" name="introduction_image" />
                                @error('introduction_image')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            @if ($course->id)
                                <div class="col-md-6 fv-row">
                                    <img src="{{ $course->getIntroductionImage() }}" alt="" width="100px">
                                </div>
                            @endif
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Introduction Video Type') }}</label>
                                <select class="form-control form-control-solid" name="video_type">
                                    <option value="bunny" {{ ($course->video_type == 'bunny') ? 'selected' : '' }}>
                                        {{ TranslationManager::translate('Bunny Video ID') }}
                                    </option>
                                    <option value="iframe" {{ ($course->video_type == 'iframe') ? 'selected' : '' }}>
                                        {{ TranslationManager::translate('Iframe') }}
                                    </option>
                                </select>
                                @error('video_type')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <label class="required fs-6 fw-bold mb-2">{{ TranslationManager::translate('Introduction Video') }}</label>
                                <input type="text" class="form-control form-control-solid" name="introduction_video" value="{{ $course->introduction_video }}" />
                                @error('introduction_video')
                                    <span class="error">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                            <div class="col-md-6 fv-row">
                                @if ($course->getIntroductionVideo() != NULL)
                                    <div class="mt-5">
                                        <div class="video-container">
                                            @if ($course->video_type == 'bunny')
                                                <iframe
                                                    src="{{ $course->getIntroductionVideo() }}"
                                                    width="640"
                                                    height="360"
                                                    frameborder="0"
                                                    allowfullscreen
                                                    allow="autoplay; fullscreen; picture-in-picture; encrypted-media">
                                                </iframe>
                                            @else
                                                {!! $course->getIntroductionVideo() !!}
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="row mb-5">
                            <div class="col-md-6 fv-row">
                                <div class="d-flex flex-stack">
                                    <label class="form-check form-switch form-check-custom form-check-solid">
                                        <input class="form-check-input" type="checkbox" name="is_trending"
                                            value="1" {{ $course->is_trending == 1 ? 'checked' : '' }}>
                                        <span class="form-check-label fw-bold">
                                            {{ TranslationManager::translate('Is in best courses?') }}
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>


                        <div class="separator mb-8"></div>
                        <button type="submit" class="btn btn-primary" id="kt_careers_submit_button">
                            <span class="indicator-label">{{ TranslationManager::translate('Submit') }}</span>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            let user_id = "{{ $course->user_id }}";
            let category_id = "{{ $course->category_id }}";

            if (category_id != '') {
                getInstructors(category_id, user_id);
            }
            $('body').on('change', '#category_id', function() {
                let category_id = $(this).val();
                getInstructors(category_id);
            });
        });
    </script>
    <script>
        function getInstructors(categoryId, userId = null) {
            if (categoryId) {
                $.ajax({
                    url: "{{ route('ajax.category.instructors') }}",
                    type: "GET",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        category_id: categoryId
                    },
                    dataType: "json",
                    success: function(data) {
                        if (data) {
                            $('#user_id').empty();
                            $('#user_id').focus;
                            $('#user_id').append('<option value="">Select</option>');
                            let dataFromRequest = data['data'];

                            $.each(dataFromRequest, function(key, value) {
                                if (userId == value.id) {
                                    $('select[name="user_id"]').append('<option value="' + value.id +
                                        '" selected>' + value.name + '</option>');
                                } else {
                                    $('select[name="user_id"]').append('<option value="' + value.id +
                                        '">' + value.name + '</option>');
                                }
                            });
                        } else {
                            $('#user_id').empty();
                        }
                    }
                });
            } else {
                $('#group_id').empty();
            }
        }
    </script>
@endpush