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

@section('styles')
<style>
    .creation-shell { display:grid; gap:1.5rem; }
    .creation-hero {
        border:1px solid #e4e6ef;
        border-radius:1.75rem;
        padding:2rem;
        background:linear-gradient(135deg,#7c3aed 0%,#4c1d95 100%);
        color:#fff;
    }
    .creation-card {
        border:1px solid #e4e6ef;
        border-radius:1.5rem;
        background:#fff;
        box-shadow:0 10px 30px rgba(15,23,42,.05);
    }
    .creation-card .card-header { border:0; padding:1.25rem 1.5rem 0; }
    .creation-card .card-body { padding:1.5rem; }
    .dropzone-modern {
        border:1px dashed #cbd5e1;
        border-radius:1.25rem;
        padding:2rem;
        text-align:center;
        background:#f8fafc;
        cursor:pointer;
    }
</style>
@endsection

@section('title', __('dashboard.Add New Assignment'))
@section('page_heading', __('dashboard.Add New 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>
@endsection

@section('actions')
    <a href="{{ route($routePrefix . '.courses.assignments.index', $course->id) }}" class="btn btn-light-primary">{{ __('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">
        <div class="creation-shell">
            <section class="creation-hero">
                <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-8">
                    <div class="mw-lg-700px">
                        <div class="badge badge-light-primary mb-4 px-4 py-3 fs-8 fw-bold">{{ __('dashboard.Add New Assignment') }}</div>
                        <h1 class="fs-1 fw-bolder mb-4 text-white">{{ __('dashboard.Create a new assignment with clear settings') }}</h1>
                        <p class="fs-5 text-white opacity-75 mb-0">{{ __('dashboard.Build the assignment once, attach optional files, and control due date, score, publication, and course lesson context from one page.') }}</p>
                    </div>
                    <div class="creation-card bg-white bg-opacity-10 border border-white border-opacity-10 shadow-none min-w-lg-275px">
                        <div class="p-6">
                            <div class="text-white opacity-75 fs-7 fw-bold mb-2">{{ __('dashboard.Course') }}</div>
                            <div class="fs-3 fw-bolder text-white mb-5">{{ $course->name }}</div>
                            <div class="d-flex flex-column gap-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-white opacity-75 fs-7">{{ __('dashboard.Lessons') }}</span>
                                    <span class="badge badge-light text-dark fw-bold">{{ $lessons->count() }}</span>
                                </div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-white opacity-75 fs-7">{{ __('dashboard.Status') }}</span>
                                    <span class="badge badge-light-warning fw-bold">{{ __('dashboard.Draft or Published') }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <form id="add_assignment_form" class="form" action="{{ route($routePrefix . '.courses.assignments.store', $course->id) }}" method="POST" enctype="multipart/form-data">
                @csrf

                <div class="row g-7">
                    <div class="col-xl-8">
                        <div class="creation-card card mb-7">
                            <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                                <div class="card-title flex-column align-items-start">
                                    <span class="fs-3 fw-bolder text-gray-900">{{ __('dashboard.Assignment Details') }}</span>
                                    <span class="text-muted mt-1 fw-semibold fs-7">{{ __('dashboard.Define the lesson context, title, and assignment instructions.') }}</span>
                                </div>
                            </div>
                            <div class="p-6">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label 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') }}" name="lesson_id" required>
                                            <option></option>
                                            @foreach($lessons as $lesson)
                                                <option value="{{ $lesson->id }}" {{ old('lesson_id') == $lesson->id ? 'selected' : '' }}>{{ $lesson->title }}</option>
                                            @endforeach
                                        </select>
                                        <button type="button" class="btn btn-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>
                                    @error('lesson_id')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label required">{{ __('dashboard.Title') }}</label>
                                    <input type="text" class="form-control form-control-solid" name="title" value="{{ old('title') }}" required />
                                    @error('title')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="fv-row">
                                    <label class="fs-6 fw-semibold form-label">{{ __('dashboard.Description') }}</label>
                                    <textarea class="form-control form-control-solid" name="description" rows="5">{{ old('description') }}</textarea>
                                </div>
                            </div>
                        </div>

                        <div class="creation-card card">
                            <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                                <div class="card-title flex-column align-items-start">
                                    <span class="fs-3 fw-bolder text-gray-900">{{ __('dashboard.Files') }}</span>
                                    <span class="text-muted mt-1 fw-semibold fs-7">{{ __('dashboard.Attach supporting files if this assignment requires worksheets, references, or templates.') }}</span>
                                </div>
                            </div>
                            <div class="p-6">
                                <div class="dropzone-modern" id="kt_ecommerce_add_product_media">
                                    <i class="ki-outline ki-file-up text-primary fs-3x mb-4"></i>
                                    <h3 class="fs-5 fw-bold text-gray-900 mb-2">{{ __('dashboard.Drop files here or click to upload.') }}</h3>
                                    <div class="text-muted fs-7">{{ __('dashboard.Upload up to 10 files') }}</div>
                                    <input type="file" class="d-none" id="files_input" name="files[]" multiple />
                                </div>
                                <div class="form-text mt-3">{{ __('dashboard.Maximum file size: 8MB') }}</div>
                                @error('files.*')
                                    <div class="invalid-feedback d-block">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4">
                        <div class="creation-card card h-100">
                            <div class="border-b border-zinc-100 px-6 py-4 dark:border-zinc-800">
                                <div class="card-title flex-column align-items-start">
                                    <span class="fs-3 fw-bolder text-gray-900">{{ __('dashboard.Settings') }}</span>
                                    <span class="text-muted mt-1 fw-semibold fs-7">{{ __('dashboard.Control due date, score, weight, and publishing options.') }}</span>
                                </div>
                            </div>
                            <div class="p-6">
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label 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') }}" required/>
                                    @error('due_date')
                                        <div class="invalid-feedback d-block">{{ $message }}</div>
                                    @enderror
                                </div>
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label required">{{ __('dashboard.Score') }}</label>
                                    <input type="number" class="form-control form-control-solid" name="score" value="{{ old('score', 100) }}" required min="0" />
                                </div>
                                <div class="fv-row mb-7">
                                    <label class="fs-6 fw-semibold form-label required">{{ __('dashboard.Weight') }}</label>
                                    <input type="number" class="form-control form-control-solid" name="weight" value="{{ old('weight', 1) }}" required min="0" />
                                </div>
                                <div class="fv-row mb-0">
                                    <label class="fs-6 fw-semibold form-label 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', 1) == '1' ? 'selected' : '' }}>{{ __('dashboard.Yes') }}</option>
                                        <option value="0" {{ old('is_published') == '0' ? 'selected' : '' }}>{{ __('dashboard.No') }}</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end gap-3 mt-8">
                    <a href="{{ route($routePrefix . '.courses.assignments.index', $course->id) }}" class="inline-flex items-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 px-4 py-2 text-sm font-bold text-zinc-700 hover:bg-zinc-100">{{ __('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>
            </form>
        </div>
    </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() {
             if (this.files.length > 0) {
                 dropzone.querySelector('h3').textContent = `${this.files.length} {{ __('dashboard.files selected') }}`;
                 dropzone.querySelector('.text-muted').textContent = Array.from(this.files).map(f => f.name).join(', ');
             }
        });

        $('#addLessonForm').on('submit', function(e) {
            e.preventDefault();
            let formData = $(this).serialize();
            let form = $(this);
            let titleInput = $('#lesson-title');
            let errorDiv = $('#add-lesson-title-error');

            titleInput.removeClass('is-invalid');
            errorDiv.text('');

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

                    let newOption = new Option(response.title, response.id, true, true);
                    $('#lesson_select').append(newOption).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 && errors.title) {
                            titleInput.addClass('is-invalid');
                            errorDiv.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');
            }
        });

        $('#add_assignment_form').on('submit', function(e) {
            const filesInput = document.getElementById('files_input');
            const maxFileSize = 8 * 1024 * 1024;
            let totalSize = 0;

            if (filesInput.files.length > 0) {
                for (let i = 0; i < filesInput.files.length; i++) {
                    totalSize += filesInput.files[i].size;
                }
            }

            if (totalSize > maxFileSize) {
                e.preventDefault();
                Swal.fire({
                    text: "{{ __('dashboard.Total file size cannot exceed 8MB.') }}",
                    icon: "error",
                    buttonsStyling: false,
                    confirmButtonText: "Ok, got it!",
                    customClass: {
                        confirmButton: "btn btn-danger"
                    }
                });
            }
        });
    });
</script>
@endsection