@extends('admin.layouts.app')

@section('content')
<div class="max-w-6xl space-y-6">
    <div>
        <h2 class="text-4xl font-extrabold">Site Settings</h2>
        <p class="text-gray-400 mt-2">Update your website branding, contact details and footer text.</p>
    </div>

    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
        @csrf

        <div class="glass-card rounded-[1.8rem] p-8 space-y-6">
            <div>
                <h3 class="text-2xl font-bold mb-1">General Settings</h3>
                <p class="text-gray-400 text-sm">Manage your website name and public contact information.</p>
            </div>

            <div class="grid md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm text-gray-300 mb-2">Site Name</label>
                    <input
                        type="text"
                        name="site_name"
                        value="{{ old('site_name', $setting->site_name ?? '') }}"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >
                </div>

                <div>
                    <label class="block text-sm text-gray-300 mb-2">Email Address</label>
                    <input
                        type="email"
                        name="email"
                        value="{{ old('email', $setting->email ?? '') }}"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >
                </div>

                <div>
                    <label class="block text-sm text-gray-300 mb-2">Phone Number</label>
                    <input
                        type="text"
                        name="phone"
                        value="{{ old('phone', $setting->phone ?? '') }}"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >
                </div>

                <div>
                    <label class="block text-sm text-gray-300 mb-2">Address</label>
                    <input
                        type="text"
                        name="address"
                        value="{{ old('address', $setting->address ?? '') }}"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >
                </div>
            </div>

            <div>
                <label class="block text-sm text-gray-300 mb-2">Footer Text</label>
                <textarea
                    name="footer_text"
                    rows="3"
                    class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                >{{ old('footer_text', $setting->footer_text ?? '') }}</textarea>
            </div>
        </div>

        <div class="glass-card rounded-[1.8rem] p-8 space-y-6">
            <div>
                <h3 class="text-2xl font-bold mb-1">Branding</h3>
                <p class="text-gray-400 text-sm">Upload your site logo and favicon.</p>
            </div>

            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm text-gray-300 mb-2">Logo</label>
                    <input
                        type="file"
                        name="logo"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >

                    @if(!empty($setting->logo))
                        <div class="mt-4">
                            <p class="text-xs text-gray-400 mb-2">Current Logo</p>
                            <img
                                src="{{ asset('storage/' . $setting->logo) }}"
                                alt="Logo"
                                class="h-20 rounded-xl border border-red-900 bg-black p-2"
                            >
                        </div>
                    @endif
                </div>

                <div>
                    <label class="block text-sm text-gray-300 mb-2">Favicon</label>
                    <input
                        type="file"
                        name="favicon"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >

                    @if(!empty($setting->favicon))
                        <div class="mt-4">
                            <p class="text-xs text-gray-400 mb-2">Current Favicon</p>
                            <img
                                src="{{ asset('storage/' . $setting->favicon) }}"
                                alt="Favicon"
                                class="h-16 w-16 rounded-xl border border-red-900 bg-black p-2 object-contain"
                            >
                        </div>
                    @endif
                </div>
            </div>
        </div>

<div class="glass-card rounded-[2rem] p-8 md:p-10 space-y-8">
    <div class="flex items-center gap-4">
        <div class="w-14 h-14 rounded-2xl bg-red-600/15 border border-red-700/40 flex items-center justify-center text-red-500 text-xl">
            <i class="fa-solid fa-share-nodes"></i>
        </div>
        <div>
            <h3 class="text-3xl font-extrabold text-white">Social Media</h3>
            <p class="text-gray-400 mt-1">Add your official social media links for header and footer display.</p>
        </div>
    </div>

    <div class="grid md:grid-cols-2 gap-6">
        <div>
            <label class="block text-sm font-semibold text-gray-300 mb-3">Facebook</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-blue-500 text-lg">
                    <i class="fab fa-facebook-f"></i>
                </span>
                <input
                    type="url"
                    name="facebook"
                    value="{{ old('facebook', $setting->facebook ?? '') }}"
                    placeholder="https://facebook.com/yourpage"
                    class="w-full h-14 rounded-2xl bg-[#0F0F0F] border border-red-900/60 text-white placeholder:text-gray-500 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-red-600/40 focus:border-red-600 transition"
                >
            </div>
        </div>

        <div>
            <label class="block text-sm font-semibold text-gray-300 mb-3">Instagram</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-pink-500 text-lg">
                    <i class="fab fa-instagram"></i>
                </span>
                <input
                    type="url"
                    name="instagram"
                    value="{{ old('instagram', $setting->instagram ?? '') }}"
                    placeholder="https://instagram.com/yourpage"
                    class="w-full h-14 rounded-2xl bg-[#0F0F0F] border border-red-900/60 text-white placeholder:text-gray-500 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-red-600/40 focus:border-red-600 transition"
                >
            </div>
        </div>

        <div>
            <label class="block text-sm font-semibold text-gray-300 mb-3">X / Twitter</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-300 text-lg">
                    <i class="fa-brands fa-x-twitter"></i>
                </span>
                <input
                    type="url"
                    name="twitter"
                    value="{{ old('twitter', $setting->twitter ?? '') }}"
                    placeholder="https://x.com/yourpage"
                    class="w-full h-14 rounded-2xl bg-[#0F0F0F] border border-red-900/60 text-white placeholder:text-gray-500 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-red-600/40 focus:border-red-600 transition"
                >
            </div>
        </div>

        <div>
            <label class="block text-sm font-semibold text-gray-300 mb-3">YouTube</label>
            <div class="relative">
                <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-red-500 text-lg">
                    <i class="fab fa-youtube"></i>
                </span>
                <input
                    type="url"
                    name="youtube"
                    value="{{ old('youtube', $setting->youtube ?? '') }}"
                    placeholder="https://youtube.com/yourchannel"
                    class="w-full h-14 rounded-2xl bg-[#0F0F0F] border border-red-900/60 text-white placeholder:text-gray-500 pl-12 pr-4 focus:outline-none focus:ring-2 focus:ring-red-600/40 focus:border-red-600 transition"
                >
            </div>
        </div>
    </div>
</div>

        <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-xl font-semibold text-white">
            Save Settings
        </button>
    </form>
</div>
@endsection