@extends('layouts.app')

@section('title', 'Admin Dashboard – Author & Paper Management – IJCNC')

@section('extra_css')
<style>
    /* Admin Dashboard Custom Styles */
    .admin-header-bar {
        background: #f7f7f7;
        border: 1px solid #e0e0e0;
        border-left: 4px solid #8e850a;
        padding: 12px 18px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
        border-radius: 3px;
    }
    .admin-stats-row {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
        flex-wrap: wrap;
    }
    .admin-stat-card {
        flex: 1;
        min-width: 140px;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-top: 3px solid #8e850a;
        padding: 12px 16px;
        border-radius: 3px;
    }
    .admin-stat-number {
        font-size: 22px;
        font-weight: bold;
        color: #896900;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .admin-stat-label {
        font-size: 11px;
        text-transform: uppercase;
        color: #666;
        letter-spacing: 0.5px;
    }

    /* Tabs Styling */
    .admin-tabs-nav {
        display: flex;
        border-bottom: 2px solid #8e850a;
        margin-bottom: 20px;
        gap: 4px;
    }
    .admin-tab-btn {
        background: #f1f1f1;
        border: 1px solid #e0e0e0;
        border-bottom: none;
        padding: 10px 20px;
        font-size: 13px;
        font-weight: bold;
        cursor: pointer;
        color: #444;
        border-radius: 4px 4px 0 0;
        transition: all 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }
    .admin-tab-btn:hover {
        background: #e8e8e8;
        color: #000;
    }
    .admin-tab-btn.active {
        background: #8e850a;
        color: #fff;
        border-color: #8e850a;
    }
    .admin-tab-pane {
        display: none;
    }
    .admin-tab-pane.active {
        display: block;
    }

    /* Form Styles */
    .admin-form-section {
        background: #fafafa;
        border: 1px solid #e5e5e5;
        padding: 20px 24px;
        margin-bottom: 22px;
        border-radius: 4px;
    }
    .admin-section-heading {
        font-size: 15px;
        font-weight: bold;
        color: #008000;
        border-bottom: 1px solid #ddd;
        padding-bottom: 6px;
        margin-bottom: 16px;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .form-grid-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    @media (max-width: 600px) {
        .form-grid-2 {
            grid-template-columns: 1fr;
        }
    }
    .form-field {
        margin-bottom: 14px;
    }
    .form-field label {
        display: block;
        font-weight: bold;
        font-size: 12px;
        margin-bottom: 5px;
        color: #333;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .form-field input[type="text"],
    .form-field input[type="email"],
    .form-field input[type="password"],
    .form-field select,
    .form-field textarea {
        width: 100%;
        padding: 8px 10px;
        font-size: 13px;
        border: 1px solid #c2c2c2;
        border-radius: 3px;
        box-sizing: border-box;
        font-family: inherit;
        background: #fff;
    }
    .form-field input:focus,
    .form-field select:focus,
    .form-field textarea:focus {
        border-color: #8e850a;
        outline: none;
        box-shadow: 0 0 4px rgba(142, 133, 10, 0.4);
    }
    .file-upload-box {
        background: #fff;
        border: 1px dashed #b5b5b5;
        padding: 10px 14px;
        border-radius: 3px;
        margin-top: 4px;
    }
    .file-upload-box input[type="file"] {
        font-size: 12px;
        width: 100%;
    }
    .btn-save-author {
        background-color: #896900 !important;
        color: #fff !important;
        border: none;
        padding: 10px 28px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        border-radius: 3px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: background-color 0.2s ease;
    }
    .btn-save-author:hover {
        background-color: #9E6100 !important;
    }

    /* Table Styles for Tab 2 */
    .table-container {
        overflow-x: auto;
        background: #fff;
        border: 1px solid #e0e0e0;
        margin-top: 15px;
    }
    .admin-authors-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    .admin-authors-table th {
        background: #f4f4f4;
        color: #222;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 11px;
        padding: 10px 12px;
        border-bottom: 2px solid #8e850a;
        text-align: left;
    }
    .admin-authors-table td {
        padding: 10px 12px;
        border-bottom: 1px solid #eee;
        vertical-align: top;
    }
    .admin-authors-table tr:hover {
        background: #fffcee;
    }
    .badge-decision {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 10px;
        font-weight: bold;
    }
    .badge-accepted {
        background: #e8f5e9;
        color: #1b5e20;
        border: 1px solid #c8e6c9;
    }
    .badge-review {
        background: #e3f2fd;
        color: #0d47a1;
        border: 1px solid #bbdefb;
    }
    .badge-revision {
        background: #fff8e1;
        color: #f57f17;
        border: 1px solid #ffecb3;
    }
    .badge-rejected {
        background: #ffebee;
        color: #b71c1c;
        border: 1px solid #ffcdd2;
    }

    .badge-peer {
        display: inline-block;
        padding: 2px 7px;
        border-radius: 3px;
        font-size: 10px;
        font-weight: bold;
        background: #f0fdf4;
        color: #166534;
        border: 1px solid #bbf7d0;
    }
    .doc-mini-btn {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 3px 7px;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 3px;
        font-size: 10px;
        color: #334155 !important;
        text-decoration: none !important;
        margin: 2px 0;
        font-weight: 500;
        transition: all 0.15s ease;
    }
    .doc-mini-btn:hover {
        background: #008000;
        color: #fff !important;
        border-color: #008000;
    }
    .btn-copy-cert-link {
        background-color: #0284c7 !important;
        color: #ffffff !important;
        border: none;
        padding: 5px 11px;
        font-size: 11px;
        font-weight: bold;
        border-radius: 3px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        transition: all 0.2s ease;
        white-space: nowrap;
    }
    .btn-copy-cert-link:hover {
        background-color: #0369a1 !important;
        transform: translateY(-1px);
    }
    .btn-copy-cert-link.copied {
        background-color: #16a34a !important;
    }
    .btn-delete-author {
        background: #dc2626;
        color: #fff;
        border: none;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 11px;
        cursor: pointer;
    }
    .btn-delete-author:hover {
        background: #b91c1c;
    }
    .alert-success-box {
        background: #e8f5e9;
        border: 1px solid #c8e6c9;
        border-left: 4px solid #2e7d32;
        color: #1b5e20;
        padding: 10px 16px;
        margin-bottom: 16px;
        font-size: 13px;
        border-radius: 3px;
    }
    .alert-danger-box {
        background: #fde8e8;
        border: 1px solid #f8b4b4;
        border-left: 4px solid #e02424;
        color: #9b1c1c;
        padding: 10px 16px;
        margin-bottom: 16px;
        font-size: 13px;
        border-radius: 3px;
    }
</style>
@endsection

@section('content')
<h1 class="entry-title">Editorial Management Dashboard</h1>

<!-- Top Status Bar -->
<div class="admin-header-bar">
    <div>
        <strong>Logged in as:</strong> <span style="color:#896900;">{{ session('admin_username', 'Administrator') }}</span>
        &nbsp;|&nbsp; <span>International Journal of Computer Networks &amp; Communications (IJCNC)</span>
    </div>
    <div style="display: flex; gap: 10px; align-items: center;">
        <a href="{{ route('author.paper.view') }}" target="_blank" style="font-size: 12px; color: #896900; text-decoration: underline;">Open Author Portal ↗</a>
        <form action="{{ route('admin.logout') }}" method="POST" style="margin:0;">
            @csrf
            <button type="submit" style="background:#555; color:#fff; border:none; padding:4px 12px; border-radius:3px; font-size:11px; cursor:pointer;">Logout</button>
        </form>
    </div>
</div>

@if(session('success'))
<div class="alert-success-box">
    <strong>Success:</strong> {{ session('success') }}
</div>
@endif

@if(session('error'))
<div class="alert-danger-box">
    <strong>Error:</strong> {{ session('error') }}
</div>
@endif

@if($errors->any())
<div class="alert-danger-box">
    <strong>Validation Error:</strong>
    <ul style="margin: 6px 0 0 18px; padding: 0;">
        @foreach($errors->all() as $err)
            <li>{{ $err }}</li>
        @endforeach
    </ul>
</div>
@endif

<!-- Quick Metrics Overview -->
<div class="admin-stats-row">
    <div class="admin-stat-card">
        <div class="admin-stat-number">{{ count($authors) }}</div>
        <div class="admin-stat-label">Total Authors / Papers</div>
    </div>
    <div class="admin-stat-card">
        <div class="admin-stat-number">{{ $authors->where('decision', 'Accepted for publication')->count() }}</div>
        <div class="admin-stat-label">Accepted for Publication</div>
    </div>
    <div class="admin-stat-card">
        <div class="admin-stat-number">{{ $authors->where('review_process', 'Peer reviewed')->count() }}</div>
        <div class="admin-stat-label">Peer Reviewed</div>
    </div>
</div>

<!-- Tabs Navigation -->
<div class="admin-tabs-nav">
    <button type="button" class="admin-tab-btn {{ $activeTab === 'add-author' ? 'active' : '' }}" onclick="switchAdminTab('add-author', this)">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
        Add Author &amp; Paper
    </button>
    <button type="button" class="admin-tab-btn {{ $activeTab === 'view-authors' ? 'active' : '' }}" onclick="switchAdminTab('view-authors', this)">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
        View All Authors ({{ count($authors) }})
    </button>
</div>

<!-- ========================================== -->
<!-- TAB 1: ADD NEW AUTHOR & PAPER DETAILS FORM -->
<!-- ========================================== -->
<div id="tab-add-author" class="admin-tab-pane {{ $activeTab === 'add-author' ? 'active' : '' }}">
    <form action="{{ route('admin.author.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <!-- 1. Author Account Details -->
        <div class="admin-form-section">
            <div class="admin-section-heading">
                1. Author Login Credentials &amp; Personal Info
            </div>

            <div class="form-grid-2">
                <div class="form-field">
                    <label for="author_name">Author Name (Primary / Corresponding Author) <span style="color:#cf2e2e;">*</span></label>
                    <input type="text" id="author_name" name="author_name" placeholder="e.g. Dr. Jane Smith" value="{{ old('author_name') }}" required />
                </div>

                <div class="form-field">
                    <label for="author_email">Author Login Email ID <span style="color:#cf2e2e;">*</span></label>
                    <input type="email" id="author_email" name="author_email" placeholder="e.g. author@university.edu" value="{{ old('author_email') }}" required />
                </div>
            </div>

            <div class="form-field" style="max-width: 440px;">
                <label for="author_password">Assign Author Password <span style="color:#cf2e2e;">*</span></label>
                <div style="display: flex; gap: 8px;">
                    <input type="text" id="author_password" name="password" placeholder="Create author portal password" value="{{ old('password', 'ijcnc' . rand(1000, 9999)) }}" required />
                    <button type="button" onclick="generateNewPassword()" style="background:#555; color:#fff; border:none; padding:6px 12px; border-radius:3px; font-size:11px; cursor:pointer; white-space:nowrap;">Generate</button>
                </div>
                <div style="font-size: 11px; color:#666; margin-top:3px;">Author will use this password alongside their Email or Paper ID to log in.</div>
            </div>
        </div>

        <!-- Co-Authors Section -->
        <div class="admin-form-section">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px;">
                <div class="admin-section-heading" style="margin-bottom: 0; border-bottom: none; padding-bottom: 0;">
                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                    Co-Authors (Multiple Authors for this Paper)
                </div>
                <button type="button" onclick="addCoAuthorField()" style="background: #008000; color: #fff; border: none; padding: 6px 14px; border-radius: 3px; font-size: 11px; font-weight: bold; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;">
                    + Add Co-Author
                </button>
            </div>
            
            <p style="font-size: 11px; color: #555; margin: 0 0 12px 0;">
                The first author above is the <strong>Primary Author</strong>. Click <strong>"+ Add Co-Author"</strong> to add one or more co-authors. You can add or remove co-authors at any time.
            </p>

            <div id="coAuthorsContainer">
                <!-- Co-author inputs injected here -->
            </div>
        </div>

        <!-- 2. Paper Information -->
        <div class="admin-form-section">
            <div class="admin-section-heading">
                2. Manuscript Assignment &amp; Decision Details
            </div>

            <div class="form-grid-2">
                <div class="form-field">
                    <label for="paper_id">Assign Paper ID <span style="color:#cf2e2e;">*</span></label>
                    <div style="display: flex; gap: 8px;">
                        <input type="text" id="paper_id" name="paper_id" placeholder="e.g. IJCNC-2026-9045" value="{{ old('paper_id', 'IJCNC-2026-' . rand(1000, 9999)) }}" required />
                        <button type="button" onclick="generateNewPaperId()" style="background:#555; color:#fff; border:none; padding:6px 12px; border-radius:3px; font-size:11px; cursor:pointer; white-space:nowrap;">Generate ID</button>
                    </div>
                </div>

                <div class="form-field">
                    <label for="volume_issue">Target Volume &amp; Issue</label>
                    <input type="text" id="volume_issue" name="volume_issue" placeholder="Volume 18, Number 1 (January 2026)" value="{{ old('volume_issue', 'Volume 18, Number 1 (January 2026)') }}" />
                </div>
            </div>

            <div class="form-field">
                <label for="paper_title">Paper Title <span style="color:#cf2e2e;">*</span></label>
                <textarea id="paper_title" name="paper_title" rows="2" placeholder="Enter complete manuscript title..." required>{{ old('paper_title') }}</textarea>
            </div>

            <div class="form-grid-2">
                <div class="form-field">
                    <label for="decision">Editorial Decision <span style="color:#cf2e2e;">*</span></label>
                    <select id="decision" name="decision" required>
                        <option value="Accepted for publication" {{ old('decision') === 'Accepted for publication' ? 'selected' : '' }}>Accepted for publication</option>
                        <option value="Under Review" {{ old('decision') === 'Under Review' ? 'selected' : '' }}>Under Review</option>
                        <option value="Revision Required" {{ old('decision') === 'Revision Required' ? 'selected' : '' }}>Revision Required</option>
                        <option value="Rejected" {{ old('decision') === 'Rejected' ? 'selected' : '' }}>Rejected</option>
                    </select>
                </div>

                <div class="form-field">
                    <label for="review_process">Review Process Status <span style="color:#cf2e2e;">*</span></label>
                    <select id="review_process" name="review_process" required>
                        <option value="Peer reviewed" {{ old('review_process') === 'Peer reviewed' ? 'selected' : '' }}>Peer reviewed</option>
                        <option value="Under Peer Review" {{ old('review_process') === 'Under Peer Review' ? 'selected' : '' }}>Under Peer Review</option>
                        <option value="Not Peer reviewed" {{ old('review_process') === 'Not Peer reviewed' ? 'selected' : '' }}>Not Peer reviewed</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- 3. Document Uploads (All 3 Documents) -->
        <div class="admin-form-section">
            <div class="admin-section-heading">
                3. Upload Author Documents (Confirmation Letter, Published Paper, &amp; Certificate)
            </div>

            <p class="wp-block-paragraph" style="font-size: 12px; color: #555; margin-bottom: 15px;">
                Upload the 3 official documents for this author. Once saved, these files will be immediately downloadable by the author from their self-service download portal.
            </p>

            <!-- Doc 1: Confirmation Letter -->
            <div class="form-field">
                <label for="confirmation_letter">
                    ① Confirmation Letter / Acceptance Letter (PDF)
                </label>
                <div class="file-upload-box">
                    <input type="file" id="confirmation_letter" name="confirmation_letter" accept=".pdf,.doc,.docx" />
                    <div style="font-size: 11px; color:#666; margin-top: 3px;">Official acceptance letter on IJCNC letterhead signed by Editor-in-Chief.</div>
                </div>
            </div>

            <!-- Doc 2: Paper Document -->
            <div class="form-field">
                <label for="paper_document">
                    ② Final Published Paper / Manuscript (PDF)
                </label>
                <div class="file-upload-box">
                    <input type="file" id="paper_document" name="paper_document" accept=".pdf,.doc,.docx" />
                    <div style="font-size: 11px; color:#666; margin-top: 3px;">Full camera-ready formatted manuscript with DOI and pagination.</div>
                </div>
            </div>

            <!-- Doc 3: Certificate -->
            <div class="form-field">
                <label for="certificate">
                    ③ Author Publication Certificate (PDF / Image)
                </label>
                <div class="file-upload-box">
                    <input type="file" id="certificate" name="certificate" accept=".pdf,.doc,.docx,.jpg,.png" />
                    <div style="font-size: 11px; color:#666; margin-top: 3px;">High-resolution publication certificate for authors with IJCNC official seal.</div>
                </div>
            </div>
        </div>

        <div style="margin-top: 20px;">
            <button type="submit" class="btn-save-author">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path><polyline points="17 21 17 13 7 13 7 21"></polyline><polyline points="7 3 7 8 15 8"></polyline></svg>
                Save Author &amp; Upload Documents
            </button>
        </div>
    </form>
</div>

<!-- ========================================== -->
<!-- TAB 2: VIEW ALL AUTHORS IN SEPARATE TAB    -->
<!-- ========================================== -->
<div id="tab-view-authors" class="admin-tab-pane {{ $activeTab === 'view-authors' ? 'active' : '' }}">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 10px;">
        <h2 class="wp-block-heading" style="margin: 0; padding: 0; border: none;">
            <span style="color:#008000">Registered Authors &amp; Manuscripts</span> ({{ count($authors) }})
        </h2>
        <div>
            <input type="text" id="authorSearchInput" onkeyup="filterAuthorsTable()" placeholder="Search by Author, Paper ID, Title..." style="padding: 6px 12px; font-size: 12px; border: 1px solid #ccc; border-radius: 3px; width: 260px;" />
        </div>
    </div>

    @if(count($authors) === 0)
        <div style="padding: 30px; text-align: center; background: #fafafa; border: 1px solid #e0e0e0; color: #666;">
            No authors registered yet. Switch to the <strong>"Add Author &amp; Paper"</strong> tab to register the first author and paper.
        </div>
    @else
        <div class="table-container">
            <table class="admin-authors-table" id="authorsDataTable">
                <thead>
                    <tr>
                        <th style="width: 11%;">Paper ID</th>
                        <th style="width: 21%;">Author &amp; Co-Authors</th>
                        <th style="width: 23%;">Paper Title</th>
                        <th style="width: 12%;">Decision &amp; Review</th>
                        <th style="width: 11%;">Files</th>
                        <th style="width: 17%; background: #e0f2fe; color: #0369a1; border-bottom: 2px solid #0284c7;">
                            Online Certificate Link (Admin Only)
                        </th>
                        <th style="width: 5%;">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($authors as $author)
                    <tr>
                        <!-- Paper ID -->
                        <td>
                            <strong style="color: #896900; font-size: 13px;">{{ $author->paper_id }}</strong>
                            <div style="font-size: 10px; color: #777; margin-top: 2px;">{{ $author->volume_issue }}</div>
                        </td>

                        <!-- Author Details -->
                        <td>
                            <div style="font-weight: bold; font-size: 13px; color: #111;">
                                <span style="background: #eef2f7; color: #1e3a8a; padding: 1px 6px; border-radius: 2px; font-size: 10px; font-weight: bold; margin-right: 4px;">Primary Author</span>
                                {{ $author->author_name }}
                            </div>
                            @if(!empty($author->co_authors) && count($author->co_authors) > 0)
                                <div style="margin-top: 4px; font-size: 11px; color: #15803d; line-height: 1.3;">
                                    <strong>Co-Author(s):</strong> {{ implode(', ', $author->co_authors) }}
                                </div>
                            @endif
                            <div style="font-size: 11px; color: #555; margin-top: 3px;">Email: <a href="mailto:{{ $author->author_email }}">{{ $author->author_email }}</a></div>
                            <div style="font-size: 11px; color: #666; margin-top: 4px; background: #f0f0f0; padding: 2px 6px; border-radius: 2px; display: inline-block;">
                                Password: <code style="color: #c026d3; font-weight: bold;">{{ $author->password }}</code>
                            </div>
                        </td>

                        <!-- Title -->
                        <td>
                            <div style="font-size: 12px; font-weight: 500; color: #222; line-height: 1.4;">
                                {{ $author->paper_title }}
                            </div>
                        </td>

                        <!-- Decision & Review Process -->
                        <td>
                            <div style="margin-bottom: 4px;">
                                @if($author->decision === 'Accepted for publication')
                                    <span class="badge-decision badge-accepted">✓ {{ $author->decision }}</span>
                                @elseif($author->decision === 'Under Review')
                                    <span class="badge-decision badge-review">⏳ {{ $author->decision }}</span>
                                @elseif($author->decision === 'Revision Required')
                                    <span class="badge-decision badge-revision">✎ {{ $author->decision }}</span>
                                @else
                                    <span class="badge-decision badge-rejected">✗ {{ $author->decision }}</span>
                                @endif
                            </div>
                            <div>
                                <span class="badge-peer">
                                    {{ $author->review_process }}
                                </span>
                            </div>
                        </td>

                        <!-- 3 Uploaded Documents -->
                        <td>
                            <div>
                                <a href="{{ route('admin.document.download', ['id' => $author->id, 'type' => 'confirmation']) }}" class="doc-mini-btn" title="Download Confirmation Letter">
                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                                    Letter
                                </a>
                            </div>
                            <div>
                                <a href="{{ route('admin.document.download', ['id' => $author->id, 'type' => 'paper']) }}" class="doc-mini-btn" title="Download Manuscript Paper">
                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                                    Paper
                                </a>
                            </div>
                            <div>
                                <a href="{{ route('admin.document.download', ['id' => $author->id, 'type' => 'certificate']) }}" class="doc-mini-btn" title="Download Certificate">
                                    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
                                    Cert
                                </a>
                            </div>
                        </td>

                        <!-- Online Certificate Link (Admin Only) -->
                        <td style="background: #f8fafc;">
                            @php
                                $certUrl = url('/cert/' . $author->paper_id);
                            @endphp
                            <div style="margin-bottom: 5px;">
                                <button type="button" 
                                    onclick="copyToClipboard('{{ $certUrl }}', this)" 
                                    class="btn-copy-cert-link" 
                                    title="Click to copy direct PDF link for this author">
                                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: middle;"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
                                    <span>Copy Link</span>
                                </button>
                            </div>
                            <div style="font-size: 11px; margin-bottom: 3px;">
                                <code style="color: #0369a1; background: #e0f2fe; padding: 2px 5px; border-radius: 2px; font-size: 10px; font-weight: bold;">/cert/{{ $author->paper_id }}</code>
                            </div>
                            <div>
                                <a href="{{ $certUrl }}" target="_blank" rel="noopener" style="font-size: 11px; color: #896900; text-decoration: underline; font-weight: bold; display: inline-flex; align-items: center; gap: 3px;">
                                    View PDF Online ↗
                                </a>
                            </div>
                        </td>

                        <!-- Actions -->
                        <td>
                            <form action="{{ route('admin.author.delete', ['id' => $author->id]) }}" method="POST" onsubmit="return confirm('Are you sure you want to delete this author and their uploaded documents?');">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-delete-author" title="Delete Author &amp; Paper">Delete</button>
                            </form>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
    function addCoAuthorField(val) {
        var container = document.getElementById('coAuthorsContainer');
        var rowId = 'co_author_' + Math.random().toString(36).substring(2, 9);
        var div = document.createElement('div');
        div.id = rowId;
        div.style.cssText = 'display: flex; gap: 8px; margin-bottom: 8px; align-items: center;';
        div.innerHTML = `
            <div style="flex: 1;">
                <input type="text" name="co_authors[]" value="${val ? val.replace(/"/g, '&quot;') : ''}" placeholder="Enter Co-Author full name (e.g. Prof. Robert Miller)" style="width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid #c2c2c2; border-radius: 3px; box-sizing: border-box; background: #fff;" required />
            </div>
            <button type="button" onclick="document.getElementById('${rowId}').remove()" style="background: #dc2626; color: #fff; border: none; padding: 7px 12px; border-radius: 3px; font-size: 11px; font-weight: bold; cursor: pointer; white-space: nowrap;">
                × Remove
            </button>
        `;
        container.appendChild(div);
    }

    // Populate old co-authors if validation returned or demo
    @if(old('co_authors'))
        @foreach(old('co_authors') as $coAuthor)
            addCoAuthorField("{{ addslashes($coAuthor) }}");
        @endforeach
    @endif

    function switchAdminTab(tabId, btn) {
        document.querySelectorAll('.admin-tab-pane').forEach(function(pane) {
            pane.classList.remove('active');
        });
        document.querySelectorAll('.admin-tab-btn').forEach(function(b) {
            b.classList.remove('active');
        });

        document.getElementById('tab-' + tabId).classList.add('active');
        if (btn) btn.classList.add('active');

        // Update URL query without page reload
        if (history.pushState) {
            var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?tab=' + tabId;
            window.history.pushState({path:newUrl}, '', newUrl);
        }
    }

    function generateNewPassword() {
        var chars = 'abcdefghjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ23456789!@#$';
        var pwd = '';
        for (var i = 0; i < 9; i++) {
            pwd += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        document.getElementById('author_password').value = pwd;
    }

    function generateNewPaperId() {
        var num = Math.floor(1000 + Math.random() * 9000);
        document.getElementById('paper_id').value = 'IJCNC-2026-' + num;
    }

    function filterAuthorsTable() {
        var input = document.getElementById('authorSearchInput');
        var filter = input.value.toLowerCase();
        var table = document.getElementById('authorsDataTable');
        if (!table) return;
        var tr = table.getElementsByTagName('tr');

        for (var i = 1; i < tr.length; i++) {
            var text = tr[i].textContent || tr[i].innerText;
            if (text.toLowerCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }

    function copyToClipboard(text, btn) {
        if (navigator.clipboard && navigator.clipboard.writeText) {
            navigator.clipboard.writeText(text).then(function() {
                showCopiedFeedback(btn);
            }).catch(function() {
                fallbackCopyText(text, btn);
            });
        } else {
            fallbackCopyText(text, btn);
        }
    }

    function fallbackCopyText(text, btn) {
        var t = document.createElement("textarea");
        t.value = text;
        t.style.position = "fixed";
        t.style.left = "-9999px";
        t.style.top = "0";
        document.body.appendChild(t);
        t.focus();
        t.select();
        try {
            var successful = document.execCommand('copy');
            if (successful) {
                showCopiedFeedback(btn);
            }
        } catch (err) {
            alert("Please copy manually: " + text);
        }
        document.body.removeChild(t);
    }

    function showCopiedFeedback(btn) {
        var originalHtml = btn.innerHTML;
        btn.innerHTML = '<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"></polyline></svg> <span>Copied!</span>';
        btn.classList.add('copied');
        btn.disabled = true;

        setTimeout(function() {
            btn.innerHTML = originalHtml;
            btn.classList.remove('copied');
            btn.disabled = false;
        }, 2200);
    }
</script>
@endsection