@extends('admin.layouts.app')

@section('title', 'Add Research Study')
@section('page-title', 'Add Research Study')
@section('page-subtitle', 'Add new research publication')

@section('content')
<div class="p-4 lg:p-6">
  <div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm">
      <div class="p-6 border-b border-slate-100">
        <h3 class="text-xl font-bold text-slate-800">Research Details</h3>
      </div>

      <form method="POST" action="{{ route('admin.research.store') }}" enctype="multipart/form-data">
        @csrf
        
        <div class="p-6 space-y-4">
          <!-- Title -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Title *</label>
            <input type="text" name="title" value="{{ old('title') }}" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('title') border-red-500 @enderror" placeholder="Enter research title">
            @error('title')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Abstract -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Abstract *</label>
            <textarea name="abstract" rows="4" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('abstract') border-red-500 @enderror" placeholder="Brief summary of the research...">{{ old('abstract') }}</textarea>
            @error('abstract')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- Lead Researcher and Category -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Lead Researcher *</label>
              <select name="lead_researcher_id" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('lead_researcher_id') border-red-500 @enderror">
                <option value="">Select researcher</option>
                @foreach($researchers as $researcher)
                  <option value="{{ $researcher->id }}" {{ old('lead_researcher_id') == $researcher->id ? 'selected' : '' }}>
                    {{ $researcher->name }}
                  </option>
                @endforeach
              </select>
              @error('lead_researcher_id')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Category *</label>
              <select name="category" required class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('category') border-red-500 @enderror">
                <option value="">Select category</option>
                <option value="Clinical Psychology" {{ old('category') == 'Clinical Psychology' ? 'selected' : '' }}>Clinical Psychology</option>
                <option value="Cognitive Psychology" {{ old('category') == 'Cognitive Psychology' ? 'selected' : '' }}>Cognitive Psychology</option>
                <option value="Developmental Psychology" {{ old('category') == 'Developmental Psychology' ? 'selected' : '' }}>Developmental Psychology</option>
                <option value="Social Psychology" {{ old('category') == 'Social Psychology' ? 'selected' : '' }}>Social Psychology</option>
                <option value="Neuropsychology" {{ old('category') == 'Neuropsychology' ? 'selected' : '' }}>Neuropsychology</option>
                <option value="Behavioral Psychology" {{ old('category') == 'Behavioral Psychology' ? 'selected' : '' }}>Behavioral Psychology</option>
                <option value="Mental Health" {{ old('category') == 'Mental Health' ? 'selected' : '' }}>Mental Health</option>
                <option value="Other" {{ old('category') == 'Other' ? 'selected' : '' }}>Other</option>
              </select>
              @error('category')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Co-Authors -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Co-Authors</label>
            <div id="coAuthorsContainer" class="space-y-2">
              <div class="flex gap-2">
                <input type="text" name="co_authors[]" value="{{ old('co_authors.0') }}" class="flex-1 px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500" placeholder="Co-author name">
                <button type="button" onclick="addCoAuthor()" class="px-4 py-3 bg-primary-50 text-primary-600 rounded-xl hover:bg-primary-100">
                  <i class="fas fa-plus"></i>
                </button>
              </div>
            </div>
            <p class="mt-1 text-xs text-slate-500">Add additional researchers who contributed to this study</p>
          </div>

          <!-- Full Content -->
          <div>
            <label class="block text-sm font-medium text-slate-700 mb-2">Full Content</label>
            <textarea name="full_content" rows="8" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('full_content') border-red-500 @enderror" placeholder="Full research content, methodology, findings...">{{ old('full_content') }}</textarea>
            @error('full_content')
              <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
          </div>

          <!-- PDF Upload and DOI -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">PDF Document</label>
              <input type="file" name="pdf_file" accept=".pdf" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('pdf_file') border-red-500 @enderror">
              <p class="mt-1 text-xs text-slate-500">Upload research paper (PDF, max 10MB)</p>
              @error('pdf_file')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">DOI</label>
              <input type="text" name="doi" value="{{ old('doi') }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('doi') border-red-500 @enderror" placeholder="10.1234/example.doi">
              <p class="mt-1 text-xs text-slate-500">Digital Object Identifier (if available)</p>
              @error('doi')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>

          <!-- Status and Publication Date -->
          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
              <select name="status" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('status') border-red-500 @enderror">
                <option value="in_progress" {{ old('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                <option value="peer_review" {{ old('status') == 'peer_review' ? 'selected' : '' }}>Peer Review</option>
                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published</option>
                <option value="rejected" {{ old('status') == 'rejected' ? 'selected' : '' }}>Rejected</option>
              </select>
              @error('status')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>

            <div>
              <label class="block text-sm font-medium text-slate-700 mb-2">Publication Date</label>
              <input type="date" name="publication_date" value="{{ old('publication_date') }}" class="w-full px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500 @error('publication_date') border-red-500 @enderror">
              @error('publication_date')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
              @enderror
            </div>
          </div>
        </div>

        <!-- Form Actions -->
        <div class="p-6 border-t border-slate-100 flex justify-end gap-3">
          <a href="{{ route('admin.research.index') }}" class="px-6 py-3 text-slate-600 font-medium rounded-xl hover:bg-slate-100">
            Cancel
          </a>
          <button type="submit" class="px-6 py-3 bg-primary-500 text-white font-medium rounded-xl hover:bg-primary-600 shadow-lg shadow-primary-500/30">
            Add Research Study
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

@push('scripts')
<script>
let coAuthorCount = 1;

function addCoAuthor() {
  const container = document.getElementById('coAuthorsContainer');
  const newField = document.createElement('div');
  newField.className = 'flex gap-2';
  newField.innerHTML = `
    <input type="text" name="co_authors[]" class="flex-1 px-4 py-3 border border-slate-200 rounded-xl focus:ring-2 focus:ring-primary-500/20 focus:border-primary-500" placeholder="Co-author name">
    <button type="button" onclick="this.parentElement.remove()" class="px-4 py-3 bg-red-50 text-red-600 rounded-xl hover:bg-red-100">
      <i class="fas fa-times"></i>
    </button>
  `;
  container.appendChild(newField);
  coAuthorCount++;
}
</script>
@endpush
@endsection