@extends('admin.layouts.app')
@section('title','Edit Course')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Edit</p>
            <a class="btn btn-sm btn-warning" href="{{route('course.index')}}">View All</a>
        </div>
        <div class="card rounded-0">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <form action="{{route('course.update', $Course->id)}}" method="post"
                              enctype="multipart/form-data">
                            @csrf
                            @method('PUT')
                            <div class="row">
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Title *</label>
                                    <input type="text"
                                           class="form-control rounded-0 @error('name') is-invalid @enderror"
                                           name="name"
                                           value="{{$Course->name}}">
                                    @error('name')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Short Title *</label>
                                    <input type="text"
                                           class="form-control rounded-0 @error('short_name') is-invalid @enderror"
                                           name="short_name"
                                           value="{{$Course->short_name}}">
                                    @error('short_name')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Category *</label>
                                    <select name="course_cate" id=""
                                            class="form-control @error('course_cate') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        @foreach ($courseCate as $cCate)
                                            <option
                                                value="{{$cCate->id}}" {{ $cCate->id == $Course->course_cate  ? 'selected' : '' }}>{{$cCate->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('course_cate')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Facilities *</label>
                                    <select name="faculty_id" id=""
                                            class="form-control @error('faculty_id') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        @foreach ($Facilities as $fac)
                                            <option
                                                value="{{$fac->id}}" {{ $fac->id == $Course->faculty_id ? 'selected' : '' }}>{{$fac->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('faculty_id')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Department *</label>
                                    <select name="dpt_cate" id=""
                                            class="form-control @error('dpt_cate') is-invalid @enderror">
                                        <option value="">Chose</option>
                                        @foreach ($Departments as $dpt)
                                            <option
                                                value="{{$dpt->id}}" {{ $dpt->id == $Course->dpt_cate ? 'selected' : '' }}>{{$dpt->name}}</option>
                                        @endforeach
                                    </select>
                                    @error('dpt_cate')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Campus *</label>
                                    <select name="campus" id=""
                                            class="form-control @error('dpt_cate') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        <option
                                            value="Green International  University" {{"Green International  University" == $Course->campus ? 'selected' : '' }}>
                                            Green International University
                                        </option>
                                    </select>
                                    @error('campus')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Duration *</label>
                                    <select name="duration" id=""
                                            class="form-control @error('duration') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        <option
                                            value="1 Year/30 Credit Hours" {{"1 Year/30 Credit Hours" == $Course->duration ? 'selected' : '' }}>
                                            1 Year/30 Credit Hours
                                        </option>
                                        <option value="2 Year" {{"2 Year" == $Course->duration ? 'selected' : '' }}>2 Year</option>
                                        <option
                                            value="4 Semesters, 2 years" {{"4 Semesters, 2 years" == $Course->duration ? 'selected' : '' }}>
                                            4 Semesters, 2 years
                                        </option>
                                        <option
                                            value="8 Semesters, 4 years" {{"8 Semesters, 4 years" == $Course->duration ? 'selected' : '' }}>
                                            8 Semesters, 4 years
                                        </option>
                                        <option
                                            value="6 Semesters (3 Years)" {{"6 Semesters (3 Years)" == $Course->duration ? 'selected' : '' }}>
                                            6 Semesters (3 Years)
                                        </option>
                                        <option
                                            value="10 Semesters, 5 years" {{"10 Semesters, 5 years" == $Course->duration ? 'selected' : '' }}>
                                            10 Semesters, 5 years
                                        </option>
                                    </select>
                                    @error('duration')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-12 col-sm-12 mb-3">
                                    <label class="form-label">Eligibility *</label>
                                    <textarea class="form-control rounded-0 @error('eligibility') is-invalid @enderror"
                                              name="eligibility">{{$Course->eligibility}}</textarea>
                                    @error('eligibility')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Credit Hours *</label>
                                    <input type="text"
                                           class="form-control rounded-0 @error('credit_hourse') is-invalid @enderror"
                                           name="credit_hourse"
                                           value="{{$Course->credit_hourse}}">
                                    @error('credit_hourse')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Fee *</label>
                                    <input type="text"
                                           class="form-control rounded-0 @error('fees') is-invalid @enderror"
                                           name="fees"
                                           value="{{$Course->fees}}">
                                    @error('fees')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Sorting *</label>
                                    <input type="number"
                                           class="form-control rounded-0 @error('sorting') is-invalid @enderror"
                                           name="sorting"
                                           value="{{$Course->sorting}}">
                                    @error('sorting')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3" id="banner_input">
                                    <label class="form-label">Banner *</label>
                                    <input type="file"
                                           class="form-control rounded-0 image-cropper-banner @error('banner') is-invalid @enderror"
                                           name="banner"
                                           value="{{$Course->banner}}">
                                    @error('banner')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Objective</label>
                                    <textarea name="objective" id="objective" cols="30" rows="3"
                                              class="form-control @error('objective') is-invalid @enderror">{{$Course->objective}}</textarea>
                                    @error('objective')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Program Overview *</label>
                                    <textarea name="program_overview" id="program_overview" cols="30" rows="3"
                                              class="form-control @error('program_overview') is-invalid @enderror">{{$Course->program_overview}}</textarea>
                                    @error('program_overview')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Why Choose? *</label>
                                    <textarea name="why_choose" id="why_choose" cols="30" rows="3"
                                              class="form-control @error('why_choose') is-invalid @enderror">{{$Course->why_choose}}</textarea>
                                    @error('why_choose')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-6 col-sm-12 mb-3">
                                    <label class="form-label">Career Scope & Opportunities *</label>
                                    <textarea name="role_scope" id="role_scope" cols="30" rows="3"
                                              class="form-control @error('role_scope') is-invalid @enderror">{{$Course->role_scope}}</textarea>
                                    @error('role_scope')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                <div class="col-md-12 col-sm-12 mb-3">
                                    <label class="form-label">Program Roadmap *</label>
                                    <textarea name="schma_study" id="schma_study" cols="30" rows="3"
                                              class="form-control @error('schma_study') is-invalid @enderror">{{$Course->schma_study}}</textarea>
                                    @error('schma_study')
                                    <strong class="text-danger">{{ $message }}</strong>
                                    @enderror
                                </div>
                                {{--FAQS--}}
                                <div class="col-md-12 col-sm-12 mb-3">
                                    <label class="form-label fw-bold">Frequently Asked Questions (FAQs)</label>
                                    <div class="bg-light p-4 border" id="faq-section">

                                        <div id="faq-container">
                                            @php
                                                $faqs = !empty($Course->faq) ? json_decode($Course->faq, true) : [];
                                            @endphp

                                            @if(count($faqs) > 0)
                                                @foreach($faqs as $index => $faq)
                                                    <div class="faq-item mb-4">
                                                        <div class="mb-3">
                                                            <label class="small text-muted mb-1">Question</label>
                                                            <input type="text" name="faq[{{ $index }}][question]"
                                                                   class="form-control rounded-0"
                                                                   value="{{ $faq['question'] ?? '' }}"
                                                                   placeholder="Enter FAQ question">
                                                        </div>
                                                        <div class="mb-3">
                                                            <label class="small text-muted mb-1">Answer</label>
                                                            <textarea name="faq[{{ $index }}][answer]"
                                                                      class="form-control rounded-0"
                                                                      rows="2"
                                                                      placeholder="Enter FAQ answer">{{ $faq['answer'] ?? '' }}</textarea>
                                                        </div>
                                                        <div class="text-end border-bottom pb-3">
                                                            <button type="button"
                                                                    class="btn btn-danger btn-sm rounded-0 remove-faq">
                                                                REMOVE
                                                            </button>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            @else
                                                <div class="faq-item mb-4">
                                                    <div class="mb-3">
                                                        <label class="small text-muted mb-1">Question</label>
                                                        <input type="text" name="faq[0][question]"
                                                               class="form-control rounded-0"
                                                               placeholder="Enter FAQ question">
                                                    </div>
                                                    <div class="mb-3">
                                                        <label class="small text-muted mb-1">Answer</label>
                                                        <textarea name="faq[0][answer]" class="form-control rounded-0"
                                                                  rows="2" placeholder="Enter FAQ answer"></textarea>
                                                    </div>
                                                    <div class="text-end border-bottom pb-3">
                                                        <button type="button"
                                                                class="btn btn-danger btn-sm rounded-0 remove-faq"
                                                                style="display:none;">REMOVE
                                                        </button>
                                                    </div>
                                                </div>
                                            @endif
                                        </div>

                                        <div class="mt-3">
                                            <button type="button" class="btn btn-dark btn-sm rounded-0 px-3"
                                                    id="add-faq">
                                                + ADD ANOTHER FAQ
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                {{--End FAQS--}}
{{--                                <div class="col-md-12 col-sm-12 mb-3">--}}
{{--                                    <label class="form-label">Meta Title</label>--}}
{{--                                    <input type="text" class="form-control rounded-0" name="meta_title"--}}
{{--                                           value="{{$Course->meta_title}}">--}}
{{--                                </div>--}}
{{--                                <div class="col-md-12 col-sm-12 mb-3">--}}
{{--                                    <label class="form-label">Meta Description</label>--}}
{{--                                    <textarea name="meta_description" id="" cols="30" rows="3"--}}
{{--                                              class="form-control rounded-0">{{$Course->meta_description}}</textarea>--}}
{{--                                </div>--}}
{{--                                <div class="col-md-12 col-sm-12 mb-3">--}}
{{--                                    <label class="form-label">Meta Keywords</label>--}}
{{--                                    <input type="text" class="form-control rounded-0" name="meta_keywords"--}}
{{--                                           value="{{ $Course->meta_keywords }}">--}}
{{--                                </div>--}}

                                <div class="col-md-12 mb-3 text-right">
                                    <input type="submit" class="btn btn-sm btn-success" value="Update">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {{-- Modal --}}
    <div class="modal fade bd-example-modal-lg imageCropBanner" id="model" tabindex="-1" role="dialog"
         aria-labelledby="cropperModalLabel" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header py-1 m-0 px-3 bg-dark-green">
                    <h5 class="modal-title text-white fw-bold " id="cropperModal">Banner</h5>
                    <button type="button" class="close btn-close" id="reset-image" data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
                <div class="modal-body p-0 m-0">
                    <div class="img-container">
                        <div class="row pe-4">
                            <div class="col-md-12">
                                <img class="cropper-image" id="previewImageBanner" src="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn  btn-sm bg-dark-green text-white crop" id="cropImageBanner">Crop
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- End: Modal --}}
@endsection
@push('js')
    <script src="{{asset('admin/ckeditor')}}/ckeditor.js"></script>
    <script src="{{asset('admin/ckeditor')}}/ckfinder/ckfinder.js"></script>
    <script src="{{asset('admin/ckeditor')}}/samples/js/sample.js"></script>
    <script src="{{asset('admin/js')}}/canvas-to-blob.min.js"></script>
    <script>
        $(document).ready(function () {
            var editor = CKEDITOR.replace('objective', {
                filebrowserUploadUrl: "{{route('course-ckeditor', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });
        $(document).ready(function () {
            var editor = CKEDITOR.replace('program_overview', {
                filebrowserUploadUrl: "{{route('course-ckeditor', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });
        $(document).ready(function () {
            var editor = CKEDITOR.replace('why_choose', {
                filebrowserUploadUrl: "{{route('course-ckeditor', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });
        $(document).ready(function () {
            var editor = CKEDITOR.replace('role_scope', {
                filebrowserUploadUrl: "{{route('course-ckeditor', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });
        $(document).ready(function () {
            var editor = CKEDITOR.replace('schma_study', {
                filebrowserUploadUrl: "{{route('course-ckeditor', ['_token' => csrf_token() ])}}",
                filebrowserUploadMethod: 'form'
            });
        });
        //Banner Cropper
        $(document).ready(function () {
            var $modal = $('.imageCropBanner');
            var image = document.getElementById('previewImageBanner');
            var cropper;
            $("body").on("change", ".image-cropper-banner", function (e) {
                e.preventDefault();
                var files = e.target.files;
                var done = function (url) {
                    image.src = url;
                    $modal.modal('show');
                };
                var reader;
                var file;
                var URL;
                if (files && files.length > 0) {
                    file = files[0];
                    if (URL) {
                        done(URL.createObjectURL(file));
                    } else if (FileReader) {
                        reader = new FileReader();
                        reader.onload = function (e) {
                            done(reader.result);
                        };
                        reader.readAsDataURL(file);
                    }
                }
            });
            $modal.on('shown.bs.modal', function () {
                cropper = new Cropper(image, {
                    dragMode: 'move',
                    aspectRatio: 64 / 15,
                    viewMode: 1,
                    autoCropArea: 1.04,
                    restore: false,
                    guides: false,
                    center: false,
                    highlight: false,
                    cropBoxMovable: false,
                    cropBoxResizable: false,
                    toggleDragModeOnDblclick: false,
                });
            }).on('hidden.bs.modal', function () {
                cropper.destroy();
                cropper = null;
            });
            $("body").on("click", "#cropImageBanner", function () {
                canvas = cropper.getCroppedCanvas({
                    width: 1920,
                    height: 450,
                });
                canvas.toBlob(function (blob) {
                    // Crop & Convert it to image
                    const bannerInput = document.getElementById("banner_input")
                    var ban = document.createElement("INPUT");
                    ban.setAttribute("type", "file");
                    ban.setAttribute("name", "cropper_banner");
                    ban.classList.add("d-none");
                    bannerInput.appendChild(ban);
                    const file = new File([blob], 'banner.jpg', {type: 'image/jpeg'})
                    const dataTransfer = new DataTransfer()
                    dataTransfer.items.add(file)
                    ban.files = dataTransfer.files
                    $modal.modal('hide');
                });
            });
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Calculate starting index based on existing records
            let faqIndex = document.querySelectorAll('.faq-item').length;
            const container = document.getElementById('faq-container');
            const addButton = document.getElementById('add-faq');
            // Add new FAQ dynamically
            addButton.addEventListener('click', function () {
                const newFaq = document.createElement('div');
                newFaq.classList.add('faq-item', 'mb-4');
                // Clean vertical layout identical to the Blade loop
                newFaq.innerHTML = `
                <div class="mb-3">
                    <label class="small text-muted mb-1">Question</label>
                    <input type="text" name="faq[${faqIndex}][question]" class="form-control rounded-0" placeholder="Enter FAQ question">
                </div>
                <div class="mb-3">
                    <label class="small text-muted mb-1">Answer</label>
                    <textarea name="faq[${faqIndex}][answer]" class="form-control rounded-0" rows="2" placeholder="Enter FAQ answer"></textarea>
                </div>
                <div class="text-end border-bottom pb-3">
                    <button type="button" class="btn btn-danger btn-sm rounded-0 remove-faq">REMOVE</button>
                </div>
            `;
                container.appendChild(newFaq);
                faqIndex++;
            });
            // Remove FAQ
            container.addEventListener('click', function (e) {
                if (e.target.classList.contains('remove-faq')) {
                    if(confirm('Are you sure you want to remove this FAQ?')) {
                        e.target.closest('.faq-item').remove();
                    }
                }
            });
        });
    </script>
@endpush