@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>Dashboard</h6>
                </div>
            </div>

            {{-- Welcome + Overview --}}
            <div class="row">

                {{-- Welcome --}}
                <div class="col-md-6">
                    <div class="bg-primary rounded welcome-wrap position-relative mb-3">
                        <div class="row">
                            <div class="col-lg-8 col-md-9 col-sm-7">
                                <div>
                                    <h5 class="text-white mb-1">
                                        Good Morning, {{ auth('admin')->user()->name }}
                                    </h5>
                                    <p class="text-white mb-3">You have 0+ Manuscripts</p>
                                    <div class="d-flex align-items-center flex-wrap gap-3">
                                        <p class="d-flex align-items-center fs-13 text-white mb-0">
                                            <i class="isax isax-calendar5 me-1"></i>
                                            {{ date('F d, Y') }}
                                        </p>
                                        <p class="d-flex align-items-center fs-13 text-white mb-0">
                                            <i class="isax isax-clock5 me-1"></i>
                                            {{ now()->format('h:i A') }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="position-absolute end-0 top-50 translate-middle-y p-2 d-none d-sm-block">
                            <img src="{{ asset('assets/img/icons/dashboard.svg') }}" alt="img">
                        </div>
                    </div>
                </div>

                {{-- Overview Card --}}
                <div class="col-md-6">
                    <div class="card flex-fill">
                        <div class="card-body">
                            <div class="mb-3">
                                <h6 class="d-flex align-items-center mb-1">
                                    <i class="isax isax-category5 text-default me-2"></i>Overview
                                </h6>
                            </div>

                            <div class="row g-4">

                                <div class="col-xl-3 text-center">
                                    <span class="avatar avatar-44 avatar-rounded bg-primary-subtle text-primary">
                                        <i class="isax isax-document-text-1 fs-20"></i>
                                    </span>
                                    <p class="mb-1">Manuscripts</p>
                                    <h6 id="manuscriptsCount">0</h6>
                                </div>

                                <div class="col-xl-3 text-center">
                                    <span class="avatar avatar-44 avatar-rounded bg-success-subtle text-success-emphasis">
                                        <i class="isax isax-profile-2user fs-20"></i>
                                    </span>
                                    <p class="mb-1">Authors</p>
                                    <h6 id="authorsCount">0</h6>
                                </div>

                                <div class="col-xl-3 text-center">
                                    <span class="avatar avatar-44 avatar-rounded bg-warning-subtle text-warning-emphasis">
                                        <i class="isax isax-profile-2user fs-20"></i>
                                    </span>
                                    <p class="mb-1">Reviewers</p>
                                    <h6 id="reviewersCount">0</h6>
                                </div>

                                <div class="col-xl-3 text-center">
                                    <span class="avatar avatar-44 avatar-rounded bg-info-subtle text-info-emphasis">
                                        <i class="isax isax-profile-2user fs-20"></i>
                                    </span>
                                    <p class="mb-1">Editors</p>
                                    <h6 id="editorsCount">0</h6>
                                </div>

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

            </div>

            {{-- Manuscripts Table --}}
            <div class="row">
                <div class="col-md-12">
                    <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>
            </div>

        </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>
                `);
            }
        }
    });
});

// Open Update Modal
$(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);
            $('#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]);
                }
            }

        }

    });

});

// Load Dashboard Statistics
$(function () {
    $.ajax({
        url: "{{ route('admin.dashboard.statistics') }}",
        type: "GET",
        dataType: "json",
        success: function (response) {
            $('#manuscriptsCount').text(response.manuscripts);
            $('#authorsCount').text(response.authors);
            $('#reviewersCount').text(response.reviewers);
            $('#editorsCount').text(response.editors);
        },
        error: function () {
            console.log('Failed to load dashboard statistics');
        }
    });
});
</script>

@endsection