@extends('siswa.layouts.app')

@section('title', $tugas->judul_tugas)

@push('styles')
<style>
    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #2b8ef3;
        font-weight: 600;
        font-size: 14px;
        text-decoration: none;
        margin-bottom: 20px;
    }

    .back-link:hover { text-decoration: underline; }

    .tugas-header {
        background: #fff;
        border-radius: 20px;
        padding: 28px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        margin-bottom: 20px;
        border-left: 5px solid #2b8ef3;
    }

    .tugas-header.terlambat { border-left-color: #ef4444; }
    .tugas-header.selesai   { border-left-color: #22c55e; }

    .tugas-judul {
        font-size: 20px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 12px;
    }

    .tugas-meta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 16px;
    }

    .meta-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #f1f5f9;
        color: #475569;
        font-size: 13px;
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 99px;
    }

    .meta-chip.deadline-chip {
        background: #fee2e2;
        color: #ef4444;
    }

    .meta-chip.deadline-chip.aman {
        background: #e6f0ff;
        color: #2b8ef3;
    }

    .keterangan-box {
        background: #f8fafc;
        border-radius: 12px;
        padding: 16px;
        font-size: 14px;
        color: #475569;
        line-height: 1.7;
        border: 1px solid #e2e8f0;
        margin-top: 12px;
    }

    .tugas-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

    .lampiran-card {
        background: #fff;
        border-radius: 20px;
        padding: 28px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        display: flex;
        flex-direction: column;
    }

    .lampiran-title {
        font-size: 17px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .lampiran-file-box {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f0f7ff;
        border-radius: 14px;
        padding: 28px 20px;
        text-align: center;
        gap: 12px;
    }

    .lampiran-file-icon {
        width: 56px;
        height: 56px;
    }

    .lampiran-file-name {
        font-size: 13px;
        font-weight: 600;
        color: #1e293b;
        word-break: break-all;
    }

    .lampiran-file-ext {
        font-size: 11px;
        color: #94a3b8;
        background: #e2e8f0;
        padding: 2px 10px;
        border-radius: 99px;
    }

    .btn-download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 16px;
        background: #2b8ef3;
        color: white;
        padding: 10px 20px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 13px;
        text-decoration: none;
        transition: background 0.2s;
        width: 100%;
    }

    .btn-download:hover {
        background: #1a7ae0;
        color: white;
    }

    .no-lampiran {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #f8fafc;
        border-radius: 14px;
        padding: 28px 20px;
        text-align: center;
        color: #94a3b8;
        font-size: 13px;
        gap: 8px;
    }

    @media (max-width: 768px) {
        .tugas-bottom-grid {
            grid-template-columns: 1fr;
        }
}

    /* SUBMIT FORM */
    .submit-card {
        background: #fff;
        border-radius: 20px;
        padding: 28px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        margin-bottom: 20px;
    }

    .submit-title {
        font-size: 17px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 20px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .upload-area {
        border: 2px dashed #cbd5e1;
        border-radius: 14px;
        padding: 32px;
        text-align: center;
        cursor: pointer;
        transition: border-color 0.2s, background 0.2s;
        position: relative;
    }

    .upload-area:hover, .upload-area.drag-over {
        border-color: #2b8ef3;
        background: #f0f7ff;
    }

    .upload-area input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        width: 100%;
        height: 100%;
    }

    .upload-icon {
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
    }

    .upload-text {
        font-size: 14px;
        color: #64748b;
        margin: 0 0 4px;
    }

    .upload-hint {
        font-size: 12px;
        color: #94a3b8;
        margin: 0;
    }

    .file-preview {
        display: none;
        align-items: center;
        gap: 12px;
        background: #f0f7ff;
        border-radius: 10px;
        padding: 12px 16px;
        margin-top: 12px;
    }

    .file-preview.show { display: flex; }

    .file-preview-name {
        flex: 1;
        font-size: 14px;
        font-weight: 600;
        color: #1e293b;
    }

    .file-preview-size {
        font-size: 12px;
        color: #94a3b8;
    }

    .btn-submit {
        width: 100%;
        background: #2b8ef3;
        color: white;
        border: none;
        border-radius: 12px;
        padding: 14px;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        margin-top: 16px;
        transition: background 0.2s;
    }

    .btn-submit:hover { background: #1a7ae0; }
    .btn-submit:disabled {
        background: #cbd5e1;
        cursor: not-allowed;
    }

    /* SUDAH KUMPUL */
    .sudah-kumpul-card {
        background: #dcfce7;
        border-radius: 20px;
        padding: 28px;
        text-align: center;
        margin-bottom: 20px;
    }

    .sudah-kumpul-icon {
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
    }

    .sudah-kumpul-title {
        font-size: 17px;
        font-weight: 700;
        color: #166534;
        margin: 0 0 8px;
    }

    .sudah-kumpul-sub {
        font-size: 14px;
        color: #16a34a;
        margin: 0;
    }

    .exp-display {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #fef9c3;
        color: #b45309;
        font-size: 15px;
        font-weight: 700;
        padding: 6px 16px;
        border-radius: 99px;
        margin-top: 12px;
    }

    .terlambat-warning {
        background: #fff7ed;
        border: 1px solid #fed7aa;
        border-radius: 14px;
        padding: 16px 20px;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 20px;
        font-size: 13px;
        color: #9a3412;
    }

    .terlambat-warning-icon {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .alert-success {
        background: #dcfce7;
        color: #166534;
        border-radius: 12px;
        padding: 14px 18px;
        margin-bottom: 20px;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .alert-error {
        background: #fee2e2;
        color: #991b1b;
        border-radius: 12px;
        padding: 14px 18px;
        margin-bottom: 20px;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
</style>
@endpush

@section('content')

<a href="{{ route('siswa.tugas.index') }}" class="back-link">← Kembali ke Daftar Tugas</a>

@if(session('success'))
    <div class="alert-success">
        <img src="{{ asset('images/icon/siswat/v.png') }}" alt="Berhasil" class="icon-sm">
        {{ session('success') }}
    </div>
@endif
@if(session('error'))
    <div class="alert-error">
        <img src="{{ asset('images/icon/siswat/x.png') }}" alt="Gagal" class="icon-sm">
        {{ session('error') }}
    </div>
@endif

{{-- DETAIL TUGAS --}}
@php
    $headerClass   = $sudahKumpul ? 'selesai' : ($terlambat ? 'terlambat' : '');
    $deadlineClass = $terlambat ? '' : 'aman';
@endphp

<div class="tugas-header {{ $headerClass }}">
    <h1 class="tugas-judul">{{ $tugas->judul_tugas }}</h1>

    <div class="tugas-meta-row">
        <span class="meta-chip">
            <img src="{{ asset('images/icon/siswat/stacked.png') }}" alt="Mata pelajaran" class="icon-sm">
            {{ optional(optional($tugas->mengajar)->mapel)->nama_mapel ?? '-' }}
        </span>
        <span class="meta-chip">
            <img src="{{ asset('images/icon/siswat/guru.png') }}" alt="Guru" class="icon-sm">
            {{ optional(optional($tugas->mengajar)->guru)->nama ?? '-' }}
        </span>
        <span class="meta-chip deadline-chip {{ $deadlineClass }}">
            <img src="{{ asset('images/icon/siswat/alarm.png') }}" alt="Deadline" class="icon-sm">
            Deadline: {{ \Carbon\Carbon::parse($tugas->deadline)->format('d M Y, H:i') }}
        </span>
    </div>

    @if($tugas->keterangan)
        <div class="keterangan-box">
            {!! nl2br(e($tugas->keterangan)) !!}
        </div>
    @endif

{{-- WARNING TERLAMBAT --}}
@if($terlambat && !$sudahKumpul)
    <div class="terlambat-warning">
        <span class="terlambat-warning-icon">
            <img src="{{ asset('images/icon/siswat/alert.png') }}" alt="Peringatan terlambat" class="icon-md">
        </span>
        <div>
            <strong>Deadline sudah lewat!</strong><br>
            Kamu masih bisa mengumpulkan tugas ini, tapi akan ditandai sebagai <strong>terlambat</strong>.
        </div>
    </div>
@endif

{{-- SUDAH DIKUMPULKAN --}}
@if($sudahKumpul)
    <div class="sudah-kumpul-card">
        <div class="sudah-kumpul-icon">
            <img src="{{ asset('images/icon/siswat/confetti.png') }}" alt="Tugas sudah dikumpulkan" class="icon-mascot" style="width:80px; margin-top:0;">
        </div>
        <p class="sudah-kumpul-title">Tugas sudah dikumpulkan!</p>
        <p class="sudah-kumpul-sub">
            Dikumpulkan pada {{ \Carbon\Carbon::parse($pengumpulan->tanggal_submit)->format('d M Y, H:i') }}
            &bull; Status: <strong>{{ ucfirst($pengumpulan->status) }}</strong>
        </p>
        @if($pengumpulan->exp > 0)
            <div class="exp-display">
                <img src="{{ asset('images/icon/siswat/star.png') }}" alt="EXP" class="icon-sm">
                {{ $pengumpulan->exp }} EXP didapat
            </div>
        @else
            <p style="font-size:13px;color:#16a34a;margin-top:8px">
                EXP akan diberikan setelah guru menilai tugasmu.
            </p>
        @endif
        @if($pengumpulan->lampiran_tugas)
            <a href="{{ asset('storage/' . $pengumpulan->lampiran_tugas) }}"
               target="_blank"
               style="display:inline-flex;align-items:center;gap:6px;margin-top:14px;
                      background:#fff;color:#2b8ef3;padding:8px 18px;border-radius:10px;
                      font-weight:600;font-size:13px;text-decoration:none;">
                <img src="{{ asset('images/icon/gurud/link.png') }}" alt="Lampiran" class="icon-md"> Lihat File yang Dikumpulkan
            </a>
        @endif
    </div>

@else
    {{-- GRID: LAMPIRAN GURU (kiri) + UPLOAD SISWA (kanan) --}}
    <div class="tugas-bottom-grid">

        {{-- KIRI: Lampiran dari Guru --}}
        <div class="lampiran-card">
            <p class="lampiran-title">
                <img src="{{ asset('images/icon/gurud/link.png') }}" alt="Lampiran" class="icon-md">
                File dari Guru
            </p>

            @if($tugas->lampiran)
                @php
                    $namaFile = basename($tugas->lampiran);
                    $ext      = strtoupper(pathinfo($namaFile, PATHINFO_EXTENSION));
                @endphp
                <div class="lampiran-file-box">
                    <img src="{{ asset('images/icon/gurud/link.png') }}" alt="File" class="lampiran-file-icon">
                    <span class="lampiran-file-name">{{ $namaFile }}</span>
                    <span class="lampiran-file-ext">{{ $ext }}</span>
                </div>
                <a href="{{ asset('storage/' . $tugas->lampiran) }}"
                   target="_blank"
                   class="btn-download">
                    <img src="{{ asset('images/icon/gurud/download.png') }}" alt="Download" class="icon-md"> Download File Tugas
                </a>
            @else
                <div class="no-lampiran">
                    <span style="font-size:32px"><img src="{{ asset('images/icon/gurud/mailbox.png') }}" alt="Mailbox" class="icon-md"></span>
                    Tidak ada file lampiran dari guru.
                </div>
            @endif
        </div>

        {{-- KANAN: Upload Jawaban --}}
        <div class="submit-card" style="margin-bottom:0">
            <p class="submit-title">
                <img src="{{ asset('images/icon/siswat/upload.png') }}" alt="Upload jawaban" class="icon-md">
                Upload Jawaban
            </p>

            <form action="{{ route('siswa.tugas.submit', $tugas->id_tugas) }}"
                  method="POST"
                  enctype="multipart/form-data"
                  id="submitForm">
                @csrf

                @error('lampiran_tugas')
                    <div class="alert-error" style="margin-bottom:16px">
                        <img src="{{ asset('images/icon/siswat/x.png') }}" alt="Error validasi" class="icon-sm">
                        {{ $message }}
                    </div>
                @enderror

                <div class="upload-area" id="uploadArea">
                    <input type="file"
                           name="lampiran_tugas"
                           id="fileInput"
                           accept=".pdf,.doc,.docx,.jpg,.jpeg,.png"
                           required>
                    <div class="upload-icon">
                        <img src="{{ asset('images/icon/siswat/upload.png') }}" alt="Upload file" class="icon-mascot" style="width:48px; margin-top:0;">
                    </div>
                    <p class="upload-text"><strong>Klik untuk pilih file</strong> atau drag & drop di sini</p>
                    <p class="upload-hint">PDF, DOC, DOCX, JPG, PNG &bull; Maks. 5MB</p>
                </div>

                <div class="file-preview" id="filePreview">
                    <img src="{{ asset('images/icon/siswat/buku1.png') }}" alt="File terpilih" class="icon-md">
                    <span class="file-preview-name" id="fileName">-</span>
                    <span class="file-preview-size" id="fileSize">-</span>
                </div>

                <button type="submit" class="btn-submit" id="submitBtn" disabled>
                    Kumpulkan Tugas
                </button>
            </form>
        </div>

    </div>
@endif

@endsection

@push('scripts')
<script>
const fileInput   = document.getElementById('fileInput');
const filePreview = document.getElementById('filePreview');
const fileName    = document.getElementById('fileName');
const fileSize    = document.getElementById('fileSize');
const submitBtn   = document.getElementById('submitBtn');
const uploadArea  = document.getElementById('uploadArea');

if (fileInput) {
    fileInput.addEventListener('change', function () {
        if (this.files && this.files[0]) {
            const file = this.files[0];
            const size = (file.size / 1024 / 1024).toFixed(2);
            fileName.textContent = file.name;
            fileSize.textContent = size + ' MB';
            filePreview.classList.add('show');
            submitBtn.disabled = false;
        }
    });

    uploadArea.addEventListener('dragover', (e) => {
        e.preventDefault();
        uploadArea.classList.add('drag-over');
    });

    uploadArea.addEventListener('dragleave', () => {
        uploadArea.classList.remove('drag-over');
    });

    uploadArea.addEventListener('drop', (e) => {
        e.preventDefault();
        uploadArea.classList.remove('drag-over');
        if (e.dataTransfer.files[0]) {
            fileInput.files = e.dataTransfer.files;
            fileInput.dispatchEvent(new Event('change'));
        }
    });
}
</script>
@endpush