{{-- Görev Takvimi — özel tasarımlı FullCalendar kabuğu --}}
<div class="tkc">
    <header class="tkc-bar">
        <div class="tkc-nav">
            <button type="button" class="tkc-nav-btn" id="tkcPrev" title="Önceki"><i class="fas fa-chevron-left"></i></button>
            <button type="button" class="tkc-today" id="tkcToday">Bugün</button>
            <button type="button" class="tkc-nav-btn" id="tkcNext" title="Sonraki"><i class="fas fa-chevron-right"></i></button>
        </div>

        <div class="tkc-heading">
            <h4 id="tkcTitle">&nbsp;</h4>
            <span class="tkc-count" id="tkcCount"></span>
        </div>

        <div class="tkc-views">
            <button type="button" class="tkc-view on" data-cal-view="dayGridMonth"><i class="fas fa-border-all"></i> Ay</button>
            <button type="button" class="tkc-view" data-cal-view="timeGridWeek"><i class="fas fa-grip-lines-vertical"></i> Hafta</button>
            <button type="button" class="tkc-view" data-cal-view="listMonth"><i class="fas fa-list-ul"></i> Ajanda</button>
        </div>
    </header>

    <div class="tkc-legend">
        @foreach(\App\Models\Task\Task::PRIORITIES as $key => $meta)
            <span class="tkc-key"><i style="background: {{ $meta['color'] }}"></i>{{ $meta['label'] }}</span>
        @endforeach
        <span class="tkc-key"><i style="background:#94a3b8"></i>Tamamlandı</span>
        <span class="tkc-key"><i class="tkc-key-flame fas fa-fire"></i>Gecikmiş</span>
        <span class="tkc-key"><i class="tkc-key-robot fas fa-robot"></i>Otomatik</span>
    </div>

    <div class="tkc-body">
        <div class="tkc-loadbar" id="tkcLoad"></div>
        <div id="tkCalendar"></div>
    </div>
</div>

@push('styles')
<style>
    .tkc { background: #fff; border: 1px solid #e9edf3; border-radius: 18px; overflow: hidden; }

    /* ── Üst çubuk ── */
    .tkc-bar {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
        padding: 1rem 1.25rem; border-bottom: 1px solid #f1f5f9;
        background: linear-gradient(135deg, #fffdf7, #fff);
    }
    .tkc-nav { display: inline-flex; align-items: center; gap: .35rem; }
    .tkc-nav-btn {
        width: 34px; height: 34px; border-radius: 10px; border: 1px solid #e9edf3; background: #fff;
        color: #64748b; font-size: .78rem; cursor: pointer; transition: all .15s ease;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .tkc-nav-btn:hover { border-color: #fbbf24; color: #d97706; background: #fffbeb; }
    .tkc-today {
        height: 34px; padding: 0 .9rem; border-radius: 10px; border: none; cursor: pointer;
        background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-size: .78rem; font-weight: 800;
        box-shadow: 0 5px 12px -5px rgba(217,119,6,.55); transition: all .15s ease;
    }
    .tkc-today:hover { transform: translateY(-1px); filter: brightness(1.05); }

    .tkc-heading { display: flex; align-items: baseline; gap: .6rem; flex: 1; justify-content: center; min-width: 200px; }
    .tkc-heading h4 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; text-transform: capitalize; }
    .tkc-count { font-size: .72rem; font-weight: 800; color: #b45309; background: #fef3c7; padding: .14rem .6rem; border-radius: 999px; }
    .tkc-count:empty { display: none; }

    .tkc-views { display: inline-flex; background: #eef1f6; border: 1px solid #e2e8f0; border-radius: 11px; padding: 3px; gap: 2px; }
    .tkc-view {
        display: inline-flex; align-items: center; gap: .4rem; border: none; background: transparent; cursor: pointer;
        padding: .38rem .75rem; border-radius: 8px; font-size: .76rem; font-weight: 800; color: #64748b; transition: all .16s ease;
    }
    .tkc-view i { font-size: .68rem; }
    .tkc-view:hover { color: #1e293b; }
    .tkc-view.on { background: #fff; color: #92400e; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
    .tkc-view.on i { color: #d97706; }

    /* ── Lejant ── */
    .tkc-legend { display: flex; flex-wrap: wrap; gap: .85rem; padding: .6rem 1.25rem; border-bottom: 1px solid #f1f5f9; background: #fcfdfe; }
    .tkc-key { display: inline-flex; align-items: center; gap: .38rem; font-size: .7rem; font-weight: 700; color: #64748b; }
    .tkc-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
    .tkc-key .tkc-key-flame { width: auto; height: auto; background: none; color: #ef4444; font-size: .7rem; }
    .tkc-key .tkc-key-robot { width: auto; height: auto; background: none; color: #7c3aed; font-size: .7rem; }

    /* ── Gövde + yükleme çubuğu ── */
    .tkc-body { position: relative; padding: 1rem 1.25rem 1.25rem; }
    .tkc-loadbar {
        position: absolute; top: 0; left: 0; height: 3px; width: 100%; overflow: hidden;
        background: transparent; display: none;
    }
    .tkc-loadbar.on { display: block; }
    .tkc-loadbar::after {
        content: ''; display: block; height: 100%; width: 40%;
        background: linear-gradient(90deg, #f59e0b, #d97706);
        animation: tkcLoad 1s ease-in-out infinite;
    }
    @keyframes tkcLoad { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }

    /* ── FullCalendar iskeleti — panel diline özel kaplama ── */
    #tkCalendar { --fc-border-color: #eef1f6; --fc-page-bg-color: #fff; }
    #tkCalendar .fc-scrollgrid { border-radius: 12px; overflow: hidden; border-color: #e9edf3; }
    #tkCalendar .fc-col-header-cell { background: #f8fafc; padding: .5rem 0; }
    #tkCalendar .fc-col-header-cell-cushion {
        font-size: .68rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
    }
    #tkCalendar .fc-daygrid-day { transition: background .15s ease; }
    #tkCalendar .fc-daygrid-day:hover { background: #fcfdfe; }
    #tkCalendar .fc-day-sat, #tkCalendar .fc-day-sun { background: #fbfcfe; }
    #tkCalendar .fc-daygrid-day-number {
        font-size: .74rem; font-weight: 800; color: #64748b; text-decoration: none; padding: .35rem .5rem;
    }
    #tkCalendar .fc-day-today { background: #fffbeb !important; }
    #tkCalendar .fc-day-today .fc-daygrid-day-number {
        background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-radius: 8px;
        margin: 3px; padding: .2rem .45rem; box-shadow: 0 3px 8px -3px rgba(217,119,6,.6);
    }
    #tkCalendar .fc-daygrid-day-frame { min-height: 96px; }
    #tkCalendar .fc-daygrid-more-link {
        font-size: .68rem; font-weight: 800; color: #92400e; background: #fef3c7; border-radius: 6px; padding: .08rem .45rem; margin: 1px 3px;
    }
    #tkCalendar .fc-popover { border: 1px solid #e9edf3; border-radius: 12px; box-shadow: 0 18px 40px -14px rgba(15,23,42,.3); overflow: hidden; }
    #tkCalendar .fc-popover-header { background: #fffbeb; font-weight: 800; color: #92400e; font-size: .78rem; padding: .5rem .75rem; }
    #tkCalendar .fc-event { background: transparent !important; border: none !important; margin: 1px 3px; }
    #tkCalendar .fc-timegrid-slot-label-cushion, #tkCalendar .fc-timegrid-axis-cushion { font-size: .68rem; font-weight: 700; color: #94a3b8; }
    #tkCalendar .fc-timegrid-now-indicator-line { border-color: #d97706; }
    #tkCalendar .fc-timegrid-now-indicator-arrow { border-color: #d97706; }

    /* Ajanda (list) görünümü */
    #tkCalendar .fc-list { border-color: #e9edf3; border-radius: 12px; overflow: hidden; }
    #tkCalendar .fc-list-day-cushion { background: #fffbeb !important; }
    #tkCalendar .fc-list-day-text, #tkCalendar .fc-list-day-side-text {
        font-size: .78rem; font-weight: 800; color: #92400e; text-decoration: none; text-transform: capitalize;
    }
    #tkCalendar .fc-list-event:hover td { background: #fcfdfe; }
    #tkCalendar .fc-list-event-time { display: none; }
    #tkCalendar .fc-list-event-graphic { display: none; }
    #tkCalendar .fc-list-event td { padding: .35rem .75rem; }

    /* ── Özel görev hapları ── */
    .tkc-ev {
        --pc: #94a3b8;
        background: color-mix(in srgb, var(--pc) 10%, #fff);
        border: 1px solid color-mix(in srgb, var(--pc) 22%, #fff);
        border-left: 3px solid var(--pc);
        border-radius: 8px; padding: .22rem .45rem; cursor: pointer; overflow: hidden;
        transition: transform .12s ease, box-shadow .12s ease;
    }
    .tkc-ev:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--pc) 55%, transparent); }
    .tkc-ev-top { display: flex; align-items: center; gap: .32rem; min-width: 0; }
    .tkc-ev-time { font-size: .64rem; font-weight: 800; color: var(--pc); flex-shrink: 0; }
    .tkc-ev-title {
        font-size: .72rem; font-weight: 700; color: #1e293b; line-height: 1.3;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
    }
    .tkc-ev-flame { color: #ef4444; font-size: .6rem; flex-shrink: 0; animation: tkcPulse 1.6s ease-in-out infinite; }
    @keyframes tkcPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
    .tkc-ev-auto { color: #7c3aed; font-size: .6rem; flex-shrink: 0; }
    .tkc-ev-names {
        display: flex; align-items: center; gap: .3rem; margin-top: .12rem;
        font-size: .62rem; font-weight: 700; color: #64748b;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tkc-ev-names i { font-size: .54rem; color: #94a3b8; flex-shrink: 0; }
    .tkc-ev-names span { overflow: hidden; text-overflow: ellipsis; }

    .tkc-ev.over { background: #fff5f5; border-color: #fecaca; border-left-color: #ef4444; }
    .tkc-ev.done { background: #f8fafc; border-color: #e9edf3; border-left-color: #94a3b8; opacity: .75; }
    .tkc-ev.done .tkc-ev-title { text-decoration: line-through; color: #64748b; }
    .tkc-ev.done .tkc-ev-time { color: #94a3b8; }

    /* Ajanda görünümünde haplar daha geniş nefes alır */
    #tkCalendar .fc-list .tkc-ev { padding: .45rem .7rem; }
    #tkCalendar .fc-list .tkc-ev-title { font-size: .8rem; white-space: normal; }
    #tkCalendar .fc-list .tkc-ev-names { font-size: .7rem; margin-top: .2rem; }

    @media (max-width: 768px) {
        .tkc-bar { flex-direction: column; align-items: stretch; }
        .tkc-heading { justify-content: flex-start; }
        .tkc-views { align-self: flex-start; }
        #tkCalendar .fc-daygrid-day-frame { min-height: 72px; }
    }
</style>
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/index.global.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@6.1.15/locales-all.global.min.js"></script>
<script>
(function () {
    const el = document.getElementById('tkCalendar');
    if (!el || !window.FullCalendar) return;

    const EVENTS_URL = "{{ route('agency.tasks.events') }}";
    const FILTERS = {!! json_encode(request()->only(['scope', 'status', 'priority', 'assignee', 'q', 'filter'])) !!};
    const loadbar = document.getElementById('tkcLoad');
    const titleEl = document.getElementById('tkcTitle');
    const countEl = document.getElementById('tkcCount');

    const calendar = new FullCalendar.Calendar(el, {
        initialView: 'dayGridMonth',
        locale: 'tr',
        firstDay: 1,
        height: 'auto',
        headerToolbar: false,           // üst çubuk tamamen özel
        dayMaxEvents: 3,
        nowIndicator: true,
        moreLinkContent: (args) => '+' + args.num + ' görev daha',
        loading: (isLoading) => loadbar.classList.toggle('on', isLoading),

        events: function (info, success, failure) {
            const p = new URLSearchParams({ start: info.startStr, end: info.endStr, ...FILTERS });
            fetch(EVENTS_URL + '?' + p.toString(), { headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.json())
                .then(data => { countEl.textContent = data.length ? data.length + ' görev' : ''; success(data); })
                .catch(failure);
        },

        // Özel hap: saat + başlık + atanan AD SOYAD listesi
        eventContent: function (arg) {
            const ep = arg.event.extendedProps || {};
            const wrap = document.createElement('div');
            wrap.className = 'tkc-ev'
                + (ep.overdue ? ' over' : '')
                + (ep.status === 'completed' ? ' done' : '');
            wrap.style.setProperty('--pc', ep.priorityColor || '#94a3b8');

            const top = document.createElement('div');
            top.className = 'tkc-ev-top';
            top.innerHTML = `<span class="tkc-ev-time">${ep.time || ''}</span>`
                + (ep.overdue ? '<i class="fas fa-fire tkc-ev-flame"></i>' : '')
                + (ep.isAuto ? '<i class="fas fa-robot tkc-ev-auto" title="Otomatik görev"></i>' : '')
                + `<span class="tkc-ev-title"></span>`;
            top.querySelector('.tkc-ev-title').textContent = arg.event.title;
            wrap.appendChild(top);

            const names = (ep.assignees || []).join(', ');
            if (names) {
                const line = document.createElement('div');
                line.className = 'tkc-ev-names';
                line.innerHTML = '<i class="fas fa-user"></i><span></span>';
                line.querySelector('span').textContent = names;
                wrap.appendChild(line);
            }

            return { domNodes: [wrap] };
        },

        eventDidMount: function (info) {
            const ep = info.event.extendedProps || {};
            const names = (ep.assignees || []).join(', ');
            info.el.title = (ep.time ? ep.time + ' · ' : '') + info.event.title
                + (names ? '\nAtananlar: ' + names : '')
                + '\nÖncelik: ' + (ep.priorityLabel || '');
        },

        eventClick: function (info) {
            info.jsEvent.preventDefault();
            const ep = info.event.extendedProps || {};
            if (ep.qvUrl && typeof openQuickView === 'function') openQuickView(ep.qvUrl);
        },

        datesSet: function (info) {
            titleEl.textContent = info.view.title;
            document.querySelectorAll('.tkc-view').forEach(btn =>
                btn.classList.toggle('on', btn.dataset.calView === info.view.type));
        }
    });

    calendar.render();

    // Özel gezinme
    document.getElementById('tkcPrev').addEventListener('click', () => calendar.prev());
    document.getElementById('tkcNext').addEventListener('click', () => calendar.next());
    document.getElementById('tkcToday').addEventListener('click', () => calendar.today());
    document.querySelectorAll('.tkc-view').forEach(btn =>
        btn.addEventListener('click', () => calendar.changeView(btn.dataset.calView)));
})();
</script>
@endpush