@extends('student.layouts.app')

@section('content')
<div class="p-4 max-w-2xl mx-auto pb-24">
    
    {{-- Header with Back to Dashboard --}}
    <div class="flex items-center justify-between mb-5">
        <a href="{{ route('student.dashboard', ['slug' => session('student_school_slug')]) }}" 
           class="w-9 h-9 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>
        <div class="text-center">
            <h1 class="text-lg font-black text-slate-800 tracking-tight">Homework</h1>
            <p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest">Assignments & Tasks</p>

           
        </div>
        <div class="w-9"></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


        {{-- Filter Header + Unread Toggle --}}
        <div class="flex items-center justify-between gap-2 mb-2">

            <p class="text-[9px] font-black text-slate-400 uppercase tracking-widest">
                <i class="fa-solid fa-filter text-indigo-400 mr-1"></i>
                Filter Homework
            </p>

            {{-- Smart Unread Toggle Button --}}
            <a href="{{ request()->fullUrlWithQuery(['unread' => request('unread') ? 0 : 1]) }}"
                class="px-3 py-1.5 rounded-full text-[10px] font-black uppercase tracking-wide transition-all flex items-center gap-1.5 shadow-sm
                {{ request('unread')
                    ? 'bg-indigo-600 text-white shadow-indigo-200'
                    : 'bg-slate-100 text-slate-600 hover:bg-slate-200' }}">

                <i class="fa-solid {{ request('unread') ? 'fa-eye' : 'fa-eye-slash' }} text-[9px]"></i>

                {{ request('unread') ? 'Show All' : 'Unread Only' }}
            </a>

        </div>

        {{-- Server-side validation error --}}
        @if($errors->any())
        <div class="mb-2 bg-red-50 border border-red-200 text-red-600 text-[10px] font-bold px-3 py-2 rounded-xl flex items-center gap-1.5">
            <i class="fa-solid fa-circle-exclamation"></i> {{ $errors->first() }}
        </div>
        @endif

        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
            {{-- SUBJECT --}}
            <select name="subject_id" class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 px-3 text-[10px] font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none uppercase tracking-wider">
                <option value="">All Subjects</option>
                @foreach($subjects as $sub)
                <option value="{{ $sub->id }}" {{ request('subject_id') == $sub->id ? 'selected' : '' }}>{{ $sub->name }}</option>
                @endforeach
            </select>

            {{-- FROM DATE --}}
            <input type="date" name="from_date" id="fromDate" value="{{ request('from_date') }}"
                   class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 px-3 text-[10px] font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none uppercase tracking-wider">

            {{-- TO DATE --}}
            <input type="date" name="to_date" id="toDate" value="{{ request('to_date') }}"
                   class="w-full bg-slate-50 border border-slate-200 rounded-xl py-2.5 px-3 text-[10px] font-bold text-slate-700 focus:ring-2 focus:ring-indigo-500/20 outline-none uppercase tracking-wider">
        </div>

        {{-- Client-side instant error --}}
        <p id="dateRangeError" class="hidden mt-2 text-[9px] font-bold text-red-600 bg-red-50 border border-red-200 rounded-lg px-2 py-1.5">
            <i class="fa-solid fa-circle-exclamation mr-1"></i>From Date must be less than To Date.
        </p>

        <div class="flex gap-2 pt-2">
            <button type="submit" class="flex-1 bg-slate-900 text-white py-2 rounded-xl text-[10px] font-black uppercase tracking-widest shadow-md active:scale-95 transition-all">Apply Filters</button>
            <a href="{{ route('student.homework.index', ['slug' => session('student_school_slug')]) }}" class="px-4 bg-slate-100 text-slate-500 rounded-xl text-[10px] font-bold flex items-center justify-center uppercase">Clear</a>
        </div>
    </form>

    <script>
        // ✅ CLIENT-SIDE VALIDATION: blocks submit instantly if From Date is not less than To Date
        document.getElementById('hwFilterForm').addEventListener('submit', function (e) {
            const from = document.getElementById('fromDate').value;
            const to   = document.getElementById('toDate').value;
            const err  = document.getElementById('dateRangeError');
            if (from && to && from >= to) {
                e.preventDefault();
                err.classList.remove('hidden');
            } else {
                err.classList.add('hidden');
            }
        });
    </script>

    {{-- Homework List --}}
    <div class="space-y-3">
                       @forelse($homeworks as $hw)
             @php 
                $hasUnreadReplies = ($hw->unread_replies ?? 0) > 0;
                $isNewHomework = ($hw->is_new ?? 0) > 0;
                $isUnread = $hasUnreadReplies || $isNewHomework;
            @endphp
     <a href="{{ route('student.homework.show', ['slug' => session('student_school_slug'), 'id' => $hw->id]) }}"
     class="relative block bg-white rounded-2xl border shadow-sm hover:shadow-md transition-all p-4 active:scale-[0.98] group {{ $isUnread ? 'border-red-200 ring-2 ring-red-100' : 'border-slate-100' }}">
         
         {{-- ✅ CORNER BADGE: Shows count for unread replies, or "NEW" for never-opened homework --}}
         @if($isUnread)
         <span class="absolute -top-2 -right-2 min-w-[20px] h-5 px-1.5 bg-red-500 text-white text-[10px] font-black flex items-center justify-center rounded-full border-2 border-white shadow-md z-10">
             @if($hasUnreadReplies)
                 {{ $hw->unread_replies > 9 ? '9+' : $hw->unread_replies }}
             @else
                 NEW
             @endif
         </span>
         @endif
         
            <div class="flex items-start gap-3">
                {{-- Icon --}}
                <div class="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0 shadow-sm bg-indigo-50 text-indigo-600">
                    <i class="fa-solid fa-book-open text-base"></i>
                </div>
                
                {{-- Content --}}
                <div class="flex-1 min-w-0">
                    <div class="flex items-center justify-between mb-1">
                        <h3 class="font-bold text-slate-800 text-sm truncate pr-2 group-hover:text-indigo-600 transition-colors">
                            {{ $hw->title ?: 'Untitled Assignment' }}
                        </h3>
                        <span class="text-[9px] text-slate-400 font-bold whitespace-nowrap">{{ \Carbon\Carbon::parse($hw->created_at)->format('d M') }}</span>
                    </div>
                    
                    <p class="text-[11px] text-slate-500 line-clamp-2 leading-relaxed mb-2.5">{{ $hw->message }}</p>
                    
                    <div class="flex items-center gap-2 text-[9px] text-slate-400 font-semibold uppercase tracking-wide">
                        <div class="w-4 h-4 rounded-full bg-orange-100 text-orange-600 flex items-center justify-center font-black text-[7px]">
                            <i class="fa-solid fa-book-open text-[8px]"></i>
                        </div>
                        <span class="text-slate-700 font-bold">{{ $hw->subject_name ?? 'General' }}</span>
                        
                        @if($hw->attachment)
                        <span class="ml-auto w-5 h-5 rounded-full bg-orange-50 text-orange-500 flex items-center justify-center">
                            <i class="fa-solid fa-paperclip text-[8px]"></i>
                        </span>
                        @endif
                    </div>
                </div>

                {{-- Chevron --}}
                <div class="text-slate-300 group-hover:text-indigo-500 group-hover:translate-x-1 transition-all self-center flex-shrink-0">
                    <i class="fa-solid fa-chevron-right text-xs"></i>
                </div>
            </div>
        </a>
        @empty
        <div class="py-20 text-center bg-white rounded-3xl border border-dashed border-slate-200">
            <div class="w-16 h-16 bg-slate-50 rounded-full flex items-center justify-center mx-auto mb-3">
                <i class="fa-solid fa-inbox text-2xl text-slate-300"></i>
            </div>
            <p class="text-slate-500 font-bold text-sm">No homework found</p>
            <p class="text-slate-400 text-xs mt-1">
                            @if(request('from_date') || request('to_date') || request('subject_id')) Try clearing the filters. @else Check back later for new assignments. @endif
            </p>
        </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if($homeworks->hasPages())
    <div class="mt-6">{{ $homeworks->links() }}</div>
    @endif
</div>
@endsection