@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg assignment-submit-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Assignment Details"
                    description="Review assignment instructions, attachments, submission rules, and submit your answer.">
                    <a href="{{ route('assignments.index') }}" class="asset-btn asset-btn--secondary">
                        <iconify-icon icon="mdi:arrow-left"></iconify-icon>
                        Back to Assignments
                    </a>
                </x-page-title>

                <div class="ui-card assignment-overview-card">
                    <div class="assignment-overview-card__main">
                        <div class="assignment-overview-card__icon">
                            <iconify-icon icon="ri:file-list-3-line"></iconify-icon>
                        </div>

                        <div class="assignment-overview-card__content">
                            <div class="assignment-overview-card__eyebrow">Assignment</div>
                            <h4 class="assignment-overview-card__title mb-0">
                                {{ $assignment->title }}
                            </h4>

                            @if ($assignment->description)
                                <p class="assignment-overview-card__sub mb-0">
                                    {{ $assignment->description }}
                                </p>
                            @else
                                <p class="assignment-overview-card__sub mb-0">
                                    No description available for this assignment.
                                </p>
                            @endif
                        </div>
                    </div>

                    @if ($existingAnswer)
                        <span class="ui-pill ui-pill--info">
                            <iconify-icon icon="ri:checkbox-circle-line"></iconify-icon>
                            Submitted
                        </span>
                    @else
                        <span class="ui-pill ui-pill--success">
                            <iconify-icon icon="ri:upload-cloud-2-line"></iconify-icon>
                            Ready to Submit
                        </span>
                    @endif
                </div>

                <div class="ui-card">
                    <div class="form-section">
                        <div class="form-section__head">
                            <h5 class="form-section__title mb-1">Assignment Information</h5>
                            <p class="form-section__sub mb-0">
                                Schedule, submission type, and file upload restrictions.
                            </p>
                        </div>

                        <div class="details-grid">
                            <div class="detail-item">
                                <div class="detail-item__label">Start Date</div>
                                <div class="detail-item__value">
                                    {{ $assignment->start_date }} - {{ $assignment->start_time }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">End Date</div>
                                <div class="detail-item__value">
                                    {{ $assignment->end_date }} - {{ $assignment->end_time }}
                                </div>
                            </div>

                            <div class="detail-item">
                                <div class="detail-item__label">Submission Type</div>
                                <div class="detail-item__value">
                                    <span class="ui-pill ui-pill--primary">
                                        {{ ucfirst($assignment->submission_type) }}
                                    </span>
                                </div>
                            </div>

                            @if ($assignment->submission_type === 'file')
                                <div class="detail-item">
                                    <div class="detail-item__label">Max Files</div>
                                    <div class="detail-item__value">
                                        {{ $assignment->max_number_of_uploaded_files }}
                                    </div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-item__label">Max Size</div>
                                    <div class="detail-item__value">
                                        {{ $assignment->maximum_submission_size }} MB
                                    </div>
                                </div>

                                <div class="detail-item">
                                    <div class="detail-item__label">Accepted Types</div>
                                    <div class="detail-item__value">
                                        {{ is_array(json_decode($assignment->accepted_file_types, true))
                                            ? implode(', ', json_decode($assignment->accepted_file_types, true))
                                            : $assignment->accepted_file_types }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                @if ($assignment->attachments->count())
                    <div class="ui-card">
                        <div class="form-section">
                            <div class="form-section__head">
                                <h5 class="form-section__title mb-1">Assignment Attachments</h5>
                                <p class="form-section__sub mb-0">
                                    Files provided by the instructor for this assignment.
                                </p>
                            </div>

                            <div class="assignment-attachments-grid">
                                @foreach ($assignment->attachments as $attachment)
                                    <a href="{{ rtrim(config('app.exam_url'), '/') . '/' . ltrim($attachment->file, '/') }}"
                                       target="_blank"
                                       class="assignment-attachment-card">
                                        <div class="assignment-attachment-card__icon">
                                            <iconify-icon icon="ri:attachment-2"></iconify-icon>
                                        </div>

                                        <div class="assignment-attachment-card__content">
                                            <div class="assignment-attachment-card__title">
                                                {{ basename($attachment->file) }}
                                            </div>
                                            <div class="assignment-attachment-card__sub">
                                                View Attachment
                                            </div>
                                        </div>

                                        <div class="assignment-attachment-card__arrow">
                                            <iconify-icon icon="ri:external-link-line"></iconify-icon>
                                        </div>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                @if ($existingAnswer)
                    <div class="inline-note inline-note--info">
                        <div class="inline-note__icon">
                            <iconify-icon icon="ri:information-line"></iconify-icon>
                        </div>

                        <div>
                            <div class="inline-note__title">Already Submitted</div>
                            <div class="inline-note__text">
                                You already submitted this assignment. You can review your answer, files, grade, and feedback below.
                            </div>
                        </div>
                    </div>

                    @if ($existingAnswer->text)
                        <div class="ui-card">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Your Text Answer</h5>
                                    <p class="form-section__sub mb-0">
                                        The answer you submitted for this assignment.
                                    </p>
                                </div>

                                <div class="answer-box">
                                    {!! nl2br(e($existingAnswer->text)) !!}
                                </div>
                            </div>
                        </div>
                    @endif

                    @if ($existingAnswer->grade || $existingAnswer->feedback)
                        <div class="assignment-result-grid">
                            @if ($existingAnswer->grade)
                                <div class="ui-card assignment-result-card">
                                    <div class="assignment-result-card__head">
                                        <div class="assignment-result-card__icon">
                                            <iconify-icon icon="ri:medal-line"></iconify-icon>
                                        </div>

                                        <div>
                                            <h5 class="assignment-result-card__title mb-0">Grade</h5>
                                            <p class="assignment-result-card__sub mb-0">Your assignment result.</p>
                                        </div>
                                    </div>

                                    <div class="assignment-grade-value">
                                        {{ $existingAnswer->grade }}
                                    </div>

                                    @if ($existingAnswer->grade > 50)
                                        <span class="ui-pill ui-pill--success">Pass</span>
                                    @else
                                        <span class="ui-pill ui-pill--danger">Fail</span>
                                    @endif
                                </div>
                            @endif

                            @if ($existingAnswer->feedback)
                                <div class="ui-card assignment-result-card">
                                    <div class="assignment-result-card__head">
                                        <div class="assignment-result-card__icon assignment-result-card__icon--feedback">
                                            <iconify-icon icon="ri:feedback-line"></iconify-icon>
                                        </div>

                                        <div>
                                            <h5 class="assignment-result-card__title mb-0">Feedback</h5>
                                            <p class="assignment-result-card__sub mb-0">Teacher feedback for your submission.</p>
                                        </div>
                                    </div>

                                    <div class="feedback-box">
                                        {!! nl2br(e($existingAnswer->feedback)) !!}
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endif

                    @if ($existingAnswer->answerAttachments->count())
                        <div class="ui-card">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Your Submitted Files</h5>
                                    <p class="form-section__sub mb-0">
                                        Files you uploaded as your assignment answer.
                                    </p>
                                </div>

                                <div class="assignment-attachments-grid">
                                    @foreach ($existingAnswer->answerAttachments as $att)
                                        <a href="{{ asset($att->file_answer) }}"
                                           target="_blank"
                                           class="assignment-attachment-card">
                                            <div class="assignment-attachment-card__icon">
                                                <iconify-icon icon="ri:file-upload-line"></iconify-icon>
                                            </div>

                                            <div class="assignment-attachment-card__content">
                                                <div class="assignment-attachment-card__title">
                                                    {{ basename($att->file_answer) }}
                                                </div>
                                                <div class="assignment-attachment-card__sub">
                                                    View Submitted File
                                                </div>
                                            </div>

                                            <div class="assignment-attachment-card__arrow">
                                                <iconify-icon icon="ri:external-link-line"></iconify-icon>
                                            </div>
                                        </a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endif
                @else
                    <form method="POST"
                          action="{{ route('assignments.submit', $assignment->id) }}"
                          enctype="multipart/form-data">
                        @csrf

                        <div class="ui-card">
                            <div class="form-section">
                                <div class="form-section__head">
                                    <h5 class="form-section__title mb-1">Submit Your Assignment</h5>
                                    <p class="form-section__sub mb-0">
                                        Complete your answer based on the required submission type.
                                    </p>
                                </div>

                                @if ($assignment->submission_type === 'text')
                                    <div class="asset-form-grid">
                                        <div class="asset-col-12">
                                            <label for="text" class="asset-label">Your Answer</label>
                                            <textarea name="text"
                                                      id="text"
                                                      class="asset-input"
                                                      rows="6"
                                                      placeholder="Write your answer..."></textarea>
                                        </div>
                                    </div>
                                @elseif ($assignment->submission_type === 'file')
                                    <div class="upload-box">
                                        <div class="upload-box__title">Upload your answer files</div>
                                        <div class="upload-box__text">
                                            Allowed:
                                            {{ is_array(json_decode($assignment->accepted_file_types, true))
                                                ? implode(', ', json_decode($assignment->accepted_file_types, true))
                                                : $assignment->accepted_file_types }}
                                            |
                                            Max per file: {{ $assignment->maximum_submission_size ?? '' }} MB
                                        </div>

                                        <div id="fileInputs" class="file-inputs-stack">
                                            <input type="file" name="attachments[]" class="asset-input">
                                        </div>

                                        <button type="button" id="addFile" class="asset-btn asset-btn--secondary mt-3">
                                            <iconify-icon icon="ri:add-line"></iconify-icon>
                                            Add another file
                                        </button>
                                    </div>
                                @endif
                            </div>
                        </div>

                        <div class="asset-actions assignment-submit-actions">
                            <a href="{{ route('assignments.index') }}" class="asset-btn asset-btn--secondary">
                                Cancel
                            </a>

                            <button type="submit" class="asset-btn asset-btn--primary">
                                <iconify-icon icon="ri:send-plane-line"></iconify-icon>
                                Submit Assignment
                            </button>
                        </div>
                    </form>
                @endif

            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const maxFiles = {{ $assignment->max_number_of_uploaded_files ?? 1 }};
            const addFileBtn = document.getElementById('addFile');
            const fileInputs = document.getElementById('fileInputs');

            if (!addFileBtn || !fileInputs) {
                return;
            }

            addFileBtn.addEventListener('click', function () {
                const currentInputs = fileInputs.querySelectorAll('input[type="file"]').length;

                if (currentInputs < maxFiles) {
                    const newInput = document.createElement('input');
                    newInput.type = 'file';
                    newInput.name = 'attachments[]';
                    newInput.classList.add('asset-input');
                    fileInputs.appendChild(newInput);
                } else {
                    alert(`You can upload up to ${maxFiles} files only.`);
                }
            });
        });
    </script>
@endpush

@push('styles')
    <style>
        .assignment-submit-page .ui-card {
            border: 2px solid #e5e7eb !important;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            padding: 1.25rem;
            overflow: hidden;
        }

        .assignment-overview-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .assignment-overview-card__main {
            display: flex;
            align-items: center;
            gap: 1rem;
            min-width: 0;
        }

        .assignment-overview-card__icon {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #071b3d;
            font-size: 1.6rem;
            flex-shrink: 0;
        }

        .assignment-overview-card__content {
            min-width: 0;
        }

        .assignment-overview-card__eyebrow {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 850;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            margin-bottom: 0.2rem;
        }

        .assignment-overview-card__title {
            color: #111827;
            font-size: 1.15rem !important;
            font-weight: 900;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .assignment-overview-card__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.6;
            margin-top: 0.35rem;
            max-width: 820px;
            overflow-wrap: anywhere;
        }

        .form-section__head {
            margin-bottom: 1rem;
            padding-bottom: 0.9rem;
            border-bottom: 1px solid #eef2f7;
        }

        .form-section__title {
            font-size: 1rem !important;
            font-weight: 900;
            color: #111827;
        }

        .form-section__sub {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.55;
        }

        .details-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 0.9rem;
        }

        .detail-item {
            grid-column: span 4 / span 4;
            border: 2px solid #e5e7eb !important;
            background: #f8fafc;
            border-radius: 18px;
            padding: 1rem;
            min-width: 0;
        }

        .detail-item__label {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.35rem;
        }

        .detail-item__value {
            color: #111827;
            font-size: 0.94rem;
            font-weight: 800;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .assignment-attachments-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            gap: 0.85rem;
        }

        .assignment-attachment-card {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border: 2px solid #e5e7eb !important;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
            text-decoration: none;
            color: #334155;
            transition: 0.18s ease;
            min-width: 0;
        }

        .assignment-attachment-card:hover {
            background: #eff6ff;
            border-color: #bfdbfe;
            color: #0f1724;
            transform: translateY(-1px);
            box-shadow: 0 12px 28px rgba(37, 99, 235, 0.08);
        }

        .assignment-attachment-card__icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #071b3d;
            font-size: 1.25rem;
            flex-shrink: 0;
            border: 2px solid #e5e7eb !important;
        }

        .assignment-attachment-card__content {
            min-width: 0;
            flex: 1;
        }

        .assignment-attachment-card__title {
            color: #111827;
            font-size: 0.9rem !important;
            font-weight: 850;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .assignment-attachment-card__sub {
            color: #64748b;
            font-size: 0.8rem;
            font-weight: 700;
            margin-top: 0.15rem;
        }

        .assignment-attachment-card__arrow {
            color: #94a3b8;
            flex-shrink: 0;
        }

        .inline-note {
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            border-radius: 18px;
            padding: 1rem;
            border: 2px solid #dbeafe !important;
            background: #eff6ff;
            color: #0f1724;
        }

        .inline-note__icon {
            width: 38px;
            height: 38px;
            border-radius: 14px;
            background: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1.2rem;
        }

        .inline-note__title {
            font-weight: 900;
            color: #1e3a8a;
            margin-bottom: 0.15rem;
        }

        .inline-note__text {
            font-size: 0.9rem;
            color: #0f1724;
            line-height: 1.5;
        }

        .answer-box,
        .feedback-box {
            color: #334155;
            font-size: 0.95rem;
            line-height: 1.75;
            background: #f8fafc;
            border: 2px solid #eef2f7 !important;
            border-radius: 16px;
            padding: 1rem;
            overflow-wrap: anywhere;
        }

        .assignment-result-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;
        }

        .assignment-result-card__head {
            display: flex;
            align-items: center;
            gap: 0.85rem;
            margin-bottom: 1rem;
        }

        .assignment-result-card__icon {
            width: 46px;
            height: 46px;
            border-radius: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #f0fdf4;
            color: #166534;
            font-size: 1.35rem;
            flex-shrink: 0;
        }

        .assignment-result-card__icon--feedback {
            background: #fffbeb;
            color: #92400e;
        }

        .assignment-result-card__title {
            color: #111827;
            font-size: 1rem !important;
            font-weight: 900;
        }

        .assignment-result-card__sub {
            color: #64748b;
            font-size: 0.86rem;
            margin-top: 0.15rem;
        }

        .assignment-grade-value {
            color: #111827;
            font-size: 1.75rem;
            font-weight: 950;
            margin-bottom: 0.75rem;
        }

        .asset-form-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .asset-col-12 {
            grid-column: span 12 / span 12;
        }

        .asset-label {
            display: inline-block;
            margin-bottom: 0.45rem;
            font-weight: 750;
            color: #374151;
            font-size: 0.9rem;
        }

        .asset-input,
        .form-control {
            width: 100% !important;
            min-height: 44px;
            border: 1px solid #dbe2ea !important;
            border-radius: 14px !important;
            padding: 0.68rem 0.9rem;
            background: #fff;
            color: #111827;
            transition: 0.2s ease;
            box-shadow: none !important;
        }

        textarea.asset-input {
            min-height: 145px;
            resize: vertical;
        }

        .asset-input:focus,
        .form-control:focus {
            outline: none;
            border-color: #b8c4d6 !important;
            box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.08) !important;
        }

        .upload-box {
            border: 2px dashed #cbd5e1 !important;
            border-radius: 18px;
            padding: 1rem;
            background: #f8fafc;
        }

        .upload-box__title {
            color: #111827;
            font-size: 0.95rem !important;
            font-weight: 900;
            margin-bottom: 0.2rem;
        }

        .upload-box__text {
            color: #64748b;
            font-size: 0.86rem;
            margin-bottom: 0.85rem;
            line-height: 1.5;
        }

        .file-inputs-stack {
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .asset-actions {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .assignment-submit-actions {
            margin-top: 1rem;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.38rem 0.78rem;
            font-size: 0.76rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--primary { background: #eff6ff; color: #0f1724; }
        .ui-pill--info { background: #eef2ff; color: #4338ca; }
        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }

        @media (max-width: 991.98px) {
            .detail-item {
                grid-column: span 6 / span 6;
            }

            .assignment-result-grid {
                grid-template-columns: 1fr;
            }

            .assignment-overview-card {
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .assignment-submit-page .ui-card {
                padding: 1rem;
            }

            .detail-item {
                grid-column: span 12 / span 12;
            }

            .assignment-overview-card__main {
                align-items: flex-start;
            }

            .assignment-attachments-grid {
                grid-template-columns: 1fr;
            }

            .asset-actions .asset-btn {
                width: 100%;
            }
        }
    </style>
@endpush