@extends('layouts.portal')

@section('title', 'Buat Penugasan Baru - Portal Pegawai')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <!-- Breadcrumb & Nav Back -->
    <div class="flex items-center justify-between">
        <a href="{{ route('portal.penugasan.index', ['tab' => 'tim']) }}" class="inline-flex items-center gap-1.5 text-sm font-semibold text-slate-500 hover:text-slate-800 transition-colors">
            <i data-lucide="arrow-left" class="w-4 h-4"></i>
            <span>Kembali ke Daftar Tugas</span>
        </a>
        <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-primary-50 text-primary-700 border border-primary-200">
            Form Pendelegasian Tugas
        </span>
    </div>

    <!-- Header Section -->
    <div class="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm">
        <div class="flex items-start gap-4">
            <div class="w-12 h-12 rounded-xl bg-gradient-to-tr from-primary-600 to-amber-500 text-white flex items-center justify-center shrink-0 shadow-md shadow-primary-500/20">
                <i data-lucide="clipboard-list" class="w-6 h-6"></i>
            </div>
            <div>
                <h1 class="text-xl font-bold text-slate-900 tracking-tight">Buat Penugasan Baru untuk Tim</h1>
                <p class="text-sm text-slate-500 mt-1 leading-relaxed">
                    Delegasikan pekerjaan kepada satu atau beberapa bawahan langsung Anda. Anda dapat memilih metode pengerjaan menggunakan Dokumen Online (Google Docs), Spreadsheet (Google Sheets), atau Unggah Dokumen Eksternal.
                </p>
            </div>
        </div>
    </div>

    <!-- Form Container -->
    <form action="{{ route('portal.penugasan.store') }}" method="POST" id="formPenugasan" class="space-y-6">
        @csrf

        <!-- Card 1: Informasi Pokok Penugasan -->
        <div class="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-5">
            <h2 class="text-base font-bold text-slate-800 flex items-center gap-2 border-b border-slate-100 pb-3">
                <i data-lucide="info" class="w-4 h-4 text-primary-600"></i>
                <span>Informasi Tugas</span>
            </h2>

            <!-- Judul Tugas -->
            <div>
                <label for="judul" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">
                    Judul Penugasan <span class="text-rose-500">*</span>
                </label>
                <input type="text" name="judul" id="judul" value="{{ old('judul') }}" required placeholder="Contoh: Penyusunan Dokumen SOP Operasional atau Rekapitulasi Data Triwulan"
                       class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 @error('judul') border-rose-500 @enderror transition-all">
                @error('judul')
                    <p class="text-xs text-rose-600 mt-1.5 font-medium">{{ $message }}</p>
                @enderror
            </div>

            <!-- Deskripsi / Petunjuk Kerja -->
            <div>
                <label for="deskripsi" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">
                    Deskripsi & Instruksi Pengerjaan
                </label>
                <textarea name="deskripsi" id="deskripsi" rows="4" placeholder="Jelaskan detail petunjuk, target output yang diharapkan, serta referensi penting bagi tim..."
                          class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 @error('deskripsi') border-rose-500 @enderror transition-all">{{ old('deskripsi') }}</textarea>
                @error('deskripsi')
                    <p class="text-xs text-rose-600 mt-1.5 font-medium">{{ $message }}</p>
                @enderror
            </div>

            <!-- Prioritas & Tanggal -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pt-2">
                <!-- Prioritas -->
                <div>
                    <label for="prioritas" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">
                        Tingkat Prioritas <span class="text-rose-500">*</span>
                    </label>
                    <select name="prioritas" id="prioritas" required
                            class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all font-medium text-slate-700">
                        <option value="sedang" {{ old('prioritas', 'sedang') === 'sedang' ? 'selected' : '' }}>🟡 Sedang (Standar)</option>
                        <option value="rendah" {{ old('prioritas') === 'rendah' ? 'selected' : '' }}>⚪ Rendah (Fleksibel)</option>
                        <option value="tinggi" {{ old('prioritas') === 'tinggi' ? 'selected' : '' }}>🟠 Tinggi (Penting)</option>
                        <option value="mendesak" {{ old('prioritas') === 'mendesak' ? 'selected' : '' }}>🔴 Mendesak (Urgent)</option>
                    </select>
                </div>

                <!-- Tanggal Mulai -->
                <div>
                    <label for="tanggal_mulai" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">
                        Tanggal Mulai
                    </label>
                    <input type="date" name="tanggal_mulai" id="tanggal_mulai" value="{{ old('tanggal_mulai', date('Y-m-d')) }}"
                           class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all text-slate-700">
                </div>

                <!-- Tenggat Waktu (Deadline) -->
                <div>
                    <label for="tenggat_waktu" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">
                        Tenggat Waktu (Deadline)
                    </label>
                    <input type="date" name="tenggat_waktu" id="tenggat_waktu" value="{{ old('tenggat_waktu') }}"
                           class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all text-slate-700">
                </div>
            </div>
        </div>

        <!-- Card 2: Pilihan Media Pengerjaan Tugas (Google Docs, Spreadsheet, Upload Dokumen) -->
        <div class="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
            <div class="border-b border-slate-100 pb-3">
                <h2 class="text-base font-bold text-slate-800 flex items-center gap-2">
                    <i data-lucide="layout-grid" class="w-4 h-4 text-primary-600"></i>
                    <span>Pilihan Media Pengerjaan Tugas</span>
                    <span class="text-rose-500">*</span>
                </h2>
                <p class="text-xs text-slate-500 mt-1">
                    Tentukan media yang akan digunakan oleh anggota tim untuk menyelesaikan tugas ini.
                </p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                
                <!-- Opsi 1: Google Spreadsheet -->
                <label class="relative flex flex-col justify-between p-5 bg-slate-50 hover:bg-emerald-50/40 rounded-2xl border-2 cursor-pointer transition-all has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50/50 has-[:checked]:shadow-sm border-slate-200 group">
                    <div>
                        <div class="flex items-center justify-between mb-3">
                            <div class="w-10 h-10 rounded-xl bg-emerald-100 text-emerald-700 flex items-center justify-center">
                                <i data-lucide="sheet" class="w-5 h-5"></i>
                            </div>
                            <input type="radio" name="tipe_media" value="spreadsheet" class="media-radio w-4 h-4 text-emerald-600 focus:ring-emerald-500" {{ old('tipe_media', 'spreadsheet') === 'spreadsheet' ? 'checked' : '' }} onchange="toggleTautanField()">
                        </div>
                        <div class="font-bold text-slate-900 text-sm mb-1">Google Spreadsheet</div>
                        <p class="text-xs text-slate-500 leading-relaxed">
                            Dikerjakan bersama di aplikasi Google Sheets resmi. Anggota tim dapat membuka dan mengisi lembar kerja spreadsheet secara kolaboratif.
                        </p>
                    </div>
                    <div class="mt-4 pt-3 border-t border-slate-200/60 flex items-center gap-2 text-[11px] font-semibold text-emerald-700">
                        <i data-lucide="check" class="w-3.5 h-3.5"></i> Kolaboratif di Google Sheets
                    </div>
                </label>

                <!-- Opsi 2: Google Docs -->
                <label class="relative flex flex-col justify-between p-5 bg-slate-50 hover:bg-blue-50/40 rounded-2xl border-2 cursor-pointer transition-all has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50/50 has-[:checked]:shadow-sm border-slate-200 group">
                    <div>
                        <div class="flex items-center justify-between mb-3">
                            <div class="w-10 h-10 rounded-xl bg-blue-100 text-blue-700 flex items-center justify-center">
                                <i data-lucide="file-edit" class="w-5 h-5"></i>
                            </div>
                            <input type="radio" name="tipe_media" value="dokumen_online" class="media-radio w-4 h-4 text-blue-600 focus:ring-blue-500" {{ old('tipe_media') === 'dokumen_online' ? 'checked' : '' }} onchange="toggleTautanField()">
                        </div>
                        <div class="font-bold text-slate-900 text-sm mb-1">Google Docs</div>
                        <p class="text-xs text-slate-500 leading-relaxed">
                            Dikerjakan bersama di aplikasi Google Docs resmi. Sangat cocok untuk penyusunan laporan tertulis, kajian, SOP, dan notulensi kerja.
                        </p>
                    </div>
                    <div class="mt-4 pt-3 border-t border-slate-200/60 flex items-center gap-2 text-[11px] font-semibold text-blue-700">
                        <i data-lucide="check" class="w-3.5 h-3.5"></i> Kolaboratif di Google Docs
                    </div>
                </label>

                <!-- Opsi 3: Upload Dokumen Saja -->
                <label class="relative flex flex-col justify-between p-5 bg-slate-50 hover:bg-orange-50/40 rounded-2xl border-2 cursor-pointer transition-all has-[:checked]:border-primary-500 has-[:checked]:bg-primary-50/50 has-[:checked]:shadow-sm border-slate-200 group">
                    <div>
                        <div class="flex items-center justify-between mb-3">
                            <div class="w-10 h-10 rounded-xl bg-primary-100 text-primary-700 flex items-center justify-center">
                                <i data-lucide="file-up" class="w-5 h-5"></i>
                            </div>
                            <input type="radio" name="tipe_media" value="dokumen" class="media-radio w-4 h-4 text-primary-600 focus:ring-primary-500" {{ old('tipe_media') === 'dokumen' ? 'checked' : '' }} onchange="toggleTautanField()">
                        </div>
                        <div class="font-bold text-slate-900 text-sm mb-1">Upload Dokumen Saja</div>
                        <p class="text-xs text-slate-500 leading-relaxed">
                            Anggota tim menyelesaikan tugas dengan mengunggah berkas eksternal (PDF, Word lokal, Desain, ZIP, dll) ke dalam sistem.
                        </p>
                    </div>
                    <div class="mt-4 pt-3 border-t border-slate-200/60 flex items-center gap-2 text-[11px] font-semibold text-primary-700">
                        <i data-lucide="check" class="w-3.5 h-3.5"></i> Unggah berkas dokumen
                    </div>
                </label>

            </div>
            @error('tipe_media')
                <p class="text-xs text-rose-600 font-medium">{{ $message }}</p>
            @enderror

            <!-- Field Tautan / Link Google Docs / Google Sheets (Muncul untuk Google Sheets / Docs) -->
            <div id="wrapperTautanEksternal" class="pt-3 border-t border-slate-100 space-y-1.5">
                <label for="tautan_eksternal" class="block text-xs font-bold text-slate-700 uppercase tracking-wider flex items-center gap-1.5" id="labelTautan">
                    <i data-lucide="link" class="w-3.5 h-3.5 text-primary-600"></i>
                    <span id="labelTautanText">Tautan / Link Google Sheets</span>
                </label>
                <div class="relative">
                    <input type="url" name="tautan_eksternal" id="tautan_eksternal" value="{{ old('tautan_eksternal') }}"
                           placeholder="https://docs.google.com/spreadsheets/d/..."
                           class="w-full px-4 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 @error('tautan_eksternal') border-rose-500 @enderror transition-all">
                </div>
                <p class="text-[11px] text-slate-400 leading-relaxed" id="helperTautanText">
                    Salin link dari Google Spreadsheet (pastikan hak akses sudah diset agar bawahan dapat melihat/mengedit). Tautan ini juga bisa diisi atau diperbarui nanti di halaman detail tugas.
                </p>
                @error('tautan_eksternal')
                    <p class="text-xs text-rose-600 font-medium">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Card 3: Pendelegasian Tim (Multi-Assignee & Penanggung Jawab) -->
        <div class="bg-white rounded-2xl border border-slate-200/80 p-6 shadow-sm space-y-4">
            <div class="flex items-center justify-between border-b border-slate-100 pb-3 flex-wrap gap-2">
                <div>
                    <h2 class="text-base font-bold text-slate-800 flex items-center gap-2">
                        <i data-lucide="users" class="w-4 h-4 text-primary-600"></i>
                        <span>Pilih Bawahan Pelaksana Tugas</span>
                        <span class="text-rose-500">*</span>
                    </h2>
                    <p class="text-xs text-slate-500 mt-0.5">
                        Pilih satu atau beberapa bawahan langsung Anda yang akan berkolaborasi dalam tugas ini.
                    </p>
                </div>

                <div class="flex items-center gap-2">
                    <button type="button" id="btnSelectAll" class="text-xs font-semibold text-primary-600 hover:text-primary-700 px-2.5 py-1 rounded-lg bg-primary-50 hover:bg-primary-100 transition-colors">
                        Pilih Semua
                    </button>
                    <button type="button" id="btnUnselectAll" class="text-xs font-semibold text-slate-500 hover:text-slate-700 px-2.5 py-1 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors">
                        Batal Semua
                    </button>
                </div>
            </div>

            @if($bawahanList->isEmpty())
                <div class="p-6 text-center bg-slate-50 rounded-xl border border-dashed border-slate-300">
                    <i data-lucide="alert-circle" class="w-8 h-8 text-amber-500 mx-auto mb-2"></i>
                    <p class="text-sm font-semibold text-slate-700">Tidak Ada Bawahan Langsung yang Aktif</p>
                    <p class="text-xs text-slate-500 mt-1">
                        Sistem mencatat Anda belum memiliki pegawai bawahan aktif yang terhubung pada kolom atasan pegawai.
                    </p>
                </div>
            @else
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-80 overflow-y-auto pr-1">
                    @foreach($bawahanList as $bwh)
                    @php
                        $isSelected = is_array(old('anggota_ids')) && in_array($bwh->id, old('anggota_ids'));
                    @endphp
                    <label class="flex items-center gap-3 p-3 rounded-xl border border-slate-200 bg-slate-50/60 hover:bg-white hover:border-primary-300 cursor-pointer transition-all has-[:checked]:border-primary-500 has-[:checked]:bg-primary-50/30">
                        <input type="checkbox" name="anggota_ids[]" value="{{ $bwh->id }}" class="anggota-checkbox w-4 h-4 rounded text-primary-600 focus:ring-primary-500 border-slate-300" {{ $isSelected ? 'checked' : '' }}>
                        <div class="w-9 h-9 rounded-full bg-slate-200 text-slate-700 font-bold text-xs flex items-center justify-center shrink-0">
                            {{ strtoupper(substr($bwh->nama_lengkap, 0, 1)) }}
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="text-xs font-bold text-slate-800 truncate">{{ $bwh->nama_lengkap }}</div>
                            <div class="text-[11px] text-slate-500 truncate flex items-center gap-1">
                                <span>{{ $bwh->jabatan?->nama_jabatan ?? 'Pegawai' }}</span>
                                <span>•</span>
                                <span class="font-mono text-slate-400">{{ $bwh->nip }}</span>
                            </div>
                        </div>
                    </label>
                    @endforeach
                </div>
                @error('anggota_ids')
                    <p class="text-xs text-rose-600 font-medium">{{ $message }}</p>
                @enderror

                <!-- Penanggung Jawab Utama (Lead) -->
                <div class="pt-4 border-t border-slate-100">
                    <label for="penanggung_jawab_id" class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1.5">
                        Penanggung Jawab Utama (Lead / Koordinator)
                    </label>
                    <select name="penanggung_jawab_id" id="penanggung_jawab_id"
                            class="w-full px-3 py-2.5 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:bg-white focus:outline-none focus:ring-2 focus:ring-primary-500 transition-all font-medium text-slate-700">
                        <option value="">-- Otomatis (Anggota Pertama yang Dipilih) --</option>
                        @foreach($bawahanList as $bwh)
                            <option value="{{ $bwh->id }}" {{ old('penanggung_jawab_id') == $bwh->id ? 'selected' : '' }}>
                                {{ $bwh->nama_lengkap }} ({{ $bwh->jabatan?->nama_jabatan ?? 'Pegawai' }})
                            </option>
                        @endforeach
                    </select>
                    <p class="text-[11px] text-slate-400 mt-1">
                        Opsional. Anggota ini akan ditandai sebagai penanggung jawab utama pengerjaan tugas.
                    </p>
                </div>
            @endif
        </div>

        <!-- Tombol Aksi Submit -->
        <div class="flex items-center justify-end gap-3 pt-2">
            <a href="{{ route('portal.penugasan.index', ['tab' => 'tim']) }}" class="px-5 py-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-100 text-sm font-semibold transition-all">
                Batalkan
            </a>
            <button type="submit" @if($bawahanList->isEmpty()) disabled @endif class="inline-flex items-center gap-2 px-6 py-2.5 rounded-xl bg-primary-600 hover:bg-primary-700 disabled:bg-slate-300 disabled:cursor-not-allowed text-white text-sm font-semibold shadow-md shadow-primary-500/20 hover:shadow-lg transition-all">
                <i data-lucide="send" class="w-4 h-4"></i>
                <span>Buat & Delegasikan Tugas</span>
            </button>
        </div>

    </form>

</div>

@push('scripts')
<script>
    document.getElementById('btnSelectAll')?.addEventListener('click', function() {
        document.querySelectorAll('.anggota-checkbox').forEach(cb => cb.checked = true);
    });

    document.getElementById('btnUnselectAll')?.addEventListener('click', function() {
        document.querySelectorAll('.anggota-checkbox').forEach(cb => cb.checked = false);
    });

    function toggleTautanField() {
        const selectedRadio = document.querySelector('input[name="tipe_media"]:checked');
        const wrapper = document.getElementById('wrapperTautanEksternal');
        const labelText = document.getElementById('labelTautanText');
        const input = document.getElementById('tautan_eksternal');
        const helper = document.getElementById('helperTautanText');

        if (!selectedRadio || !wrapper) return;

        if (selectedRadio.value === 'spreadsheet') {
            wrapper.classList.remove('hidden');
            labelText.innerText = 'Tautan / Link Google Sheets';
            input.placeholder = 'https://docs.google.com/spreadsheets/d/...';
            helper.innerText = 'Salin tautan dari file Google Spreadsheet Anda (pastikan hak akses telah dibagikan agar tim dapat membuka/mengedit).';
        } else if (selectedRadio.value === 'dokumen_online') {
            wrapper.classList.remove('hidden');
            labelText.innerText = 'Tautan / Link Google Docs';
            input.placeholder = 'https://docs.google.com/document/d/...';
            helper.innerText = 'Salin tautan dari file Google Docs Anda (pastikan hak akses telah dibagikan agar tim dapat membuka/mengedit).';
        } else {
            wrapper.classList.add('hidden');
        }
    }

    document.addEventListener('DOMContentLoaded', toggleTautanField);
</script>
@endpush
@endsection