@extends('user.layouts.app')
@section('title','Submit Paper')
@section('page-title','Submit Paper')
@section('page-subtitle','Upload your paper and list all authors in order')
@section('content')

@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
@if($errors->any())
    <div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>
@endif

<div class="alert alert-light border mb-4">
    <strong>One paper review fee = one paper.</strong> You must <a href="{{ route('user.paper-review') }}">pay the paper review fee</a> for each paper before uploading.
    Only conferences with <strong>in-system submission</strong> enabled and an available paid slot appear here.
</div>

<div class="content-card p-4 mb-4">
    <form method="POST" action="{{ route('user.papers.store') }}" enctype="multipart/form-data" id="paper-submit-form">
        @csrf
        <div class="row g-3">
            <div class="col-md-12">
                <label class="form-label">Conference *</label>
                <select name="conference_id" class="form-select" required id="conferenceSelect">
                    <option value="">Select conference</option>
                    @foreach($conferences as $conf)
                        @php $status = $conferenceStatuses[$conf->id] ?? null; @endphp
                        @if($status && $status['uses_internal'])
                            <option value="{{ $conf->id }}" @selected(old('conference_id', $selectedConferenceId) == $conf->id) data-themes="{{ $conf->subThemes->pluck('title','id')->toJson() }}" data-paid="{{ ($status['has_available_slot'] ?? false) ? '1' : '0' }}">
                                {{ $conf->name }} ({{ $conf->conference_year }}){{ ! ($status['has_available_slot'] ?? false) ? ' — pay review fee first' : '' }}
                            </option>
                        @endif
                    @endforeach
                </select>
                <div id="conferenceGateMessage" class="small mt-2"></div>
            </div>
            <div class="col-md-12">
                <label class="form-label">Paper Title *</label>
                <input name="title" class="form-control" value="{{ old('title') }}" required>
            </div>
            <div class="col-md-12">
                <label class="form-label">Abstract *</label>
                <textarea name="abstract" class="form-control" rows="5" required>{{ old('abstract') }}</textarea>
            </div>
            <div class="col-md-12">
                <label class="form-label">Keywords</label>
                <input name="keywords" class="form-control" value="{{ old('keywords') }}" placeholder="keyword1, keyword2">
            </div>
            <div class="col-md-6">
                <label class="form-label">Sub-theme</label>
                <select name="sub_theme_id" class="form-select" id="subThemeSelect">
                    <option value="">Select sub-theme</option>
                </select>
            </div>
            <div class="col-md-6">
                <label class="form-label">Paper File (PDF/DOC) *</label>
                <input type="file" name="paper_file" class="form-control" accept=".pdf,.doc,.docx" required>
            </div>
        </div>

        @include('user.partials.paper-author-fields', ['coAuthors' => old('authors', [])])

        <div class="mt-4">
            <button type="submit" class="btn btn-success" id="submitPaperBtn">Submit Paper</button>
            <a href="{{ route('user.my-papers') }}" class="btn btn-light">Cancel</a>
            <a href="{{ route('user.paper-review') }}" class="btn btn-outline-success ms-1">Paper Review Fee</a>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.getElementById('conferenceSelect')?.addEventListener('change', function() {
    const opt = this.options[this.selectedIndex];
    const themes = opt.dataset.themes ? JSON.parse(opt.dataset.themes) : {};
    const sel = document.getElementById('subThemeSelect');
    const gate = document.getElementById('conferenceGateMessage');
    const submitBtn = document.getElementById('submitPaperBtn');
    sel.innerHTML = '<option value="">Select sub-theme</option>';
    Object.entries(themes).forEach(([id, title]) => {
        sel.innerHTML += `<option value="${id}">${title}</option>`;
    });
    if (!opt.value) {
        gate.textContent = '';
        submitBtn.disabled = false;
        return;
    }
    if (opt.dataset.paid === '0') {
        gate.innerHTML = '<span class="text-danger">Pay the <a href="{{ route('user.paper-review') }}">paper review fee</a> for this conference before submitting.</span>';
        submitBtn.disabled = true;
    } else {
        gate.textContent = '';
        submitBtn.disabled = false;
    }
});
document.getElementById('conferenceSelect')?.dispatchEvent(new Event('change'));
</script>
@endpush

@endsection