@extends('layouts.internal')

@section('content')
<div class="max-w-6xl mx-auto h-[calc(100vh-80px)] flex flex-col">
    <h1 class="text-4xl font-bold text-white mb-6 tracking-tight flex-none">Visi dan Misi</h1>

    {{-- Notifikasi Sukses --}}
    @if(session('success'))
        <div class="bg-green-500 text-white p-3 rounded-lg mb-4 flex-none shadow-lg">
            {{ session('success') }}
        </div>
    @endif

    {{-- Notifikasi Error (Penting jika user lain mencoba akses) --}}
    @if(session('error'))
        <div class="bg-red-500 text-white p-3 rounded-lg mb-4 flex-none shadow-lg">
            {{ session('error') }}
        </div>
    @endif

    <div class="bg-[#001040] border border-white/20 rounded-xl p-8 shadow-2xl flex-1 flex flex-col overflow-hidden">
        <form action="{{ route('admin.visimisi.update') }}" method="POST" class="flex flex-col h-full">
            @csrf
            
            <div class="flex-1 flex flex-col space-y-5 overflow-hidden">
                <div class="flex-none">
                    <label class="block text-white font-bold text-lg tracking-tight mb-2 italic">Masukan Visi :</label>
                    <div class="bg-white rounded-lg overflow-hidden shadow-inner">
                        <textarea name="visi" 
                            class="w-full p-4 text-[#001040] font-bold text-sm h-20 border-none focus:ring-0 outline-none resize-none"
                            placeholder="Tulis visi di sini...">{{ $visimisi->visi ?? '' }}</textarea>
                    </div>
                </div>

                <div class="flex-1 flex flex-col min-h-0">
                    <label class="block text-white font-bold text-lg tracking-tight mb-2 italic">Masukan Misi :</label>
                    <div class="bg-white rounded-lg overflow-hidden shadow-inner flex-1">
                        <textarea name="misi" 
                            class="w-full h-full p-5 text-[#001040] font-bold text-sm border-none focus:ring-0 outline-none resize-none"
                            placeholder="Tulis misi di sini...">{{ $visimisi->misi ?? '' }}</textarea>
                    </div>
                </div>
            </div>

            <div class="flex justify-end pt-5 flex-none">
                {{-- Tombol sekarang aktif untuk Sodikin & Kuswoyo tanpa atribut disabled --}}
                <button type="submit" class="bg-[#007bff] hover:bg-blue-600 text-white font-bold px-12 py-3 rounded-lg text-sm shadow-lg transition-all active:scale-95">
                    Simpan Perubahan
                </button>
            </div>
        </form>
    </div>
</div>
@endsection