{{-- resources/views/agency/page/partials/revisions-modal.blade.php --}}

<div id="revisionsModal" class="modal-overlay" style="display: none;">
    <div class="modal-container" style="max-width: 900px; max-height: 90vh;">
        <div class="modal-header">
            <h3 class="modal-title">
                <i class="fas fa-history"></i> Sayfa Geçmişi
            </h3>
            <button type="button" class="modal-close" onclick="closeRevisionsModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="modal-body" style="padding: 0; overflow-y: auto; max-height: calc(90vh - 180px);">
            <div id="revisionsList" style="padding: 1.5rem;">
                <!-- Revisions will be loaded here -->
            </div>

            <div id="revisionsLoading" style="text-align: center; padding: 3rem;">
                <i class="fas fa-spinner fa-spin" style="font-size: 2rem; color: var(--primary);"></i>
                <p style="margin-top: 1rem; color: #6B7280;">Geçmiş yükleniyor...</p>
            </div>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-light" onclick="closeRevisionsModal()">
                Kapat
            </button>
        </div>
    </div>
</div>

<style>
    .revision-item {
        background: white;
        border: 2px solid #E5E7EB;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        transition: all 0.2s;
        position: relative;
    }

    .revision-item:hover {
        border-color: var(--primary);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
    }

    .revision-item.current {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(139, 92, 246, 0.05));
        border-color: var(--primary);
    }

    .revision-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 1rem;
    }

    .revision-info {
        flex: 1;
    }

    .revision-badge {
        padding: 0.375rem 0.875rem;
        border-radius: 50px;
        font-size: 0.813rem;
        font-weight: 600;
        margin-left: 1rem;
    }

    .revision-badge.current {
        background: var(--primary);
        color: white;
    }

    .revision-badge.published {
        background: #10B981;
        color: white;
    }

    .revision-badge.draft {
        background: #6B7280;
        color: white;
    }

    .revision-meta {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
    }

    .revision-meta-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: #6B7280;
    }

    .revision-meta-item i {
        color: var(--primary);
    }

    .revision-changes {
        background: #F9FAFB;
        border-radius: 8px;
        padding: 1rem;
        margin: 1rem 0;
    }

    .revision-changes-title {
        font-weight: 600;
        font-size: 0.875rem;
        color: #374151;
        margin-bottom: 0.75rem;
    }

    .revision-changes-list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .revision-change-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: #6B7280;
    }

    .revision-change-item i {
        font-size: 0.75rem;
    }

    .revision-actions {
        display: flex;
        gap: 0.75rem;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #E5E7EB;
    }

    .revision-compare-btn,
    .revision-restore-btn {
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-size: 0.875rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        border: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }

    .revision-compare-btn {
        background: #F3F4F6;
        color: #374151;
    }

    .revision-compare-btn:hover {
        background: #E5E7EB;
    }

    .revision-restore-btn {
        background: var(--primary);
        color: white;
    }

    .revision-restore-btn:hover {
        background: var(--primary-dark);
        transform: translateY(-1px);
    }

    .revision-restore-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
</style>