@extends('admin.layouts.app')
@section('title','Add New')
@section('content')
    <div class="container-fluid">
        <div class="d-flex justify-content-between py-4">
            <p class="page-title">Add New</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.store')}}" method="post" enctype="multipart/form-data">
                            @csrf
                            <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="{{old('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="{{old('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}}" {{ old('course_cate') == $cCate->id ? 'selected' : '' }}>{{$cCate->name}}</option>
                                        @endforeach
                                    </select>
                                    @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">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}}" {{ old('faculty_id') == $fac->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">Departments *</label>
                                    <select name="dpt_cate" id=""
                                            class="form-control @error('dpt_cate') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        @foreach ($Departments as $dpt)
                                            <option value="{{$dpt->id}}" {{ old('dpt_cate') == $dpt->id ? '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('campus') is-invalid @enderror">
                                        <option value="">Choose</option>
                                        <option value="Green International University" {{ old('campus') == 'Green International University' ? '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>
                                        @php
                                            $durations = [
                                                "1 Year/30 Credit Hours",
                                                "2 Year",
                                                "4 Semesters, 2 years",
                                                "8 Semesters, 4 years",
                                                "6 Semesters (3 Years)",
                                                "10 Semesters, 5 years"
                                            ];
                                        @endphp
                                        @foreach($durations as $dur)
                                            <option value="{{ $dur }}" {{ old('duration') == $dur ? 'selected' : '' }}>{{ $dur }}</option>
                                        @endforeach
                                    </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">{{old('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="{{old('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="{{old('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="{{old('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="{{old('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">{{ old('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">{{ old('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">{{ old('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">{{ old('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">{{ old('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">
                                            <div class="faq-item mb-3">
                                                <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>
                                        </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="{{old('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"></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="{{ old('meta_keywords') }}">--}}
{{--                                </div>--}}

                                <div class="col-md-12 mb-3 text-right">
                                    <input type="submit" class="btn btn-sm btn-success" value="Create">
                                </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 () {
            // Correctly calculate index starting point
            let faqIndex = {{ !empty($course->faq) && is_array(json_decode($course->faq, true)) ? count(json_decode($course->faq, true)) : 1 }};

            const section = document.getElementById('faq-section');
            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-3');

                // Clean vertical layout to match your static "Question 1"
                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>
            `;

                // Insert before the button container
                section.insertBefore(newFaq, addButton.parentNode);
                faqIndex++;
            });

            // Remove FAQ - using the section listener for better performance
            section.addEventListener('click', function (e) {
                if (e.target.classList.contains('remove-faq')) {
                    e.target.closest('.faq-item').remove();
                }
            });
        });
    </script>
@endpush