@extends('staff.layouts.app')
@section('content')
{{-- ✅ MAIN CONTAINER: pb-40 ensures content scrolls above the fixed reply bar --}}
<div class="p-4 max-w-2xl mx-auto pb-40">
    
    {{-- ══ Compact Header ══ --}}
    <div class="flex items-center justify-between mb-4">
        <a href="{{ route('staff.homework.index', ['slug' => session('staff_school_slug')]) }}"
           class="w-8 h-8 bg-white border border-slate-200 rounded-full flex items-center justify-center text-slate-500 shadow-sm active:scale-95 transition-all">
            <i class="fa-solid fa-arrow-left text-xs"></i>
        </a>
        <h1 class="text-base font-black text-slate-800 tracking-tight">Homework Details</h1>
        <div class="w-8"></div>
    </div>

    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-3 bg-emerald-50 border border-emerald-200 text-emerald-700 text-xs font-bold px-4 py-3 rounded-xl flex items-center gap-2 shadow-sm">
        <i class="fa-solid fa-circle-check"></i> {{ session('success') }}
    </div>
    @endif
    @if(session('error'))
    <div class="mb-3 bg-red-50 border border-red-200 text-red-700 text-xs font-bold px-4 py-3 rounded-xl flex items-center gap-2 shadow-sm">
        <i class="fa-solid fa-circle-exclamation"></i> {{ session('error') }}
    </div>
    @endif

    {{-- ══ Main Card ══ --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden mb-5">
        <div class="h-1.5 w-full {{ $homework->status == 'published' ? 'bg-gradient-to-r from-emerald-400 to-emerald-500' : ($homework->status == 'pending' ? 'bg-gradient-to-r from-amber-400 to-amber-500' : 'bg-gradient-to-r from-red-400 to-red-500') }}"></div>
        <div class="p-4">
            <div class="flex items-center justify-between mb-2">
                <span class="px-2.5 py-1 rounded-lg text-[9px] font-black uppercase tracking-wider
                    {{ $homework->status == 'published' ? 'bg-emerald-100 text-emerald-700' : ($homework->status == 'pending' ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-700') }}">
                    {{ $homework->status }}
                </span>
                <span class="text-[9px] text-slate-400 font-bold">{{ \Carbon\Carbon::parse($homework->created_at)->format('d M, Y h:i A') }}</span>
            </div>
            
            <h2 class="text-base font-black text-slate-800 leading-snug mb-3">{{ $homework->title ?: 'Untitled Broadcast' }}</h2>
            
            <div class="flex items-center gap-2.5 bg-slate-50 p-2.5 rounded-xl mb-4">
                <div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-black text-[11px] flex-shrink-0">
                    {{ substr($homework->staff_name, 0, 1) }}
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-[11px] font-bold text-slate-700 truncate">{{ $homework->staff_name }}</p>
                    <p class="text-[9px] text-slate-400 font-semibold uppercase tracking-wide">{{ $homework->designation }}</p>
                </div>
            </div>
            
            <div class="text-xs text-slate-600 leading-relaxed whitespace-pre-line mb-4">{{ $homework->message }}</div>
            
                     @if(!empty($homework->attachments_list))
         <div class="mb-4">
             <p class="text-[10px] font-black text-slate-500 uppercase tracking-wider mb-2">Attached Photos</p>
             <div class="grid grid-cols-3 gap-2">
                 @foreach($homework->attachments_list as $photo)
                 <a href="{{ asset('storage/'.$photo) }}" target="_blank" class="relative aspect-square rounded-xl overflow-hidden border border-slate-200 group block">
                     <img src="{{ asset('storage/'.$photo) }}" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-110">
                     <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
                         <i class="fa-solid fa-magnifying-glass-plus text-white opacity-0 group-hover:opacity-100 text-lg drop-shadow-md"></i>
                     </div>
                 </a>
                 @endforeach
             </div>
         </div>
         @endif
        </div>

        {{-- ══ Action Buttons ══ --}}
        @php
            $canEdit   = $homework->status == 'pending' && ($isReviewer || $homework->sender_staff_id == session('staff_id'));
            $canReview = $isReviewer && $homework->status == 'pending';
            $canDelete = $isReviewer && $homework->status == 'published';
        @endphp
        @if($canEdit || $canReview || $canDelete)
        <div class="px-4 pb-4 flex gap-2">
            @if($canEdit)
            <a href="{{ route('staff.homework.edit', ['slug' => session('staff_school_slug'), 'id' => $homework->id]) }}" class="flex-1 py-2.5 rounded-xl bg-slate-800 text-white text-[10px] font-black uppercase tracking-widest flex items-center justify-center gap-1.5 active:scale-95 transition-all shadow-sm">
                <i class="fa-solid fa-pen-to-square"></i> Edit
            </a>
            @endif
            @if($canReview)
            <form action="{{ route('staff.homework.reject', ['slug' => session('staff_school_slug'), 'id' => $homework->id]) }}" method="POST" class="flex-1">
                @csrf @method('PATCH')
                <button class="w-full py-2.5 rounded-xl border-2 border-red-200 text-red-600 text-[10px] font-black uppercase tracking-widest hover:bg-red-50 active:scale-95 transition-all flex items-center justify-center gap-1.5">
                    <i class="fa-solid fa-xmark"></i> Reject
                </button>
            </form>
            <form action="{{ route('staff.homework.approve', ['slug' => session('staff_school_slug'), 'id' => $homework->id]) }}" method="POST" class="flex-1">
                @csrf @method('PATCH')
                <button class="w-full py-2.5 rounded-xl bg-gradient-to-b from-emerald-400 to-emerald-600 border-b-4 border-emerald-800/70 text-white text-[10px] font-black uppercase tracking-widest shadow-lg shadow-emerald-200 active:border-b-0 active:translate-y-0.5 active:shadow-none transition-all flex items-center justify-center gap-1.5">
                    <i class="fa-solid fa-check"></i> Approve
                </button>
            </form>
            @endif
            @if($canDelete)
            <form id="deleteHomeworkForm" action="{{ route('staff.homework.destroy', ['slug' => session('staff_school_slug'), 'id' => $homework->id]) }}" method="POST" class="flex-1">
                @csrf @method('DELETE')
                <button type="button" onclick="openDeletePopup()" class="w-full py-2.5 rounded-xl bg-gradient-to-b from-red-400 to-red-600 border-b-4 border-red-800/70 text-white text-[10px] font-black uppercase tracking-widest shadow-lg shadow-red-200 active:border-b-0 active:translate-y-0.5 active:shadow-none transition-all flex items-center justify-center gap-1.5">
                    <i class="fa-solid fa-trash"></i> Delete
                </button>
            </form>
            @endif
        </div>
        @endif

        {{-- ══ Targeted Audience ══ --}}
        <div class="bg-slate-50 p-4 border-t border-slate-100">
            <div class="flex justify-between items-center mb-3 cursor-pointer" onclick="toggleAudience()">
                <h4 class="text-[10px] font-black text-slate-500 uppercase tracking-widest">
                    <i class="fa-solid fa-bullseye text-orange-400 mr-1"></i> Targeted Audience ({{ $targets->count() }})
                </h4>
                @if($targets->count() > 3)
                <i id="audienceIcon" class="fa-solid fa-chevron-down text-slate-400 text-xs transition-transform duration-300"></i>
                @endif
            </div>
            <div id="audienceList" class="flex flex-wrap gap-2 {{ $targets->count() > 3 ? 'max-h-14 overflow-hidden' : '' }} transition-all duration-300">
                @foreach($targets as $index => $t)
                <span class="px-3 py-1 bg-white border border-slate-200 rounded-full text-[10px] font-semibold text-slate-600 shadow-sm {{ $index >= 3 ? 'hidden-extra' : '' }}" @if($index >= 3) style="display:none;" @endif>
                    @if($t->student_name)
                        <i class="fa-solid fa-user text-indigo-400 mr-1"></i> {{ $t->student_name }}
                    @else
                        <i class="fa-solid fa-chalkboard text-indigo-400 mr-1"></i> {{ $t->class_name }} {{ $t->section_name ? '- '.$t->section_name : '' }}
                    @endif
                </span>
                @endforeach
            </div>
            @if($targets->count() > 3)
            <button type="button" onclick="toggleAudience()" id="audienceToggleBtn" class="mt-3 text-[10px] font-black text-orange-600 hover:underline uppercase tracking-wider">
                Show All ({{ $targets->count() }})
            </button>
            @endif
        </div>
    </div>

    {{-- ✅ CONVERSATION THREAD --}}
    <div class="bg-white rounded-2xl border border-slate-200 shadow-sm p-4 mb-4">
        <h4 class="text-[10px] font-black text-slate-500 uppercase tracking-widest mb-4">
            <i class="fa-solid fa-comments text-indigo-500 mr-1"></i> Communication Thread
        </h4>
        <div class="space-y-3 mb-4" id="chatThread">
            @forelse($replies as $reply)
                @php $isTeacher = !empty($reply->staff_id); @endphp
                <div class="flex {{ $isTeacher ? 'justify-end' : 'justify-start' }}">
                    <div class="max-w-[85%] flex {{ $isTeacher ? 'flex-row-reverse' : 'flex-row' }} items-end gap-2">
                        <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-black flex-shrink-0 shadow-sm
                            {{ $isTeacher ? 'bg-orange-100 text-orange-600' : 'bg-indigo-100 text-indigo-600' }}">
                            {{ $isTeacher ? substr($reply->teacher_name ?? 'T', 0, 1) : substr($reply->student_name ?? 'S', 0, 1) }}
                        </div>
                        <div class="p-3 rounded-2xl shadow-sm text-[11px] leading-relaxed
                            {{ $isTeacher ? 'bg-orange-500 text-white rounded-br-none' : 'bg-slate-100 text-slate-700 rounded-bl-none' }}">
                            <p class="whitespace-pre-line">{{ $reply->message }}</p>
                            @if($reply->attachment)
                            <a href="{{ asset('storage/'.$reply->attachment) }}" target="_blank" class="mt-2 inline-flex items-center gap-1 text-[9px] font-bold underline">
                                <i class="fa-solid fa-paperclip"></i> Attachment
                            </a>
                            @endif
                            <p class="text-[8px] mt-1.5 {{ $isTeacher ? 'text-orange-200' : 'text-slate-400' }} text-right font-semibold">
                                {{ $isTeacher ? 'You' : $reply->student_name }} • {{ \Carbon\Carbon::parse($reply->created_at)->format('h:i A') }}
                            </p>
                        </div>
                    </div>
                </div>
            @empty
                <p class="text-center text-[10px] text-slate-400 italic py-4">No replies yet.</p>
            @endforelse
        </div>
    </div>
</div>

{{-- ✅ FIXED REPLY BAR — Matches layout max-w-[420px] exactly --}}
<div class="fixed bottom-16 left-0 right-0 z-30 flex justify-center pointer-events-none">
    <div class="w-full max-w-[420px] pointer-events-auto">
        <div class="bg-white/95 backdrop-blur-md border-t border-slate-200 p-3 shadow-[0_-5px_20px_rgba(0,0,0,0.06)]">
            <form id="replyForm" action="{{ route('staff.homework.reply', ['slug' => session('staff_school_slug'), 'id' => $homework->id]) }}" method="POST" enctype="multipart/form-data" class="w-full flex items-end gap-2 px-1">
                @csrf
                <label for="staffReplyAttachFixed" class="w-10 h-10 bg-slate-100 rounded-full flex items-center justify-center text-slate-500 cursor-pointer hover:bg-orange-100 hover:text-orange-600 transition-colors flex-shrink-0">
                    <i class="fa-solid fa-paperclip text-sm"></i>
                    <input type="file" name="attachment" id="staffReplyAttachFixed" class="hidden" accept=".jpg,.jpeg,.png,.pdf,.doc,.docx">
                </label>
                <div class="flex-1 relative">
                    <textarea name="message" id="replyMessage" rows="1" required placeholder="Reply to student... (Enter to send)" class="w-full bg-slate-100 border border-slate-200 rounded-2xl py-2.5 px-4 text-xs text-slate-700 focus:ring-2 focus:ring-orange-500/20 focus:border-orange-500 outline-none transition-all resize-none placeholder:text-slate-400 max-h-24"></textarea>
                    <span id="attachedFileName" class="absolute -top-7 left-1 text-[9px] text-orange-600 font-bold bg-orange-50 px-2 py-1 rounded-md hidden truncate max-w-[180px] border border-orange-100 shadow-sm items-center gap-1 z-10">
                        <i class="fa-solid fa-paperclip text-[8px]"></i> <span id="fileNameText"></span>
                        <button type="button" onclick="clearAttachment(event)" class="ml-1 text-red-500 hover:text-red-700"><i class="fa-solid fa-xmark"></i></button>
                    </span>
                </div>
                <button type="submit" id="sendBtn" class="w-10 h-10 bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-full flex items-center justify-center shadow-md shadow-orange-200 active:scale-90 transition-all flex-shrink-0">
                    <i class="fa-solid fa-paper-plane text-xs"></i>
                </button>
            </form>
        </div>
    </div>
</div>

{{-- ══ DELETE CONFIRMATION POPUP (ONLY ONCE) ══ --}}
@if($canDelete)
<div id="deletePopup" class="fixed inset-0 z-[9999] hidden">
    <div class="absolute inset-0 bg-slate-900/70 backdrop-blur-sm" onclick="closeDeletePopup()"></div>
    <div class="absolute inset-0 flex items-center justify-center p-4">
        <div id="deleteCard" class="bg-white w-full max-w-xs rounded-3xl shadow-2xl relative overflow-hidden text-center" style="transform: scale(0.85) translateY(20px); opacity: 0; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);">
            <div class="h-1.5 w-full bg-gradient-to-r from-red-400 to-red-600"></div>
            <div class="p-6 pt-7">
                <div class="w-16 h-16 mx-auto rounded-full bg-red-50 border border-red-100 flex items-center justify-center mb-4 shadow-inner">
                    <i class="fa-solid fa-trash-can text-xl text-red-500"></i>
                </div>
                <h3 class="text-base font-black text-slate-800 mb-1">Delete Homework?</h3>
                <p class="text-[11px] text-slate-500 leading-relaxed mb-6">This will permanently remove the broadcast, its targets and student replies. This action cannot be undone.</p>
                <div class="flex gap-2">
                    <button type="button" onclick="closeDeletePopup()" class="flex-1 py-3 rounded-xl bg-slate-100 text-slate-600 text-[10px] font-black uppercase tracking-widest border-b-4 border-slate-300 active:border-b-0 active:translate-y-0.5 transition-all">Cancel</button>
                    <button type="button" onclick="document.getElementById('deleteHomeworkForm').submit()" class="flex-1 py-3 rounded-xl bg-gradient-to-b from-red-400 to-red-600 text-white text-[10px] font-black uppercase tracking-widest border-b-4 border-red-800/70 shadow-lg shadow-red-200 active:border-b-0 active:translate-y-0.5 active:shadow-none transition-all">Yes, Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<script>
// ✅ LIVE CHAT POLLING
let lastReplyId = {{ $replies->isNotEmpty() ? $replies->last()->id : 0 }};

function formatTime(dateStr) {
    const d = new Date(dateStr);
    let h = d.getHours(); let m = d.getMinutes();
    const ampm = h >= 12 ? 'PM' : 'AM';
    h = h % 12; h = h ? h : 12; m = m < 10 ? '0' + m : m;
    return h + ':' + m + ' ' + ampm;
}

function scrollToBottom() {
    const thread = document.getElementById('chatThread');
    if (thread) thread.scrollTop = thread.scrollHeight;
    window.scrollTo({ top: document.body.scrollHeight, behavior: 'auto' });
}

function appendMessage(reply) {
    const thread = document.getElementById('chatThread');
    const emptyMsg = thread.querySelector('p.italic');
    if (emptyMsg) emptyMsg.remove();

    const isTeacher = reply.staff_id !== null;
    const initial = isTeacher ? (reply.teacher_name ? reply.teacher_name.substring(0,1) : 'T') : (reply.student_name ? reply.student_name.substring(0,1) : 'S');
    const attachUrl = reply.attachment ? (reply.attachment.startsWith('http') ? reply.attachment : '/storage/' + reply.attachment) : '';
    
    const msgHtml = `
    <div class="flex ${isTeacher ? 'justify-end' : 'justify-start'} animate-fade-in">
        <div class="max-w-[85%] flex ${isTeacher ? 'flex-row-reverse' : 'flex-row'} items-end gap-2">
            <div class="w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-black flex-shrink-0 shadow-sm ${isTeacher ? 'bg-orange-100 text-orange-600' : 'bg-indigo-100 text-indigo-600'}">
                ${initial}
            </div>
            <div class="p-3 rounded-2xl shadow-sm text-[11px] leading-relaxed ${isTeacher ? 'bg-orange-500 text-white rounded-br-none' : 'bg-slate-100 text-slate-700 rounded-bl-none'}">
                <p class="whitespace-pre-line">${reply.message}</p>
                ${reply.attachment ? `<a href="${attachUrl}" target="_blank" class="mt-2 inline-flex items-center gap-1 text-[9px] font-bold underline"><i class="fa-solid fa-paperclip"></i> Attachment</a>` : ''}
                <p class="text-[8px] mt-1.5 ${isTeacher ? 'text-orange-200' : 'text-slate-400'} text-right font-semibold">
                    ${isTeacher ? 'You' : reply.student_name} • ${formatTime(reply.created_at)}
                </p>
            </div>
        </div>
    </div>`;
    
    thread.insertAdjacentHTML('beforeend', msgHtml);
}

function fetchNewMessages() {
    fetch("{{ route('staff.homework.fetchReplies', ['slug' => session('staff_school_slug'), 'id' => $homework->id]) }}?after_id=" + lastReplyId)
        .then(response => response.json())
        .then(data => {
            if (data.replies && data.replies.length > 0) {
                data.replies.forEach(reply => {
                    lastReplyId = reply.id;
                    appendMessage(reply);
                });
                scrollToBottom();
            }
        })
        .catch(err => console.log('Polling error:', err));
}

setInterval(fetchNewMessages, 4000);

// ✅ AJAX FORM SUBMIT — NO REFRESH!
document.getElementById('replyForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const form = this;
    const messageInput = document.getElementById('replyMessage');
    const sendBtn = document.getElementById('sendBtn');
    const message = messageInput.value.trim();
    
    if (!message) return;
    
    sendBtn.disabled = true;
    sendBtn.innerHTML = '<i class="fa-solid fa-spinner fa-spin text-xs"></i>';
    
    const formData = new FormData(form);
    
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            messageInput.value = '';
            messageInput.style.height = 'auto';
            
            document.getElementById('staffReplyAttachFixed').value = '';
            document.getElementById('attachedFileName').classList.add('hidden');
            
            if (data.reply) {
                lastReplyId = data.reply.id;
                appendMessage(data.reply);
                scrollToBottom();
            }
        }
    })
    .catch(err => {
        console.log('Send error:', err);
        form.submit();
    })
    .finally(() => {
        sendBtn.disabled = false;
        sendBtn.innerHTML = '<i class="fa-solid fa-paper-plane text-xs"></i>';
    });
});

// Audience Toggle
function toggleAudience() {
    const extras = document.querySelectorAll('.hidden-extra');
    const btn = document.getElementById('audienceToggleBtn');
    const icon = document.getElementById('audienceIcon');
    const list = document.getElementById('audienceList');
    if (!extras.length) return;
    const isHidden = extras[0].style.display === 'none';
    extras.forEach(el => el.style.display = isHidden ? '' : 'none');
    if (isHidden) {
        if (btn) btn.textContent = 'Show Less';
        list.classList.remove('max-h-14', 'overflow-hidden');
        if (icon) icon.classList.add('rotate-180');
    } else {
        if (btn) btn.textContent = 'Show All ({{ $targets->count() }})';
        list.classList.add('max-h-14', 'overflow-hidden');
        if (icon) icon.classList.remove('rotate-180');
    }
}

// Delete Popup
@if($canDelete)
function openDeletePopup() {
    const popup = document.getElementById('deletePopup');
    const card = document.getElementById('deleteCard');
    popup.classList.remove('hidden');
    requestAnimationFrame(() => {
        card.style.transform = 'scale(1) translateY(0)';
        card.style.opacity = '1';
    });
}
function closeDeletePopup() {
    const popup = document.getElementById('deletePopup');
    const card = document.getElementById('deleteCard');
    card.style.transform = 'scale(0.85) translateY(20px)';
    card.style.opacity = '0';
    setTimeout(() => popup.classList.add('hidden'), 250);
}
@endif

// Auto-resize textarea
const ta = document.getElementById('replyMessage');
if(ta) {
    ta.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });
}

// ENTER = SEND
ta.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        if (this.value.trim() !== '') {
            document.getElementById('replyForm').dispatchEvent(new Event('submit'));
        }
    }
});

// File attachment display
document.getElementById('staffReplyAttachFixed').addEventListener('change', function() {
    const fileName = this.files[0]?.name;
    const badge = document.getElementById('attachedFileName');
    const text = document.getElementById('fileNameText');
    if (fileName) {
        text.textContent = fileName;
        badge.classList.remove('hidden');
        badge.classList.add('flex');
    }
});

function clearAttachment(e) {
    e.preventDefault();
    document.getElementById('staffReplyAttachFixed').value = '';
    document.getElementById('attachedFileName').classList.add('hidden');
    document.getElementById('attachedFileName').classList.remove('flex');
}

// ✅ SCROLL TO BOTTOM ON PAGE LOAD
window.addEventListener('load', function () {
    setTimeout(scrollToBottom, 100);
});

// Add fade-in animation
const style = document.createElement('style');
style.textContent = `
    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
    .animate-fade-in { animation: fadeIn 0.3s ease-out; }
`;
document.head.appendChild(style);
</script>
@endsection