@extends('layouts.public')

@section('title', $section->name . ' | ' . $siteSettings['name'])

@section('content')
<div class="py-16 bg-gray-50/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Breadcrumbs -->
        <nav class="flex mb-8 text-xs font-medium text-gray-500 uppercase tracking-wider" aria-label="Breadcrumb">
            <ol class="inline-flex items-center space-x-1 md:space-x-3">
                <li class="inline-flex items-center">
                    <a href="{{ route('home') }}" class="hover:text-accent transition-colors">Home</a>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                        <a href="{{ route('curricula.index') }}" class="hover:text-accent transition-colors">Syllabuses</a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                        <a href="{{ route('curricula.show', $section->subject->grade->curriculum->slug) }}" class="hover:text-accent transition-colors">{{ $section->subject->grade->curriculum->name }}</a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                        <a href="{{ route('subject.show', $section->subject->slug) }}" class="hover:text-accent transition-colors">{{ $section->subject->name }}</a>
                    </div>
                </li>
                <li>
                    <div class="flex items-center">
                        <svg class="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
                        <span class="text-gray-400">{{ $section->name }}</span>
                    </div>
                </li>
            </ol>
        </nav>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-12">
            
            <!-- Left Column: Details & Schedule -->
            <div class="lg:col-span-8 space-y-12">
                
                <!-- Main Header Card -->
                <div class="bg-white border border-gray-100 rounded-3xl p-8 shadow-sm space-y-6">
                    <div class="flex items-center space-x-3">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium uppercase tracking-wider {{ $section->isOneToOne() ? 'bg-cyan-50 text-cyan-700' : 'bg-indigo-50 text-indigo-700' }}">
                            {{ $section->isOneToOne() ? '1-to-1 Private Session' : 'Group Class' }}
                        </span>
                        @if($section->isFull())
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-50 text-red-700">
                                Class Full
                            </span>
                        @else
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-50 text-emerald-700">
                                Seats Available
                            </span>
                        @endif
                    </div>

                    <div class="space-y-3">
                        <h1 class="font-display text-3xl font-extrabold text-gray-900 leading-tight" style="color: var(--primary);">
                            {{ $section->name }}
                        </h1>
                        <p class="text-gray-600 font-light text-base leading-relaxed">
                            {{ $section->description ?? 'Join this academic coaching program consisting of comprehensive online sessions, syllabus revision worksheets, homework checking, and exam preparation.' }}
                        </p>
                    </div>

                    <!-- Meta specs -->
                    <div class="grid grid-cols-2 sm:grid-cols-3 gap-6 pt-6 border-t border-gray-100 text-sm">
                        <div>
                            <span class="block text-gray-400 font-light text-xs uppercase tracking-wider">Subject</span>
                            <span class="font-bold text-gray-800">{{ $section->subject->name }}</span>
                        </div>
                        <div>
                            <span class="block text-gray-400 font-light text-xs uppercase tracking-wider">Start Date</span>
                            <span class="font-bold text-gray-800">{{ $section->start_date ? \Carbon\Carbon::parse($section->start_date)->format('M d, Y') : 'Immediate' }}</span>
                        </div>
                        <div>
                            <span class="block text-gray-400 font-light text-xs uppercase tracking-wider">Max Capacity</span>
                            <span class="font-bold text-gray-800">{{ $section->isOneToOne() ? '1 Student' : "{$section->max_students} Students" }}</span>
                        </div>
                    </div>
                </div>

                <!-- Timetable Slots Card -->
                <div class="bg-white border border-gray-100 rounded-3xl p-8 shadow-sm space-y-6">
                    <h2 class="font-display text-xl font-bold text-gray-900" style="color: var(--primary);">Weekly Live Schedule</h2>
                    
                    @if($section->timetableSlots->isNotEmpty())
                        <div class="divide-y divide-gray-100">
                            @foreach($section->timetableSlots as $slot)
                                <div class="py-4 flex items-center justify-between first:pt-0 last:pb-0">
                                    <div class="flex items-center space-x-4">
                                        <div class="h-10 w-10 rounded-xl bg-accent/10 text-accent flex items-center justify-center font-bold text-xs" style="color: var(--accent); background-color: rgba(201, 151, 26, 0.1);">
                                            {{ substr(['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][$slot->day_of_week] ?? 'Day', 0, 3) }}
                                        </div>
                                        <div>
                                            <h4 class="text-sm font-bold text-gray-800">
                                                {{ ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'][$slot->day_of_week] ?? 'Weekly Day' }}
                                            </h4>
                                            <p class="text-xs text-gray-400 font-light">Recurring online lecture</p>
                                        </div>
                                    </div>
                                    <div class="text-right">
                                        <span class="text-sm font-bold text-gray-700">
                                            {{ \Carbon\Carbon::parse($slot->start_time)->format('h:i A') }} - {{ \Carbon\Carbon::parse($slot->end_time)->format('h:i A') }}
                                        </span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="py-4 text-xs text-gray-400 italic">
                            No group lectures scheduled. For private classes, schedule is booked dynamically inside the portal.
                        </div>
                    @endif
                </div>

                <!-- Teacher Card -->
                @if($section->teacher)
                    <div class="bg-white border border-gray-100 rounded-3xl p-8 shadow-sm space-y-6">
                        <h2 class="font-display text-xl font-bold text-gray-900" style="color: var(--primary);">Your Instructor</h2>
                        
                        <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
                            <div class="h-20 w-20 rounded-2xl overflow-hidden bg-gray-200 flex-shrink-0">
                                @if($section->teacher->user->profile_photo_path)
                                    <img src="{{ asset('storage/' . $section->teacher->user->profile_photo_path) }}" alt="{{ $section->teacher->user->name }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-white font-bold text-2xl uppercase" style="background: linear-gradient(135deg, var(--primary), var(--accent));">
                                        {{ substr($section->teacher->user->name ?? 'T', 0, 2) }}
                                    </div>
                                @endif
                            </div>
                            
                            <div class="space-y-1.5">
                                <h3 class="text-lg font-bold text-gray-900">{{ $section->teacher->user->name }}</h3>
                                <p class="text-xs font-semibold text-accent uppercase tracking-wider" style="color: var(--accent);">{{ $section->teacher->specialization }} &bull; {{ $section->teacher->experience_years }} Years Exp</p>
                                <p class="text-sm text-gray-500 font-light leading-relaxed">
                                    {{ $section->teacher->bio ?? 'Certified education expert with deep syllabus tracking and student improvement background.' }}
                                </p>
                            </div>
                        </div>
                    </div>
                @endif

            </div>

            <!-- Right Column: Enrollment Card -->
            <div class="lg:col-span-4">
                <div class="bg-white border border-gray-100 rounded-3xl p-8 shadow-md sticky top-28 space-y-8">
                    <h2 class="font-display text-xl font-bold text-gray-900" style="color: var(--primary);">Secure Your Seat</h2>
                    
                    @auth
                        @if(auth()->user()->isStudent())
                            <form action="{{ route('sections.enroll', $section->id) }}" method="POST" class="space-y-6">
                                @csrf
                                
                                <div class="space-y-4">
                                    <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider">Choose a Pricing Option</label>
                                    
                                    @forelse($section->activePricingPlans as $plan)
                                        <label class="block border border-gray-100 rounded-2xl p-4 hover:border-accent/50 cursor-pointer transition-colors relative">
                                            <input type="radio" name="pricing_plan_id" value="{{ $plan->id }}" class="absolute right-4 top-5 text-accent focus:ring-accent" required {{ $loop->first ? 'checked' : '' }}>
                                            <div class="pr-8">
                                                <span class="block text-sm font-bold text-gray-800">{{ $plan->name }}</span>
                                                <span class="block text-xs text-gray-400 font-light mt-0.5 capitalize">{{ $plan->pricing_type }} payment</span>
                                                <span class="block text-lg font-black text-primary mt-2" style="color: var(--primary);">${{ number_format($plan->amount, 2) }}</span>
                                                @if($plan->pricing_type === 'installment')
                                                    <span class="block text-[10px] text-accent font-semibold mt-1">
                                                        {{ $plan->installment_count }} payments every {{ $plan->installment_interval_days }} days
                                                    </span>
                                                @endif
                                            </div>
                                        </label>
                                    @empty
                                        <p class="text-xs text-gray-400 italic">No standard plans defined. Contact support to schedule.</p>
                                    @endforelse
                                </div>

                                @if($section->isFull())
                                    <button type="button" class="w-full py-4 bg-gray-300 text-gray-500 rounded-full text-xs font-bold uppercase tracking-wider cursor-not-allowed" disabled>
                                        Classroom Full
                                    </button>
                                @else
                                    <button type="submit" class="w-full py-4 text-white rounded-full text-xs font-bold uppercase tracking-wider shadow-lg hover:shadow-xl transition-all hover:-translate-y-0.5" style="background-color: var(--accent);">
                                        Enroll Now
                                    </button>
                                @endif
                                
                                <p class="text-[10px] text-gray-400 font-light text-center leading-relaxed">
                                    Clicking Enroll will create a pending registration. You will be redirected to complete payment or upload transfer receipts.
                                </p>
                            </form>
                        @else
                            <div class="p-4 bg-yellow-50 rounded-2xl border border-yellow-100 text-center space-y-3">
                                <p class="text-xs text-yellow-800 font-medium">You are logged in as a {{ auth()->user()->roles->first()->name ?? 'user' }}. Only student accounts can enroll in classrooms.</p>
                                <a href="{{ route('dashboard') }}" class="inline-block text-xs font-bold text-accent hover:text-accent/80 transition-colors uppercase tracking-wider">Go to Portal</a>
                            </div>
                        @endif
                    @else
                        <!-- Guest View -->
                        <div class="space-y-6">
                            <p class="text-sm text-gray-500 font-light leading-relaxed">
                                Access live schedules, enroll in pricing terms, and unlock dashboard materials by logging in.
                            </p>
                            
                            <div class="grid grid-cols-1 gap-3">
                                <a href="{{ route('login') }}?redirect={{ urlencode(request()->fullUrl()) }}" class="w-full text-center py-4 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-full text-xs font-bold uppercase tracking-wider transition-colors">
                                    Login to Enroll
                                </a>
                                <a href="{{ route('register') }}" class="w-full text-center py-4 text-white rounded-full text-xs font-bold uppercase tracking-wider shadow-md transition-all hover:-translate-y-0.5" style="background-color: var(--accent);">
                                    Create Student Account
                                </a>
                            </div>
                        </div>
                    @endauth

                </div>
            </div>

        </div>

    </div>
</div>
@endsection