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

@section('content')
<form method="POST" action="{{ route('admin.settings.update') }}" style="max-width:860px;">
    @csrf

    {{-- WhatsApp --}}
    <div class="card">
        <div class="section-header">
            <i class="fa-brands fa-whatsapp" style="background:#dcfce7; color:#16a34a;"></i>
            <div>
                <h3>WhatsApp Button</h3>
                <p>A floating chat button shown on every page for customers to contact you directly.</p>
            </div>
        </div>
        <div class="form-row">
            <div class="form-field">
                <label>WhatsApp Number</label>
                <div class="input-affix">
                    <span class="affix">+</span>
                    <input type="text" name="whatsapp_number" value="{{ $s['whatsapp_number'] ?? '' }}" placeholder="923001234567 (no spaces or dashes)">
                </div>
                <small class="muted">Include country code, no plus sign. e.g. 923001234567</small>
            </div>
            <div class="form-field" style="justify-content:flex-end; padding-top:.25rem;">
                <label>Enable Button</label>
                <label class="toggle-switch" style="margin-top:.5rem;">
                    <input type="checkbox" name="whatsapp_enabled" value="1" {{ ($s['whatsapp_enabled'] ?? '0') === '1' ? 'checked' : '' }}>
                    <span class="toggle-track"></span>
                    <span style="margin-left:.6rem; font-size:.875rem; color:#374151;">Show on site</span>
                </label>
            </div>
        </div>
    </div>

    {{-- Announcement Bar --}}
    <div class="card">
        <div class="section-header">
            <i class="fa-solid fa-bullhorn" style="background:#fef3c7; color:#92400e;"></i>
            <div>
                <h3>Announcement Bar</h3>
                <p>A slim banner shown at the very top of every page. Use it for promotions, notices, or delivery info.</p>
            </div>
        </div>
        <div class="form-field">
            <label>Announcement Text</label>
            <input type="text" name="announcement_text" value="{{ $s['announcement_text'] ?? '' }}" placeholder="e.g. FREE delivery on orders above PKR 5000 · Made to order — allow 7–10 days">
            <small class="muted">Keep it short. Shown in a narrow strip at the top of the site.</small>
        </div>
        <div class="form-field" style="margin-top:.75rem; padding-top:.25rem;">
            <label>Enable Announcement</label>
            <label class="toggle-switch" style="margin-top:.5rem;">
                <input type="checkbox" name="announcement_enabled" value="1" {{ ($s['announcement_enabled'] ?? '0') === '1' ? 'checked' : '' }}>
                <span class="toggle-track"></span>
                <span style="margin-left:.6rem; font-size:.875rem; color:#374151;">Show bar on site</span>
            </label>
        </div>
    </div>

    {{-- Social Links --}}
    <div class="card">
        <div class="section-header">
            <i class="fa-solid fa-share-nodes" style="background:#ede9fe; color:#6d28d9;"></i>
            <div>
                <h3>Social Media Links</h3>
                <p>Links shown in the site footer and on the contact page.</p>
            </div>
        </div>
        <div class="form-field">
            <label>Facebook Page URL</label>
            <div class="input-affix">
                <span class="affix"><i class="fa-brands fa-facebook-f"></i></span>
                <input type="url" name="social_facebook" value="{{ $s['social_facebook'] ?? '' }}" placeholder="https://facebook.com/yourpage">
            </div>
        </div>
        <div class="form-field" style="margin-top:.75rem;">
            <label>Instagram Profile URL</label>
            <div class="input-affix">
                <span class="affix"><i class="fa-brands fa-instagram"></i></span>
                <input type="url" name="social_instagram" value="{{ $s['social_instagram'] ?? '' }}" placeholder="https://instagram.com/yourhandle">
            </div>
        </div>
        <div class="form-field" style="margin-top:.75rem;">
            <label>WhatsApp for Social (number only)</label>
            <div class="input-affix">
                <span class="affix"><i class="fa-brands fa-whatsapp"></i></span>
                <input type="text" name="social_whatsapp" value="{{ $s['social_whatsapp'] ?? '' }}" placeholder="923001234567">
            </div>
            <small class="muted">This is the footer social icon link — can be same as the floating button number.</small>
        </div>
    </div>

    <div style="display:flex; gap:.75rem;">
        <button class="adm-btn adm-btn-primary adm-btn-lg"><i class="fa-solid fa-floppy-disk"></i> Save Settings</button>
    </div>
</form>
@endsection