{{-- resources/views/siswa/parent-connection.blade.php --}}
@extends('layouts.app')

@section('title', 'Koneksi Orang Tua - LearnMood')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 pb-16 md:pb-0">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 md:p-6">
        <h2 class="text-lg md:text-xl font-semibold text-gray-800 mb-4 md:mb-6">🔗 Koneksi Orang Tua</h2>

        @if($connection)
            <!-- Sudah terhubung -->
            <div class="bg-green-50 border border-green-200 rounded-lg p-4 md:p-6 text-center">
                <div class="w-12 h-12 md:w-16 md:h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
                    <svg class="w-6 h-6 md:w-8 md:h-8 text-green-600" 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>
                </div>
                <h3 class="text-base md:text-lg font-medium text-gray-900 mb-2">Terhubung dengan Orang Tua</h3>
                <div class="text-sm md:text-base text-gray-600 space-y-1">
                    <p><span class="font-medium">Nama:</span> {{ $connection->name ?? 'Tidak diketahui' }}</p>
                    <p><span class="font-medium">Email:</span> {{ $connection->email ?? '-' }}</p>
                </div>
            </div>
        @elseif($pendingConnection)
            <!-- Menunggu koneksi -->
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 md:p-6">
                <h3 class="text-base md:text-lg font-medium text-yellow-800 mb-3 md:mb-4">Kode Koneksi Aktif</h3>
                <div class="bg-white p-3 md:p-4 rounded-lg text-center mb-3 md:mb-4">
                    <p class="text-xl md:text-3xl font-mono font-bold text-yellow-600 tracking-wider break-all">
                        {{ $pendingConnection->connection_code }}
                    </p>
                </div>
                <p class="text-xs md:text-sm text-yellow-700 mb-3 md:mb-4">
                    Berikan kode ini kepada orang tua untuk menghubungkan akun. 
                    Kode akan kadaluarsa jika sudah digunakan atau digenerate ulang.
                </p>
                <div class="flex flex-col sm:flex-row gap-3">
                    <form method="POST" action="{{ route('siswa.parent-connection.generate') }}" class="flex-1">
                        @csrf
                        <button type="submit" class="w-full bg-yellow-600 text-white px-4 py-2 md:py-3 rounded-lg hover:bg-yellow-700 transition text-sm md:text-base">
                            Generate Kode Baru
                        </button>
                    </form>
                    
                    {{-- Tombol hapus kode --}}
                    <form method="POST" action="{{ route('siswa.parent-connection.clear') }}" class="flex-1">
                        @csrf
                        <button type="submit" class="w-full bg-gray-200 text-gray-700 px-4 py-2 md:py-3 rounded-lg hover:bg-gray-300 transition text-sm md:text-base">
                            Hapus Kode
                        </button>
                    </form>
                </div>
            </div>
        @else
            <!-- Belum ada koneksi -->
            <div class="text-center py-4 md:py-8">
                <div class="w-12 h-12 md:w-16 md:h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-3 md:mb-4">
                    <svg class="w-6 h-6 md:w-8 md:h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                    </svg>
                </div>
                <h3 class="text-base md:text-lg font-medium text-gray-900 mb-2">Belum Terhubung dengan Orang Tua</h3>
                <p class="text-xs md:text-sm text-gray-500 mb-4 md:mb-6">Generate kode untuk menghubungkan akun dengan orang tua</p>
                
                <form method="POST" action="{{ route('siswa.parent-connection.generate') }}">
                    @csrf
                    <button type="submit" class="inline-flex items-center px-4 md:px-6 py-2 md:py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition text-sm md:text-base">
                        <svg class="w-4 h-4 md:w-5 md:h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
                        </svg>
                        Generate Kode Koneksi
                    </button>
                </form>
            </div>
        @endif

        <!-- Informasi -->
        <div class="mt-4 md:mt-6 p-3 md:p-4 bg-gray-50 rounded-lg">
            <h4 class="font-medium text-gray-700 mb-2 text-sm md:text-base">📝 Catatan:</h4>
            <ul class="text-xs md:text-sm text-gray-600 space-y-1 list-disc list-inside">
                <li>Orang tua hanya bisa melihat data perkembanganmu (read-only)</li>
                <li>Orang tua tidak bisa mengubah data yang sudah kamu input</li>
                <li>Kamu bisa menghubungkan dengan satu akun orang tua saja</li>
                <li>Jika ingin mengganti koneksi, generate kode baru maka kode lama otomatis kadaluarsa</li>
            </ul>
        </div>
        
        <!-- Pesan Sukses/Error -->
        @if(session('success'))
            <div class="mt-4 p-3 bg-green-100 text-green-700 rounded-lg text-sm">
                {{ session('success') }}
            </div>
        @endif
        
        @if(session('error'))
            <div class="mt-4 p-3 bg-red-100 text-red-700 rounded-lg text-sm">
                {{ session('error') }}
            </div>
        @endif
    </div>
</div>
@endsection