@extends('layout')

@section('title', 'Edit Data')

@section('content')
<div class="p-6 bg-white shadow-lg rounded-xl">

    <div class="relative mb-10">
        <div class="absolute left-0 w-full h-1 bg-gray-200 top-4">
            <div id="progress-bar" class="w-0 h-1 transition-all duration-300 bg-blue-600"></div>
        </div>

        <div class="relative z-10 flex items-center justify-between">
            @php $wizardSteps = ['Metadata','Penulis','Files']; @endphp

            <div class="flex justify-between w-full space-x-4">
                @foreach ($wizardSteps as $i => $label)
                    <div class="flex-1 text-center">
                        <div class="flex items-center justify-center w-8 h-8 mx-auto mb-2 text-gray-700 bg-gray-300 rounded-full step-circle">
                            {{ $i + 1 }}
                        </div>
                        <div class="text-sm text-gray-600 step-indicator">{{ $label }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    <h2 class="mb-2 text-3xl font-bold text-center text-gray-900">Edit Data Penelitian</h2>
    <p class="mb-8 text-center text-gray-600">Perbarui informasi data penelitian</p>

    <x-alert class="animate-fade-in" />

    <form id="wizardForm" method="POST" action="{{ route('research.update', $research->id) }}" enctype="multipart/form-data" class="space-y-8">
        @csrf
        @method('PUT')

        <div class="space-y-6 step">
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                <div>
                    <label class="block mb-2 font-medium text-gray-700">
                        Kategori <span class="text-red-500">*</span>
                    </label>
                    <select name="category_id" class="w-full px-4 py-3 border rounded-lg @error('category_id') border-red-500 @enderror" required>
                        <option value="">-- Pilih Kategori --</option>
                        @foreach($categories as $cat)
                            <option value="{{ $cat->id }}" {{ old('category_id', $research->category_id) == $cat->id ? 'selected' : '' }}>
                                {{ $cat->category_name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label class="block mb-2 font-medium text-gray-700">
                        Tanggal Publikasi <span class="text-red-500">*</span>
                    </label>
                    <input
                        type="date"
                        name="publish_date"
                        value="{{ old('publish_date', $research->publish_date?->format('Y-m-d')) }}"
                        class="w-full px-4 py-3 border rounded-lg @error('publish_date') border-red-500 @enderror"
                        required
                    >
                </div>
            </div>

            <div>
                <label class="block mb-2 font-medium text-gray-700">
                    Judul <span class="text-red-500">*</span>
                </label>
                <input name="title" value="{{ old('title', $research->title) }}"
                       class="w-full px-4 py-3 border rounded-lg @error('title') border-red-500 @enderror" required
                       placeholder="Masukkan judul penelitian">
            </div>

            <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                <div>
                    <label class="block mb-2 font-medium text-gray-700">
                        Abstrak
                    </label>

                    <textarea
                        name="abstract"
                        id="abstract"
                        class="w-full px-4 py-3 border rounded-lg
                            leading-relaxed text-justify
                            min-h-[260px]
                            resize-none
                            focus:outline-none focus:ring-2 focus:ring-primary-600
                            @error('abstract') border-red-500 @enderror"
                        placeholder="Masukkan abstrak minimal 15 karakter"
                        >{{ old('abstract', $research->abstract) }}
                    </textarea>
                </div>

                <div class="flex flex-col">
                    <label class="block mb-2 font-medium text-gray-700">
                        Keywords
                    </label>

                    <input
                        name="keywords"
                        value="{{ old('keywords', $research->keywords ? implode(', ', $research->keywords) : '') }}"
                        class="w-full px-4 py-3 border rounded-lg
                            focus:outline-none focus:ring-2 focus:ring-primary-600
                            @error('keywords') border-red-500 @enderror"
                        placeholder="Contoh: kopi, kakao, agribisnis"
                    >

                    <p class="mt-2 text-xs text-gray-500">
                        Pisahkan dengan koma (minimal 3 kata kunci)
                    </p>
                </div>
            </div>
        </div>

        <div class="hidden space-y-6 step">
            <div id="authors-wrapper" class="space-y-4">
                @php $authorsData = old('authors', $research->authors->toArray()); @endphp
                @foreach($authorsData as $i => $a)
                    <div class="p-4 border rounded-lg author-item bg-gray-50">
                        <div class="flex items-center justify-between mb-3">
                            <h4 class="font-medium text-gray-700">Penulis {{ $i+1 }}</h4>
                            <button type="button" class="inline-flex items-center px-3 py-1 text-sm font-medium text-red-600 bg-red-100 rounded-lg hover:bg-red-200 remove-author">
                                Hapus
                            </button>
                        </div>
                        <div class="grid grid-cols-1 gap-4 md:grid-cols-3">
                            <div>
                                <label class="block mb-1 text-sm text-gray-600">
                                    Nama Lengkap <span class="text-red-500">*</span>
                                </label>
                                <input name="authors[{{ $i }}][full_name]" value="{{ $a['full_name'] ?? '' }}"
                                       class="w-full px-3 py-2 border rounded-lg @error("authors.$i.full_name") border-red-500 @enderror" required>
                                @error("authors.$i.full_name")
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label class="block mb-1 text-sm text-gray-600">
                                    Email
                                </label>
                                <input type="email" name="authors[{{ $i }}][email]" value="{{ $a['email'] ?? '' }}"
                                       class="w-full px-3 py-2 border rounded-lg @error("authors.$i.email") border-red-500 @enderror" >
                                @error("authors.$i.email")
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label class="block mb-1 text-sm text-gray-600">
                                    Institusi
                                </label>
                                <input name="authors[{{ $i }}][affiliation]" value="{{ $a['affiliation'] ?? '' }}"
                                       class="w-full px-3 py-2 border rounded-lg @error("authors.$i.affiliation") border-red-500 @enderror">
                                @error("authors.$i.affiliation")
                                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <button type="button" id="add-author" class="px-4 py-2 mt-2 text-sm font-medium text-white rounded-lg bg-primary-600 hover:bg-primary-700">
                Tambah Penulis
            </button>
        </div>

        <div class="hidden space-y-6 step">
            <p class="text-sm text-gray-600">
                File lama tetap tersimpan. Klik <strong>Hapus</strong> untuk menandai file lama dihapus.
            </p>
            <p class="text-sm text-gray-600">
                Maksimal ukuran file: <strong>20 MB</strong>
            </p>

            @if($research->files->count())
                <div id="existing-files" class="space-y-4">
                    @foreach($research->files as $i => $file)
                        <div class="p-4 border rounded-lg bg-gray-50 existing-file-item"
                            data-id="{{ $file->id }}">

                            <input type="hidden"
                                name="files_existing[{{ $i }}][id]"
                                value="{{ $file->id }}">

                            <div class="flex items-center justify-between mb-2">
                                <h4 class="text-sm font-medium text-gray-700">
                                    {{ $file->file_name }}
                                </h4>

                                <button type="button"
                                    class="inline-flex items-center px-3 py-1 text-sm font-medium text-red-600 bg-red-100 rounded-lg hover:bg-red-200 btn-delete-existing-file">
                                    Hapus
                                </button>

                            </div>

                            <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                                <input type="file"
                                    name="files_existing[{{ $i }}][file]"
                                    class="w-full px-3 py-2 border rounded-lg">

                                <select name="files_existing[{{ $i }}][section]" class="w-full px-3 py-2 border rounded-lg"required>
                                    <option value="">-- Pilih Section --</option>
                                    <option value="cover" @selected($file->section === 'cover')>Cover</option>
                                    <option value="abstrak" @selected($file->section === 'abstrak')>Abstrak</option>
                                    <option value="daftarisi" @selected($file->section === 'daftarisi')>Daftar Isi</option>
                                    <option value="bab1" @selected($file->section === 'bab1')>Bab 1</option>
                                    <option value="bab2" @selected($file->section === 'bab2')>Bab 2</option>
                                    <option value="bab3" @selected($file->section === 'bab3')>Bab 3</option>
                                    <option value="bab4" @selected($file->section === 'bab4')>Bab 4</option>
                                    <option value="bab5" @selected($file->section === 'bab5')>Bab 5</option>
                                    <option value="bab6" @selected($file->section === 'bab6')>Bab 6</option>
                                    <option value="bab7" @selected($file->section === 'bab7')>Bab 7</option>
                                    <option value="bab8" @selected($file->section === 'bab8')>Bab 8</option>
                                    <option value="references" @selected($file->section === 'references')>References</option>
                                    <option value="appendix" @selected($file->section === 'appendix')>Appendix</option>
                                </select>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif

            <div id="files-wrapper" class="space-y-4"></div>

            <button type="button"
                id="add-file"
                class="inline-flex items-center px-4 py-2 mt-2 text-sm font-medium text-white rounded-lg bg-primary-600 hover:bg-primary-700">
                Tambah File
            </button>
        </div>

        <div class="flex items-center justify-between pt-6 border-t border-gray-200">
            <a href="{{ route('research.index') }}" class="px-6 py-2 mr-4 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Batal</a>
            <div class="space-x-2">
                <button type="button" id="prevBtn" class="hidden px-6 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50">Kembali</button>
                <button type="button" id="nextBtn" class="px-6 py-2 text-sm font-medium text-white rounded-lg bg-primary-600 hover:bg-primary-700">Lanjut</button>
                <button type="submit" id="submitBtn" class="hidden px-6 py-2 text-sm font-medium text-white rounded-lg bg-primary-600 hover:bg-primary-700">Simpan</button>
            </div>
        </div>
    </form>
</div>
<script nonce="{{ $cspNonce }}">
    window.authorIndex = {{ count($research->authors) }};
</script>
@endsection