@extends('layouts.admin')
@section('title', 'Pengaturan Website')
@section('page-title', 'Pengaturan Website')
@section('breadcrumb')
<span class="current">Pengaturan</span>
@endsection

@section('content')
<div class="max-w-3xl">
    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf @method('PUT')

        <!-- Identitas Website -->
        <div class="admin-card">
            <div class="admin-card-body">
                <div class="admin-section-title">
                    <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"/></svg>
                    Identitas Website
                </div>
                <div class="space-y-5">
                    <div>
                        <label class="admin-label">Nama Website</label>
                        <input type="text" name="site_name" value="{{ $settings['site_name'] ?? '' }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Tagline / Slogan</label>
                        <input type="text" name="site_tagline" value="{{ $settings['site_tagline'] ?? '' }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Bio / Deskripsi Singkat</label>
                        <textarea name="bio" rows="3" class="admin-textarea">{{ $settings['bio'] ?? '' }}</textarea>
                    </div>
                    <div>
                        <label class="admin-label">Tahun Pengalaman</label>
                        <input type="number" name="years_experience" value="{{ $settings['years_experience'] ?? '10' }}" class="admin-input" min="1">
                    </div>
                </div>
            </div>
        </div>

        <!-- Kontak & Sosial -->
        <div class="admin-card">
            <div class="admin-card-body">
                <div class="admin-section-title">
                    <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/></svg>
                    Kontak & Sosial Media
                </div>
                <div class="space-y-5">
                    <div>
                        <label class="admin-label">Nomor WhatsApp</label>
                        <input type="text" name="whatsapp_number" value="{{ $settings['whatsapp_number'] ?? '' }}" placeholder="6281234567890 (tanpa + atau spasi)" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">Email</label>
                        <input type="email" name="email" value="{{ $settings['email'] ?? '' }}" class="admin-input">
                    </div>
                    <div>
                        <label class="admin-label">URL LinkedIn</label>
                        <input type="url" name="linkedin_url" value="{{ $settings['linkedin_url'] ?? '' }}" class="admin-input">
                    </div>
                </div>
            </div>
        </div>

        <!-- Foto Profil -->
        <div class="admin-card">
            <div class="admin-card-body">
                <div class="admin-section-title">
                    <svg class="admin-section-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
                    Foto Profil
                </div>
                <div class="flex items-center gap-6">
                    @if(!empty($settings['profile_photo']))
                    <img src="{{ asset('storage/' . $settings['profile_photo']) }}" alt="Foto Profil"
                         class="w-24 h-24 rounded-2xl object-cover border-2 border-gray-100 shadow-sm">
                    @else
                    <div class="w-24 h-24 rounded-2xl bg-gradient-to-br from-[#ff6b2b] to-[#ea5a1b] flex items-center justify-center text-white text-3xl font-bold shadow-lg">
                        {{ substr(auth()->user()->name, 0, 1) }}
                    </div>
                    @endif
                    <div class="flex-1">
                        <input type="file" name="profile_photo" accept="image/*" class="admin-input">
                        <p class="text-gray-400 text-xs mt-1">Maks 1MB. Akan diresize ke 400×400px.</p>
                    </div>
                </div>
            </div>
        </div>

        <button type="submit" class="admin-btn admin-btn-primary">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
            Simpan Pengaturan
        </button>
    </form>
</div>
@endsection