@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 Title --}}
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-3 mb-3">
                <div>
                    <h6>Manuscripts</h6>
                </div>
            </div>

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

            {{-- Table --}}
            <table class="table" id="manuscripts-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Manuscript ID</th>
                        <th>Title</th>
                        <th width="8%;">Initial Date</th>
                        <th width="8%;">Status</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>

{{-- Update Status Modal --}}
<div class="modal fade" id="updateStatusModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header">
                <h5 class="modal-title">Update Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <form id="updateStatusForm" method="POST">
                    @csrf
                    <input type="hidden" id="editStatusId">

                    <div class="mb-3">
                        <label class="form-label">Status</label>
                        <select id="editStatus" class="form-control" name="status">
                            <option value="">Select</option>
                            <option value="IP">In Process</option>
                            <option value="IR">In Review</option>
                            <option value="PU">Published</option>
                            <option value="RE">Rejected</option>
                            <option value="With Editor-in-Chief">With Editor-in-Chief</option>
                            <option value="With Editor">With Editor</option>
                            <option value="Reviewer Invited">Reviewer Invited</option>
                            <option value="Under ReviewRE">Under Review</option>  
                        </select>
                        <span class="text-danger" id="editStatusError"></span>
                    </div>

                    <div class="text-end">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                            Cancel
                        </button>
                        <button type="submit" class="btn btn-success">
                            Submit
                        </button>
                    </div>

                </form>
            </div>

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

{{-- Email Manuscript Modal --}}
<div class="modal fade" id="emailManuscriptModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

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

            <div class="modal-body">
                <form id="emailManuscriptForm" method="POST">
                    @csrf
                    <input type="hidden" id="emailManuscriptId">

                    <div class="mb-3">
                        <label class="form-label">Recipient Email</label>
                        <input type="email" class="form-control" id="recipientEmail" name="recipient_email" list="acceptedReviewersList" placeholder="Select accepted reviewer or enter email" required>
                        <datalist id="acceptedReviewersList">
                            @foreach(($acceptedReviewers ?? []) as $reviewer)
                                <option value="{{ $reviewer->email }}">{{ $reviewer->name }} ({{ $reviewer->email }})</option>
                            @endforeach
                        </datalist>
                        <small class="text-muted">Choose an invitation accepted reviewer from suggestions, or type any email manually.</small>
                        <span class="text-danger" id="emailError"></span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Subject</label>
                        <input type="text" class="form-control" id="emailSubject" name="subject" placeholder="Email subject" required>
                        <span class="text-danger" id="subjectError"></span>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Message</label>
                        <textarea class="form-control" id="emailMessage" name="message" rows="10" placeholder="Optional message" style="height: 100px;"></textarea>
                        <span class="text-danger" id="messageError"></span>
                    </div>

                    <div class="alert alert-info">
                        <small><i class="isax isax-info-circle"></i> The manuscript, table index, Figures, and supplementary files will be attached when available.</small>
                    </div>

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

                </form>
            </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 () {

    $('#manuscripts-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('admin.manuscripts.data') }}",
        columns: [
            { data: 'DT_RowIndex', orderable: false, searchable: false },
            { data: 'manuscriptID' },
            { data: 'title' },
            { data: 'initialDate' },
            { data: 'status' },
            { data: 'action', orderable: false, searchable: false }
        ]
    });

});

// Open Email Modal
$(document).on('click', '.emailBtn', function () {
    let id = $(this).data('id');
    let title = $(this).data('title');

    $('#emailManuscriptId').val(id);
    $('#emailSubject').val('Manuscript: ' + title + ' for Review');
    $('#recipientEmail').val('');
    $('#emailMessage').val('');
    $('#emailError').text('');
    $('#subjectError').text('');
    $('#messageError').text('');
});

// Submit Email Form
$('#emailManuscriptForm').on('submit', function (e) {
    e.preventDefault();

    let id = $('#emailManuscriptId').val();
    let formData = new FormData(this);

    $.ajax({
        url: "{{ route('admin.manuscript.send.email', ':id') }}".replace(':id', id),
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,

        success: function (response) {
            bootstrap.Modal.getInstance(
                document.getElementById('emailManuscriptModal')
            ).hide();

            $('#manuscripts-table').DataTable().ajax.reload(null, false);

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

            // Scroll to top
            window.scrollTo(0, 0);

            $('#emailManuscriptForm')[0].reset();
        },

        error: function (xhr) {
            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                if (errors.recipient_email) {
                    $('#emailError').text(errors.recipient_email[0]);
                }
                if (errors.subject) {
                    $('#subjectError').text(errors.subject[0]);
                }
                if (errors.message) {
                    $('#messageError').text(errors.message[0]);
                }
            } else {
                let errorResponse = xhr.responseJSON;
                $('#alert-area').html(`
                    <div class="alert alert-danger alert-dismissible fade show">
                        <i class="isax isax-close-circle me-2"></i>${errorResponse.message}
                        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    </div>
                `);
            }
        }
    });
});

$(document).on('click', '.updateBtn', function () {

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

    $.get("{{ route('admin.manuscript.status', ':id') }}".replace(':id', id), function (data) {

        $('#editStatusId').val(data.id);
        $('#editStatus').val(data.status);
        $('#editStatusError').text('');
        $('#updateStatusModal').modal('show');

    });

});

// Submit Update
$('#updateStatusForm').on('submit', function (e) {

    e.preventDefault();

    let id = $('#editStatusId').val();
    let formData = new FormData(this);

    $.ajax({
        url: "{{ route('admin.manuscript.status.update', ':id') }}".replace(':id', id),
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,

        success: function (response) {

            bootstrap.Modal.getInstance(
                document.getElementById('updateStatusModal')
            ).hide();

            $('#manuscripts-table').DataTable().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>
            `);

            $('#updateStatusForm')[0].reset();
            $('#editStatusError').text('');
        },

        error: function (xhr) {

            if (xhr.status === 422) {
                let errors = xhr.responseJSON.errors;
                if (errors.status) {
                    $('#editStatusError').text(errors.status[0]);
                }
            }

        }

    });

});
</script>

@endsection