@extends('layouts.main_dashboard.app')
@php($routePrefix = auth()->user()?->usesStaffPortal() ? 'teacher' : 'admin')

@section('styles')
@endsection

@section('title',  __('dashboard.Edit Assignment')
@section('page_heading',  __('dashboard.Edit Assignment'))

@section('breadcrumb')
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.home') }}" class="text-muted text-hover-primary">{{ __('dashboard.Home') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.courses.show', $course->id) }}">{{ $course->name }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted"><a href="{{ route($routePrefix . '.courses.assignments.index', $course->id) }}">{{ __('dashboard.All Assignments') }}</a></li>
    <li class="breadcrumb-item"><span class="bullet bg-gray-500 w-5px h-2px"></span></li>
    <li class="breadcrumb-item text-muted">{{ __('dashboard.Edit Assignment') }}</li>
@endsection

@section('actions')
    <a href="{{ route($routePrefix . '.courses.assignments.index', $course->id) }}" class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-white px-4 py-2 text-sm font-bold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200">{{ __('dashboard.Back to Assignments') }}</a>
@endsection

@section('content')
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-fluid">
        <form id="edit_assignment_form" class="form d-flex flex-column flex-lg-row" action="{{ route($routePrefix . '.courses.assignments.update', ['courseId' => $course->id, 'id' => $assignment->id]) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <div class="d-flex flex-column flex-row-fluid gap-7 gap-lg-10">
                <div class="card card-flush py-4">
                    <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">
                            <i class="ki-outline ki-paper-clip fs-1 me-2"></i>
                            <h2>{{ __('dashboard.Assignment Details') }}</h2>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                        <div class="fv-row mb-7">
                            <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Lesson') }}</label>
                            <div class="input-group">
                                <select id="lesson_select" class="form-select form-select-solid" data-control="select2" data-placeholder="{{ __('dashboard.Select Lesson') }}" data-hide-search="true" name="lesson_id" required>
                                    <option></option>
                                    @foreach($lessons as $lesson)
                                        <option value="{{ $lesson->id }}" {{ old('lesson_id', $assignment->lesson_id) == $lesson->id ? 'selected' : '' }}>{{ $lesson->title }}</option>
                                    @endforeach
                                </select>
                                <button type="button" class="btn btn-outline btn-outline-dashed btn-outline-primary btn-active-light-primary" data-bs-toggle="modal" data-bs-target="#addLessonModal" title="{{ __('dashboard.Add New Lesson') }}">
                                    <i class="ki-outline ki-plus fs-2"></i>
                                </button>
                            </div>
                        </div>
                        <div class="fv-row mb-7">
                            <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Title') }}</label>
                            <input type="text" class="form-control form-control-solid" name="title" value="{{ old('title', $assignment->title) }}" required />
                        </div>
                        <div class="fv-row">
                            <label class="fs-6 fw-semibold form-label mt-3"><span>{{ __('dashboard.Description') }}</span></label>
                            <textarea class="form-control form-control-solid" name="description" rows="4">{{ old('description', $assignment->description) }}</textarea>
                        </div>
                    </div>
                </div>

                <div class="card card-flush py-4">
                    <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">
                           <i class="ki-outline ki-calendar-tick fs-1 me-2"></i>
                           <h2>{{ __('dashboard.Settings') }}</h2>
                        </div>
                    </div>
                     <div class="card-body pt-0">
                        <div class="row">
                            <div class="col-md-6 fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Due Date') }}</label>
                                <input class="form-control form-control-solid" placeholder="{{ __('dashboard.Select date') }}" id="kt_due_date_picker" name="due_date" value="{{ old('due_date', $assignment->due_date->format('Y-m-d H:i')) }}" required/>
                            </div>
                             <div class="col-md-6 fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Score') }}</label>
                                <input type="number" class="form-control form-control-solid" name="score" value="{{ old('score', $assignment->score) }}" required min="0" />
                            </div>
                             <div class="col-md-6 fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Weight') }}</label>
                                <input type="number" class="form-control form-control-solid" name="weight" value="{{ old('weight', $assignment->weight) }}" required min="0" />
                            </div>
                            <div class="col-md-6 fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3 required">{{ __('dashboard.Is Published') }}</label>
                                <select class="form-select form-select-solid" name="is_published" data-control="select2" data-hide-search="true" required>
                                    <option value="1" {{ old('is_published', $assignment->is_published) == '1' ? 'selected' : '' }}>{{ __('dashboard.Yes') }}</option>
                                    <option value="0" {{ old('is_published', $assignment->is_published) == '0' ? 'selected' : '' }}>{{ __('dashboard.No') }}</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card card-flush py-4">
                    <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                        <div class="text-lg font-black text-zinc-900 dark:text-white">
                            <i class="ki-outline ki-file-up fs-1 me-2"></i>
                            <h2>{{ __('dashboard.Add More Files') }}</h2>
                        </div>
                    </div>
                    <div class="card-body pt-0">
                         <div class="fv-row mb-2">
                            <div class="dropzone" id="kt_ecommerce_add_product_media">
                                <div class="dz-message needsclick">
                                    <i class="ki-outline ki-file-up text-primary fs-3x"></i>
                                    <div class="ms-4">
                                        <h3 class="fs-5 fw-bold text-gray-900 mb-1">{{ __('dashboard.Drop files here or click to upload.') }}</h3>
                                        <span class="fs-7 fw-semibold text-gray-500">{{ __('dashboard.Upload up to 10 files') }}</span>
                                    </div>
                                </div>
                                 <input type="file" class="d-none" id="files_input" name="files[]" multiple />
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end">
                    <a href="{{ route($routePrefix . '.courses.assignments.index', $course->id) }}" class="btn btn-light me-3">{{ __('dashboard.Cancel') }}</a>
                    <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">
                        <span class="indicator-label">{{ __('dashboard.Save') }}</span>
                        <span class="indicator-progress">{{ __('dashboard.Please wait...') }}<span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                    </button>
                </div>
            </div>
        </form>

        @if($assignment->files->isNotEmpty())
        <div class="card card-flush py-4 mt-7">
            <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                <div class="text-lg font-black text-zinc-900 dark:text-white">
                    <h2>{{ __('dashboard.Existing Files') }}</h2>
                </div>
            </div>
            <div class="card-body pt-0">
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <tbody class="fw-semibold text-gray-600">
                            @foreach($assignment->files as $file)
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="ki-outline ki-file fs-2 me-3"></i>
                                            <a href="{{ Storage::url($file->file_path) }}" target="_blank">{{ basename($file->file_path) }}</a>
                                        </div>
                                    </td>
                                    <td class="text-end">
                                        <form action="{{ route($routePrefix . '.courses.assignments.destroyFile', $file->id) }}" method="POST" onsubmit="return confirm('{{ __('dashboard.Are you sure you want to delete this Item?') }}');">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn btn-sm btn-light-danger">{{ __('dashboard.Delete') }}</button>
                                        </form>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>
</div>

<div class="modal fade" id="addLessonModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title">{{ __('dashboard.Add New Lesson') }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button></div>
            <div class="modal-body">
                <form id="addLessonForm">
                    <input type="hidden" name="subject_id" value="{{ $course->subject->id }}">
                    <div class="mb-3">
                        <label for="lesson-title" class="form-label required">{{ __('dashboard.Lesson Title') }}</label>
                        <input type="text" class="w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-white" id="lesson-title" name="title" required>
                        <div class="invalid-feedback" id="add-lesson-title-error"></div>
                    </div>
                    <div class="d-flex justify-content-end">
                        <button type="button" class="btn btn-light me-3" data-bs-dismiss="modal">{{ __('dashboard.Cancel') }}</button>
                        <button type="submit" class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-bold text-white hover:bg-brand-700">{{ __('dashboard.Save') }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        $("#kt_due_date_picker").flatpickr({ enableTime: true, dateFormat: "Y-m-d H:i" });

        const dropzone = document.getElementById('kt_ecommerce_add_product_media');
        const fileInput = document.getElementById('files_input');

        dropzone.addEventListener('click', function() {
            fileInput.click();
        });

        fileInput.addEventListener('change', function() {
             const message = dropzone.querySelector('.dz-message');
             if (this.files.length > 0) {
                 message.querySelector('h3').textContent = `${this.files.length} {{ __('dashboard.files selected') }}`;
                 message.querySelector('span').textContent = Array.from(this.files).map(f => f.name).join(', ');
             }
        });

        $('#addLessonForm').on('submit', function(e) {
            e.preventDefault();

            $('#lesson-title').removeClass('is-invalid');
            $('#add-lesson-title-error').text('');

            let formData = $(this).serialize();
            let subjectId = $(this).find('input[name="subject_id"]').val();
            let url = `{{ url('admin/subjects') }}/${subjectId}/lessons/ajax-store`;

            $.ajax({
                url: url,
                type: 'POST',
                data: formData,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    $('#addLessonModal').modal('hide');
                    $('#addLessonForm')[0].reset();

                    const lessonSelect = $('#lesson_select');

                    if (response.lessons && Array.isArray(response.lessons)) {
                        lessonSelect.empty();

                        response.lessons.forEach(function(lesson) {
                             const newOption = new Option(lesson.title, lesson.id, false, false);
                             lessonSelect.append(newOption);
                        });

                        lessonSelect.val(response.new_lesson_id).trigger('change');
                    }

                    Swal.fire({
                        text: response.message || "{{ __('dashboard.Lesson added successfully.') }}",
                        icon: "success",
                        buttonsStyling: false,
                        confirmButtonText: "Ok, got it!",
                        customClass: { confirmButton: "btn btn-primary" }
                    });
                },
                error: function(xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        if (errors.title) {
                            $('#lesson-title').addClass('is-invalid');
                            $('#add-lesson-title-error').text(errors.title[0]);
                        }
                    } else {
                        Swal.fire({
                            text: "{{ __('dashboard.An error occurred. Check the console for details.') }}",
                            icon: "error",
                            buttonsStyling: false,
                            confirmButtonText: "Ok, got it!",
                            customClass: { confirmButton: "btn btn-danger" }
                        });
                    }
                }
            });
        });

        $('.modal').on('hidden.bs.modal', function () {
            const appRoot = $('#kt_app_root');
            if (appRoot.attr('aria-hidden') === 'true') {
                appRoot.removeAttr('aria-hidden');
            }
        });
    });
</script>
@endsection