@extends('layouts.admin')

@section('title', 'Social Media Settings')

@section('content')
<div class="mb-8">
    <h1 class="text-2xl font-bold text-gray-900">Social Media Settings</h1>
    <p class="text-gray-600">Manage your social media links</p>
</div>

<div class="max-w-2xl">
    <form action="{{ route('admin.settings.social.update') }}" method="POST" class="bg-white rounded-xl shadow-sm p-6">
        @csrf
        @method('PUT')
        
        <div class="space-y-6">
            <div>
                <label for="social_linkedin" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fab fa-linkedin text-blue-600 mr-2"></i>LinkedIn URL
                </label>
                <input type="url" id="social_linkedin" name="social_linkedin" value="{{ old('social_linkedin', $settings['social_linkedin'] ?? '') }}" placeholder="https://linkedin.com/in/username" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
                <label for="social_facebook" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fab fa-facebook text-blue-600 mr-2"></i>Facebook URL
                </label>
                <input type="url" id="social_facebook" name="social_facebook" value="{{ old('social_facebook', $settings['social_facebook'] ?? '') }}" placeholder="https://facebook.com/username" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
                <label for="social_twitter" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fab fa-x-twitter mr-2"></i>X (Twitter) URL
                </label>
                <input type="url" id="social_twitter" name="social_twitter" value="{{ old('social_twitter', $settings['social_twitter'] ?? '') }}" placeholder="https://x.com/username" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
                <label for="social_instagram" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fab fa-instagram text-pink-600 mr-2"></i>Instagram URL
                </label>
                <input type="url" id="social_instagram" name="social_instagram" value="{{ old('social_instagram', $settings['social_instagram'] ?? '') }}" placeholder="https://instagram.com/username" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            
            <div>
                <label for="social_github" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fab fa-github mr-2"></i>GitHub URL
                </label>
                <input type="url" id="social_github" name="social_github" value="{{ old('social_github', $settings['social_github'] ?? '') }}" placeholder="https://github.com/username" class="w-full px-4 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
        </div>
        
        <div class="mt-6">
            <button type="submit" class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                Save Settings
            </button>
        </div>
    </form>
</div>
@endsection