@extends('layouts.index')

@section('content')
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />


<div class="content-body">
    <div class="container-fluid">
        <div class="form-head d-flex mb-3 mb-md-4 align-items-start">
            <div class="me-auto d-none d-lg-block">
                <h3 class="font-w600">{{ isset($course) ? 'Edit Course' : 'Add Course' }}</h3>
            </div>
            <div class="ms-auto">
                <a href="{{ route('admin.cources-list') }}" class="btn btn-secondary">Back</a>
            </div>
        </div>
        @include('includes.message') 
        @if ($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-body">
                            <form action="{{ isset($course) ? route('admin.courses.store', $course->id) : route('admin.courses.store') }}" method="POST" enctype="multipart/form-data">
                       
                                <div class="row">
                                @csrf
                                @if(isset($course)) 
                                    @method('POST') <!-- If course is set, it means this is an edit -->
                                @endif

                                <div class="col-lg-6 mb-3">
                                    <label class="form-label">Image<span class="text-danger">*</span> (360x224px)</label>
                                    <!-- File input for the image -->
                                    <input type="file" class="form-control" name="image">
                                    
                                    <!-- If a course is being edited, show the current image -->
                                    @if(isset($course) && $course->image)
                                        <div class="mt-2">
                                            <img src="{{ asset('upload/courses/' . $course->image) }}" alt="Image" height="60">
                                            <p>Current Image</p>
                                        </div>
                                    @endif
                                </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Services </label>
                                        <select class="form-control" name="service_id" required>
                                            <option value="">Select Services</option>
                                            @foreach($services as $service)
                                                <option value="{{ $service->id }}" {{ old('service_id', $course->service_id ?? '') == $service->id ? 'selected' : '' }}>
                                                    {{ $service->title }}
                                                </option>
                                            @endforeach
                                            <option value="4">HEI Learning Visits</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label for="course">Select Course</label>
                                        <select name="course_id" id="course" class="form-control">
                                            <option value="">Select a Course</option>
                                            <option value="0">Internal Activity</option>
                                            @foreach($moodleCourses as $course_row)
                                                <option value="{{ $course_row['id'] }}" {{ old('course_id', $course->course_id ?? '') == $course_row['id'] ? 'selected' : '' }}>{{ $course_row['fullname'] }}</option>
                                            @endforeach
                                        </select>
                                    </div>  
                               

                                <div class="col-lg-6 mb-3">
                                    <label for="course">Instructors</label>
                                    <select name="instructor_id[]" id="instructor_id" class="form-control form-multi-select" multiple data-coreui-search="global">
                                        @foreach($instructors as $instructor)
                                            <option value="{{ $instructor->id }}" {{ in_array($instructor->id, explode(',',$course->instructor_id??'')) ? 'selected' : '' }}>
                                                {{ $instructor->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>


        

                                    <div class="col-lg-6 mb-3">
                                        <label for="title" class="form-label">Slug</label>
                                        <input type="text" id="slug" class="form-control @error('slug') is-invalid @enderror" id="slug" name="slug" value="{{ old('slug', $course->slug ?? '') }}" required>
                                        @error('slug')
                                            <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                        @enderror
                                    </div>
                                    

                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Course Title</label>
                                        <input type="text" class="form-control" name="title" value="{{ old('title', $course->title ?? '') }}" required>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Video (You Tube Link)</label>
                                        <input type="text" class="form-control" name="you_tube_link" value="{{ old('you_tube_link', $course->you_tube_link ?? '') }}" >
                                    </div>

                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Short Title</label>
                                        <input type="text" class="form-control" name="short_title" value="{{ old('short_title', $course->short_title ?? '') }}" >
                                    </div>

                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Lessons</label>
                                        <input type="number" class="form-control" name="lessons" value="{{ old('lessons', $course->lessons ?? '') }}" >
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Certificate Badge</label>
                                        <input type="text" class="form-control" name="certificate_badge" value="{{ old('certificate_badge', $course->certificate_badge ?? '') }}" >
                                    </div>

                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">No. of Students</label>
                                        <input type="number" class="form-control" name="students" value="{{ old('students', $course->students ?? '') }}" >
                                    </div>

                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Rating</label>
                                        <input type="number" class="form-control" step="0.1" name="rating" value="{{ old('rating', $course->rating ?? '') }}" >
                                    </div>

                                
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Level</label>
                                        <input type="text" class="form-control" name="level" value="{{ old('level', $course->level ?? '') }}" >
                                    </div>

                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Amount</label>
                                        <input type="number" class="form-control" name="amount" step="0.01" value="{{ old('amount', $course->amount ?? '') }}" required>
                                    </div>
                                        <div class="col-lg-6 mb-3">
                                        <label class="form-label">Discounted Amount</label>
                                        <input type="number" class="form-control" name="amount2" value="{{ old('amount2', $course->amount2 ?? '') }}">
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Course Link</label>
                                        <input type="url" class="form-control" name="link" value="{{ old('link', $course->link ?? '') }}">
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Description</label>
                                        <textarea class="summernote" class="form-control" name="description" rows="4" >{{ old('description', $course->description ?? '') }}</textarea>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">About The Course</label>
                                        <textarea class="summernote" class="form-control" name="about_the_course" rows="4">{{ old('about_the_course', $course->about_the_course ?? '') }}</textarea>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Objectives of the Course</label>
                                        <textarea class="summernote" class="form-control" name="objectives_of_the_Course" rows="4">{{ old('objectives_of_the_Course', $course->objectives_of_the_Course ?? '') }}</textarea>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Requirements</label>
                                        <textarea class="summernote" class="form-control" name="who_is_this_course_for" rows="4">{{ old('who_is_this_course_for', $course->who_is_this_course_for ?? '') }}</textarea>
                                    </div>
                                    
                                    <!-- <div class="col-lg-6 mb-3">
                                        <label class="form-label">Learning Approach</label>
                                        <textarea class="summernote" class="form-control" name="learning_approach" rows="4">{{ old('learning_approach', $course->learning_approach ?? '') }}</textarea>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Get Started</label>
                                        <textarea class="summernote" class="form-control" name="get_started" rows="4">{{ old('get_started', $course->get_started ?? '') }}</textarea>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">People Behind this Course</label>
                                        <textarea class="summernote" class="form-control" name="people_behind_this_course" rows="4">{{ old('people_behind_this_course', $course->people_behind_this_course ?? '') }}</textarea>
                                    </div> -->
                                    @php
                                        $detailsInfo = [];

                                        if (isset($course) && $course->details_information) {
                                            $detailsInfo = is_array($course->details_information)
                                                ? $course->details_information
                                                : (json_decode($course->details_information, true) ?? []);
                                        }
                                    @endphp

                                    <div id="dynamic-fields">
                                        @if (!empty($detailsInfo))
                                            @foreach($detailsInfo as $key => $detail)
                                                <div class="row mb-3 field-group">
                                                    <div class="col-md-5">
                                                        <input type="text" name="details[]" class="form-control" placeholder="Enter Details" value="{{ $detail['detail'] }}" required>
                                                    </div>
                                                    <div class="col-md-5">
                                                        <input type="text" name="information[]" class="form-control" placeholder="Enter Information" value="{{ $detail['information'] }}" required>
                                                    </div>
                                                    <div class="col-md-2">
                                                        @if ($key == 0)
                                                            <button type="button" class="btn btn-success add-more w-100">Add More</button>
                                                        @else
                                                            <button type="button" class="btn btn-danger remove-field w-100">Remove</button>
                                                        @endif
                                                    </div>
                                                </div>
                                            @endforeach
                                        @else
                                            <div class="row mb-3 field-group">
                                                <div class="col-md-5">
                                                    <input type="text" name="details[]" class="form-control" placeholder="Enter Details" required>
                                                </div>
                                                <div class="col-md-5">
                                                    <input type="text" name="information[]" class="form-control" placeholder="Enter Information" required>
                                                </div>
                                                <div class="col-md-2">
                                                    <button type="button" class="btn btn-success add-more w-100">Add More</button>
                                                </div>
                                            </div>
                                        @endif
                                    </div>


                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Show On What's New</label>
                                        <select class="form-select" name="show_on_whats_new" required>
                                            <option value="">Show On What's New</option>
                                            <option value="1" {{ (old('show_on_whats_new', $course->show_on_whats_new ?? '') == '1') ? 'selected' : '' }}>Yes</option>
                                            <option value="0" {{ (old('show_on_whats_new', $course->show_on_whats_new ?? '') == '0') ? 'selected' : '' }}>No</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Show On Find Your Course</label>
                                        <select class="form-select" name="show_on_homepage" required>
                                            <option value="">Show On Home Page</option>
                                            <option value="1" {{ (old('show_on_homepage', $course->show_on_homepage ?? '') == '1') ? 'selected' : '' }}>Yes</option>
                                            <option value="0" {{ (old('show_on_homepage', $course->show_on_homepage ?? '') == '0') ? 'selected' : '' }}>No</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Expire On</label>
                                        <input type="date" name="expire_on" class="form-control" value="{{ $course->expire_on??'' }}" >
                                    </div>

                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Status</label>
                                        <select class="form-select" name="status" required>
                                            <option value="">Select Status</option>
                                            <option value="active" {{ (old('status', $course->status ?? '') == 'active') ? 'selected' : '' }}>Active</option>
                                            <option value="inactive" {{ (old('status', $course->status ?? '') == 'inactive') ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                        <label class="form-label">Sequence</label>
                                        <input type="number" class="form-control" name="sequence" value="{{ old('sequence', $course->sequence ?? '') }}" >
                                    </div>
                                    <div class="col-lg-6 mb-3">
                                    <label for="meta_title" class="form-label">Meta Title</label>
                                    <input type="text" class="form-control @error('meta_title') is-invalid @enderror" id="meta_title" name="meta_title" value="{{ old('meta_title', $course->meta_title ?? '') }}">
                                    @error('meta_title')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div> 
                                <div class="col-lg-6 mb-3">
                                    <label for="meta_description" class="form-label">Meta Description</label>
                                    <textarea class="form-control @error('meta_description') is-invalid @enderror" id="meta_description" name="meta_description" rows="3">{{ old('meta_description', $course->meta_description ?? '') }}</textarea>
                                    @error('meta_description')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                                <div class="col-lg-6 mb-3">
                                    <label for="meta_keywords" class="form-label">Meta Keywords</label>
                                    <input type="text" class="form-control @error('meta_keywords') is-invalid @enderror" id="meta_keywords" name="meta_keywords" value="{{ old('meta_keywords', $course->meta_keywords ?? '') }}">
                                    @error('meta_keywords')
                                        <span class="invalid-feedback"><strong>{{ $message }}</strong></span>
                                    @enderror
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary">{{ isset($course) ? 'Update Course' : 'Submit Course' }}</button>
                        </div>
                            </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
<script>
    $('.summernote').summernote({
        placeholder: 'Enter course description...',
        tabsize: 2,
        height: 120,
        toolbar: [
            ['style', ['style']],
            ['font', ['bold', 'underline', 'clear']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video']],
            ['view', ['fullscreen', 'codeview', 'help']]
        ]
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        let wrapper = document.getElementById('dynamic-fields');

        wrapper.addEventListener('click', function (e) {
            if (e.target.classList.contains('add-more')) {
                let fieldGroup = e.target.closest('.field-group');
                let clone = fieldGroup.cloneNode(true);

                clone.querySelectorAll('input').forEach(input => input.value = '');

                let btn = clone.querySelector('button');
                btn.classList.remove('btn-success', 'add-more');
                btn.classList.add('btn-danger', 'remove-field');
                btn.textContent = 'Remove';

                wrapper.appendChild(clone);
            }

            if (e.target.classList.contains('remove-field')) {
                e.target.closest('.field-group').remove();
            }
        });
    });
</script>
<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const element = document.getElementById('instructor_id');
        const choices = new Choices(element, {
            removeItemButton: true,
            searchEnabled: true,
            placeholderValue: 'Select Instructors',
            noResultsText: 'No instructor found',
        });
    });
</script>



@endsection