@extends('user.layouts.app')

@section('content')

{{-- PAGE TITLE --}}
<div style="margin-bottom:28px;">
    <div style="font-size:26px; font-weight:700; color:#111827; font-family:'Outfit', sans-serif;">
        Input Laporan Kegiatan
    </div>
    <div style="font-size:14px; color:#6b7280; margin-top:6px; font-family:'Outfit', sans-serif;">
        Pastikan data yang dimasukkan sudah sesuai dengan dokumentasi lapangan.
    </div>
</div>

@if ($errors->any())
    <div style="background-color: #fee2e2; border-left: 4px solid #ef4444; padding: 16px; margin-bottom: 24px; border-radius: 4px;">
        <div style="color: #b91c1c; font-weight: 600; margin-bottom: 8px;">Terdapat kesalahan pada input Anda:</div>
        <ul style="color: #b91c1c; font-size: 14px; margin: 0; padding-left: 20px;">
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

<form action="{{ route('activities.store') }}" method="POST" enctype="multipart/form-data">
    @csrf

    {{-- DATA PEGAWAI --}}
    <div class="card">

        <div style="font-size:13px; font-weight:600; color:#1d4ed8; margin-bottom:16px; 
                    padding-bottom:12px; border-bottom:1px solid #e5e7eb; letter-spacing:0.04em;">
            DATA PEGAWAI
        </div>

        <div class="form-grid">
            <div>
                <label class="label">Nama Pegawai</label>
                <input type="text" value="{{ session('user')['name'] ?? 'Guest' }}" class="input readonly" readonly>
            </div>
            <div>
                <label class="label">Username</label>
                <input type="text" value="{{ session('user')['username'] ?? '-' }}" class="input readonly" readonly>
            </div>
        </div>

    </div>

    {{-- DETAIL KEGIATAN --}}
    <div class="card">

        <div style="font-size:13px; font-weight:600; color:#1d4ed8; margin-bottom:16px; 
                    padding-bottom:12px; border-bottom:1px solid #e5e7eb; letter-spacing:0.04em;">
            DETAIL KEGIATAN
        </div>

        <div>
            <label class="label">Judul Kegiatan</label>
            <input type="text" name="nama_kegiatan" class="input" placeholder="Monitoring perusahaan..." required>
        </div>

        <div class="form-grid" style="margin-top:16px;">
            <div>
                <label class="label">Tanggal</label>
                <input type="date" name="tanggal" class="input" required>
            </div>
            <div>
                <label class="label">Lokasi</label>
                <input type="text" name="lokasi" class="input" placeholder="Kota / Alamat" required>
            </div>
        </div>

        <div style="margin-top:16px;">
            <label class="label">Detail Kegiatan</label>
            <textarea name="deskripsi" class="textarea" placeholder="Tulis laporan lengkap di sini..." required></textarea>
        </div>

    </div>

    {{-- UPLOAD --}}
    <div class="card">

        <div style="font-size:13px; font-weight:600; color:#1d4ed8; margin-bottom:16px; 
                    padding-bottom:12px; border-bottom:1px solid #e5e7eb; letter-spacing:0.04em;">
            LAMPIRAN DOKUMENTASI
        </div>

        <label class="upload-box" id="upload-label">
            <input type="file" name="image" id="file-input" accept=".pdf,.jpg,.jpeg,.png" hidden>

            {{-- Icon Upload --}}
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none"
                 stroke="#9ca3af" stroke-width="1.5" style="margin:0 auto 10px;">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
                <polyline points="17 8 12 3 7 8"/>
                <line x1="12" y1="3" x2="12" y2="15"/>
            </svg>

            <p style="font-weight:600; font-size:14px; color:#374151; margin-bottom:4px;" id="file-name">
                Klik untuk upload file
            </p>
            <small style="color:#9ca3af; font-size:12px;">PDF / JPG / PNG · Maksimal 2MB</small>
        </label>

    </div>

    {{-- SUBMIT --}}
    <button class="btn" type="submit">
        Kirim Laporan
    </button>

</form>

{{-- Script: tampilkan nama file setelah dipilih --}}
<script>
    document.getElementById('file-input').addEventListener('change', function() {
        const fileName = this.files[0] ? this.files[0].name : 'Klik untuk upload file';
        document.getElementById('file-name').textContent = fileName;
    });
</script>

@endsection