@extends('layouts.admin')

@section('content')
    <div class="container-fluid">
        @include('elements.admin-breadcrumb')

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <strong>Whoops!</strong> There were some problems with your input.<br><br>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form action="{{ isset($course) ? route('admin.course.update', $course->id) : route('admin.course.store') }}" id="course_form" method="POST" class="form-horizontal" enctype="multipart/form-data" novalidate="novalidate">
                            @csrf
                                @if (isset($course))
                                    @method('PUT')
                                @endif

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label" for="name">Course Name: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="name" name="name" placeholder="Course Name" value="{{ old('name', $course ? $course->name : '') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="code">Course Code: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="code" name="code" placeholder="Course Code" value="{{ old('code', $course ? $course->code : '') }}" required>
                                </div>

                                <div class="col-md-4">
                                    <label class="form-label" for="duration">Duration: <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="duration" name="duration" placeholder="Duration" value="{{ old('duration', $course ? $course->duration : '') }}" required>
                                </div>
                               
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label" for="category_id">Category: <span class="text-danger">*</span></label>
                                    <select class="form-select" id="category_id" name="category_id" required>
                                        <option value="">Select Category</option>
                                        @foreach ($categories as $category)
                                            <option value="{{ $category->id }}" {{ $course && $course->category_id == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                
                                <div class="col-md-4">
                                    <label class="form-label" for="sub_category_id">Subcategory: <span class="text-danger">*</span></label>
                                    <select class="form-select" id="sub_category_id" name="sub_category_id" required>
                                        <option value="">Select Subcategory</option>
                                        @foreach ($subcategories as $subcategory)
                                            <option value="{{ $subcategory->id }}" {{ $course && $course->sub_category_id == $subcategory->id ? 'selected' : '' }}>{{ $subcategory->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row mb-3">
                               
                                <div class="col-md-4">
                                    <label class="form-label" for="short_description">Short Description: <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="short_description" placeholder="Short Description" name="short_description" required>{{ old('short_description', $course ? $course->short_description : '') }}</textarea>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="description">Description: <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="description" placeholder="Description" name="description" required>{{ old('description', $course ? $course->description : '') }}</textarea>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="search_keywords">Search Keywords: <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="search_keywords" placeholder="Search Keywords" name="search_keywords" required>{{ old('search_keywords', $course ? $course->search_keywords : '') }}</textarea>
                                </div>
                            </div>

                            <div class="row mb-3">
                              
                               
                            </div>

                            <div class="row mb-3">
                                <div class="col-md-4">
                                    <label class="form-label" for="meta_title">Meta Title: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="meta_title" placeholder="Meta Title" name="meta_title" value="{{ old('meta_title', $course ? $course->meta_title : '') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="meta_keywords">Meta Keywords: <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="meta_keywords" placeholder="Meta Keywords" name="meta_keywords" required>{{ old('meta_keywords', $course ? $course->meta_keywords : '') }}</textarea>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label" for="meta_descriptions">Meta Descriptions: <span class="text-danger">*</span></label>
                                    <textarea class="form-control" id="meta_descriptions" placeholder="Meta Descriptions" name="meta_descriptions" required>{{ old('meta_descriptions', $course ? $course->meta_descriptions : '') }}</textarea>
                                </div>
                            </div>

                            <div class="row mb-3">
                                
                                <div class="col-md-4">
                                    <label class="form-label" for="discounted_price">Discounted Price: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="discounted_price" placeholder="Discounted Price" name="discounted_price" value="{{ old('discounted_price', $course ? $course->discounted_price : '') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label"  for="fees_MRP">Fees MRP: <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="fees_MRP" placeholder="Fees MRP" name="fees_MRP" value="{{ old('fees_MRP', $course ? $course->fees_MRP : '') }}" required>
                                </div>
                                <div class="col-md-4">
                                    <label  class="form-label" for="status">Status: <span class="text-danger">*</span></label>
                                    <div class="form-check form-switch">
                                        <input type="checkbox" class="form-check-input" id="customSwitch1" name="status" value="1" {{ old('status', $course ? $course->status : 0) ? 'checked' : '' }}>
                                        <label class="form-check-label" for="customSwitch1">Active</label>
                                    </div>
                                </div>
                                
                            </div>

                            <div class="row mb-3">
                              
                              
                                <div class="col-md-4">
                                    <label class="form-label" for="thumbnail_image">Thumbnail Image: <span class="text-danger">*</span></label>
                                    <input type="file" value="{{ old('thumbnail_image', $course ? $course->thumbnail_image : '') }}" class="form-control" id="thumbnail_image" name="thumbnail_image">
                                    @if (isset($course) && $course->thumbnail_image)
                                        <div class="mt-3">
                                            <img src="{{ asset('storage/' . $course->thumbnail_image) }}" alt="Thumbnail Image" style="max-width: 200px;">
                                            <input type="hidden" name="existing_thumbnail_image" value="{{ $course->thumbnail_image }}">
                                        </div>
                                    @endif
                                </div>
                            </div>
                            

                            <div class="row mb-3">
                                
                            </div>

                            <input type="hidden" id="slug" name="slug" value="{{ old('slug', $course ? $course->slug : '') }}">

                            <div class="mb-3 text-end">
                                <button class="btn btn-primary mx-2" type="submit" name="submit" value="add">{{ isset($course) ? 'Update' : 'Save' }}</button>
                                <a href="{{ route('admin.course.index') }}" class="btn btn-outline-danger">Cancel</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    $(document).ready(function () {
        $('#category_id').change(function () {
            var category_id = $(this).val();

            // Clear subcategory options
            $('#sub_category_id').empty();

            // Add default option
            $('#sub_category_id').append('<option value="">Select Subcategory</option>');

            // Fetch subcategories via AJAX
            $.ajax({
                url: '{{ route("admin.course.subcategories", ":category_id") }}'.replace(':category_id', category_id),
                type: 'GET',
                success: function (response) {
                    var subcategories = response.subcategories;

                    // Populate subcategory dropdown
                    $.each(subcategories, function (key, value) {
                        $('#sub_category_id').append('<option value="' + value.id + '">' + value.name + '</option>');
                    });
                }
            });
        });
    });
</script>

<script src="{{ asset('assets/vendor/validation/jquery-validation.js') }}"></script>
<script>
    // Auto-generate slug based on course name
   // Auto-generate slug based on course name
    document.getElementById('name').addEventListener('input', function() {
        let name = this.value;
        let slug = name.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/(^-|-$)/g, '');
        document.getElementById('slug').value = slug;
    });




    $(document).ready(function () {
    $("#course_form").validate({
        rules: {
            name: {
                required: true,
            },
            code: {
                required: true,
            },
            category_id: {
                required: true,
            },
            sub_category_id: {
                required: true,
            },
            duration: {
                required: true,
                digits: true
            },
            short_description: {
                required: true,
            },
            description: {
                required: true,
            },
            search_keywords: {
                required: true,
            },
            meta_title: {
                required: true,
            },
            meta_keywords: {
                required: true,
            },
            meta_descriptions: {
                required: true,
            },
            // thumbnail_image: {
            //     required: true,
            //     extension: "jpg|jpeg|png|gif"
            // },
            fees_MRP: {
                required: true,
                number: true
            },
            discounted_price: {
                required: true,
                number: true
            },
            status: {
                required: true,
            },
        },
        messages: {
            name: {
                required: "Course name is required",
            },
            code: {
                required: "Course code is required",
            },
            category_id: {
                required: "Category is required",
            },
            sub_category_id: {
                required: "Subcategory is required",
            },
            duration: {
                required: "Duration is required",
                digits: "Please enter a valid number of days"
            },
            short_description: {
                required: "Short description is required",
            },
            description: {
                required: "Description is required",
            },
            search_keywords: {
                required: "Search keywords are required",
            },
            meta_title: {
                required: "Meta title is required",
            },
            meta_keywords: {
                required: "Meta keywords are required",
            },
            meta_descriptions: {
                required: "Meta descriptions are required",
            },
            thumbnail_image: {
                required: "Thumbnail image is required",
                extension: "Please upload a valid image file (jpg, jpeg, png, gif)"
            },
            fees_MRP: {
                required: "Fees MRP is required",
                number: "Please enter a valid number"
            },
            discounted_price: {
                required: "Discounted price is required",
                number: "Please enter a valid number"
            },
            status: {
                required: "Status is required",
            },
        },
        errorClass: "invalid-feedback",
        errorElement: 'span',
        errorPlacement: function (error, element) {
            var placement = element.closest(".mb-3").find('.form-control');
            if (placement.length) {
                $(placement).addClass('is-invalid');
                error.insertAfter(element).wrap('<div/>');
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function (element, errorClass) {
            $(element).removeClass(errorClass);
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
});

</script>
@endsection