<x-conference-layout>
    <x-slot name="title">{{ $conference['title'] }} - Abstract Submission</x-slot>

    <!-- Page Header (Smaller Hero style modeled after home page) -->
    <section class="relative pt-48 pb-32 flex items-center justify-center text-white overflow-hidden bg-black">
        <!-- Background Image with Overlay -->
        <div class="absolute inset-0 z-0">
            <img src="{{ $conference['image'] }}" alt="Conference Venue" class="w-full h-full object-cover opacity-60">
            <!-- Complex Gradient Overlay for "Premium" feel -->
            <div class="absolute inset-0 bg-gradient-to-b from-black/80 via-transparent to-black"></div>
            <div class="absolute inset-0 bg-gradient-to-r from-black/50 via-transparent to-black/50"></div>
        </div>

        <div class="relative z-10 max-w-7xl mx-auto px-4 text-center">
            @if(isset($conference['prefix']))
                <span
                    class="block text-brand-200 text-lg md:text-xl font-bold tracking-widest uppercase mb-4">{{ $conference['prefix'] }}</span>
            @endif

            <h1 class="flex flex-col items-center justify-center leading-none tracking-tighter mb-6 select-none">
                <span
                    class="text-4xl md:text-5xl lg:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-b from-white to-gray-400 opacity-90 filter drop-shadow-2xl text-center">
                    {{ strtoupper($conference['title']) }}
                </span>
            </h1>

            <p class="text-lg md:text-xl text-gray-300 font-light tracking-wide max-w-4xl mx-auto">
                Official Website - Abstract Submission
            </p>
        </div>
    </section>

    <!-- Content Area -->
    <section class="py-24 bg-gray-50 border-b border-gray-200 relative">
        <div class="max-w-7xl mx-auto px-6 lg:px-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">

                <!-- Left Column: Main Content Form -->
                <div class="lg:col-span-2">
                    <form action="#" method="POST" enctype="multipart/form-data"
                        x-data="{ additionalPapers: [], coAuthorCVs: [] }">
                        <div class="bg-white rounded-2xl p-8 border border-gray-100 mb-10 shadow-sm">
                            <h3
                                class="text-xl font-bold text-gray-900 mb-8 flex items-center gap-2 border-b border-gray-100 pb-4 tracking-tight">
                                SUBMIT: Paper / Abstract / Poster / Case Studies / Projects
                            </h3>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                <!-- Register As -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Register As<span
                                            class="text-red-500">*</span></label>
                                    <select
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                        <option>Select Participant Category</option>
                                        <option>Author</option>
                                        <option>Listener</option>
                                    </select>
                                </div>

                                <!-- Registration Fee -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Registration Fee</label>
                                    <input type="text" readonly value="Registration Fee"
                                        class="w-full border border-gray-300 bg-gray-100 rounded-lg px-4 py-2 text-gray-500">
                                </div>

                                <!-- Title -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Title<span
                                            class="text-red-500">*</span></label>
                                    <select
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                        <option>Mr</option>
                                        <option>Ms</option>
                                        <option>Dr</option>
                                        <option>Prof</option>
                                    </select>
                                </div>

                                <!-- Name -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Name for Certificate<span
                                            class="text-red-500">*</span></label>
                                    <input type="text" placeholder="Name for Certificate"
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                </div>

                                <!-- Email -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Email<span
                                            class="text-red-500">*</span></label>
                                    <input type="email" placeholder="Enter Email"
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                </div>

                                <!-- University -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">University / College /
                                        Institute / Company / Any<span class="text-red-500">*</span></label>
                                    <input type="text" placeholder="University / College / Institute / Company / Any"
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                </div>

                                <!-- Country -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Select Country<span
                                            class="text-red-500">*</span></label>
                                    <select
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                        <option>Select Country</option>
                                        <option>United States</option>
                                        <option>United Kingdom</option>
                                        <option>Sri Lanka</option>
                                    </select>
                                </div>

                                <!-- Mobile -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Contact Number
                                        (Mobile)<span class="text-red-500">*</span></label>
                                    <input type="text" placeholder="Contact Number (Mobile)"
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                </div>

                                <!-- Official Contact -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Contact Number
                                        (Official)<span class="text-red-500">*</span></label>
                                    <input type="text" placeholder="Contact Number (Official)"
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                </div>

                                <!-- Research Title -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Research Title<span
                                            class="text-red-500">*</span></label>
                                    <input type="text" placeholder="Research Title"
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                </div>

                                <!-- Upload Abstract -->
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Upload Your Research /
                                        Abstract (Word / Pdf Format)<span class="text-red-500">*</span></label>
                                    <div class="flex relative overflow-hidden rounded-lg">
                                        <input type="file"
                                            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                                            x-ref="mainPaper"
                                            @change="$refs.mainPaperName.value = $event.target.files[0].name"
                                            accept=".doc,.docx,.pdf">
                                        <input type="text" x-ref="mainPaperName"
                                            placeholder="Upload Your Research / Abstract" readonly
                                            class="w-full border border-gray-300 rounded-l-lg px-4 py-2 bg-white text-gray-700 pointer-events-none">
                                        <button type="button"
                                            class="bg-gray-100 border-y border-r border-gray-300 text-gray-700 font-bold px-6 rounded-r-lg pointer-events-none">Browse</button>
                                    </div>

                                    <!-- Dynamic Additional Papers -->
                                    <template x-for="(paper, index) in additionalPapers" :key="index">
                                        <div class="flex relative overflow-hidden rounded-lg mt-3 shadow-sm">
                                            <input type="file"
                                                class="absolute inset-0 w-[calc(100%-3rem)] h-full opacity-0 cursor-pointer z-10"
                                                :id="'paper'+index"
                                                @change="document.getElementById('paperName'+index).value = $event.target.files[0].name"
                                                accept=".doc,.docx,.pdf">
                                            <input type="text" :id="'paperName'+index"
                                                placeholder="Additional Research / Abstract" readonly
                                                class="w-full border border-gray-300 rounded-l-lg px-4 py-2 bg-gray-50 text-gray-700 pointer-events-none">
                                            <button type="button"
                                                class="bg-gray-200 border-y border-r border-gray-300 text-gray-700 font-bold px-6 pointer-events-none">Browse</button>

                                            <button type="button" @click="additionalPapers.splice(index, 1)"
                                                class="bg-red-50 text-red-500 border border-gray-300 border-l-0 rounded-r-lg w-12 hover:bg-red-100 transition-colors flex items-center justify-center z-20"
                                                title="Remove">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </template>

                                    <div class="mt-3 text-right text-sm">
                                        <button type="button" @click="additionalPapers.push({})"
                                            class="text-orange-600 font-bold hover:text-orange-700 transition-colors inline-flex items-center gap-1">
                                            <i class="fas fa-plus mr-1"></i> Additional Paper(s)
                                        </button>
                                    </div>
                                </div>

                                <!-- Upload CV -->
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Upload Participant CV<span
                                            class="text-red-500">*</span></label>
                                    <div class="flex relative overflow-hidden rounded-lg">
                                        <input type="file"
                                            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
                                            x-ref="mainCV"
                                            @change="$refs.mainCVName.value = $event.target.files[0].name"
                                            accept=".doc,.docx,.pdf">
                                        <input type="text" x-ref="mainCVName" placeholder="Upload Participant CV"
                                            readonly
                                            class="w-full border border-gray-300 rounded-l-lg px-4 py-2 bg-white text-gray-700 pointer-events-none">
                                        <button type="button"
                                            class="bg-gray-100 border-y border-r border-gray-300 text-gray-700 font-bold px-6 rounded-r-lg pointer-events-none">Browse</button>
                                    </div>

                                    <!-- Dynamic Co-Author CVs -->
                                    <template x-for="(cv, index) in coAuthorCVs" :key="index">
                                        <div class="flex relative overflow-hidden rounded-lg mt-3 shadow-sm">
                                            <input type="file"
                                                class="absolute inset-0 w-[calc(100%-3rem)] h-full opacity-0 cursor-pointer z-10"
                                                :id="'cv'+index"
                                                @change="document.getElementById('cvName'+index).value = $event.target.files[0].name"
                                                accept=".doc,.docx,.pdf">
                                            <input type="text" :id="'cvName'+index" placeholder="Co-Author CV" readonly
                                                class="w-full border border-gray-300 rounded-l-lg px-4 py-2 bg-gray-50 text-gray-700 pointer-events-none">
                                            <button type="button"
                                                class="bg-gray-200 border-y border-r border-gray-300 text-gray-700 font-bold px-6 pointer-events-none">Browse</button>

                                            <button type="button" @click="coAuthorCVs.splice(index, 1)"
                                                class="bg-red-50 text-red-500 border border-gray-300 border-l-0 rounded-r-lg w-12 hover:bg-red-100 transition-colors flex items-center justify-center z-20"
                                                title="Remove">
                                                <i class="fas fa-trash-alt"></i>
                                            </button>
                                        </div>
                                    </template>

                                    <div class="mt-3 text-right text-sm">
                                        <button type="button" @click="coAuthorCVs.push({})"
                                            class="text-orange-600 font-bold hover:text-orange-700 transition-colors inline-flex items-center gap-1">
                                            <i class="fas fa-plus mr-1"></i> Upload Co-Author CV if interest to
                                            Participate
                                        </button>
                                    </div>
                                </div>

                                <!-- LinkedIn -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">LinkedIn / Twitter</label>
                                    <input type="text" placeholder="LinkedIn / Twitter"
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                </div>

                                <!-- Accompany Person -->
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Accompany
                                        Person(s)</label>
                                    <select
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50">
                                        <option>Select</option>
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                    </select>
                                </div>

                                <!-- Message -->
                                <div class="md:col-span-2">
                                    <label class="block text-sm font-bold text-gray-700 mb-2">Message</label>
                                    <textarea rows="4" placeholder="Enter Message"
                                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-orange-500 focus:border-orange-500 bg-gray-50"></textarea>
                                </div>

                                <!-- Verify -->
                                <div class="md:col-span-2 mt-2">
                                    <div
                                        class="border border-gray-300 p-4 rounded-lg bg-gray-50 w-full md:w-1/2 flex items-center justify-between shadow-sm">
                                        <div class="flex items-center gap-3">
                                            <input type="checkbox"
                                                class="w-5 h-5 border-gray-300 rounded text-orange-600 focus:ring-orange-500 bg-white">
                                            <span class="text-sm font-bold text-gray-700">Verify you are human</span>
                                        </div>
                                    </div>
                                </div>

                                <!-- Submit button -->
                                <div class="md:col-span-2 mt-8">
                                    <button type="submit"
                                        class="w-full bg-orange-600 text-white font-bold tracking-widest uppercase rounded-lg px-10 py-4 shadow-lg hover:bg-orange-700 hover:shadow-orange-500/20 transition-all text-sm">Submit
                                        Abstract</button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <div
                        class="prose prose-sm text-gray-600 max-w-none bg-gray-50 rounded-2xl p-8 border border-gray-100">
                        <h5
                            class="text-gray-900 font-bold uppercase tracking-wider mb-4 border-b border-gray-200 pb-2 text-sm">
                            Remarks</h5>
                        <p class="mb-4 text-sm leading-relaxed">Use above ONLINE FORM to upload any kind of Research
                            Works & Details, this form can upload more than one research paper or CV's as user required.
                        </p>
                        <ul class="space-y-3 m-0 p-0 text-sm">
                            <li class="flex items-start gap-2">
                                <i class="fas fa-angle-right text-orange-400 mt-1 text-xs"></i>
                                <span class="text-gray-600">If you are participate as Listener or Paper Presenter or any
                                    use same form.</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-angle-right text-orange-400 mt-1 text-xs"></i>
                                <span class="text-gray-600">Subordinate, for their details submission use "Upload
                                    Co-Author CV" (+) section.</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-angle-right text-orange-400 mt-1 text-xs"></i>
                                <span class="text-gray-600">Presenter Name on massage box (each additional paper /
                                    person charge separately).</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-angle-right text-orange-400 mt-1 text-xs"></i>
                                <span class="text-gray-600">If Accompany Person(s) participate, mention their names to
                                    make invitation letter (NO need their CV), per Accompany Person charge 200$ as
                                    Registration fees (subject to change).</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-angle-right text-orange-400 mt-1 text-xs"></i>
                                <span class="text-gray-600">All the required Acceptance Letters / Invitations & Payment
                                    Invoice details e-mail you with 03 days after the submission.</span>
                            </li>
                            <li class="flex items-start gap-2">
                                <i class="fas fa-angle-right text-orange-400 mt-1 text-xs"></i>
                                <span class="text-gray-600">From your registration fee 03$ donate to "GARI Child
                                    Education Fund", CSR Project.</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Right Column: Sidebar -->
                <div class="lg:col-span-1 space-y-8 tracking-tight">

                    <!-- Important Dates Sidebar Widget -->
                    @if(isset($conference['important_dates']))
                        <div class="bg-gray-900 text-white rounded-2xl p-8 shadow-2xl relative overflow-hidden">
                            <div
                                class="absolute top-0 right-0 w-32 h-32 bg-orange-500/20 rounded-full blur-3xl -mr-10 -mt-10">
                            </div>

                            <h3 class="text-2xl font-bold font-serif mb-8 border-b border-gray-700 pb-4">Important Dates
                            </h3>

                            <div class="space-y-6">
                                @foreach($conference['important_dates'] as $date)
                                    <div class="group">
                                        <p
                                            class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1 group-hover:text-orange-400 transition-colors">
                                            {{ $date['label'] }}
                                        </p>
                                        <p class="text-lg font-bold text-white">{{ $date['date'] }}</p>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @else
                        <div class="bg-gray-900 text-white rounded-2xl p-8 shadow-2xl relative overflow-hidden">
                            <div
                                class="absolute top-0 right-0 w-32 h-32 bg-orange-500/20 rounded-full blur-3xl -mr-10 -mt-10">
                            </div>

                            <h3 class="text-2xl font-bold font-serif mb-8 border-b border-gray-700 pb-4">Important Dates
                            </h3>

                            <div class="space-y-6">
                                <div class="group">
                                    <p
                                        class="text-xs text-gray-400 font-bold uppercase tracking-wider mb-1 group-hover:text-orange-400 transition-colors">
                                        Conference Date
                                    </p>
                                    <p class="text-lg font-bold text-white">{{ $conference['date'] ?? 'TBA' }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- Note Widget -->
                    <div class="bg-white rounded-2xl p-8 border border-gray-100 shadow-sm relative overflow-hidden">
                        <div class="absolute top-0 left-0 w-1 h-full bg-yellow-400"></div>
                        <h4 class="font-bold text-gray-900 mb-3 flex items-center gap-2">
                            <i class="fas fa-sticky-note text-yellow-500"></i> Note
                        </h4>
                        <p class="text-sm text-gray-700 leading-relaxed">Early Notification of Acceptance for
                            Abstract/Papers submitted before the deadline will be provided on a rolling basis
                            (within 21
                            days on a FIFO basis)</p>
                    </div>

                    <!-- Side Menu -->
                    <div class="bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
                        <h3
                            class="font-bold text-gray-900 uppercase tracking-wider text-sm mb-4 pb-2 border-b border-gray-100">
                            Quick Links</h3>
                        <div class="space-y-1">
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i>
                                Participation Opportunities
                            </a>
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Payment
                                Details
                            </a>
                            <a href="{{ route('conference.abstract-submission', ['slug' => $conference['slug']]) }}"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i>
                                Abstract / Paper Submission
                            </a>
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i>
                                Abstract / Full Paper Guidelines
                            </a>
                            <a href="{{ route('conference.show', ['slug' => $conference['slug']]) }}#scopes"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Scope
                            </a>
                            <a href="{{ route('conference.show', ['slug' => $conference['slug']]) }}#schedule"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Program
                                Schedule
                            </a>
                            <a href="#"
                                class="flex items-center gap-3 px-3 py-2 text-sm text-gray-600 hover:text-orange-600 hover:bg-orange-50 rounded-lg transition-colors group">
                                <i class="fas fa-angle-right text-gray-400 group-hover:text-orange-500"></i> Journal
                                & Publications
                            </a>
                        </div>
                    </div>
                </div> <!-- Closes Right Column: lg:col-span-1 -->
            </div> <!-- Closes Grid: grid-cols-1 lg:grid-cols-3 -->
        </div> <!-- Closes Container: max-w-7xl -->
    </section>
</x-conference-layout>