@extends('backend.layout.app')

@section('content')
<div class="page-content">
    <div class="row">
        <div class="col-12">
          
                    <form action="{{ route('admin.module.content.update', $content->id) }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        @method('PUT')

                           <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0 text-primary">📄 Content Info</h5>
                    </div>
                    <div class="card-body row g-3">

                            <!-- Course -->
                            <div class="col-md-6">
                                <label class="form-label">Course <span class="text-danger">*</span></label>
                                <select id="course_id" name="course_id" class="form-select select2 @error('course_id') is-invalid @enderror" required>
                                    <option value="">-- Choose Course --</option>
                                    @foreach ($courses as $course)
                                        <option value="{{ $course->id }}" 
                                            {{ old('course_id', $content->module->course->id) == $course->id ? 'selected' : '' }}>
                                            {{ $course->title }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('course_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Module -->
                            <div class="col-md-6">
                                <label class="form-label">Module <span class="text-danger">*</span></label>
                                <select id="module_id" name="module_id" class="form-select select2 @error('module_id') is-invalid @enderror" required>
                                    <option value="{{ $content->module_id }}" selected>
                                        {{ $content->module->title ?? 'Selected Module' }}
                                    </option>
                                </select>
                                @error('module_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Content Type -->
                            <div class="col-md-6">
                                <label class="form-label">Content Type <span class="text-danger">*</span></label>
                                <select name="content_type" class="form-select @error('content_type') is-invalid @enderror" required>
                                    <option value="">-- Select Type --</option>
                                    <option value="video" {{ old('content_type', $content->content_type) == 'video' ? 'selected' : '' }}>Video</option>
                                    <option value="pdf" {{ old('content_type', $content->content_type) == 'pdf' ? 'selected' : '' }}>PDF</option>
                                    <option value="assignment" {{ old('content_type', $content->content_type) == 'assignment' ? 'selected' : '' }}>Assignment</option>
                                </select>
                                @error('content_type')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Title -->
                            <div class="col-md-6">
                                <label class="form-label">Title <span class="text-danger">*</span></label>
                                <input type="text" name="title"
                                    class="form-control @error('title') is-invalid @enderror"
                                    value="{{ old('title', $content->title) }}" required placeholder="Content title">
                                @error('title')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Video ID -->
                            <div class="col-md-6 {{ $content->content_type == 'video' ? '' : 'd-none' }}" id="content_url_div">
                                <label for="content_url" class="form-label">Video ID</label>
                                <input type="text" name="youtube_id" id="content_url"
                                    class="form-control @error('youtube_id') is-invalid @enderror"
                                    value="{{ $content->content_type == 'video' ? old('youtube_id', $content->content_url) :  old('youtube_id') }}"
                                    placeholder="Enter 11-character YouTube Video ID" maxlength="11">
                                @error('youtube_id')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <!-- Description -->
                            <div class="col-md-6">
                                <label class="form-label">Description</label>
                                <textarea name="description" rows="2" class="form-control">{{ old('description', $content->description) }}</textarea>
                            </div>
                    </div>
                           </div>

                            <!-- Class Note Upload/URL -->
                              <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0 text-warning">🗂 Class Notes / Files</h5>
                    </div>
                    <div class="card-body row g-3">
                                <div class="col-md-6 {{ $content->content_type == 'video' ? '' : 'd-none' }}" id="class_note_upload_div">
                                    <label class="form-label">Upload Class Note</label>
                                    <input type="file" name="class_note_upload" class="form-control dropify" data-default-file="{{ $content->class_note }}">
                                </div>
                             
                                <div class="col-md-6 {{ $content->content_type == 'video' ? '' : 'd-none' }}" id="class_note_path_div">
                                    <label class="form-label">Class Note URL / Path</label>
                                    <input type="text" name="class_note_url" class="form-control"
                                        value="{{ old('class_note_url', $content->class_note) }}"
                                        placeholder="Enter URL or path">
                                </div>

                            <!-- Toggle (Video only) -->
                            <div class="col-12 mt-3 {{ $content->content_type == 'video' ? '' : 'd-none' }}" id="class_note_option_div">
                                <div class="alert alert-light border rounded p-2">
                                    <div class="form-check form-switch m-0">
                                        <input class="form-check-input" type="checkbox" id="class_note_upload_toggle" {{ $content->class_note && Str::contains($content->class_note, 'upload/module/class-note') ? 'checked' : '' }}>
                                        <label class="form-check-label" for="class_note_upload_toggle">
                                            <span class="text-muted"> Upload or enter URL</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- File Option (PDF / Assignment) -->
                            <div class="col-12 {{ in_array($content->content_type, ['pdf','assignment']) ? '' : 'd-none' }}" id="file_option_div">
                                <div class="alert alert-light border rounded p-2">
                                    <div class="form-check form-switch m-0">
                                        <input class="form-check-input" type="checkbox" id="file_upload_toggle" {{ $content->is_uploaded ? 'checked' : '' }}>
                                        <label class="form-check-label" for="file_upload_toggle">
                                            <span class="text-muted"> Upload or enter URL</span>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- File Upload / URL -->
                            <div class="col-md-6 {{ in_array($content->content_type, ['pdf','assignment']) ? '' : 'd-none' }}" id="file_upload_div">
                                <label class="form-label">Upload File</label>
                                <input type="file" name="file_upload" class="form-control dropify"
                                    data-default-file="{{ $content->is_uploaded ? $content->content_url : '' }}">
                            </div>
                            <div class="col-md-6 {{ in_array($content->content_type, ['pdf','assignment']) ? '' : 'd-none' }}" id="file_path_div">
                                <label class="form-label">File URL / Path</label>
                                <input type="text" name="file_path" class="form-control"
                                    value="{{ !$content->is_uploaded ? $content->content_url : '' }}"
                                    placeholder="Enter URL or path">
                            </div>
                              </div>
                              </div>
                     <div class="card shadow-sm mb-4">
                    <div class="card-header bg-light">
                        <h5 class="mb-0 text-info">⚙️ Content Settings</h5>
                    </div>
                    <div class="card-body row g-3">
                            <!-- Content Settings -->
                            <div class="col-12 mt-4">
                                <h5 class="text-primary border-bottom pb-2 mb-3">Content Settings</h5>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">Free Content?</label>
                                        <select name="is_free" class="form-select">
                                            <option value="0" {{ old('is_free', $content->is_free) == 0 ? 'selected' : '' }}>No</option>
                                            <option value="1" {{ old('is_free', $content->is_free) == 1 ? 'selected' : '' }}>Yes</option>
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Status</label>
                                        <select name="status" class="form-select">
                                            <option value="1" {{ old('status', $content->status) == 1 ? 'selected' : '' }}>Active</option>
                                            <option value="0" {{ old('status', $content->status) == 0 ? 'selected' : '' }}>Inactive</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                    </div>
                     </div>

                            <!-- Submit -->
                            <div class="col-12 mt-3">
                                <button type="submit" class="btn btn-primary">Update Content</button>
                                <a href="{{ route('admin.module.content.index') }}" class="btn btn-secondary">Cancel</a>
                            </div>

                        </div>
                    </form>
             
        </div>
    </div>
</div>

    @push('js')
        <script>
            $(document).ready(function() {

                // -------------------------
                // Course → Module AJAX
                // -------------------------
                $('#course_id').on('change', function() {
                    let courseId = $(this).val();
                    let moduleSelect = $('#module_id');

                    if (courseId) {
                        let url = "{{ route('admin.module.get', ':id') }}";
                        url = url.replace(':id', courseId);

                        Swal.fire({
                            title: 'Loading modules...',
                            text: 'Please wait!',
                            didOpen: () => {
                                Swal.showLoading();
                            },
                            allowOutsideClick: false
                        });

                        $.ajax({
                            url: url,
                            type: "GET",
                            success: function(res) {
                                moduleSelect.empty().append(
                                    '<option value="" disabled selected>-- Choose Module --</option>'
                                );
                                if (res.length > 0) {
                                    $.each(res, function(key, module) {
                                        moduleSelect.append('<option value="' + module.id +
                                            '">' + module.title + '</option>');
                                    });
                                    let selectedModule =
                                        "{{ old('module_id', request('module_id')) }}";
                                    if (selectedModule) {
                                        moduleSelect.val(selectedModule);
                                    }
                                } else {
                                    moduleSelect.append(
                                        '<option value="" disabled >No Module Available</option>');
                                }
                            },
                            error: function() {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Oops...',
                                    text: 'Something went wrong while fetching modules!'
                                });
                            },
                            complete: function() {
                                // Close loading Swal
                                Swal.close();
                            }
                        });
                    }
                });

                @if (old('course_id', request('course_id')))
                    $('#course_id').val("{{ old('course_id', request('course_id')) }}").trigger('change');
                @endif

                // -------------------------
                // Content Type Toggle
                // -------------------------
                function toggleFields() {
                    let type = $('select[name="content_type"]').val();

                    // Hide everything
                    $('#content_url_div, #class_note_option_div, #class_note_upload_div, #class_note_path_div, #file_option_div, #file_upload_div, #file_path_div')
                        .addClass('d-none');

                    if (type === 'video') {
                        $('#content_url_div, #class_note_option_div').removeClass('d-none');
                        toggleClassNoteOption();
                    } else if (type === 'pdf' || type === 'assignment') {
                        $('#file_option_div').removeClass('d-none');
                        toggleFileOption();
                    }
                }

                function toggleClassNoteOption() {
                    if ($('#class_note_upload_toggle').is(':checked')) {
                        $('#class_note_upload_div').removeClass('d-none');
                        $('#class_note_path_div').addClass('d-none');
                    } else {
                        $('#class_note_upload_div').addClass('d-none');
                        $('#class_note_path_div').removeClass('d-none');
                    }
                }

                function toggleFileOption() {
                    if ($('#file_upload_toggle').is(':checked')) {
                        $('#file_upload_div').removeClass('d-none');
                        $('#file_path_div').addClass('d-none');
                    } else {
                        $('#file_upload_div').addClass('d-none');
                        $('#file_path_div').removeClass('d-none');
                    }
                }

                // Initial toggle
                toggleFields();

                $('select[name="content_type"]').on('change', toggleFields);
                $('#class_note_upload_toggle').on('change', toggleClassNoteOption);
                $('#file_upload_toggle').on('change', toggleFileOption);

            });
        </script>
    @endpush
@endsection