<x-app-layout>

    <x-module-hero
        title="New Publication"
        description="Submit your research for peer review and publication"
        icon="fa-plus-circle">

        <x-slot name="backButton">
            <a href="{{ route('research.index') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Publications
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view own publications')
            <a href="{{ route('research.index') }}"
               class="module-hero-tab {{ request()->routeIs('research.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-list text-sm"></i> My Publications
            </a>
            @endcan
            @can('create publications')
            <a href="{{ route('research.create') }}"
               class="module-hero-tab {{ request()->routeIs('research.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-plus text-sm"></i> New Publication
            </a>
            @endcan
            @can('review publications')
            <a href="{{ route('research.review.index') }}"
               class="module-hero-tab {{ request()->routeIs('research.review.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-clipboard-check text-sm"></i> Review Queue
            </a>
            @endcan
        </x-slot>

    </x-module-hero>

    <div class="p-6">

        @if(session('error'))
        <div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-center">
            <i class="fas fa-exclamation-circle mr-3"></i> {{ session('error') }}
        </div>
        @endif

        <form action="{{ route('research.store') }}" method="POST" enctype="multipart/form-data"
              x-data="{
                  step: 1,
                  totalSteps: 3,
                  coverPreview: null,
                  files: [],
                  handleCoverImage(event) {
                      const file = event.target.files[0];
                      if (file) {
                          const reader = new FileReader();
                          reader.onload = (e) => this.coverPreview = e.target.result;
                          reader.readAsDataURL(file);
                      }
                  },
                  handleFiles(event) { this.files = Array.from(event.target.files); }
              }">
            @csrf

            {{-- Step Indicator --}}
            <div class="mb-6">
                <div class="flex items-center justify-between mb-2">
                    <span class="text-sm font-medium text-gray-700">Step <span x-text="step"></span> of <span x-text="totalSteps"></span></span>
                    <span class="text-sm font-medium text-green-700" x-text="Math.round((step / totalSteps) * 100) + '%'"></span>
                </div>
                <div class="w-full bg-gray-200 rounded-full h-2">
                    <div class="bg-green-700 h-2 rounded-full transition-all duration-300"
                         :style="'width: ' + ((step / totalSteps) * 100) + '%'"></div>
                </div>
                <div class="flex justify-between mt-1 text-xs text-gray-500">
                    <span :class="step >= 1 ? 'text-green-700 font-semibold' : ''">Basic Info</span>
                    <span :class="step >= 2 ? 'text-green-700 font-semibold' : ''">Content</span>
                    <span :class="step >= 3 ? 'text-green-700 font-semibold' : ''">Files & Submit</span>
                </div>
            </div>

            {{-- Step 1: Basic Information --}}
            <div x-show="step === 1" x-transition>
                <div class="mb-4">
                    <h3 class="text-base font-semibold text-gray-800 border-b pb-2">
                        <span class="inline-flex w-7 h-7 rounded-full bg-green-700 text-white items-center justify-center text-xs mr-2">1</span>
                        Basic Information
                    </h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div class="md:col-span-2">
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">
                            Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text" id="title" name="title" value="{{ old('title') }}" required
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                               placeholder="Enter the title of your research publication">
                        @error('title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="category" class="block text-sm font-medium text-gray-700 mb-1">
                            Category <span class="text-red-500">*</span>
                        </label>
                        <select id="category" name="category" required
                                class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm">
                            <option value="">Select a category</option>
                            @foreach($categories as $key => $label)
                            <option value="{{ $key }}" {{ old('category') === $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                        @error('category')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="cover_image" class="block text-sm font-medium text-gray-700 mb-1">Cover Image</label>
                        <input type="file" id="cover_image" name="cover_image" accept="image/*"
                               @change="handleCoverImage($event)"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm">
                        <p class="mt-1 text-xs text-gray-500">Recommended: 1200×630px. Max 5MB.</p>
                        @error('cover_image')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div class="md:col-span-2">
                        <label for="abstract" class="block text-sm font-medium text-gray-700 mb-1">
                            Abstract <span class="text-red-500">*</span>
                        </label>
                        <textarea id="abstract" name="abstract" rows="5" required
                                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                  placeholder="Provide a brief summary of your research (150–300 words)">{{ old('abstract') }}</textarea>
                        @error('abstract')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            {{-- Step 2: Content --}}
            <div x-show="step === 2" x-transition>
                <div class="mb-4">
                    <h3 class="text-base font-semibold text-gray-800 border-b pb-2">
                        <span class="inline-flex w-7 h-7 rounded-full bg-green-700 text-white items-center justify-center text-xs mr-2">2</span>
                        Research Content
                    </h3>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="methodology" class="block text-sm font-medium text-gray-700 mb-1">Methodology</label>
                        <textarea id="methodology" name="methodology" rows="7"
                                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                  placeholder="Describe your research methods, data collection, and analysis techniques">{{ old('methodology') }}</textarea>
                        @error('methodology')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="findings" class="block text-sm font-medium text-gray-700 mb-1">Key Findings</label>
                        <textarea id="findings" name="findings" rows="7"
                                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                  placeholder="Present your research findings and results">{{ old('findings') }}</textarea>
                        @error('findings')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div class="md:col-span-2">
                        <label for="references" class="block text-sm font-medium text-gray-700 mb-1">References</label>
                        <textarea id="references" name="references" rows="5"
                                  class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 text-sm"
                                  placeholder="List your references and citations">{{ old('references') }}</textarea>
                        @error('references')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                </div>
            </div>

            {{-- Step 3: Files & Submit --}}
            <div x-show="step === 3" x-transition>
                <div class="mb-4">
                    <h3 class="text-base font-semibold text-gray-800 border-b pb-2">
                        <span class="inline-flex w-7 h-7 rounded-full bg-green-700 text-white items-center justify-center text-xs mr-2">3</span>
                        Attachments & Submission
                    </h3>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Supporting Documents</label>
                    <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-green-500 transition">
                        <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-3"></i>
                        <p class="text-gray-600 text-sm mb-2">Drag and drop files here or click to browse</p>
                        <input type="file" id="files" name="files[]" multiple
                               accept=".pdf,.doc,.docx,.xls,.xlsx,.png,.jpg,.jpeg"
                               @change="handleFiles($event)"
                               class="w-full text-sm text-gray-500">
                        <p class="text-xs text-gray-400 mt-2">PDF, DOC, XLS, PNG, JPG — max 10MB each</p>
                    </div>
                    <div x-show="files.length > 0" class="mt-3 space-y-2">
                        <template x-for="(file, index) in files" :key="index">
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded-lg text-sm">
                                <span class="flex items-center gap-2">
                                    <i class="fas fa-file text-green-600"></i>
                                    <span x-text="file.name"></span>
                                </span>
                                <button type="button" @click="files.splice(index, 1)" class="text-red-500 hover:text-red-700">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </template>
                    </div>
                    @error('files.*')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                </div>
                <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
                    <h4 class="font-medium text-blue-800 mb-2 text-sm flex items-center gap-2">
                        <i class="fas fa-info-circle"></i> Before You Submit
                    </h4>
                    <ul class="text-xs text-blue-700 space-y-1">
                        <li><i class="fas fa-check text-blue-500 mr-1"></i> Ensure all required fields are completed</li>
                        <li><i class="fas fa-check text-blue-500 mr-1"></i> Review your abstract for clarity</li>
                        <li><i class="fas fa-check text-blue-500 mr-1"></i> Attach supporting documents if available</li>
                        <li><i class="fas fa-check text-blue-500 mr-1"></i> Your submission will be reviewed by our team</li>
                    </ul>
                </div>
            </div>

            {{-- Navigation Buttons --}}
            <div class="flex justify-between items-center pt-4 border-t border-gray-200">
                <button type="button" @click="step--" x-show="step > 1"
                        class="px-5 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm font-medium">
                    <i class="fas fa-arrow-left mr-2"></i> Previous
                </button>
                <div class="flex gap-3 ml-auto">
                    <button type="button" @click="step++" x-show="step < totalSteps"
                            class="px-5 py-2.5 bg-green-700 text-white rounded-lg hover:bg-green-800 transition text-sm font-medium">
                        Next <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                    <button type="submit" name="action" value="draft" x-show="step === totalSteps"
                            class="px-5 py-2.5 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition text-sm font-medium">
                        <i class="fas fa-save mr-2"></i> Save Draft
                    </button>
                    <button type="submit" name="action" value="submit" x-show="step === totalSteps"
                            class="px-5 py-2.5 bg-green-700 text-white rounded-lg hover:bg-green-800 transition text-sm font-medium">
                        <i class="fas fa-paper-plane mr-2"></i> Submit for Review
                    </button>
                </div>
            </div>

        </form>
    </div>

</x-app-layout>
