@extends('admin.layout.tamplate')

@section('content')
    <div class="p-6 md:p-10 space-y-8">
        {{-- Navigasi Breadcrumb --}}
        @include('admin.layout.breadcumb')
        @include('admin.layout.alert')


        <div class="max-w-6xl mx-auto">
            <form action="{{ route('dashboard.profile.update') }}" method="POST" class="space-y-8">
                @csrf
                @method('PUT')

                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

                    {{-- Kolom Kiri: Informasi Kontak --}}
                    <div class="bg-white p-8 rounded-[2.5rem] shadow-sm border border-sky-50 space-y-6">
                        <div class="flex items-center gap-4 mb-2">
                            <div
                                class="w-12 h-12 rounded-2xl bg-sky-100 flex items-center justify-center text-sky-600 shadow-sm">
                                <i class="fas fa-headset text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-sky-950 leading-tight">Kontak Operasional</h3>
                                <p class="text-[10px] text-slate-400 font-medium uppercase tracking-wider">Saluran
                                    Komunikasi Utama</p>
                            </div>
                        </div>

                        <div class="space-y-4">
                            <div class="group space-y-2">
                                <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Nomor
                                    Telepon / WA</label>
                                <div class="relative">
                                    <i
                                        class="fas fa-phone absolute left-5 top-1/2 -translate-y-1/2 text-sky-300 text-xs"></i>
                                    <input type="text" name="phone" value="{{ old('phone', $setting->phone) }}"
                                        placeholder="Contoh: 08123456789"
                                        class="w-full pl-12 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                                </div>
                            </div>

                            <div class="group space-y-2">
                                <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Email
                                    Resmi</label>
                                <div class="relative">
                                    <i
                                        class="fas fa-envelope absolute left-5 top-1/2 -translate-y-1/2 text-sky-300 text-xs"></i>
                                    <input type="email" name="email" value="{{ old('email', $setting->email) }}"
                                        placeholder="yayasan@email.com"
                                        class="w-full pl-12 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                                </div>
                            </div>

                            <div class="group space-y-2">
                                <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Alamat
                                    Kantor</label>
                                <textarea name="address" rows="3" placeholder="Alamat lengkap yayasan..."
                                    class="w-full px-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">{{ old('address', $setting->address) }}</textarea>
                            </div>

                            <div class="group space-y-2">
                                <label class="text-[10px] font-bold text-sky-900/40 uppercase tracking-widest ml-1">Link
                                    Google Maps (URL)</label>
                                <div class="relative">
                                    <i
                                        class="fas fa-map-location-dot absolute left-5 top-1/2 -translate-y-1/2 text-sky-300 text-xs"></i>
                                    <input type="text" name="google_maps_link"
                                        value="{{ old('google_maps_link', $setting->google_maps_link) }}"
                                        placeholder="https://goo.gl/maps/..."
                                        class="w-full pl-12 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Kolom Kanan: Media Sosial --}}
                    <div
                        class="bg-white p-8 rounded-[2.5rem] shadow-sm border border-sky-50 space-y-6 flex flex-col h-full">
                        <div class="flex items-center gap-4 mb-2">
                            <div
                                class="w-12 h-12 rounded-2xl bg-sky-100 flex items-center justify-center text-sky-600 shadow-sm">
                                <i class="fas fa-share-nodes text-lg"></i>
                            </div>
                            <div>
                                <h3 class="text-lg font-bold text-sky-950 leading-tight">Media Sosial</h3>
                                <p class="text-[10px] text-slate-400 font-medium uppercase tracking-wider">Koneksi Jejaring
                                    Sosial</p>
                            </div>
                        </div>

                        <div class="space-y-4 flex-grow">
                            <div class="relative group">
                                <div
                                    class="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center bg-blue-50 text-blue-600 rounded-l-2xl border-y border-l border-sky-100 group-focus-within:bg-blue-600 group-focus-within:text-white transition-colors">
                                    <i class="fab fa-facebook-f"></i>
                                </div>
                                <input type="text" name="facebook" value="{{ old('facebook', $setting->facebook) }}"
                                    placeholder="Username Facebook"
                                    class="w-full pl-16 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                            </div>

                            <div class="relative group">
                                <div
                                    class="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center bg-pink-50 text-pink-600 rounded-l-2xl border-y border-l border-sky-100 group-focus-within:bg-pink-600 group-focus-within:text-white transition-colors">
                                    <i class="fab fa-instagram"></i>
                                </div>
                                <input type="text" name="instagram" value="{{ old('instagram', $setting->instagram) }}"
                                    placeholder="Username Instagram"
                                    class="w-full pl-16 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                            </div>

                            <div class="relative group">
                                <div
                                    class="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center bg-red-50 text-red-600 rounded-l-2xl border-y border-l border-sky-100 group-focus-within:bg-red-600 group-focus-within:text-white transition-colors">
                                    <i class="fab fa-youtube"></i>
                                </div>
                                <input type="text" name="youtube" value="{{ old('youtube', $setting->youtube) }}"
                                    placeholder="Link Channel YouTube"
                                    class="w-full pl-16 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                            </div>

                            {{-- WhatsApp Channel --}}
                            <div class="relative group">
                                <div
                                    class="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center bg-emerald-50 text-emerald-600 rounded-l-2xl border-y border-l border-sky-100 group-focus-within:bg-emerald-600 group-focus-within:text-white transition-colors">
                                    <i class="fab fa-whatsapp text-lg"></i>
                                </div>
                                <input type="text" name="wa_channel"
                                    value="{{ old('wa_channel', $setting->wa_channel) }}"
                                    placeholder="Link Saluran WhatsApp (Contoh: https://whatsapp.com/channel/...)"
                                    class="w-full pl-16 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                            </div>

                            {{-- TikTok --}}
                            <div class="relative group">
                                <div
                                    class="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center bg-slate-50 text-slate-900 rounded-l-2xl border-y border-l border-sky-100 group-focus-within:bg-slate-900 group-focus-within:text-white transition-colors">
                                    <i class="fab fa-tiktok"></i>
                                </div>
                                <input type="text" name="tiktok" value="{{ old('tiktok', $setting->tiktok) }}"
                                    placeholder="Username TikTok"
                                    class="w-full pl-16 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                            </div>

                            {{-- Twitter / X --}}
                            <div class="relative group">
                                <div
                                    class="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center bg-slate-50 text-slate-600 rounded-l-2xl border-y border-l border-sky-100 group-focus-within:bg-black group-focus-within:text-white transition-colors">
                                   <i class="fab fa-twitter"></i>
                                </div>
                                <input type="text" name="twiter" value="{{ old('twiter', $setting->twiter) }}"
                                    placeholder="Username Twitter / X"
                                    class="w-full pl-16 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                            </div>

                            {{-- LinkedIn --}}
                            <div class="relative group">
                                <div
                                    class="absolute left-0 top-0 bottom-0 w-12 flex items-center justify-center bg-indigo-50 text-indigo-600 rounded-l-2xl border-y border-l border-sky-100 group-focus-within:bg-indigo-600 group-focus-within:text-white transition-colors">
                                    <i class="fab fa-linkedin-in"></i>
                                </div>
                                <input type="text" name="linked" value="{{ old('linked', $setting->linked) }}"
                                    placeholder="Link Profile LinkedIn"
                                    class="w-full pl-16 pr-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-medium">
                            </div>
                        </div>

                        <div class="pt-6">
                            <button type="submit"
                                class="w-full py-4 bg-sky-600 text-white rounded-2xl font-bold shadow-lg shadow-sky-100 hover:bg-sky-700 transition transform active:scale-95 flex items-center justify-center gap-3">
                                <i class="fas fa-save"></i> Simpan Kontak & Sosmed
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <style>
        /* Tambahan agar kursor textarea tidak mepet (sesuai request sebelumnya) */
        textarea {
            padding-left: 1.5rem !important;
            padding-right: 1.5rem !important;
        }

        .alert-fade-out {
            opacity: 0;
            transform: translateY(-20px);
            pointer-events: none;
        }
    </style>

    <script>
        // Auto close alert
        document.addEventListener('DOMContentLoaded', function() {
            const alertBox = document.getElementById('alert-box');
            if (alertBox) {
                setTimeout(() => {
                    alertBox.classList.add('alert-fade-out');
                    setTimeout(() => alertBox.parentElement.remove(), 500);
                }, 5000);
            }
        });
    </script>
@endsection