@extends('admin.layout')

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold text-gray-800">Create New Research Paper</h1>
        <a href="{{ route('admin.research-papers.index') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg flex items-center">
            <i class="fas fa-arrow-left mr-2"></i> Back to Research Papers
        </a>
    </div>

    <div class="bg-white rounded-lg shadow p-6">
        <form action="{{ route('admin.research-papers.store') }}" method="POST" enctype="multipart/form-data">
            @csrf
            
            <div class="space-y-6">
                <!-- Basic Information -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Basic Information</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="user_id" class="block text-sm font-medium text-gray-700 mb-1">Student *</label>
                            <select name="user_id" id="user_id" 
                                    class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    required>
                                <option value="">Select Student</option>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}" {{ old('user_id') == $user->id ? 'selected' : '' }}>
                                        {{ $user->first_name }} {{ $user->last_name }} ({{ $user->email }})
                                    </option>
                                @endforeach
                            </select>
                            @error('user_id')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div>
                            <label for="judge_id" class="block text-sm font-medium text-gray-700 mb-1">Assigned Judge</label>
                            <select name="judge_id" id="judge_id" 
                                    class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">Select Judge</option>
                                @foreach($judges as $judge)
                                    <option value="{{ $judge->id }}" {{ old('judge_id') == $judge->id ? 'selected' : '' }}>
                                        {{ $judge->first_name }} {{ $judge->last_name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('judge_id')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="mt-4">
                        <label for="title" class="block text-sm font-medium text-gray-700 mb-1">Title *</label>
                        <input type="text" name="title" id="title" 
                               value="{{ old('title') }}"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               required placeholder="Enter research paper title">
                        @error('title')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="mt-4">
                        <label for="research_field" class="block text-sm font-medium text-gray-700 mb-1">Research Field *</label>
                        <input type="text" name="research_field" id="research_field" 
                               value="{{ old('research_field') }}"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               required placeholder="e.g., Computer Science, Biology, Physics">
                        @error('research_field')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="mt-4">
                        <label for="keywords" class="block text-sm font-medium text-gray-700 mb-1">Keywords *</label>
                        <input type="text" name="keywords" id="keywords" 
                               value="{{ old('keywords') }}"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               required placeholder="Comma-separated keywords (e.g., AI, Machine Learning, Data Science)">
                        @error('keywords')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                
                <!-- Paper Content -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Paper Content</h3>
                    
                    <div>
                        <label for="abstract" class="block text-sm font-medium text-gray-700 mb-1">Abstract *</label>
                        <textarea name="abstract" id="abstract" rows="6"
                                  class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                  required placeholder="Enter the abstract of the research paper">{{ old('abstract') }}</textarea>
                        @error('abstract')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                    
                    <div class="mt-4">
                        <label for="paper_file" class="block text-sm font-medium text-gray-700 mb-1">Paper File (PDF) *</label>
                        <input type="file" name="paper_file" id="paper_file" 
                               accept=".pdf"
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               required>
                        <p class="text-sm text-gray-500 mt-1">Maximum file size: 10MB. Only PDF files are allowed.</p>
                        @error('paper_file')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
                
                <!-- Status and Settings -->
                <div>
                    <h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Status and Settings</h3>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-1">Status *</label>
                            <select name="status" id="status" 
                                    class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    required>
                                <option value="pending" {{ old('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                                <option value="under_review" {{ old('status') == 'under_review' ? 'selected' : '' }}>Under Review</option>
                                <option value="approved" {{ old('status') == 'approved' ? 'selected' : '' }}>Approved</option>
                                <option value="rejected" {{ old('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
                                <option value="revision_requested" {{ old('status') == 'revision_requested' ? 'selected' : '' }}>Revision Requested</option>
                                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
                            </select>
                            @error('status')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                        
                        <div class="flex items-center">
                            <input type="checkbox" name="is_featured" id="is_featured" 
                                   {{ old('is_featured') ? 'checked' : '' }}
                                   class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                            <label for="is_featured" class="ml-2 block text-sm text-gray-700">
                                Feature this paper
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="flex justify-end space-x-4 mt-8">
                <a href="{{ route('admin.research-papers.index') }}" 
                   class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-2 rounded-lg transition duration-200">
                    Cancel
                </a>
                <button type="submit" 
                        class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition duration-200">
                    Create Research Paper
                </button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Character counter for abstract
    const abstractTextarea = document.getElementById('abstract');
    const abstractCounter = document.createElement('div');
    abstractCounter.className = 'text-sm text-gray-500 mt-1';
    abstractTextarea.parentNode.appendChild(abstractCounter);
    
    function updateAbstractCounter() {
        const length = abstractTextarea.value.length;
        abstractCounter.textContent = `${length} characters`;
    }
    
    abstractTextarea.addEventListener('input', updateAbstractCounter);
    updateAbstractCounter();
    
    // File size validation
    const fileInput = document.getElementById('paper_file');
    fileInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const fileSize = file.size / 1024 / 1024; // MB
            if (fileSize > 10) {
                alert('File size must be less than 10MB');
                this.value = '';
            }
        }
    });
});
</script>
@endsection