@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-12">


                <form action="{{ route('admin.course.update', $course->id) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @method('PUT')
                    <div class="card">
                        <div class="card-header bg-white">
                            <h5 class="mb-0 text-primary">📘 Course Info</h5>
                        </div>
                        <div class="card-body row">
                            <!-- Title -->
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" class="form-control input_name @error('title') is-invalid @enderror"
                                    name="title" value="{{ old('title', $course->title) }}" required>
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Slug -->
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Slug <span class="text-danger">*</span></label>
                                <input type="text" class="form-control input_slug @error('slug') is-invalid @enderror"
                                    name="slug" value="{{ old('slug', $course->slug) }}" required>
                                @error('slug')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                           
                            <!-- Category -->
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Category <span class="text-danger">*</span></label>
                                <select class="form-select @error('category_id') is-invalid @enderror" name="category_id"
                                    required>
                                    <option value="">-- Select Category --</option>
                                    @foreach ($categories as $category)
                                        <option value="{{ $category->id }}"
                                            {{ old('category_id', $course->category_id) == $category->id ? 'selected' :'' }}>
                                            {{ $category->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('category_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 text-success">💰 Pricing</h5>

                            <div class="form-check form-switch">
                                <input class="form-check-input me-2" type="checkbox" id="switchCheckFree" name="is_free"
                                    value="1" {{ old('is_free', $course->is_free) ? 'checked' : '' }}
                                    style="width:44px;height:22px;cursor:pointer">
                                <label class="form-check-label" for="switchCheckFree">Course is Free? </label>
                                @error('is_free')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="card-body row">

                            <!-- Original Price -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Original Price <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" step="0.01"
                                        class="form-control @error('original_price') is-invalid @enderror"
                                        name="original_price" value="{{ old('original_price', $course->original_price) }}"
                                        required>
                                </div>
                                @error('original_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Discounted Price -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Discounted Price <small>(Final Purchase Price)</small> <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">৳</span>
                                    <input type="number" step="0.01"
                                        class="form-control @error('discounted_price') is-invalid @enderror"
                                        name="discounted_price"
                                        value="{{ old('discounted_price', $course->discounted_price) }}" required>
                                </div>
                                @error('discounted_price')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Discount Percentage -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Discount </label>
                                <div class="input-group">
                                    <span class="input-group-text">%</span>
                                    <input type="number" min="0" max="100"
                                        class="form-control @error('discount_percentage') is-invalid @enderror"
                                        placeholder="50" name="discount_percentage"
                                        value="{{ old('discount_percentage', $course->discount_percentage) }}" required>
                                </div>
                                @error('discount_percentage')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <!-- Media -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-warning">🎥 Media</h5>
                        </div>
                        <div class="card-body row g-3">
                            <!-- Thumbnail -->
                            <div class="col-lg-6 mb-3">
                                <label for="thumb" class="form-label">
                                    Thumbnail Image
                                    <span class="text-muted " style="font-size: 13px">(Exact size: 350 × 220 px)</span>
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="file"
                                    data-default-file="{{ $course->thumbnail_url ? asset($course->thumbnail_url) : '' }}"
                                    name="thumbnail_url" class="form-control dropify" accept="image/*">
                                @error('thumbnail_url')
                                    <div class="text-danger py-1">{{ $message }}</div>
                                @enderror
                            </div>


                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Video Intro ID</label>
                                <input type="text" class="form-control @error('video_intro_url') is-invalid @enderror"
                                    name="video_intro_url" value="{{ old('video_intro_url', $course->video_intro_url) }}"
                                    placeholder="Example: https://www.youtube.com/watch?v=VIDEO_ID" id="video_url">

                                <div class="invalid-feedback" id="video_error"
                                    @error('video_intro_url') style="display: block;" @else style="display: none;" @enderror>
                                    Please enter only the 11-character YouTube video ID. Something went wrong.
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-warning">📝 Description</h5>
                        </div>
                        <div class="card-body row g-3">

                            <div class="col-12 mb-3">
                                <label class="form-label">Short Description </label>
                                <textarea class="form-control @error('short_description') is-invalid @enderror" name="short_description"
                                    rows="5">{{ old('short_description', $course->short_description) }}</textarea>
                                @error('short_description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-12 mb-3">
                                <label class="form-label">Description </label>
                                <textarea id="editor" class="form-control @error('description') is-invalid @enderror" name="description"
                                    rows="5">{{ old('description', $course->description) }}</textarea>
                                @error('description')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-info">ℹ️ Other Info</h5>
                        </div>
                        <div class="card-body row g-3">

                            <!-- Facebook Group -->
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Facebook Private Group (Optional)</label>
                                <input type="text" class="form-control @error('facebook_group') is-invalid @enderror"
                                    name="facebook_group" value="{{ old('facebook_group', $course->facebook_group) }}"
                                    placeholder="https://www.facebook.com/groups/1799331217257336">
                                @error('facebook_group')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-md-4 mb-3">
                                <label class="form-label">Total Enrolment </label>
                                <input type="text" class="form-control @error('total_enroll') is-invalid @enderror"
                                    name="total_enroll" value="{{ old('total_enroll', $course->total_enroll) }}"
                                    placeholder="total enrolment" required>
                                @error('total_enroll')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label">Total Class</label>
                                <input type="text" class="form-control @error('total_class') is-invalid @enderror"
                                    name="total_class" value="{{ old('total_class', $course->total_class) }}" required>
                                @error('total_class')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-danger">⚙️ Settings</h5>
                        </div>
                        <div class="card-body row g-3">

                            <div class="col-lg-4">

                                <label class="form-label">Course Type <span class="text-danger">*</span></label>
                                <select name="course_type" id="course_type"
                                    class="form-select @error('course_type') is-invalid @enderror" required>
                                    <option value="">-- Select Type --</option>
                                    <option value="Live"
                                        {{ old('course_type', $course->course_type) == 'Live' ? 'selected' : '' }}>
                                        Live</option>
                                    <option value="Recording"
                                        {{ old('course_type', $course->course_type) == 'Recording' ? 'selected' : '' }}>
                                        Recording</option>
                                </select>
                                @error('course_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>



                            <!-- Status -->
                            <div class="col-lg-4 mb-3">
                                <label class="form-label d-block">Status</label>
                                <select class="form-select" name="status">
                                    <option value="draft"
                                        {{ old('status', $course->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                    <option value="published"
                                        {{ old('status', $course->status) == 'published' ? 'selected' : '' }}>Published
                                    </option>
                                    <option value="paused"
                                        {{ old('status', $course->status) == 'paused' ? 'selected' : '' }}>Paused</option>
                                    <option value="inactive"
                                        {{ old('status', $course->status) == 'inactive' ? 'selected' : '' }}>Inactive
                                    </option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="col-lg-4 mb-3">
                                <label class="form-label">Is Home </label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input me-2" type="checkbox" id="switchPopular"
                                        name="is_home" value="1"
                                        {{ old('is_home', $course->is_home) ? 'checked' : '' }}
                                        style="width:44px;height:22px;cursor:pointer">
                                    <label class="form-check-label" for="switchPopular">Is Home / Not Home</label>
                                    @error('is_home')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card shadow-sm mb-4">
                        <div class="card-header bg-light">
                            <h5 class="mb-0 text-secondary">👨‍🏫 Instructors & Features</h5>
                        </div>
                        <div class="card-body row g-3">
                            <div class="col-12 mb-3">
                                <label class="form-label">Course Features </label>
                                <div id="features_wrapper">
                                    @forelse ($course_features as $feature)
                                        <div class="input-group mb-2 feature-item" id="feature-{{ $feature->id }}">
                                            <input type="text" name="old_features[{{ $feature->id }}]"
                                                class="form-control" value="{{ $feature->feature_text }}"
                                                placeholder="Enter feature">
                                            <button type="button" class="btn btn-danger"
                                                onclick="removeFeature('{{ route('admin.course.feature.delete', $feature->id) }}','feature-{{ $feature->id }}')">
                                                <img src="{{ asset('backend/uploads/delete.svg') }}" /></button>
                                        </div>
                                    @empty
                                        <div class="input-group mb-2 feature-item">
                                            <input type="text" name="features[]" class="form-control"
                                                placeholder="Enter feature">
                                            <button type="button" class="btn btn-danger remove-feature"><img
                                                    src="{{ asset('backend/uploads/delete.svg') }}" /></button>
                                        </div>
                                    @endforelse

                                </div>
                                <button type="button" id="add_feature" class="btn btn-success btn-sm mt-2">Add
                                    Feature</button>

                            </div>
                            <div class="col-lg-12 mb-3">
                                <label class="form-label">Instructors <span class="text-danger">*</span></label>
                                <select class="form-select select2 @error('instructors') is-invalid @enderror"
                                    name="instructors[]" multiple required data-placeholder="Select Instructors">

                                    @foreach ($instructors as $instructor)
                                        <option value="{{ $instructor->id }}"
                                            @if (old('instructors')) {{ in_array($instructor->id, old('instructors', [])) ? 'selected' : '' }}
                @else
                    {{ $course->instructors->contains($instructor->id) ? 'selected' : '' }} @endif>
                                            {{ $instructor->user->name }} ({{ $instructor->organization }})
                                        </option>
                                    @endforeach
                                </select>
                                @error('instructors')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>


                    <!-- Buttons -->
                    <div class="col-12 mb-3">
                        <button type="submit" class="btn btn-primary">Update course</button>
                        <a href="{{ route('admin.course.index') }}" class="btn btn-secondary">Cancel</a>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('js')
        <script>
            function removeFeature(destroyUrl, parentId) {

                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#d33",
                    cancelButtonColor: "#3085d6",
                    confirmButtonText: "Yes, delete it!"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: destroyUrl,
                            method: 'DELETE',
                            data: {
                                _token: $('meta[name="csrf-token"]').attr('content'),
                            },
                            success: function(res) {

                                $('#' + parentId).hide();
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Deleted!',
                                    text: res.message ||
                                        'Deleted successfully.'
                                });

                            },
                            error: function(xhr) {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error!',
                                    text: xhr.responseJSON?.message ||
                                        'Delete failed. Please try again.'
                                });
                            }

                        });
                    }


                });
            }
        </script>



        <script>
            $(document).ready(function() {
                $('#add_feature').click(function() {
                    var featureHtml = `
            <div class="input-group mb-2 feature-item">
                <input type="text" name="features[]" class="form-control " placeholder="Enter feature">
                <button type="button" class="btn btn-danger remove-feature"><img src="{{ asset('backend/uploads/delete.svg') }}" /></button>
            </div>`;
                    $('#features_wrapper').append(featureHtml);
                });

                // Remove feature input
                $(document).on('click', '.remove-feature', function() {
                    $(this).closest('.feature-item').remove();
                });
            });
        </script>



        <script>
            $(document).ready(function() {
                $('#video_url').on('change', function() {
                    var value = $(this).val().trim();
                    var regex = /^[a-zA-Z0-9_-]{11}$/;

                    if (!regex.test(value)) {
                        $(this).addClass('is-invalid');
                        $('#video_error').show();
                    } else {
                        $(this).removeClass('is-invalid');
                        $('#video_error').hide();
                    }
                });
            });
        </script>
    @endpush
@endsection