@extends('Component.layout')

@php
    $isEdit = isset($class);
    $title = $isEdit ? 'Edit Class: ' . $class->name : 'Create New Class';
@endphp

@section('title', $title . ' - Iqra Super Admin Portal')
@section('breadcrumb', 'Academic Setup / Classes / ' . ($isEdit ? 'Edit' : 'New'))

@section('content')
<div class="space-y-6 max-w-4xl mx-auto">
    <div class="flex items-center gap-4">
        <a href="{{ route('superadmin.classes.index') }}" class="w-10 h-10 bg-white border border-slate-200 rounded-xl flex items-center justify-center text-slate-500 hover:text-indigo-600 hover:border-indigo-100 hover:bg-indigo-50 transition-all shadow-sm">
            <svg class="w-5 h-5 fill-none stroke-current" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        </a>
        <div>
            <h2 class="text-xl font-extrabold text-slate-800 tracking-tight">{{ $title }}</h2>
            <p class="text-[11px] font-medium text-slate-500 mt-1">Configure the class details, assign a teacher, and add sections</p>
        </div>
    </div>

    @if($errors->any())
    <div class="bg-red-50 border border-red-100 text-red-700 p-4 rounded-2xl text-xs font-semibold flex items-start gap-3">
        <svg class="w-4 h-4 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        <ul class="list-disc list-inside space-y-1">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
        <div class="p-8">
            <form action="{{ $isEdit ? route('superadmin.classes.update', $class->id) : route('superadmin.classes.store') }}" method="POST" class="space-y-8">
                @csrf
                @if($isEdit)
                    @method('PUT')
                @endif
                
                <!-- Basic Info -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="col-span-2">
                        <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider mb-2">Class Name <span class="text-red-500">*</span></label>
                        <input type="text" name="name" value="{{ old('name', $isEdit ? $class->name : '') }}" required placeholder="e.g. Class 1"
                               class="w-full px-4 py-3 rounded-xl border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 outline-none transition-all text-sm text-slate-800 font-semibold placeholder:text-slate-400">
                    </div>
                </div>

                <!-- Sections -->
                <div>
                    <div class="flex items-center justify-between mb-4">
                        <div>
                            <label class="block text-[11px] font-bold text-slate-600 uppercase tracking-wider">Sections & Teachers</label>
                            <p class="text-[10px] text-slate-400 mt-0.5">Add sections and assign a specific teacher to each section.</p>
                        </div>
                        <button type="button" id="add-section-btn" class="px-3 py-1.5 bg-indigo-50 text-indigo-600 hover:bg-indigo-100 font-bold text-[10px] uppercase tracking-wider rounded-lg transition-colors flex items-center gap-1.5">
                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"></path></svg>
                            Add Section
                        </button>
                    </div>
                    
                    <div id="sections-container" class="space-y-3">
                        @if($isEdit && $class->sections->count() > 0)
                            @foreach($class->sections as $section)
                                <div class="section-item flex flex-col md:flex-row md:items-center gap-3">
                                    <input type="text" name="sections[{{ $section->id }}][name]" value="{{ $section->name }}" placeholder="e.g. A" required class="w-full md:w-1/3 px-4 py-2 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 outline-none text-sm font-bold text-slate-800">
                                    <select name="sections[{{ $section->id }}][teacher_id]" class="w-full md:w-2/3 px-4 py-2 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 outline-none text-sm text-slate-800 font-semibold">
                                        <option value="">-- Unassigned --</option>
                                        @foreach($teachers as $teacher)
                                            <option value="{{ $teacher->id }}" {{ $section->teacher_id == $teacher->id ? 'selected' : '' }}>
                                                {{ $teacher->name }} ({{ $teacher->mobile_number }})
                                            </option>
                                        @endforeach
                                    </select>
                                    <button type="button" class="remove-section-btn w-10 h-10 shrink-0 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 hover:text-red-600 flex items-center justify-center transition-colors">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    </button>
                                </div>
                            @endforeach
                        @else
                            <div class="section-item flex flex-col md:flex-row md:items-center gap-3">
                                <input type="text" name="sections[new_0][name]" placeholder="e.g. A" class="w-full md:w-1/3 px-4 py-2 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 outline-none text-sm font-bold text-slate-800">
                                <select name="sections[new_0][teacher_id]" class="w-full md:w-2/3 px-4 py-2 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 outline-none text-sm text-slate-800 font-semibold">
                                    <option value="">-- Unassigned --</option>
                                    @foreach($teachers as $teacher)
                                        <option value="{{ $teacher->id }}">{{ $teacher->name }} ({{ $teacher->mobile_number }})</option>
                                    @endforeach
                                </select>
                                <button type="button" class="remove-section-btn w-10 h-10 shrink-0 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 hover:text-red-600 flex items-center justify-center transition-colors">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                </button>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="pt-4 border-t border-slate-100 flex items-center justify-end gap-3">
                    <a href="{{ route('superadmin.classes.index') }}" class="px-5 py-2.5 text-xs font-bold text-slate-500 hover:text-slate-800 transition-colors">Cancel</a>
                    <button type="submit" class="px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs rounded-xl transition-all shadow-md shadow-indigo-600/20 flex items-center gap-2">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                        {{ $isEdit ? 'Save Changes' : 'Create Class' }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('sections-container');
    const addBtn = document.getElementById('add-section-btn');
    
    // Store teachers list as a string
    const teacherOptions = `
        <option value="">-- Unassigned --</option>
        @foreach($teachers as $teacher)
            <option value="{{ $teacher->id }}">{{ addslashes($teacher->name) }}</option>
        @endforeach
    `;

    addBtn.addEventListener('click', function() {
        const timestamp = Date.now();
        const item = document.createElement('div');
        item.className = 'section-item flex flex-col md:flex-row md:items-center gap-3 mt-3';
        item.innerHTML = `
            <input type="text" name="sections[new_${timestamp}][name]" placeholder="e.g. B" required class="w-full md:w-1/3 px-4 py-2 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 outline-none text-sm font-bold text-slate-800">
            <select name="sections[new_${timestamp}][teacher_id]" class="w-full md:w-2/3 px-4 py-2 rounded-lg border border-slate-200 bg-slate-50 focus:bg-white focus:border-indigo-500 outline-none text-sm text-slate-800 font-semibold">
                ${teacherOptions}
            </select>
            <button type="button" class="remove-section-btn w-10 h-10 shrink-0 rounded-lg bg-red-50 text-red-500 hover:bg-red-100 hover:text-red-600 flex items-center justify-center transition-colors">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            </button>
        `;
        container.appendChild(item);
    });

    container.addEventListener('click', function(e) {
        if (e.target.closest('.remove-section-btn')) {
            e.target.closest('.section-item').remove();
        }
    });
});
</script>
@endsection