@extends('layouts.admin.app')

@section('title', __('trans.chapter.edit_chapter'))

@section('content')
    <div class="card">

        <h5 class="card-header">
            <a href="@if ($chapter->course_id) {{ url('admin/chapters?course_id=') }}{{ $chapter->course_id }}@else{{ url('admin/chapters') }} @endif"
                class="btn
                rounded-pill btn-label-primary">
                <i class="ti me-2 ti-arrow-forward-up"></i> {{ __('trans.chapter.title') }}
            </a>
            @yield('title')
        </h5>

        <div class="card-body">

            <form action="{{ route('chapters.update', $chapter->id) }}" method="POST">
                @method('put')
                @csrf
                <div class="row">

                    <div class="col-md-12 mb-3">
                        <label class="form-label">{{ __('trans.chapter.name') }} <b class="text-danger">*</b></label>
                        <input type="text" class="form-control" required name="title"
                            value="{{ old('title', $chapter->title) }}" placeholder="{{ __('trans.chapter.name') }}" />
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label">{{ __('trans.chapter.category_id') }} <b class="text-danger">*</b></label>
                        <input type="hidden" name="category_id" value="{{ $course->category->id }}">
                        <input type="text" class="form-control" required value="{{ $course->category->name }}"
                            placeholder="{{ __('trans.chapter.category_id') }}" readonly />
                    </div>

                    <div class="col-md-12 mb-3">
                        <label class="form-label">{{ __('trans.chapter.course_id') }} <b class="text-danger">*</b></label>
                        <input type="hidden" name="course_id" value="{{ $course->id }}">
                        <input type="text" class="form-control" required value="{{ $course->title }}"
                            placeholder="{{ __('trans.chapter.course_id') }}" readonly />
                    </div>

                    {{-- <div class="col-md-12 mb-3">
                        <label class="form-label">{{ __('trans.chapter.category_id') }} <b class="text-danger">*</b></label>
                        <select name="category_id" class="select2 form-select" id="category" required>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @selected(old('category_id', $chapter->category_id) == $category->id)>{{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>


                    <div class="col-md-12 mb-3">
                        <label class="form-label">{{ __('trans.chapter.course_id') }} <b class="text-danger">*</b></label>
                        <select class="select2 form-select" name="course_id" id="course" required></select>
                    </div> --}}


                    <div class="col-md-12 mt-3">
                        <button class="btn btn-primary btn-create w-100">{{ __('trans.save') }}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('admin/vendor/libs/select2/select2.css') }}" />
@endsection

@section('js')
    <script src="{{ asset('admin/vendor/libs/select2/select2.js') }}"></script>
    <script>
        $('.select2').select2();

        // $(window).on('load', function() {
        //     $('#category').trigger('input');
        // });

        // $('#category').on('input', function() {
        //     var MyVal = $(this).val();
        //     $.ajax({
        //         type: 'get',
        //         url: "{{ url('admin/ajax/courses') }}",
        //         data: {
        //             category_id: MyVal,
        //         },
        //         beforeSend: function() {
        //             $("#course").html('');
        //         },
        //     }).done(function(res) {
        //         $.each(res.data, function(key, val) {
        //             $("#course").append(
        //                 "<option value='" + val.id + "'>" +
        //                 val.title + "</option>");
        //         });
        //         $('#course').trigger('input');
        //     });
        // });
    </script>
@endsection