@extends('layouts.admin')
@section('title', 'İçerik Takvimi')
@section('breadcrumb')
    <li class="breadcrumb-item active">İçerik Takvimi</li>
@endsection

@push('head')
<!-- FullCalendar -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.css" rel="stylesheet">
<style>
#calendar {
    background: #1a1d23;
    border-radius: 12px;
    padding: 20px;
    min-height: 650px;
}
/* FullCalendar karanlık tema override */
#calendar .fc-toolbar-title { color: #fff; font-size: 1.1rem; }
#calendar .fc-button { background: #2d3038 !important; border-color: #3a3d46 !important; color: #ccc !important; text-transform: capitalize !important; }
#calendar .fc-button:hover { background: #3a3d46 !important; }
#calendar .fc-button-active { background: #0d6efd !important; border-color: #0d6efd !important; }
#calendar .fc-daygrid-day { background: #22252d; border-color: #2a2d36 !important; }
#calendar .fc-day-today { background: rgba(13,110,253,0.1) !important; }
#calendar .fc-daygrid-day-number { color: #aaa; text-decoration: none; }
#calendar .fc-col-header-cell { background: #1e2027; border-color: #2a2d36 !important; padding: 10px 0; }
#calendar .fc-col-header-cell-cushion { color: #888; text-decoration: none !important; }
#calendar .fc-scrollgrid { border-color: #2a2d36 !important; }
#calendar .fc-timegrid-slot { border-color: #2a2d36 !important; }
#calendar .fc-timegrid-slot-label-cushion { color: #666; }
#calendar .fc-event { border-radius: 6px; padding: 4px 6px; font-size: 0.75rem; cursor: pointer; border: none !important; }
#calendar .fc-event:hover { filter: brightness(1.2); }

/* Legend */
.legend-item { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 0.8rem; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Video önizleme modal */
.video-preview-container { position: relative; background: #000; border-radius: 8px; overflow: hidden; }
.video-preview-container video, .video-preview-container iframe { width: 100%; max-height: 360px; display: block; }
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h4 mb-1"><i class="bi bi-calendar-week me-2 text-info"></i>İçerik Takvimi</h1>
        <p class="text-muted small mb-0">Zamanlanmış paylaşımları görsel takvimde görüntüleyin ve yönetin</p>
    </div>
    <div>
        <button id="todayBtn" class="btn btn-sm btn-outline-light me-2">
            <i class="bi bi-calendar-check me-1"></i>Bugün
        </button>
        <a href="{{ route('admin.queue.index') }}" class="btn btn-sm btn-primary">
            <i class="bi bi-list-ul me-1"></i>Kuyruk Listesi
        </a>
    </div>
</div>

<!-- Legend -->
<div class="d-flex flex-wrap align-items-center mb-3">
    <span class="legend-item"><span class="legend-dot bg-success"></span> Paylaşıldı</span>
    <span class="legend-item"><span class="legend-dot bg-primary"></span> Onaylandı</span>
    <span class="legend-item"><span class="legend-dot bg-warning"></span> Bekliyor</span>
    <span class="legend-item"><span class="legend-dot bg-danger"></span> Başarısız</span>
</div>

<div id="calendar"></div>

<!-- Video Önizleme Modal -->
<div class="modal fade" id="videoPreviewModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content bg-dark text-white">
            <div class="modal-header border-secondary">
                <h6 class="modal-title" id="videoModalTitle">Video Önizleme</h6>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="video-preview-container mb-3" id="videoPreviewContainer">
                    <p class="text-center text-muted py-5">Video yükleniyor...</p>
                </div>
                <div id="videoMetaInfo">
                    <p class="small text-muted mb-2" id="videoCaption"></p>
                    <p class="small mb-1"><strong class="text-muted">Planlanan:</strong> <span id="videoScheduled"></span></p>
                    <p class="small mb-1"><strong class="text-muted">Paylaşıldı:</strong> <span id="videoPublished"></span></p>
                    <p class="small mb-0"><strong class="text-muted">Durum:</strong> <span id="videoStatus"></span></p>
                </div>
            </div>
            <div class="modal-footer border-secondary">
                <a href="#" id="videoQueueLink" class="btn btn-sm btn-outline-info">
                    <i class="bi bi-box-arrow-up-right me-1"></i>Kuyruğa Git
                </a>
                <button type="button" class="btn btn-sm btn-outline-light" data-bs-dismiss="modal">Kapat</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const calendarEl = document.getElementById('calendar');
    const videoModal = new bootstrap.Modal('#videoPreviewModal');

    const calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',
        locale: 'tr',
        firstDay: 1,
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,listWeek'
        },
        buttonText: {
            today: 'Bugün',
            month: 'Ay',
            week: 'Hafta',
            list: 'Liste'
        },
        events: '{{ route('admin.calendar.events') }}',
        editable: {{ auth()->user()->can('manager') ? 'true' : 'false' }},
        eventDurationEditable: true,
        eventStartEditable: {{ auth()->user()->can('manager') ? 'true' : 'false' }},

        // Olaya tıklanınca önizleme modalı aç
        eventClick: function(info) {
            const props = info.event.extendedProps;

            document.getElementById('videoModalTitle').textContent = info.event.title;
            document.getElementById('videoCaption').textContent = props.caption || 'Açıklama yok';
            document.getElementById('videoScheduled').textContent = props.scheduled_at || '-';
            document.getElementById('videoPublished').textContent = props.published_at || '-';
            document.getElementById('videoStatus').textContent = props.status || '-';
            document.getElementById('videoQueueLink').href =
                '{{ route('admin.queue.index') }}?highlight=' + props.queue_id;

            // Video önizleme
            const previewContainer = document.getElementById('videoPreviewContainer');
            if (props.video_url) {
                const ext = props.video_url.split('.').pop().split('?')[0];
                previewContainer.innerHTML = `<video controls autoplay muted playsinline style="width:100%;max-height:360px;">
                    <source src="${props.video_url}" type="video/${ext === 'webm' ? 'webm' : 'mp4'}">
                    Tarayıcınız video oynatmayı desteklemiyor.
                </video>`;
            } else if (props.thumbnail) {
                previewContainer.innerHTML = `<img src="${props.thumbnail}" class="w-100" style="max-height:360px;object-fit:cover;" alt="Thumbnail">`;
            } else {
                previewContainer.innerHTML = '<p class="text-center text-muted py-5">Önizleme mevcut değil</p>';
            }

            videoModal.show();
        },

        // Sürükle-bırak ile tarih değiştirme
        eventDrop: function(info) {
            fetch('{{ route("admin.calendar.update-event", ["queue" => "__ID__"]) }}'.replace('__ID__', info.event.id), {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ start: info.event.start.toISOString() })
            })
            .then(r => r.json())
            .then(data => {
                if (!data.ok) showToast('Hata oluştu!', 'danger');
            })
            .catch(() => {
                info.revert();
                showToast('Tarih güncellenemedi!', 'danger');
            });
        },

        // Etkinlik uzatma/kısaltma
        eventResize: function(info) {
            fetch('{{ route("admin.calendar.update-event", ["queue" => "__ID__"]) }}'.replace('__ID__', info.event.id), {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json',
                },
                body: JSON.stringify({ start: info.event.start.toISOString() })
            }).catch(() => info.revert());
        },
    });

    calendar.render();

    // Bugün butonu
    document.getElementById('todayBtn').addEventListener('click', () => calendar.today());
});

function showToast(msg, type = 'success') {
    const toast = document.createElement('div');
    toast.className = `position-fixed bottom-0 end-0 m-3 alert alert-${type} py-2 px-3`;
    toast.style.zIndex = '9999';
    toast.innerHTML = msg;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 2500);
}
</script>
@endpush