@extends('layouts.admin')
@section('title', 'Settings')

@section('content')
<form method="POST" action="{{ route('admin.settings.update') }}" enctype="multipart/form-data">
    @csrf
    <div class="row g-3">

        {{-- General --}}
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header py-3 px-4"><i class="bi bi-info-circle me-2"></i>General Settings</div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label fw-semibold">Newspaper Name</label>
                            <input type="text" name="settings[site_name]" class="form-control"
                                   value="{{ \App\Models\Setting::get('site_name', config('app.name')) }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Tagline / Motto</label>
                            <input type="text" name="settings[footer_tagline]" class="form-control"
                                   value="{{ \App\Models\Setting::get('footer_tagline') }}"
                                   placeholder="e.g. The Voice of the People">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Branding --}}
            <div class="card mb-3">
                <div class="card-header py-3 px-4"><i class="bi bi-image me-2"></i>Branding</div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Logo</label>
                            @if(\App\Models\Setting::get('site_logo'))
                                <div class="mb-2 p-2 border rounded bg-light text-center">
                                    <img src="{{ asset('storage/'.\App\Models\Setting::get('site_logo')) }}" alt="Logo" style="max-height:60px">
                                </div>
                            @endif
                            <input type="file" name="logo" class="form-control" accept="image/*">
                            <small class="text-muted">PNG/SVG recommended, transparent background</small>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Header Banner</label>
                            @if(\App\Models\Setting::get('header_banner'))
                                <div class="mb-2 p-2 border rounded bg-light">
                                    <img src="{{ asset('storage/'.\App\Models\Setting::get('header_banner')) }}" alt="Banner" style="max-height:60px;width:100%;object-fit:cover">
                                </div>
                            @endif
                            <input type="file" name="header_banner" class="form-control" accept="image/*">
                            <small class="text-muted">Wide banner displayed above the masthead (1200×120px ideal)</small>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Footer --}}
            <div class="card mb-3">
                <div class="card-header py-3 px-4"><i class="bi bi-layout-text-sidebar-reverse me-2"></i>Footer Information</div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Editor Name</label>
                            <input type="text" name="settings[footer_editor]" class="form-control"
                                   value="{{ \App\Models\Setting::get('footer_editor') }}"
                                   placeholder="Chief Editor's name">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">Phone Number</label>
                            <input type="text" name="settings[footer_phone]" class="form-control"
                                   value="{{ \App\Models\Setting::get('footer_phone') }}"
                                   placeholder="+880 1xxx-xxxxxx">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Office Address</label>
                            <input type="text" name="settings[footer_address]" class="form-control"
                                   value="{{ \App\Models\Setting::get('footer_address') }}"
                                   placeholder="123 Press Road, Media City">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Header Advertisement --}}
            <div class="card mb-3">
                <div class="card-header py-3 px-4"><i class="bi bi-window-split me-2"></i>Header বিজ্ঞাপন</div>
                <div class="card-body p-4">
                    <label class="form-label fw-semibold">Header Ad — HTML / কোড</label>
                    <textarea name="settings[header_ad]" class="form-control font-monospace"
                              rows="4" placeholder="হেডারের ডান পাশে প্রদর্শিত বিজ্ঞাপনের HTML কোড"
                              style="font-size:.78rem">{{ \App\Models\Setting::get('header_ad') }}</textarea>
                    <small class="text-muted">উদাহরণ: &lt;a href="..."&gt;&lt;img src="..." style="max-height:60px"&gt;&lt;/a&gt;</small>
                </div>
            </div>

            {{-- Sidebar Advertisement --}}
            <div class="card mb-3">
                <div class="card-header py-3 px-4"><i class="bi bi-layout-sidebar-reverse me-2"></i>Sidebar বিজ্ঞাপন</div>
                <div class="card-body p-4">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">বিজ্ঞাপন ১ — HTML / কোড</label>
                        <textarea name="settings[sidebar_ad_1]" class="form-control font-monospace"
                                  rows="5" placeholder="Google AdSense কোড, ছবির HTML বা যেকোনো কাস্টম কোড"
                                  style="font-size:.78rem">{{ \App\Models\Setting::get('sidebar_ad_1') }}</textarea>
                        <small class="text-muted">উদাহরণ: &lt;a href="..."&gt;&lt;img src="..." style="width:100%"&gt;&lt;/a&gt;</small>
                    </div>
                    <div class="mb-0">
                        <label class="form-label fw-semibold">বিজ্ঞাপন ২ — HTML / কোড</label>
                        <textarea name="settings[sidebar_ad_2]" class="form-control font-monospace"
                                  rows="5" placeholder="দ্বিতীয় বিজ্ঞাপনের কোড (ঐচ্ছিক)"
                                  style="font-size:.78rem">{{ \App\Models\Setting::get('sidebar_ad_2') }}</textarea>
                    </div>
                </div>
            </div>

            {{-- Social Media --}}
            <div class="card mb-3">
                <div class="card-header py-3 px-4"><i class="bi bi-share me-2"></i>Social Media Links</div>
                <div class="card-body p-4">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">
                                <i class="bi bi-facebook text-primary me-1"></i>Facebook
                            </label>
                            <input type="url" name="settings[social_facebook]" class="form-control"
                                   value="{{ \App\Models\Setting::get('social_facebook') }}"
                                   placeholder="https://facebook.com/yourpage">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">
                                <i class="bi bi-twitter-x me-1"></i>Twitter / X
                            </label>
                            <input type="url" name="settings[social_twitter]" class="form-control"
                                   value="{{ \App\Models\Setting::get('social_twitter') }}"
                                   placeholder="https://twitter.com/yourhandle">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">
                                <i class="bi bi-youtube text-danger me-1"></i>YouTube
                            </label>
                            <input type="url" name="settings[social_youtube]" class="form-control"
                                   value="{{ \App\Models\Setting::get('social_youtube') }}"
                                   placeholder="https://youtube.com/yourchannel">
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">
                                <i class="bi bi-instagram text-danger me-1"></i>Instagram
                            </label>
                            <input type="url" name="settings[social_instagram]" class="form-control"
                                   value="{{ \App\Models\Setting::get('social_instagram') }}"
                                   placeholder="https://instagram.com/yourprofile">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header py-3 px-4"><i class="bi bi-info me-2"></i>Tips</div>
                <div class="card-body p-4" style="font-size:.83rem;color:#6b7280">
                    <p><strong>Logo:</strong> Use PNG or SVG with transparent background for best appearance.</p>
                    <p><strong>Header Banner:</strong> Recommended size 1200×120 pixels. Shows at the very top of the site.</p>
                    <p><strong>Footer:</strong> All footer fields are optional but help readers contact you.</p>
                    <p class="mb-0"><strong>Caching:</strong> Setting changes take effect immediately.</p>
                </div>
            </div>
        </div>

    </div>

    <div class="mt-3">
        <button type="submit" class="btn btn-primary"><i class="bi bi-check me-1"></i>Save Settings</button>
    </div>
</form>
@endsection