103 lines
5.9 KiB
PHP
103 lines
5.9 KiB
PHP
{{-- 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 |