@extends('source.layouts.app')

@section('content')
<style>
    .image-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:20px;
    }

    .image-card{
    background:#fff;
    padding:10px;
    border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    text-align:center;
    }

    .image-card img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:6px;
    }

    .file-list {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
    gap:20px;
    margin-top:24px;
    }

    .file-card {
    background:#fff;
    padding:16px;
    border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
    }

</style>
<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">
                <div>
                    <h6 class="mb-1">Manuscript (ID: {{$manuscript->manuscriptID}})</h6>
                    <p class="text-muted small mb-0">
                        <strong>Title:</strong> {{ $manuscript->title ?? 'N/A' }} | 
                        <strong>Author:</strong> {{ $manuscript->author1 ?? ($manuscript->author1 ?? 'N/A') }}, {{ $manuscript->author2 ?? ($manuscript->author2 ?? 'N/A') }} | 
                        <strong>Status:</strong> {{ $manuscript->status ?? 'N/A' }}
                    </p>
                </div>
                <div class="d-flex align-items-center">
                    <a class="btn btn-primary d-flex align-items-center me-2 emailBtn"
                        data-bs-toggle="modal"
                        data-bs-target="#emailManuscriptModal"
                        data-id="{{$manuscript->id}}"
                        data-title="{{ urlencode($manuscript->title) }}">
                        <i class="ti ti-mail me-1"></i> Email
                    </a>

                    <a href="{{ route('admin.manuscripts') }}"
                    class="btn btn-primary d-flex align-items-center">
                        <i class="isax isax-arrow-left me-1"></i> Back
                    </a>
                </div>
            </div>

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

            {{-- Main Files Section --}}
            <div class="row mb-4">
                @if(!empty($manuscript->fileurl))
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title">Manuscript File</h6>
                            <p class="text-muted small mb-3">{{ basename($manuscript->fileurl) }}</p>
                            <a href="{{ asset($manuscript->fileurl) }}" download class="btn btn-sm btn-primary">
                                <i class="isax isax-download me-1"></i> Download
                            </a>
                        </div>
                    </div>
                </div>
                @endif

                @if(!empty($manuscript->table_index_file))
                <div class="col-md-6">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title">Table Index</h6>
                            <p class="text-muted small mb-3">{{ basename($manuscript->table_index_file) }}</p>
                            <a href="{{ asset($manuscript->table_index_file) }}" download class="btn btn-sm btn-primary">
                                <i class="isax isax-download me-1"></i> Download
                            </a>
                        </div>
                    </div>
                </div>
                @endif
            </div>

            <h6>Figures</h6>
            <div class="image-grid">
                @forelse($images as $img)
                    <div class="image-card">
                        <img src="{{ asset($img['path']) }}" alt="{{ $img['name'] }}">
                        <div class="mt-2 small text-muted">{{ $img['name'] }}</div>
                    </div>
                @empty
                    <p>No images uploaded.</p>
                @endforelse
            </div>
            @if(!empty($otherFiles) && $otherFiles->isNotEmpty())
            <div class="mt-4">
                <h6>Supplementary Files</h6>
                <div class="file-list">
                    @foreach($otherFiles as $file)
                        <div class="file-card">
                            <div class="fw-semibold mb-2">{{ $file['name'] }}</div>
                            <a href="{{ asset($file['path']) }}" target="_blank" class="btn btn-sm btn-primary">Open File</a>
                        </div>
                    @endforeach
                </div>
            </div>
            @endif

            {{-- Manuscript Attachments --}}
            @php
                $attachments = [];
                
                if (!empty($manuscript->attachments)) {
                    $decoded = json_decode($manuscript->attachments, true);
                    if (json_last_error() === JSON_ERROR_NONE && is_array($decoded)) {
                        $attachments = $decoded;
                    } else {
                        $attachments = [$manuscript->attachments];
                    }
                }
                
                $possibleFields = [
                    $manuscript->manuscript_file ?? null,
                    $manuscript->cover_letter ?? null,
                    $manuscript->supplementary_file ?? null,
                ];
                
                foreach ($possibleFields as $file) {
                    if (!empty($file)) {
                        $attachments[] = $file;
                    }
                }
                
                $attachments = array_values(array_unique(array_filter($attachments)));
            @endphp

            @if(count($attachments))
            <div class="mt-4">
                <h6>Attachments</h6>
                <div class="file-list">
                    @foreach($attachments as $file)
                        @php
                            $clean = ltrim($file, '/');
                            $candidates = [
                                'uploads/manuscripts/' . $clean,
                                'uploads/' . $clean,
                                $clean,
                            ];
                            
                            $url = null;
                            foreach ($candidates as $path) {
                                if (\Illuminate\Support\Facades\File::exists(public_path($path))) {
                                    $url = asset($path);
                                    break;
                                }
                            }
                            
                            if (!$url) {
                                $url = asset('uploads/manuscripts/' . $clean);
                            }
                        @endphp
                        <div class="file-card">
                            <div class="fw-semibold mb-2">{{ basename($clean) }}</div>
                            <a href="{{ $url }}" target="_blank" class="btn btn-sm btn-primary">Download</a>
                        </div>
                    @endforeach
                </div>
            </div>
            @endif
        </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>
{{-- 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>


<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
    // 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>
                    `);
                }
            }
        });
    });
</script>
@endsection