@extends('layout')

@section('title', 'Buat 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">Buat Data Penelitian Baru</h2>
    <p class="mb-8 text-center text-gray-600">Lengkapi informasi data penelitian</p>

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

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

        <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') == $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') }}"
                        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') }}"
                    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') }}</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') }}"
                        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">
                <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 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[0][full_name]" value="{{ old('authors.0.full_name') }}" placeholder="Nama Lengkap" class="w-full px-3 py-2 border rounded-lg" required>
                        </div>
                        <div>
                            <label class="block mb-1 text-sm text-gray-600">Email</label>
                            <input name="authors[0][email]" type="email" value="{{ old('authors.0.email') }}" placeholder="Email" class="w-full px-3 py-2 border rounded-lg">
                        </div>
                        <div>
                            <label class="block mb-1 text-sm text-gray-600">Institusi</label>
                            <input name="authors[0][affiliation]" value="{{ old('authors.0.affiliation') }}" placeholder="Institusi" class="w-full px-3 py-2 border rounded-lg">
                        </div>
                    </div>
                </div>
            </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">
            <div id="files-wrapper" class="space-y-4">
                <div class="p-4 border rounded-lg file-item bg-gray-50">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-medium text-gray-700">File 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-file">
                            Hapus
                        </button>
                    </div>
                    <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
                        <input type="file"
                            name="files_new[0][file]"
                            class="w-full px-3 py-2 border rounded-lg"
                            required>

                        <select name="files_new[0][section]"
                            class="w-full px-3 py-2 border rounded-lg"
                            required>
                            <option value="">-- Pilih Section --</option>
                            <option value="cover">Cover</option>
                            <option value="abstrak">Abstrak</option>
                            <option value="daftarisi">Daftar Isi</option>
                            <option value="bab1">Bab 1</option>
                            <option value="bab2">Bab 2</option>
                            <option value="bab3">Bab 3</option>
                            <option value="bab4">Bab 4</option>
                            <option value="bab5">Bab 5</option>
                            <option value="bab6">Bab 6</option>
                            <option value="bab7">Bab 7</option>
                            <option value="bab8">Bab 8</option>
                            <option value="references">References</option>
                            <option value="appendix">Appendix</option>
                        </select>
                    </div>
                </div>
            </div>
            <button type="button" id="add-file" class="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>
@endsection