@extends('source.layouts.app')

@section('content')

<div class="main-wrapper">

    @include('source.common.header')
    @include('source.common.sidebar')

    <div class="page-wrapper">
        <div class="content">

            {{-- Page Header --}}
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                <h6>Volunteer Preferences</h6>
            </div>

            <div id="alert-area"></div>

            {{-- Volunteer Preferences Table --}}
            <table class="table" id="volunteer-preferences-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Degree & Affiliation</th>
                        <th>H-Index</th>
                        <th width="5%;">Status</th>
                        <th width="10%;">Invitation</th>
                        <th width="9%;">Applied Date</th>
                        <th width="8%;">Action</th>
                    </tr>
                </thead>
            </table>

        </div>

        {{-- Footer --}}
        <div class="footer d-sm-flex align-items-center justify-content-between bg-white py-2 px-4 border-top">
            <p class="text-dark mb-0">
                &copy; {{ date('Y') }}
                <a href="javascript:void(0);" class="link-primary">C3S Publishers</a>,
                All Rights Reserved
            </p>
        </div>
    </div>

</div>


{{-- ================= SEND REVIEW INVITATION MODAL ================= --}}
<div class="modal fade" id="sendInvitationModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Send Review Invitation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <form id="invitationForm">
                    <div class="mb-3">
                        <label class="form-label"><strong>To:</strong></label>
                        <input type="email" class="form-control" id="invitationTo">
                    </div>

                    <div class="mb-3">
                        <label class="form-label"><strong>Subject:</strong></label>
                        <input type="text" class="form-control" id="invitationSubject" placeholder="Enter email subject">
                    </div>

                    <div class="mb-3">
                        <label class="form-label"><strong>Body:</strong></label>
                        <textarea class="form-control" id="invitationBody" rows="50" placeholder="Enter email body" style="height: 300px;"></textarea>
                    </div>

                    <div class="text-end">
                        <button type="button" class="btn btn-outline-secondary me-2" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-primary">
                            Send Invitation
                        </button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>


{{-- ================= VIEW VOLUNTEER PREFERENCE MODAL ================= --}}
<div class="modal fade" id="viewVolunteerModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Volunteer Preference Details</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label"><strong>Highest Degree:</strong></label>
                        <p id="viewDegree">-</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label"><strong>Title:</strong></label>
                        <p id="viewTitle">-</p>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>Affiliation:</strong></label>
                    <p id="viewAffiliation" style="white-space: pre-wrap;">-</p>
                </div>

                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label"><strong>H-Index:</strong></label>
                        <p id="viewHIndex">-</p>
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label"><strong>ORCID:</strong></label>
                        <p id="viewOrcid">-</p>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>Personal Homepage:</strong></label>
                    <p><a id="viewPersonalHomepage" href="#" target="_blank">-</a></p>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>Publication Record:</strong></label>
                    <p><a id="viewPublicationRecord" href="#" target="_blank">-</a></p>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>Research Keywords:</strong></label>
                    <p id="viewResearchKeywords">-</p>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>C3S Publishers Journals:</strong></label>
                    <p id="viewMdpiJournals">-</p>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>Reviewed Journals:</strong></label>
                    <p id="viewReviewedJournals" style="white-space: pre-wrap;">-</p>
                </div>

                <div class="mb-3">
                    <label class="form-label"><strong>CV:</strong></label>
                    <p><a id="viewCvFile" href="#" target="_blank">Download CV</a></p>
                </div>

                <div class="text-end">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                        Close
                    </button>
                </div>

            </div>

        </div>
    </div>
</div>


{{-- ================= SCRIPTS ================= --}}
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<script>
$(function () {

    let selectedInvitationId = null;

    var table = $('#volunteer-preferences-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.volunteer.preferences.data') }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'name' },
            { data: 'email' },
            { data: 'mobile' },
            { data: 'degree_affiliation', orderable: false, searchable: false },
            { data: 'h_index' },
            { data: 'status', orderable: false, searchable: false },
            { data: 'invitation_status', orderable: false, searchable: false },
            { data: 'created_at' },
            { data: 'action', orderable: false, searchable: false }
        ]
    });

    // ================= VIEW DETAILS =================
    $(document).on('click', '.view-btn', function () {

        let id = $(this).data('id');

        $.get("{{ route('admin.volunteer.preference.view', ':id') }}".replace(':id', id), function (data) {

            $('#viewDegree').text(data.highest_degree || '-');
            $('#viewTitle').text(data.title || '-');
            $('#viewAffiliation').text(data.affiliation || '-');
            $('#viewHIndex').text(data.h_index || '-');
            $('#viewOrcid').text(data.orcid || '-');
            
            if (data.personal_homepage) {
                $('#viewPersonalHomepage').attr('href', data.personal_homepage).text(data.personal_homepage);
            }
            
            if (data.publication_record) {
                $('#viewPublicationRecord').attr('href', data.publication_record).text(data.publication_record);
            }
            
            $('#viewResearchKeywords').text(data.research_keywords || '-');
            
            // Display journals with titles and ISSN
            if (data.journal_details && data.journal_details.length > 0) {
                $('#viewMdpiJournals').html(
                    data.journal_details.map(journal => 
                        '<span class="badge bg-primary me-2">' + 
                        journal.title + 
                        (journal.issn ? ' (' + journal.issn + ')' : '') + 
                        '</span>'
                    ).join('')
                );
            } else if (data.mdpi_journals) {
                $('#viewMdpiJournals').text(data.mdpi_journals);
            } else {
                $('#viewMdpiJournals').text('-');
            }
            
            $('#viewReviewedJournals').text(data.reviewed_journals || '-');
            
            if (data.cv_file) {
                $('#viewCvFile').attr('href', '/storage/' + data.cv_file).text('Download CV');
            } else {
                $('#viewCvFile').text('Not uploaded');
            }

            $('#viewVolunteerModal').modal('show');

        }).fail(function () {
            alert('Error loading volunteer preference details.');
        });

    });

    // ================= DELETE =================
    $(document).on('click', '.delete-volunteer-btn', function () {

        let id = $(this).data('id');

        if (!confirm('Are you sure you want to delete this volunteer preference?')) return;

        $.ajax({
            url: "{{ route('admin.volunteer.preference.delete', ':id') }}".replace(':id', id),
            type: 'DELETE',
            data: { _token: '{{ csrf_token() }}' },

            success: function (response) {

                table.ajax.reload(null, false);

                $('#alert-area').html(`
                    <div class="alert alert-success alert-dismissible fade show">
                        ${response.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `);
            },

            error: function () {
                alert('Error deleting volunteer preference.');
            }
        });

    });

    // ================= TOGGLE ACTIVE/INACTIVE =================
    $(document).on('click', '.toggle-active-btn', function () {

        let id = $(this).data('id');
        let btn = $(this);

        $.ajax({
            url: "{{ route('admin.volunteer.preference.toggle', ':id') }}".replace(':id', id),
            type: 'POST',
            data: { _token: '{{ csrf_token() }}' },

            success: function (response) {

                table.ajax.reload(null, false);

                $('#alert-area').html(`
                    <div class="alert alert-success alert-dismissible fade show">
                        ${response.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `);
            },

            error: function () {
                alert('Error updating volunteer status.');
            }
        });

    });

    // ================= OPEN SEND REVIEW INVITATION POPUP =================
    $(document).on('click', '.send-invite-btn', function () {

        selectedInvitationId = $(this).data('id');
        let email = $(this).data('email');
        let name = $(this).data('name');

        $('#invitationTo').val(email || '');
        $('#invitationSubject').val('Invitation to Review for C3S Publishers');
        $('#invitationBody').val(
            `Dear ${name || 'Reviewer'},
            
            We hope this email finds you well.
            
            We are pleased to invite you to contribute to C3S Publishers as a reviewer. Based on your profile and academic background, we believe your expertise would be highly valuable to our peer review process.
            
            If you are interested, please reply to this email or update your volunteer preferences in your account.

            Best regards,
            C3S Publishers`
        );

        $('#sendInvitationModal').modal('show');
    });

    // ================= SEND REVIEW INVITATION EMAIL =================
    $('#invitationForm').on('submit', function (e) {
        e.preventDefault();

        if (!selectedInvitationId) {
            return;
        }

        let email = $('#invitationTo').val().trim();
        let subject = $('#invitationSubject').val().trim();
        let body = $('#invitationBody').val().trim();

        if (!subject || !body) {
            $('#alert-area').html(`
                <div class="alert alert-danger alert-dismissible fade show">
                    Subject and body are required.
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `);
            return;
        }

        $.ajax({
            url: "{{ route('admin.volunteer.preference.send-invitation', ':id') }}".replace(':id', selectedInvitationId),
            type: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                email: email,
                subject: subject,
                body: body
            },

            success: function (response) {

                $('#sendInvitationModal').modal('hide');
                selectedInvitationId = null;

                table.ajax.reload(null, false);

                $('#alert-area').html(`
                    <div class="alert alert-success alert-dismissible fade show">
                        ${response.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `);
            },

            error: function (xhr) {
                let message = 'Error sending invitation email.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    message = xhr.responseJSON.message;
                }
                $('#alert-area').html(`
                    <div class="alert alert-danger alert-dismissible fade show">
                        ${message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `);
            }
        });

    });

    $('#sendInvitationModal').on('hidden.bs.modal', function () {
        selectedInvitationId = null;
        $('#invitationForm')[0].reset();
    });

});
</script>

@endsection