@extends('layouts.internal')

@section('content')
<div class="max-w-4xl mx-auto pb-20">
    <div class="mb-6">
        <h2 class="text-2xl font-bold text-orange-500 mb-4 uppercase tracking-wider">Pengaturan Profil & Kontak</h2>
        
        {{-- Notifikasi Sukses --}}
        @if (session('success'))
            <div class="p-4 mb-4 bg-green-500/20 border border-green-500 text-green-200 rounded-lg">
                <span class="font-bold">{{ session('success') }}</span>
            </div>
        @endif

        {{-- Notifikasi Error --}}
        @if (session('error') || $errors->any())
            <div class="p-4 mb-4 bg-red-500/20 border border-red-500 text-red-200 rounded-lg">
                <ul class="list-disc pl-5">
                    @if(session('error')) <li>{{ session('error') }}</li> @endif
                    @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif
    </div>

    {{-- Hanya Admin 1 & 2 yang berhak edit --}}
    @if(in_array(auth()->id(), [1, 2]))
        <form action="{{ route('admin.kontak-admin.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            <div class="bg-[#001040] p-8 rounded-2xl border border-white/10 shadow-2xl text-white">
                
                {{-- WhatsApp --}}
                <div class="mb-10 p-6 border-l-4 border-green-500 bg-white/5 rounded-r-xl">
                    <label class="block text-sm font-black mb-3 uppercase tracking-widest text-green-400">
                        <i class="fab fa-whatsapp mr-2"></i>Nomor WhatsApp Official
                    </label>
                    <input type="text" name="whatsapp" 
                        value="{{ old('whatsapp', $kontak->whatsapp ?? '') }}" 
                        class="w-full bg-white text-gray-900 p-4 rounded-lg outline-none font-bold focus:ring-4 focus:ring-green-500/30 transition-all" 
                        placeholder="Contoh: 6281238020701">
                    
                    {{-- Keterangan Tambahan --}}
                    <div class="mt-3 flex items-start gap-2 text-green-200/70">
                        <svg class="w-4 h-4 mt-0.5 flex-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <p class="text-[10px] leading-relaxed italic">
                            <strong>PENTING:</strong> Gunakan kode negara di awal nomor (Contoh: <strong>62</strong>812...). Jangan gunakan tanda <strong>+</strong> atau angka <strong>0</strong> di depan nomor agar tombol "Hubungi Kami" di website berfungsi dengan baik.
                        </p>
                    </div>
                </div>

                <hr class="border-white/10 mb-10">

                {{-- Deskripsi & Foto Looping --}}
                @foreach(['manajemen' => 'Kantor Manajemen', 'utama' => 'Kantor Utama', 'workshop' => 'Workshop & Pool'] as $key => $label)
                <div class="mb-10 p-6 border-l-4 border-orange-500 bg-white/5 rounded-r-xl">
                    <label class="block text-sm font-black mb-3 uppercase tracking-widest text-orange-400">{{ $label }}</label>
                    
                    <textarea name="deskripsi_{{ $key }}" rows="3" 
                        class="w-full bg-white text-gray-900 p-4 rounded-lg mb-4 outline-none focus:ring-4 focus:ring-orange-500/30 transition-all"
                        placeholder="Masukkan alamat atau deskripsi {{ $label }}...">{{ old("deskripsi_$key", $kontak->{"deskripsi_$key"} ?? '') }}</textarea>
                    
                    <div class="flex flex-col md:flex-row items-center gap-6 bg-black/20 p-4 rounded-lg">
                        <div class="flex-1 w-full">
                            <span class="text-[10px] text-orange-300 font-bold block mb-1 uppercase tracking-widest">Update Foto :</span>
                            <input type="file" name="foto_{{ $key }}" class="block w-full text-sm text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-semibold file:bg-orange-600 file:text-white hover:file:bg-orange-500 cursor-pointer">
                        </div>
                        
                        @if(isset($kontak->{"foto_$key"}))
                            <div class="text-center">
                                <span class="text-[9px] text-white/30 block mb-1 uppercase">Foto Saat Ini :</span>
                                <img src="{{ asset('images/kontak/'.$kontak->{"foto_$key"}) }}" class="w-32 h-20 object-cover rounded-lg border border-orange-500 shadow-lg">
                            </div>
                        @endif
                    </div>
                </div>
                @endforeach

                <div class="flex justify-between items-center pt-8 border-t border-white/10">
                    <div class="flex flex-col">
                        <p class="text-[11px] text-white/50 font-bold uppercase tracking-wider">Editor : {{ auth()->user()->name }}</p>
                        <p class="text-[9px] text-white/30 italic">Otoritas User ID: {{ auth()->id() }}</p>
                    </div>
                    <button type="submit" class="bg-orange-600 hover:bg-orange-500 text-white px-10 py-4 rounded-xl font-black shadow-xl transform transition hover:scale-105 active:scale-95 uppercase tracking-widest">
                        SIMPAN PERUBAHAN
                    </button>
                </div>
            </div>
        </form>
    @else
        {{-- Tampilan jika bukan admin 1 atau 2 --}}
        <div class="bg-red-500/10 border border-red-500/50 p-10 rounded-2xl text-center">
            <i class="fas fa-lock text-red-500 text-4xl mb-4"></i>
            <h3 class="text-white font-bold uppercase tracking-widest">Akses Terbatas</h3>
            <p class="text-gray-400 text-sm mt-2">Hanya Admin Utama yang dapat mengubah data kontak dan lokasi kantor.</p>
        </div>
    @endif
</div>
@endsection