@extends('frontend.source.layouts.app')

@section('content')

	<div class="stricky-header stricked-menu main-menu">
		<div class="sticky-header__content"></div>
	</div>
    <section class="blog-left-sidebar">
        <div class="container">
            <div class="row">
                <div class="col-xl-3">
                    @include('frontend.source.common.sidebar')
                </div>
                <div class="col-xl-9">
                    <div class="sign-up-one__form">
                        <h2 style="margin-bottom: 20px; color: #333;">Volunteer to Review</h2>
                        
                        <div style="background-color: #f5f5f5; padding: 20px; margin-bottom: 30px; border-radius: 5px;">
                            <h4 style="margin-bottom: 15px; color: #333;"><strong>Reviewers must meet the following criteria:</strong></h4>
                            <ul style="margin: 0; padding-left: 20px;">
                                <li style="margin-bottom: 10px;">Hold a Ph.D. (or MD for medical fields), preferably with postdoctoral experience.</li>
                                <li style="margin-bottom: 10px;">Have an official and recognized affiliation (university or research institutes), relevant experience, and proven publication record in the field of the submitted paper (Scopus, ORCID);</li>
                                <li>Be an active researcher.</li>
                            </ul>
                        </div>

                        <h3 style="margin-bottom: 20px; color: #333; margin-top: 30px;"><strong>Edit Volunteer Profile Data</strong></h3>

                        <form id="volunteer-form" 
                            name="volunteer_form" 
                            action="{{ route('frontend.volunteer.preferences.store') }}" 
                            method="POST"
                            enctype="multipart/form-data">

                            @csrf

                            <div class="row">
                                <div class="col-xl-12">
                                    @if(session('success'))
                                        <div style="color: green; margin-bottom:15px; padding:10px; border:1px solid green; border-radius: 4px;">
                                            {{ session('success') }}
                                        </div>
                                    @endif
                                    
                                    @if ($errors->any())
                                        <div style="color: red; margin-bottom:15px; padding:10px; border:1px solid red; border-radius: 4px;">
                                            <ul style="margin: 0; padding-left: 20px;">
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                </div>

                                <!-- Highest Degree -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">Highest degree<span style="color:red;">*</span></label>
                                            <select name="highest_degree" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                                <option value="">-- Select --</option>
                                                <option value="Bachelor" {{ isset($volunteerPreferences) && $volunteerPreferences->highest_degree == 'Bachelor' ? 'selected' : '' }}>Bachelor</option>
                                                <option value="Master" {{ isset($volunteerPreferences) && $volunteerPreferences->highest_degree == 'Master' ? 'selected' : '' }}>Master</option>
                                                <option value="PhD" {{ isset($volunteerPreferences) && $volunteerPreferences->highest_degree == 'PhD' ? 'selected' : '' }}>PhD</option>
                                                <option value="MD" {{ isset($volunteerPreferences) && $volunteerPreferences->highest_degree == 'MD' ? 'selected' : '' }}>MD</option>
                                                <option value="Other" {{ isset($volunteerPreferences) && $volunteerPreferences->highest_degree == 'Other' ? 'selected' : '' }}>Other</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Affiliation -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">Affiliation (Institution and Address)<span style="color:red;">*</span></label>
                                            <textarea name="affiliation" required placeholder="Institution and Address" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 100px;">{{ isset($volunteerPreferences) ? $volunteerPreferences->affiliation : '' }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <!-- Publication Record -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">Publication Record</label>
                                            <input type="text" placeholder="Publication Record Link" name="publication_record" value="{{ isset($volunteerPreferences) ? $volunteerPreferences->publication_record : '' }}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                    </div>
                                </div>

                                <!-- ORCID -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">ORCID</label>
                                            <input type="text" placeholder="ORCID" name="orcid" value="{{ isset($volunteerPreferences) ? $volunteerPreferences->orcid : '' }}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                    </div>
                                </div>

                                <!-- Personal Homepage -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">Personal Homepage<span style="color:red;">*</span></label>
                                            <input type="url" placeholder="https://" name="personal_homepage" required value="{{ isset($volunteerPreferences) ? $volunteerPreferences->personal_homepage : '' }}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                    </div>
                                </div>

                                <!-- Reviewed Journals -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">Reviewed Journals</label>
                                            <textarea name="reviewed_journals" placeholder="The journals I have reviewed for" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; min-height: 100px;">{{ isset($volunteerPreferences) ? $volunteerPreferences->reviewed_journals : '' }}</textarea>
                                        </div>
                                    </div>
                                </div>

                                <!-- CV or Supporting Information -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">CV or Supporting Information</label>
                                            <input type="file" name="cv_file" accept=".pdf,.doc,.docx" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                            @if(isset($volunteerPreferences) && $volunteerPreferences->cv_file)
                                                <p style="font-size: 12px; color: #666; margin-top: 5px;">Current file: <a href="{{ asset('storage/' . $volunteerPreferences->cv_file) }}" target="_blank">Download</a></p>
                                            @endif
                                        </div>
                                    </div>
                                </div>

                                <!-- Research Keywords -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">Research Keywords<span style="color:red;">*</span></label>
                                            <input type="text" placeholder="Please separate the keywords by semicolon" name="research_keywords" required value="{{ isset($volunteerPreferences) ? $volunteerPreferences->research_keywords : '' }}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                    </div>
                                </div>

                                <!-- C3S Publishers Journals -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">C3S Publishers Journals</label>
                                            <select id="journal-select" name="journal_ids[]" multiple class="form-control">
                                                @forelse($journals as $journal)
                                                    <option value="{{ $journal->id }}" 
                                                        @if(is_array($selectedJournals) && in_array($journal->id, $selectedJournals)) selected @endif>
                                                        {{ $journal->title }}
                                                        @if($journal->issn) - {{ $journal->issn }} @endif
                                                    </option>
                                                @empty
                                                    <option value="" disabled>No journals available</option>
                                                @endforelse
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- Title -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">Title<span style="color:red;">*</span></label>
                                            <select name="title" required style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                                <option value="">-- Select --</option>
                                                <option value="Dr." {{ isset($volunteerPreferences) && $volunteerPreferences->title == 'Dr.' ? 'selected' : '' }}>Dr.</option>
                                                <option value="Prof." {{ isset($volunteerPreferences) && $volunteerPreferences->title == 'Prof.' ? 'selected' : '' }}>Prof.</option>
                                                <option value="Prof. Dr." {{ isset($volunteerPreferences) && $volunteerPreferences->title == 'Prof. Dr.' ? 'selected' : '' }}>Prof. Dr.</option>
                                                <option value="Mr." {{ isset($volunteerPreferences) && $volunteerPreferences->title == 'Mr.' ? 'selected' : '' }}>Mr.</option>
                                                <option value="Ms." {{ isset($volunteerPreferences) && $volunteerPreferences->title == 'Ms.' ? 'selected' : '' }}>Ms.</option>
                                                <option value="Mrs." {{ isset($volunteerPreferences) && $volunteerPreferences->title == 'Mrs.' ? 'selected' : '' }}>Mrs.</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <!-- H-index -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">H-index</label>
                                            <input type="text" placeholder="H-index" name="h_index" value="{{ isset($volunteerPreferences) ? $volunteerPreferences->h_index : '' }}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                    </div>
                                </div>

                                <!-- H-index URL -->
                                <div class="col-xl-12">
                                    <div class="form-group">
                                        <div class="input-box">
                                            <label style="margin:0 0 5px 0;font-size:15px;">H-index URL</label>
                                            <input type="url" placeholder="https://" name="h_index_url" value="{{ isset($volunteerPreferences) ? $volunteerPreferences->h_index_url : '' }}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;">
                                        </div>
                                    </div>
                                </div>

                                <!-- Buttons -->
                                <div class="col-xl-12" style="margin-top: 30px;">
                                    <button type="submit" class="btn btn-primary" style="background-color: #007bff; color: white; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; margin-right: 10px;">
                                        Apply to become a volunteer reviewer
                                    </button>
                                    <button type="button" class="btn btn-secondary" onclick="saveDraft()" style="background-color: #6c757d; color: white; padding: 12px 30px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;">
                                        Save as draft (apply later)
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>




@endsection