@extends("layouts.app")

@section("title", __("Subjects"))

@section("header")
<div class="flex justify-between items-center">
    <h2 class="font-semibold text-xl text-gray-800 leading-tight">
        {{ __("My Subjects") }}
    </h2>
</div>
@endsection

@section("content")
<div class="py-6">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        @if(session("success"))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg mb-6">
                {{ session("success") }}
            </div>
        @endif

        @if(session("error"))
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg mb-6">
                {{ session("error") }}
            </div>
        @endif

        <!-- System Subjects -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h3 class="text-xl font-semibold text-gray-900">{{ __("System Subjects") }}</h3>
                    <p class="text-sm text-gray-500 mt-1">{{ __("Pre-registered subjects available to all users") }}</p>
                </div>
                @role('superadmin')
                <button onclick="document.getElementById('generateAiSubjectModal').classList.remove('hidden')"
                        class="inline-flex items-center px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700 transition">
                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                    </svg>
                    {{ __("Generate with AI") }}
                </button>
                @endrole
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                @forelse($systemSubjects as $subject)
                    @php
                        $userSubject = $subject->userSubjects->first();
                    @endphp
                    <div class="border border-gray-200 rounded-lg p-5 hover:shadow-md transition">
                            <div class="flex items-start justify-between mb-3">
                                <h4 class="font-semibold text-gray-900">{{ $subject->name }}</h4>
                                <div class="flex items-center gap-2">
                                    <button onclick="openEditSystemSubjectModal({{ $subject->id }}, '{{ addslashes($subject->name) }}', '{{ addslashes($subject->description ?? '') }}', '{{ $subject->message_type ?? '' }}', '{{ addslashes($subject->custom_instructions ?? '') }}', {{ $subject->is_active ? 'true' : 'false' }})"
                                            class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
                                        {{ __("Edit") }}
                                    </button>
                                    <form action="{{ route("admin.subjects.destroy", $subject) }}" method="POST" onsubmit="return confirm('{{ __("Are you sure?") }}')" class="inline">
                                        @csrf
                                        @method("DELETE")
                                        <button type="submit" class="text-xs text-red-600 hover:text-red-800 font-medium">
                                            {{ __("Delete") }}
                                        </button>
                                    </form>
                                    <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full font-medium">{{ __("System") }}</span>
                                </div>
                            </div>
                        @if($subject->description)
                            <p class="text-sm text-gray-600 mb-3">{{ $subject->description }}</p>
                        @endif
                        @if($subject->introduction)
                            <p class="text-xs text-gray-500 italic mb-3">{{ Str::limit($subject->introduction, 100) }}</p>
                        @endif

                        @if($userSubject)
                            <div class="mt-4 pt-3 border-t border-gray-100">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <span class="w-2 h-2 rounded-full {{ $userSubject->is_active ? 'bg-green-500' : 'bg-gray-300' }}"></span>
                                        <span class="text-sm {{ $userSubject->is_active ? 'text-green-700' : 'text-gray-500' }}">
                                            {{ $userSubject->is_active ? __("Active") : __("Inactive") }}
                                        </span>
                                    </div>
                                    <div class="flex gap-2">
                                        <button onclick="openEditScheduleModal({{ $userSubject->id }}, '{{ addslashes($userSubject->frequency) }}', {{ json_encode($userSubject->preferred_times ?? ['09:00']) }}, {{ json_encode($userSubject->weekdays ?? []) }}, '{{ $userSubject->insight_language ?? 'en' }}', {{ json_encode($userSubject->delivery_channels ?? ['dashboard']) }})"
                                                class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
                                            {{ __("Edit Schedule") }}
                                        </button>
                                        <form action="{{ route("admin.subjects.toggle", $userSubject) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="is_active" value="{{ $userSubject->is_active ? '0' : '1' }}">
                                            <button type="submit" class="text-xs {{ $userSubject->is_active ? 'text-red-600 hover:text-red-800' : 'text-green-600 hover:text-green-800' }} font-medium">
                                                {{ $userSubject->is_active ? __("Deactivate") : __("Activate") }}
                                            </button>
                                        </form>
                                        <form action="{{ route("admin.subjects.unsubscribe", $userSubject) }}" method="POST" onsubmit="return confirm('{{ __("Are you sure?") }}')">
                                            @csrf
                                            @method("DELETE")
                                            <button type="submit" class="text-xs text-red-600 hover:text-red-800 font-medium">
                                                {{ __("Unsubscribe") }}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                @if($userSubject->frequency)
                                    <div class="mt-2 text-xs text-gray-500">
                                        {{ ucfirst($userSubject->frequency) }}
                                        @if($userSubject->preferred_times)
                                            | {{ $userSubject->formatted_times }}
                                        @endif
                                        @if($userSubject->weekdays)
                                            | {{ implode(', ', array_map(function($day) {
                                                return ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'][$day] ?? $day;
                                            }, $userSubject->weekdays)) }}
                                        @endif
                                    </div>
                                @endif
                                <div class="mt-3 flex gap-2">
                                    <form action="{{ route("admin.subjects.send-insight", $subject) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="message_type" value="{{ $subject->message_type ?? 'insight' }}">
                                        <button type="submit" class="flex-1 text-xs bg-indigo-600 text-white px-3 py-1.5 rounded-lg hover:bg-indigo-700 transition font-medium">
                                            <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                            </svg>
                                            @php
                                                $label = match($subject->message_type) {
                                                    'language_lesson' => __('Send Lesson'),
                                                    'game_simulator' => __('Send Game'),
                                                    'technical_teaching' => __('Send Teaching'),
                                                    default => __('Send Insight'),
                                                };
                                            @endphp
                                            {{ $label }}
                                        </button>
                                    </form>
                                    <form action="{{ route("admin.subjects.send-introduction", $subject) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="flex-1 text-xs bg-green-600 text-white px-3 py-1.5 rounded-lg hover:bg-green-700 transition font-medium">
                                            <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                            </svg>
                                            {{ __("Introduction") }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        @else
                            <div class="mt-4 pt-3 border-t border-gray-100">
                                <button onclick="openSubscribeModal({{ $subject->id }}, '{{ addslashes($subject->name) }}')"
                                        class="w-full text-center text-sm bg-indigo-600 text-white px-3 py-2 rounded-lg hover:bg-indigo-700 transition font-medium">
                                    {{ __("Subscribe") }}
                                </button>
                            </div>
                        @endif
                    </div>
                @empty
                    <div class="col-span-full text-center py-8 text-gray-500">
                        {{ __("No system subjects available.") }}
                    </div>
                @endforelse
            </div>
        </div>

        <!-- My Custom Subjects -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6">
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h3 class="text-xl font-semibold text-gray-900">{{ __("My Custom Subjects") }}</h3>
                    <p class="text-sm text-gray-500 mt-1">{{ __("Subjects you created for your own learning") }}</p>
                </div>
                <div class="flex gap-2">
                    <button onclick="document.getElementById('generateAdminAiSubjectModal').classList.remove('hidden')"
                            class="inline-flex items-center px-4 py-2 bg-purple-600 text-white text-sm font-medium rounded-lg hover:bg-purple-700 transition">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                        {{ __("Generate with AI") }}
                    </button>
                    <button onclick="document.getElementById('createSubjectModal').classList.remove('hidden')"
                            class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition">
                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                        </svg>
                        {{ __("Create Subject") }}
                    </button>
                </div>
            </div>

            @if($mySubjects->count() > 0)
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    @foreach($mySubjects as $userSubject)
                        @php $subject = $userSubject->subject; @endphp
                        <div class="border border-gray-200 rounded-lg p-5 hover:shadow-md transition">
                            <div class="flex items-start justify-between mb-3">
                                <h4 class="font-semibold text-gray-900">{{ $subject->name }}</h4>
                                <div class="flex items-center gap-2">
                                    <button onclick="openEditSystemSubjectModal({{ $subject->id }}, '{{ addslashes($subject->name) }}', '{{ addslashes($subject->description ?? '') }}', '{{ $subject->message_type ?? '' }}', '{{ addslashes($subject->custom_instructions ?? '') }}', {{ $subject->is_active ? 'true' : 'false' }})"
                                            class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
                                        {{ __("Edit") }}
                                    </button>
                                    <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full font-medium">{{ __("Custom") }}</span>
                                </div>
                            </div>
                            @if($subject->description)
                                <p class="text-sm text-gray-600 mb-3">{{ $subject->description }}</p>
                            @endif
                            @if($subject->introduction)
                                <p class="text-xs text-gray-500 italic mb-3">{{ Str::limit($subject->introduction, 100) }}</p>
                            @endif
                            <div class="mt-4 pt-3 border-t border-gray-100">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center gap-2">
                                        <span class="w-2 h-2 rounded-full {{ $userSubject->is_active ? 'bg-green-500' : 'bg-gray-300' }}"></span>
                                        <span class="text-sm {{ $userSubject->is_active ? 'text-green-700' : 'text-gray-500' }}">
                                            {{ $userSubject->is_active ? __("Active") : __("Inactive") }}
                                        </span>
                                    </div>
                                    <div class="flex gap-2">
                                        <button onclick="openEditScheduleModal({{ $userSubject->id }}, '{{ addslashes($userSubject->frequency) }}', {{ json_encode($userSubject->preferred_times ?? ['09:00']) }}, {{ json_encode($userSubject->weekdays ?? []) }}, '{{ $userSubject->insight_language ?? 'en' }}')"
                                                class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
                                            {{ __("Edit Schedule") }}
                                        </button>
                                        <form action="{{ route("admin.subjects.toggle", $userSubject) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="is_active" value="{{ $userSubject->is_active ? '0' : '1' }}">
                                            <button type="submit" class="text-xs {{ $userSubject->is_active ? 'text-red-600 hover:text-red-800' : 'text-green-600 hover:text-green-800' }} font-medium">
                                                {{ $userSubject->is_active ? __("Deactivate") : __("Activate") }}
                                            </button>
                                        </form>
                                        <form action="{{ route("admin.subjects.destroy", $subject) }}" method="POST" onsubmit="return confirm('{{ __("Are you sure?") }}')">
                                            @csrf
                                            @method("DELETE")
                                            <button type="submit" class="text-xs text-red-600 hover:text-red-800 font-medium">
                                                {{ __("Delete") }}
                                            </button>
                                        </form>
                                    </div>
                                </div>
                                @if($userSubject->frequency)
                                    <div class="mt-2 text-xs text-gray-500">
                                        {{ ucfirst($userSubject->frequency) }}
                                        @if($userSubject->preferred_times)
                                            | {{ $userSubject->formatted_times }}
                                        @endif
                                        @if($userSubject->weekdays)
                                            | {{ implode(', ', array_map(function($day) {
                                                return ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb'][$day] ?? $day;
                                            }, $userSubject->weekdays)) }}
                                        @endif
                                    </div>
                                @endif
                                <div class="mt-3 flex gap-2">
                                    <form action="{{ route("admin.subjects.send-insight", $subject) }}" method="POST">
                                        @csrf
                                        <input type="hidden" name="message_type" value="{{ $subject->message_type ?? 'insight' }}">
                                        <button type="submit" class="flex-1 text-xs bg-indigo-600 text-white px-3 py-1.5 rounded-lg hover:bg-indigo-700 transition font-medium">
                                            <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                            </svg>
                                            @php
                                                $label = match($subject->message_type) {
                                                    'language_lesson' => __('Send Lesson'),
                                                    'game_simulator' => __('Send Game'),
                                                    'technical_teaching' => __('Send Teaching'),
                                                    default => __('Send Insight'),
                                                };
                                            @endphp
                                            {{ $label }}
                                        </button>
                                    </form>
                                    <form action="{{ route("admin.subjects.send-introduction", $subject) }}" method="POST">
                                        @csrf
                                        <button type="submit" class="flex-1 text-xs bg-green-600 text-white px-3 py-1.5 rounded-lg hover:bg-green-700 transition font-medium">
                                            <svg class="w-3 h-3 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                            </svg>
                                            {{ __("Introduction") }}
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                <div class="text-center py-8">
                    <svg class="w-12 h-12 text-gray-300 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                    </svg>
                    <p class="text-gray-500">{{ __("You have not created any custom subjects yet.") }}</p>
                    <button onclick="document.getElementById('createSubjectModal').classList.remove('hidden')"
                            class="mt-3 text-indigo-600 hover:text-indigo-800 text-sm font-medium">
                        {{ __("Create your first subject") }} →
                    </button>
                </div>
            @endif
        </div>
    </div>
</div>

<!-- Subscribe Modal -->
<div id="subscribeModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">{{ __("Subscribe to Subject") }}</h3>
                <button onclick="closeSubscribeModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form id="subscribeForm" method="POST">
                @csrf
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __("Subject") }}</label>
                    <p id="subscribeSubjectName" class="text-gray-900 font-medium"></p>
                </div>
                <div class="mb-4">
                    <label for="frequency" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Frequency") }}</label>
                    <select name="frequency" id="frequency" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="daily">{{ __("Daily") }}</option>
                        <option value="weekly">{{ __("Weekly") }}</option>
                        <option value="biweekly">{{ __("Biweekly") }}</option>
                        <option value="monthly">{{ __("Monthly") }}</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __("Preferred Times") }}</label>
                    <p class="text-xs text-gray-500 mb-2">{{ __("Add one or more times for insight delivery") }}</p>
                    <div id="timesContainer">
                        <div class="flex items-center gap-2 mb-2">
                            <input type="time" name="preferred_times[]" value="09:00" required
                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <button type="button" onclick="addTimeField()"
                                    class="px-3 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition text-sm font-medium">
                                +
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __("Days of Week") }}</label>
                    <div class="grid grid-cols-7 gap-2">
                        @foreach([['value' => 1, 'label' => 'Seg'], ['value' => 2, 'label' => 'Ter'], ['value' => 3, 'label' => 'Qua'], ['value' => 4, 'label' => 'Qui'], ['value' => 5, 'label' => 'Sex'], ['value' => 6, 'label' => 'Sáb'], ['value' => 0, 'label' => 'Dom']] as $day)
                            <label class="flex flex-col items-center">
                                <input type="checkbox" name="weekdays[]" value="{{ $day['value'] }}"
                                       class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                <span class="text-xs text-gray-500 mt-1">{{ $day['label'] }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="mb-4">
                    <label for="insight_language" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Insight Language") }}</label>
                    <select name="insight_language" id="insight_language" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="pt_BR">🇧🇷 {{ __("Português (Brasil)") }}</option>
                        <option value="en" selected>🇺🇸 {{ __("English") }}</option>
                        <option value="es">🇪🇸 {{ __("Español") }}</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __("Delivery Channels") }}</label>
                    <p class="text-xs text-gray-500 mb-2">{{ __("Choose where to receive insights") }}</p>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="checkbox" name="delivery_channels[]" value="dashboard" checked disabled
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                            <span class="ml-2 text-sm text-gray-700">{{ __("Dashboard") }} <span class="text-xs text-gray-400">({{ __("always enabled") }})</span></span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" name="delivery_channels[]" value="telegram"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-700">{{ __("Telegram Bot") }}</span>
                        </label>
                    </div>
                </div>
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="closeSubscribeModal()"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                        {{ __("Cancel") }}
                    </button>
                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium">
                        {{ __("Subscribe") }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Schedule Modal -->
<div id="editScheduleModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">{{ __("Edit Schedule") }}</h3>
                <button onclick="closeEditScheduleModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form id="editScheduleForm" method="POST">
                @csrf
                @method("PUT")
                <div class="mb-4">
                    <label for="edit_frequency" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Frequency") }}</label>
                    <select name="frequency" id="edit_frequency" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="daily">{{ __("Daily") }}</option>
                        <option value="weekly">{{ __("Weekly") }}</option>
                        <option value="biweekly">{{ __("Biweekly") }}</option>
                        <option value="monthly">{{ __("Monthly") }}</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __("Preferred Times") }}</label>
                    <p class="text-xs text-gray-500 mb-2">{{ __("Add one or more times for insight delivery") }}</p>
                    <div id="editTimesContainer">
                        <div class="flex items-center gap-2 mb-2">
                            <input type="time" name="preferred_times[]" value="09:00" required
                                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                            <button type="button" onclick="addEditTimeField()"
                                    class="px-3 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition text-sm font-medium">
                                +
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __("Days of Week") }}</label>
                    <div class="grid grid-cols-7 gap-2">
                        @foreach([['value' => 1, 'label' => 'Seg'], ['value' => 2, 'label' => 'Ter'], ['value' => 3, 'label' => 'Qua'], ['value' => 4, 'label' => 'Qui'], ['value' => 5, 'label' => 'Sex'], ['value' => 6, 'label' => 'Sáb'], ['value' => 0, 'label' => 'Dom']] as $day)
                            <label class="flex flex-col items-center">
                                <input type="checkbox" name="weekdays[]" value="{{ $day['value'] }}"
                                       class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 edit-weekday">
                                <span class="text-xs text-gray-500 mt-1">{{ $day['label'] }}</span>
                            </label>
                        @endforeach
                    </div>
                </div>
                <div class="mb-4">
                    <label for="edit_insight_language" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Insight Language") }}</label>
                    <select name="insight_language" id="edit_insight_language" required
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="pt_BR">🇧🇷 {{ __("Português (Brasil)") }}</option>
                        <option value="en">🇺🇸 {{ __("English") }}</option>
                        <option value="es">🇪🇸 {{ __("Español") }}</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __("Delivery Channels") }}</label>
                    <p class="text-xs text-gray-500 mb-2">{{ __("Choose where to receive insights") }}</p>
                    <div class="space-y-2">
                        <label class="flex items-center">
                            <input type="checkbox" name="delivery_channels[]" value="dashboard" checked disabled
                                   class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 edit-channel-dashboard">
                            <span class="ml-2 text-sm text-gray-700">{{ __("Dashboard") }} <span class="text-xs text-gray-400">({{ __("always enabled") }})</span></span>
                        </label>
                        <label class="flex items-center">
                            <input type="checkbox" name="delivery_channels[]" value="telegram"
                                   class="rounded border-gray-300 text-blue-600 focus:ring-blue-500 edit-channel-telegram">
                            <span class="ml-2 text-sm text-gray-700">{{ __("Telegram Bot") }}</span>
                        </label>
                    </div>
                </div>
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="closeEditScheduleModal()"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                        {{ __("Cancel") }}
                    </button>
                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium">
                        {{ __("Update Schedule") }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Create Subject Modal -->
<div id="createSubjectModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">{{ __("Create New Subject") }}</h3>
                <button onclick="document.getElementById('createSubjectModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form action="{{ route("admin.subjects.store") }}" method="POST">
                @csrf
                <div class="mb-4">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Name") }} *</label>
                    <input type="text" name="name" id="name" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           placeholder="{{ __("e.g., Aprendizado de Python") }}">
                </div>
                <div class="mb-4">
                    <label for="description" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Description") }}</label>
                    <textarea name="description" id="description" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                              placeholder="{{ __("Brief description of the subject") }}"></textarea>
                </div>
                <div class="mb-4">
                    <label for="introduction" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Introduction") }}</label>
                    <textarea name="introduction" id="introduction" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                              placeholder="{{ __("Detailed introduction to the subject for AI context") }}"></textarea>
                </div>
                <div class="mb-4">
                    <label for="message_type" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Message Type") }}</label>
                    <select name="message_type" id="message_type"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="">{{ __("Default") }}</option>
                        <option value="insight">Insight</option>
                        <option value="language_lesson">Language Lesson</option>
                        <option value="game_simulator">Game / Simulator</option>
                        <option value="technical_teaching">Technical Teaching</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="custom_instructions" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Custom Instructions (optional)") }}</label>
                    <textarea name="custom_instructions" id="custom_instructions" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                              placeholder="{{ __("Additional instructions for the AI...") }}"></textarea>
                </div>
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="document.getElementById('createSubjectModal').classList.add('hidden')"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                        {{ __("Cancel") }}
                    </button>
                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium">
                        {{ __("Create") }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit System Subject Modal -->
<div id="editSystemSubjectModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">{{ __("Edit System Subject") }}</h3>
                <button onclick="document.getElementById('editSystemSubjectModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form id="editSystemSubjectForm" method="POST">
                @csrf
                @method("PUT")
                <div class="mb-4">
                    <label for="edit_system_name" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Name") }} *</label>
                    <input type="text" name="name" id="edit_system_name" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                </div>
                <div class="mb-4">
                    <label for="edit_system_description" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Description") }}</label>
                    <textarea name="description" id="edit_system_description" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
                </div>
                <div class="mb-4">
                    <label for="edit_system_message_type" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Message Type") }}</label>
                    <select name="message_type" id="edit_system_message_type"
                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        <option value="">{{ __("Default") }}</option>
                        <option value="insight">Insight</option>
                        <option value="language_lesson">Language Lesson</option>
                        <option value="game_simulator">Game / Simulator</option>
                        <option value="technical_teaching">Technical Teaching</option>
                    </select>
                </div>
                <div class="mb-4">
                    <label for="edit_system_custom_instructions" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Custom Instructions (optional)") }}</label>
                    <textarea name="custom_instructions" id="edit_system_custom_instructions" rows="3"
                              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
                </div>
                <div class="mb-4">
                    <label class="flex items-center">
                        <input type="checkbox" name="is_active" id="edit_system_is_active" value="1"
                               class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500">
                        <span class="ml-2 text-sm text-gray-700">{{ __("Active") }}</span>
                    </label>
                </div>
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="document.getElementById('editSystemSubjectModal').classList.add('hidden')"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                        {{ __("Cancel") }}
                    </button>
                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition font-medium">
                        {{ __("Update") }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Generate AI System Subject Modal -->
<div id="generateAiSubjectModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">{{ __("Create System Subject with AI") }}</h3>
                <button onclick="document.getElementById('generateAiSubjectModal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form id="generateAiSubjectForm" method="POST" action="{{ route('superadmin.system.subjects.generateAi') }}">
                @csrf
                <div class="mb-4">
                    <label for="ai_theme" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Theme / Topic") }}</label>
                    <input type="text" name="theme" id="ai_theme" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           placeholder="{{ __("e.g., Gurus dos Negócios e Riqueza") }}">
                </div>
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="document.getElementById('generateAiSubjectModal').classList.add('hidden')"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                        {{ __("Cancel") }}
                    </button>
                    <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition font-medium">
                        {{ __("Generate with AI") }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push("scripts")
<script>
function openSubscribeModal(subjectId, subjectName) {
    document.getElementById('subscribeSubjectName').textContent = subjectName;
    document.getElementById('subscribeForm').action = '{{ url("admin/subjects") }}/' + subjectId + '/subscribe';
    // Reset times container
    document.getElementById('timesContainer').innerHTML = `
        <div class="flex items-center gap-2 mb-2">
            <input type="time" name="preferred_times[]" value="09:00" required
                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <button type="button" onclick="addTimeField()"
                    class="px-3 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition text-sm font-medium">
                +
            </button>
        </div>
    `;
    document.getElementById('subscribeModal').classList.remove('hidden');
}

function addTimeField() {
    const container = document.getElementById('timesContainer');
    const div = document.createElement('div');
    div.className = 'flex items-center gap-2 mb-2';
    div.innerHTML = `
        <input type="time" name="preferred_times[]" value="09:00" required
               class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <button type="button" onclick="this.parentElement.remove()"
                class="px-3 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition text-sm font-medium">
            ×
        </button>
    `;
    container.appendChild(div);
}

function openEditScheduleModal(id, frequency, times, weekdays, language, channels) {
    // Set form action
    document.getElementById('editScheduleForm').action = '{{ url("admin/subjects") }}/' + id + '/schedule';
    
    // Set frequency
    document.getElementById('edit_frequency').value = frequency;
    
    // Set language
    if (document.getElementById('edit_insight_language')) {
        document.getElementById('edit_insight_language').value = language || 'en';
    }
    
    // Build times container
    const container = document.getElementById('editTimesContainer');
    container.innerHTML = '';
    
    if (times && times.length > 0) {
        times.forEach(function(time, index) {
            const div = document.createElement('div');
            div.className = 'flex items-center gap-2 mb-2';
            const timeVal = typeof time === 'string' ? time.substring(0, 5) : '09:00';
            div.innerHTML = `
                <input type="time" name="preferred_times[]" value="${timeVal}" required
                       class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                ${index === 0
                    ? `<button type="button" onclick="addEditTimeField()"
                            class="px-3 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition text-sm font-medium">+</button>`
                    : `<button type="button" onclick="this.parentElement.remove()"
                            class="px-3 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition text-sm font-medium">×</button>`
                }
            `;
            container.appendChild(div);
        });
    } else {
        const div = document.createElement('div');
        div.className = 'flex items-center gap-2 mb-2';
        div.innerHTML = `
            <input type="time" name="preferred_times[]" value="09:00" required
                   class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <button type="button" onclick="addEditTimeField()"
                    class="px-3 py-2 bg-green-100 text-green-700 rounded-lg hover:bg-green-200 transition text-sm font-medium">+</button>
        `;
        container.appendChild(div);
    }
    
    // Set weekdays (compare as strings to match DB storage format)
    document.querySelectorAll('.edit-weekday').forEach(function(cb) {
        cb.checked = weekdays && weekdays.some(function(d) {
            return String(d) === cb.value;
        });
    });
    
    // Set delivery channels (default to ['dashboard'] if not set)
    var channelsArr = channels;
    if (!channelsArr || !Array.isArray(channelsArr) || channelsArr.length === 0) {
        channelsArr = ['dashboard'];
    }
    document.querySelectorAll('.edit-channel-telegram').forEach(function(cb) {
        cb.checked = channelsArr.includes('telegram');
    });
    
    document.getElementById('editScheduleModal').classList.remove('hidden');
}

function addEditTimeField() {
    const container = document.getElementById('editTimesContainer');
    const div = document.createElement('div');
    div.className = 'flex items-center gap-2 mb-2';
    div.innerHTML = `
        <input type="time" name="preferred_times[]" value="09:00" required
               class="flex-1 px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
        <button type="button" onclick="this.parentElement.remove()"
                class="px-3 py-2 bg-red-100 text-red-700 rounded-lg hover:bg-red-200 transition text-sm font-medium">
            ×
        </button>
    `;
    container.appendChild(div);
}

function closeEditScheduleModal() {
    document.getElementById('editScheduleModal').classList.add('hidden');
}

function closeSubscribeModal() {
    document.getElementById('subscribeModal').classList.add('hidden');
}

// Close modals on Escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        document.getElementById('subscribeModal').classList.add('hidden');
        document.getElementById('createSubjectModal').classList.add('hidden');
        document.getElementById('editScheduleModal').classList.add('hidden');
        document.getElementById('editSystemSubjectModal').classList.add('hidden');
    }
});

function openEditSystemSubjectModal(id, name, description, messageType, customInstructions, isActive) {
    document.getElementById('edit_system_name').value = name;
    document.getElementById('edit_system_description').value = description;
    document.getElementById('edit_system_message_type').value = messageType;
    document.getElementById('edit_system_custom_instructions').value = customInstructions;
    document.getElementById('edit_system_is_active').checked = isActive;
    document.getElementById('editSystemSubjectForm').action = '{{ url("admin/subjects") }}/' + id;
    document.getElementById('editSystemSubjectModal').classList.remove('hidden');
}

function closeGenerateAdminAiSubjectModal() {
    document.getElementById('generateAdminAiSubjectModal').classList.add('hidden');
}
</script>
@endpush

<!-- Generate AI Subject Modal -->
<div id="generateAdminAiSubjectModal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50">
    <div class="relative top-20 mx-auto p-5 border w-full max-w-md shadow-lg rounded-xl bg-white">
        <div class="mt-3">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-gray-900">{{ __("Generate Subject with AI") }}</h3>
                <button onclick="closeGenerateAdminAiSubjectModal()" class="text-gray-400 hover:text-gray-600">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>
            <form method="POST" action="{{ route('admin.subjects.generateAi') }}">
                @csrf
                <div class="mb-4">
                    <label for="admin_ai_theme" class="block text-sm font-medium text-gray-700 mb-2">{{ __("Theme / Topic") }}</label>
                    <input type="text" name="theme" id="admin_ai_theme" required
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
                           placeholder="{{ __("e.g., Marketing Digital e Vendas") }}">
                </div>
                <div class="flex justify-end gap-2 mt-6">
                    <button type="button" onclick="closeGenerateAdminAiSubjectModal()"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition font-medium">
                        {{ __("Cancel") }}
                    </button>
                    <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition font-medium">
                        {{ __("Generate with AI") }}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>