@extends('layouts.admin')

@section('content')

<div class="mb-4">
    <h4 class="brand-font text-uppercase text-secondary mb-0">Website Config Settings</h4>
</div>

<div class="card border-0 shadow-sm rounded-4 p-4 p-md-5 bg-white">
    <form action="{{ route('admin.settings.update') }}" method="POST" enctype="multipart/form-data" data-turbo-frame="admin-content">
        @csrf
        
        <ul class="nav nav-pills admin-tab-nav mb-4 p-1 bg-light rounded-pill" id="settingsTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active rounded-pill fw-bold" id="branding-tab" data-bs-toggle="tab" data-bs-target="#branding-pane" type="button" role="tab" aria-controls="branding-pane" aria-selected="true">
                    <i class="bi bi-palette me-1"></i> Branding & Logo
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill fw-bold" id="hero-tab" data-bs-toggle="tab" data-bs-target="#hero-pane" type="button" role="tab" aria-controls="hero-pane" aria-selected="false">
                    <i class="bi bi-layout-text-window-reverse me-1"></i> Hero Section
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill fw-bold" id="footer-tab" data-bs-toggle="tab" data-bs-target="#footer-pane" type="button" role="tab" aria-controls="footer-pane" aria-selected="false">
                    <i class="bi bi-info-circle me-1"></i> Contact & Footer
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link rounded-pill fw-bold" id="social-tab" data-bs-toggle="tab" data-bs-target="#social-pane" type="button" role="tab" aria-controls="social-pane" aria-selected="false">
                    <i class="bi bi-share me-1"></i> Social Networks
                </button>
            </li>
        </ul>

        <div class="tab-content" id="settingsTabsContent">

            <!-- TAB 1: BRANDING -->
            <div class="tab-pane fade show active" id="branding-pane" role="tabpanel" aria-labelledby="branding-tab">
                <div class="row g-4">
                    <div class="col-lg-7">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="company_name" class="form-label small fw-semibold text-muted">Company / Site Name</label>
                                <input type="text" class="form-control rounded-pill px-3" id="company_name" name="company_name" value="{{ $settings['company_name'] }}" required placeholder="MJ's Bikes & Accessories">
                                <div class="form-text small">Used in page titles, footer, and invoices.</div>
                            </div>
                            <div class="col-md-6">
                                <label for="company_name_nav" class="form-label small fw-semibold text-muted">Navbar Brand Text (HTML allowed)</label>
                                <input type="text" class="form-control rounded-pill px-3" id="company_name_nav" name="company_name_nav" value="{{ $settings['company_name_nav'] }}" required placeholder="MJ'S &lt;span&gt;BIKES&lt;/span&gt;">
                                <div class="form-text small">Shown in header when no logo image is uploaded.</div>
                            </div>
                            <div class="col-12">
                                <label for="company_tagline" class="form-label small fw-semibold text-muted">Short Tagline</label>
                                <input type="text" class="form-control rounded-pill px-3" id="company_tagline" name="company_tagline" value="{{ $settings['company_tagline'] }}" placeholder="Premium bicycles, spare parts & repair services">
                            </div>
                            <div class="col-12">
                                <label for="company_about" class="form-label small fw-semibold text-muted">Footer About Text</label>
                                <textarea class="form-control rounded-4" id="company_about" name="company_about" rows="3">{{ $settings['company_about'] }}</textarea>
                            </div>
                            <div class="col-12">
                                <label for="about_content" class="form-label small fw-semibold text-muted">About Us Page Content</label>
                                <textarea class="form-control rounded-4" id="about_content" name="about_content" rows="6" placeholder="Your company story for the About page...">{{ $settings['about_content'] }}</textarea>
                                <div class="form-text small">Leave blank to use the default story on the About page.</div>
                            </div>
                            <div class="col-12">
                                <label for="meta_description" class="form-label small fw-semibold text-muted">Default SEO Meta Description</label>
                                <textarea class="form-control rounded-4" id="meta_description" name="meta_description" rows="2">{{ $settings['meta_description'] }}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label for="copyright_text" class="form-label small fw-semibold text-muted">Copyright Line</label>
                                <input type="text" class="form-control rounded-pill px-3" id="copyright_text" name="copyright_text" value="{{ $settings['copyright_text'] }}">
                            </div>
                            <div class="col-md-6">
                                <label for="business_hours" class="form-label small fw-semibold text-muted">Business Hours</label>
                                <input type="text" class="form-control rounded-pill px-3" id="business_hours" name="business_hours" value="{{ $settings['business_hours'] }}">
                            </div>
                            <div class="col-12">
                                <label for="whatsapp_greeting" class="form-label small fw-semibold text-muted">WhatsApp Default Message</label>
                                <input type="text" class="form-control rounded-pill px-3" id="whatsapp_greeting" name="whatsapp_greeting" value="{{ $settings['whatsapp_greeting'] }}">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5">
                        <div class="card bg-light border-0 rounded-4 p-4">
                            <h6 class="fw-bold text-secondary mb-3">Logo & Favicon</h6>
                            <label for="site_logo" class="form-label small fw-semibold text-muted">Upload Site Logo</label>
                            <input type="file" class="form-control rounded-pill px-3 mb-3" id="site_logo" name="site_logo" accept="image/*">
                            @if($settings['site_logo'])
                                <div class="mb-3 p-3 bg-white rounded-3 border text-center">
                                    <span class="small text-muted d-block mb-2">Current Logo</span>
                                    <img src="{{ asset($settings['site_logo']) }}" alt="Logo" style="max-height: 80px; max-width: 100%; object-fit: contain;">
                                </div>
                            @endif
                            <label for="site_favicon" class="form-label small fw-semibold text-muted">Upload Favicon</label>
                            <input type="file" class="form-control rounded-pill px-3 mb-3" id="site_favicon" name="site_favicon" accept="image/*,.ico">
                            @if($settings['site_favicon'])
                                <div class="mb-0 p-3 bg-white rounded-3 border text-center">
                                    <span class="small text-muted d-block mb-2">Current Favicon</span>
                                    <img src="{{ asset($settings['site_favicon']) }}" alt="Favicon" style="max-height: 32px;">
                                </div>
                            @endif
                            <p class="text-muted small mt-3 mb-0">Recommended logo: PNG or SVG with transparent background, max height ~80px.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- TAB 2: HERO SECTION -->
            <div class="tab-pane fade" id="hero-pane" role="tabpanel" aria-labelledby="hero-tab">
                <div class="alert alert-info border-0 rounded-4 d-flex align-items-start gap-3 mb-4">
                    <i class="bi bi-info-circle-fill fs-4 mt-1"></i>
                    <div>
                        <h6 class="fw-bold mb-1">Homepage uses Hero Slides carousel</h6>
                        <p class="small mb-2">The live homepage hero is managed from <a href="{{ route('admin.slides.index') }}" class="fw-semibold">Hero Slides</a>.
                        @if($activeSlidesCount > 0)
                            You currently have <strong>{{ $activeSlidesCount }}</strong> active slide(s) showing on the homepage.
                        @else
                            No active slides are scheduled — the fallback hero below will display instead.
                        @endif
                        </p>
                        <a href="{{ route('admin.slides.index') }}" class="btn btn-sm btn-primary-mj rounded-pill px-3">
                            <i class="bi bi-images me-1"></i> Manage Hero Slides
                        </a>
                    </div>
                </div>

                <div class="border rounded-4 p-4 bg-light">
                    <h6 class="fw-bold text-secondary mb-1">Fallback Hero (backup only)</h6>
                    <p class="text-muted small mb-3">These fields are only used when no active hero slides exist.</p>
                    <div class="row g-3">
                    <div class="col-md-6">
                        <label for="hero_badge" class="form-label small fw-semibold text-muted">Hero Badge Text</label>
                        <input type="text" class="form-control rounded-pill px-3" id="hero_badge" name="hero_badge" value="{{ $settings['hero_badge'] }}" required>
                    </div>
                    
                    <div class="col-md-6">
                        <label for="hero_title" class="form-label small fw-semibold text-muted">Hero Heading Title</label>
                        <input type="text" class="form-control rounded-pill px-3" id="hero_title" name="hero_title" value="{{ $settings['hero_title'] }}" required>
                    </div>

                    <div class="col-12">
                        <label for="hero_subtitle" class="form-label small fw-semibold text-muted">Hero Subtitle Paragraph</label>
                        <textarea class="form-control rounded-4" id="hero_subtitle" name="hero_subtitle" rows="3" required>{{ $settings['hero_subtitle'] }}</textarea>
                    </div>

                    <div class="col-md-6">
                        <label for="hero_image" class="form-label small fw-semibold text-muted">Upload Custom Hero Showcase Image</label>
                        <input type="file" class="form-control rounded-pill px-3" id="hero_image" name="hero_image">
                    </div>

                    <div class="col-md-6">
                        <span class="small fw-semibold text-muted d-block mb-2">Current Hero Image</span>
                        <div class="border rounded-4 overflow-hidden" style="max-height: 100px; width: 180px;">
                            <img src="{{ mjs_image($settings['hero_image'], 'settings-hero') }}" class="w-100 h-100" style="object-fit: cover;" alt="current hero">
                        </div>
                    </div>
                    </div>
                </div>
            </div>

            <!-- TAB 2: CONTACT & FOOTER -->
            <div class="tab-pane fade" id="footer-pane" role="tabpanel" aria-labelledby="footer-tab">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="footer_email" class="form-label small fw-semibold text-muted">Business Support Email</label>
                        <input type="email" class="form-control rounded-pill px-3" id="footer_email" name="footer_email" value="{{ $settings['footer_email'] }}" required>
                    </div>
                    
                    <div class="col-md-6">
                        <label for="footer_phone" class="form-label small fw-semibold text-muted">Support Call Hotline</label>
                        <input type="text" class="form-control rounded-pill px-3" id="footer_phone" name="footer_phone" value="{{ $settings['footer_phone'] }}" required>
                    </div>

                    <div class="col-12">
                        <label for="footer_address" class="form-label small fw-semibold text-muted">Physical Workshop Location Address</label>
                        <textarea class="form-control rounded-4" id="footer_address" name="footer_address" rows="3" required>{{ $settings['footer_address'] }}</textarea>
                    </div>
                </div>
            </div>

            <!-- TAB 3: SOCIAL NETWORKS -->
            <div class="tab-pane fade" id="social-pane" role="tabpanel" aria-labelledby="social-tab">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label for="footer_whatsapp" class="form-label small fw-semibold text-muted">WhatsApp Business Phone (e.g. +254 712 345 678)</label>
                        <input type="text" class="form-control rounded-pill px-3" id="footer_whatsapp" name="footer_whatsapp" value="{{ $settings['footer_whatsapp'] }}" required>
                    </div>

                    <div class="col-md-6">
                        <label for="footer_facebook" class="form-label small fw-semibold text-muted">Facebook Profile URL</label>
                        <input type="url" class="form-control rounded-pill px-3" id="footer_facebook" name="footer_facebook" value="{{ $settings['footer_facebook'] }}" required>
                    </div>
                    
                    <div class="col-md-6">
                        <label for="footer_instagram" class="form-label small fw-semibold text-muted">Instagram Profile URL</label>
                        <input type="url" class="form-control rounded-pill px-3" id="footer_instagram" name="footer_instagram" value="{{ $settings['footer_instagram'] }}" required>
                    </div>
                </div>
            </div>

        </div>

        <div class="text-center mt-5 border-top pt-4">
            <button type="submit" class="btn btn-primary-mj btn-lg rounded-pill px-5 text-uppercase">
                Save Website Config <i class="bi bi-check-circle ms-1"></i>
            </button>
        </div>
    </form>
</div>

@endsection
