@extends('backend.layout.app')

@section('content')
    <div class="page-content">
        <div class="row">
            <div class="col-12 px-0">
               
                  <div class="bg-white shadow-sm border-bottom mb-2 rounded">
    <div class="container-fluid d-flex align-items-center justify-content-between py-3 px-4">
        <h4 class="m-0">Add Module Content</h4>
        <a href="{{ route('admin.module.content.index') }}" class="btn btn-outline-secondary btn-sm">
            ← Back to List
        </a>
    </div>
</div>

                    </div>
                        <form action="{{ route('admin.module.content.store') }}" method="POST" enctype="multipart/form-data">
                            @csrf
                          
                            <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 }}"
                                                {{ request('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="">First, select a course</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') == 'video' ? 'selected' : '' }}>Video
                                        </option>
                                        <option value="pdf" {{ old('content_type') == 'pdf' ? 'selected' : '' }}> PDF
                                        </option>
                                        <option value="assignment"
                                            {{ old('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') }}" required placeholder="Content title">
                                    @error('title')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <!-- Video URL -->
                                <div class="col-md-6 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="{{ old('youtube_id') }}"
                                        placeholder="Enter 11-character YouTube Video ID" maxlength="11">
                                    <div class="invalid-feedback" id="youtube_id_error" style="display: none;">Please enter only the 11-character YouTube video ID.</div>
                                    @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') }}</textarea>
                                </div>
                    </div>
                            </div>

                                <!-- Class Note Toggle (Video only) -->
                                <!-- 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 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">
                                    </div>

                                    <div class="col-md-6 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"
                                            placeholder="Enter URL or path">
                                    </div>
                               

                                <!-- Toggle (moved below inputs) -->
                                <div class="col-12 mt-3 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">
                                            <label class="form-check-label" for="class_note_upload_toggle">
                                                <span class="text-muted"> Upload or enter URL</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>


                                <!-- File Toggle (PDF / Assignment) -->
                                <div class="col-12 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">
                                            <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 d-none" id="file_upload_div">
                                    <label class="form-label ">Upload File</label>
                                    <input type="file" name="file_upload" class="form-control dropify">
                                </div>
                                <div class="col-md-6 d-none" id="file_path_div">
                                    <label class="form-label ">File URL / Path</label>
                                    <input type="text" name="file_path" class="form-control"
                                        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') == '0' ? 'selected' : '' }}>No
                                                </option>
                                                <option value="1" {{ old('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" selected>Active</option>
                                                <option value="0">Inactive</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                    </div>
 </div>
                                <!-- Submit -->
                                <div class="col-12 mt-3">
                                    <button type="submit" class="btn btn-primary">Save Content</button>
                                    <a href="{{ route('admin.module.content.index') }}"
                                        class="btn btn-secondary">Cancel</a>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>
            </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);

                // Youtube ID validation
                $('#content_url').on('input change', function() {
                    var value = $(this).val().trim();
                    var regex = /^[a-zA-Z0-9_-]{11}$/;
                    if (value.length > 0 && !regex.test(value)) {
                        $(this).addClass('is-invalid');
                        $('#youtube_id_error').show();
                    } else {
                        $(this).removeClass('is-invalid');
                        $('#youtube_id_error').hide();
                    }
                });

            });
        </script>
    @endpush
@endsection