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

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

            <div class="row">
                <div class="col-lg-9">
                    <div class="row" id="journals-container">
                        @foreach($journals as $journal)
                        <div class="col-md-6 col-lg-4 mb-4">
                            <div class="card journal-card">
                                <div class="card-body">
                                    @if($journal->icon)
                                        <div class="text-center mb-3">
                                            <img src="{{ asset('storage/' . $journal->icon) }}" 
                                                 alt="{{ $journal->title }}" 
                                                 style="max-width: 100px; max-height: 100px; object-fit: cover;">
                                        </div>
                                    @else
                                        <div class="text-center mb-3">
                                            <i class="ti ti-book" style="font-size: 60px; color: #ccc;"></i>
                                        </div>
                                    @endif
                                    
                                    <h5 class="card-title">{{ $journal->title }}</h5>
                                    
                                    @if($journal->issn)
                                        <p class="text-muted small mb-2">
                                            <strong>ISSN:</strong> {{ $journal->issn }}
                                        </p>
                                    @endif
                                    
                                    @if($journal->description)
                                        <p class="card-text text-muted small">
                                            {{ Str::limit($journal->description, 100) }}
                                        </p>
                                    @endif

                                    <div class="form-check mt-3">
                                        <input class="form-check-input journal-checkbox" 
                                               type="checkbox" 
                                               value="{{ $journal->id }}"
                                               id="journal_{{ $journal->id }}"
                                               @if(in_array($journal->id, $userJournals)) checked @endif>
                                        <label class="form-check-label" for="journal_{{ $journal->id }}">
                                            Select this journal
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>

                    @if($journals->isEmpty())
                    <div class="alert alert-info">
                        <i class="ti ti-info-circle me-2"></i>
                        No journals available yet.
                    </div>
                    @endif
                </div>

                <div class="col-lg-3">
                    <div class="card sticky-top" style="top: 20px;">
                        <div class="card-body">
                            <h6 class="card-title mb-3">Selected Journals</h6>
                            <div id="selected-count" class="mb-3">
                                <strong>Selected: <span id="count">0</span></strong>
                            </div>
                            <div id="selected-list" class="mb-3" style="max-height: 300px; overflow-y: auto;">
                                <!-- Selected journals will appear here -->
                            </div>
                            @if(Auth::check())
                            <button type="button" 
                                    class="btn btn-primary w-100" 
                                    id="save-journals-btn">
                                <i class="ti ti-check me-2"></i>Save Selections
                            </button>
                            @else
                            <div class="alert alert-warning small mb-0">
                                <i class="ti ti-lock me-2"></i>
                                Please <a href="{{ route('frontend.login') }}">login</a> to save your journal preferences.
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            <div class="footer d-sm-flex align-items-center justify-content-between bg-white py-2 border-top mt-4">
                <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>
</div>

<style>
.journal-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
}

.journal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.journal-card .form-check-input:checked {
    background-color: #007bff;
    border-color: #007bff;
}

.selected-journal-item {
    padding: 8px 12px;
    background-color: #f8f9fa;
    border-radius: 4px;
    margin-bottom: 8px;
    font-size: 14px;
}

.selected-journal-item .remove-btn {
    cursor: pointer;
    color: #dc3545;
    margin-left: 8px;
}
</style>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
$(document).ready(function() {
    const journalCheckboxes = $('.journal-checkbox');

    // Update selected count and list
    function updateSelectedList() {
        const selected = [];
        journalCheckboxes.each(function() {
            if ($(this).is(':checked')) {
                const journalId = $(this).val();
                const journalTitle = $(this).closest('.card').find('.card-title').text();
                selected.push({
                    id: journalId,
                    title: journalTitle
                });
            }
        });

        $('#count').text(selected.length);

        const listHtml = selected.map(j => `
            <div class="selected-journal-item">
                <span>${j.title}</span>
                <span class="remove-btn" onclick="$('#journal_${j.id}').click()">
                    <i class="ti ti-x"></i>
                </span>
            </div>
        `).join('');

        $('#selected-list').html(listHtml || '<p class="text-muted small">No journals selected</p>');
    }

    // Update on checkbox change
    journalCheckboxes.on('change', updateSelectedList);

    // Save journals on button click
    $('#save-journals-btn').on('click', function() {
        const selected = journalCheckboxes.filter(':checked').map(function() {
            return $(this).val();
        }).get();

        $.ajax({
            url: "{{ route('frontend.journals.save') }}",
            type: "POST",
            data: {
                journal_ids: selected,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                showAlert(response.message, 'success');
            },
            error: function(xhr) {
                if (xhr.status === 401) {
                    showAlert('Please login to save your selections', 'danger');
                } else {
                    showAlert('Failed to save journal selections', 'danger');
                }
            }
        });
    });

    // Initialize list on page load
    updateSelectedList();

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

        setTimeout(function() {
            $('#alert-area').html('');
        }, 5000);
    }
});
</script>
@endsection