@extends('admin.layout')
@section('title', 'Settings')
@section('page-title', 'Site Settings')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="bg-gray-900 border border-gray-800 rounded-2xl p-6">
        <form action="{{ route('admin.settings.update') }}" method="POST">
            @csrf
            <div class="space-y-6">
                <!-- General -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2"><i class="fas fa-globe text-indigo-400 text-xs"></i> General</h3>
                    <div class="space-y-4">
                        <div><label class="block text-sm font-medium text-gray-300 mb-2">Site Name</label><input type="text" name="site_name" value="{{ $settings['site_name'] ?? '' }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                    </div>
                </div>

                <!-- Contact -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2"><i class="fas fa-headset text-indigo-400 text-xs"></i> Contact Info</h3>
                    <div class="space-y-4">
                        <div><label class="block text-sm font-medium text-gray-300 mb-2">Email</label><input type="email" name="site_email" value="{{ $settings['site_email'] ?? '' }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                        <div><label class="block text-sm font-medium text-gray-300 mb-2">Phone</label><input type="text" name="site_phone" value="{{ $settings['site_phone'] ?? '' }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                        <div><label class="block text-sm font-medium text-gray-300 mb-2">Address</label><input type="text" name="site_address" value="{{ $settings['site_address'] ?? '' }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                    </div>
                </div>

                <!-- Social -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2"><i class="fas fa-share-alt text-indigo-400 text-xs"></i> Social Media</h3>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div><label class="block text-sm font-medium text-gray-300 mb-2"><i class="fab fa-facebook text-blue-500 mr-1"></i> Facebook</label><input type="url" name="facebook_url" value="{{ $settings['facebook_url'] ?? '' }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                        <div><label class="block text-sm font-medium text-gray-300 mb-2"><i class="fab fa-x-twitter mr-1"></i> Twitter / X</label><input type="url" name="twitter_url" value="{{ $settings['twitter_url'] ?? '' }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                        <div><label class="block text-sm font-medium text-gray-300 mb-2"><i class="fab fa-linkedin text-blue-600 mr-1"></i> LinkedIn</label><input type="url" name="linkedin_url" value="{{ $settings['linkedin_url'] ?? '' }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                        <div><label class="block text-sm font-medium text-gray-300 mb-2"><i class="fab fa-github mr-1"></i> GitHub</label><input type="url" name="github_url" value="{{ $settings['github_url'] ?? '' }}" class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                    </div>
                </div>

                <!-- Google Map -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2"><i class="fas fa-map text-indigo-400 text-xs"></i> Map</h3>
                    <div><label class="block text-sm font-medium text-gray-300 mb-2">Google Map Embed URL</label><input type="url" name="google_map_url" value="{{ $settings['google_map_url'] ?? '' }}" placeholder="https://www.google.com/maps/embed?..." class="w-full bg-gray-800 border border-gray-700 text-white rounded-xl px-4 py-3 text-sm focus:outline-none focus:border-indigo-500"></div>
                </div>
            </div>

            @include('admin.partials.form-actions', ['submitText' => 'Save Settings', 'cancelRoute' => route('admin.dashboard')])
        </form>
    </div>
</div>
@endsection