@extends('layouts.seller')

@section('title', 'Microsite Settings')

@section('content')
<div class="page-header d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="page-title fw-bold">Microsite Settings</h4>
        <p class="text-muted mb-0">Customize your public company profile page appearance</p>
    </div>
    <a href="{{ route('seller.public.profile', $seller->slug) }}" target="_blank" class="btn btn-primary-gradient rounded-pill px-4 shadow-sm">
        <i class="bi bi-eye-fill me-2"></i>Live Preview
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show border-0 shadow-sm rounded-3 mb-4" role="alert">
        <div class="d-flex align-items-center">
             <i class="bi bi-check-circle-fill me-3 fs-4 text-success"></i>
             <div>{{ session('success') }}</div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<form action="{{ route('seller.microsite.settings.update') }}" method="POST" enctype="multipart/form-data" id="settingsForm">
    @csrf
    <div class="row g-4 pb-5 mb-5">
        <!-- Left Column -->
        <div class="col-lg-8">
            
            <!-- Mobile-Friendly Accordion -->
            <div class="accordion" id="settingsAccordion">
                
                <!-- Branding Section (New) -->
                <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button fw-bold text-dark bg-white py-3" type="button" data-bs-toggle="collapse" data-bs-target="#brandingSection" aria-expanded="true">
                            <div class="d-flex align-items-center gap-2">
                                <span class="bg-primary-subtle text-primary p-2 rounded"><i class="bi bi-palette-fill"></i></span>
                                <div>Branding & Theme</div>
                            </div>
                        </button>
                    </h2>
                    <div id="brandingSection" class="accordion-collapse collapse show" data-bs-parent="#settingsAccordion">
                        <div class="accordion-body p-4">
                            <div class="row g-4">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Logo</label>
                                    <div class="d-flex align-items-center gap-3">
                                        @if($seller->logo)
                                            <div class="bg-white p-1 border rounded shadow-sm">
                                                <img src="{{ asset('storage/' . $seller->logo) }}" width="60" height="60" class="object-fit-contain">
                                            </div>
                                        @endif
                                        <div class="flex-grow-1">
                                            <input type="file" name="logo" class="form-control" accept="image/*">
                                            <div class="form-text text-muted small">Recommended: 500x500px PNG/JPG</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold small text-muted text-uppercase">Theme Color</label>
                                    <div class="d-flex align-items-center gap-3">
                                        <input type="color" name="theme_color" class="form-control form-control-color border-0 shadow-sm" 
                                               value="{{ old('theme_color', $seller->theme_color ?? '#0d6efd') }}" 
                                               title="Choose your theme color">
                                         <div class="flex-grow-1">
                                             <div class="text-muted small">Select a primary color for buttons, links, and accents.</div>
                                         </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Hero Section Settings -->
                <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-bold text-dark bg-white py-3" type="button" data-bs-toggle="collapse" data-bs-target="#heroSection">
                             <div class="d-flex align-items-center gap-2">
                                <span class="bg-info-subtle text-info p-2 rounded"><i class="bi bi-images"></i></span>
                                <div>Hero Section</div>
                            </div>
                        </button>
                    </h2>
                    <div id="heroSection" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
                        <div class="accordion-body p-4">
                            <div class="mb-3">
                                <label class="form-label fw-bold small text-uppercase text-muted">Tagline</label>
                                <input type="text" name="tagline" class="form-control form-control-lg bg-light border-0" maxlength="255"
                                       value="{{ old('tagline', $settings->tagline) }}" 
                                       placeholder="e.g., World Class Manufacturing">
                            </div>
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label fw-bold small text-uppercase text-muted">CTA Button Text</label>
                                    <input type="text" name="cta_text" class="form-control bg-light border-0" maxlength="50"
                                           value="{{ old('cta_text', $settings->cta_text ?? 'Contact Us') }}">
                                </div>
                                <div class="col-md-6 mb-3">
                                     <label class="form-label fw-bold small text-uppercase text-muted">CTA Link (Optional)</label>
                                    <input type="url" name="cta_link" class="form-control bg-light border-0" placeholder="https://..."
                                           value="{{ old('cta_link', $settings->cta_link) }}">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Stats Section -->
                <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-bold text-dark bg-white py-3" type="button" data-bs-toggle="collapse" data-bs-target="#statsSection">
                             <div class="d-flex align-items-center gap-2">
                                <span class="bg-success-subtle text-success p-2 rounded"><i class="bi bi-graph-up"></i></span>
                                <div>Business Statistics</div>
                            </div>
                        </button>
                    </h2>
                    <div id="statsSection" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
                        <div class="accordion-body p-4">
                            <div class="form-check form-switch mb-4 p-3 bg-light rounded d-flex justify-content-between align-items-center">
                                <label class="form-check-label fw-bold text-dark" for="showStats">Show Stats Bar on Microsite</label>
                                <input class="form-check-input" type="checkbox" name="show_stats" id="showStats"
                                       {{ $settings->show_stats ? 'checked' : '' }} style="transform: scale(1.2);">
                            </div>
                            <div class="row g-3">
                                <div class="col-6 col-md-4">
                                    <label class="form-label fw-bold small text-muted">Years Experience</label>
                                    <div class="input-group">
                                        <span class="input-group-text bg-light border-0"><i class="bi bi-calendar-check"></i></span>
                                        <input type="number" name="years_in_business" class="form-control bg-light border-0" min="0" max="100"
                                               value="{{ old('years_in_business', $settings->years_in_business) }}">
                                    </div>
                                </div>
                                <div class="col-6 col-md-4">
                                    <label class="form-label fw-bold small text-muted">Products Sold</label>
                                     <div class="input-group">
                                        <span class="input-group-text bg-light border-0"><i class="bi bi-box-seam"></i></span>
                                        <input type="number" name="products_sold" class="form-control bg-light border-0" min="0"
                                            value="{{ old('products_sold', $settings->products_sold ?? $seller->products->count()) }}">
                                    </div>
                                </div>
                                <div class="col-12 col-md-4">
                                    <label class="form-label fw-bold small text-muted">Happy Clients</label>
                                     <div class="input-group">
                                        <span class="input-group-text bg-light border-0"><i class="bi bi-people"></i></span>
                                        <input type="number" name="happy_clients" class="form-control bg-light border-0" min="0"
                                            value="{{ old('happy_clients', $settings->happy_clients) }}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Video Section -->
                <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-bold text-dark bg-white py-3" type="button" data-bs-toggle="collapse" data-bs-target="#videoSection">
                             <div class="d-flex align-items-center gap-2">
                                <span class="bg-danger-subtle text-danger p-2 rounded"><i class="bi bi-play-btn-fill"></i></span>
                                <div>Video Presentation</div>
                            </div>
                        </button>
                    </h2>
                    <div id="videoSection" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
                        <div class="accordion-body p-4">
                             <div class="form-check form-switch mb-4 p-3 bg-light rounded d-flex justify-content-between align-items-center">
                                <label class="form-check-label fw-bold text-dark" for="showVideo">Enable Video Section</label>
                                <input class="form-check-input" type="checkbox" name="show_video" id="showVideo"
                                       {{ $settings->show_video ? 'checked' : '' }} style="transform: scale(1.2);">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold small text-muted">YouTube Video URL</label>
                                <div class="input-group">
                                     <span class="input-group-text bg-light border-0"><i class="bi bi-youtube text-danger"></i></span>
                                     <input type="url" name="video_url" class="form-control bg-light border-0"
                                       value="{{ old('video_url', $settings->video_url) }}"
                                       placeholder="https://youtu.be/...">
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold small text-muted">Video Title</label>
                                <input type="text" name="video_title" class="form-control bg-light border-0" maxlength="100"
                                       value="{{ old('video_title', $settings->video_title) }}"
                                       placeholder="Promotional Video">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SEO Settings -->
                <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-bold text-dark bg-white py-3" type="button" data-bs-toggle="collapse" data-bs-target="#seoSection">
                            <div class="d-flex align-items-center gap-2">
                                <span class="bg-warning-subtle text-warning p-2 rounded"><i class="bi bi-search"></i></span>
                                <div>SEO Configuration</div>
                            </div>
                        </button>
                    </h2>
                    <div id="seoSection" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
                        <div class="accordion-body p-4">
                            <div class="mb-3">
                                <label class="form-label fw-bold small text-muted">Meta Title</label>
                                <input type="text" name="meta_title" class="form-control bg-light border-0" maxlength="70"
                                       value="{{ old('meta_title', $settings->meta_title) }}"
                                       placeholder="{{ $seller->company_name }}">
                            </div>
                            <div class="mb-3">
                                <label class="form-label fw-bold small text-muted">Meta Description</label>
                                <textarea name="meta_description" class="form-control bg-light border-0" rows="3" maxlength="160">{{ old('meta_description', $settings->meta_description) }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                
                 <!-- Brochure Upload -->
                <div class="accordion-item border-0 shadow-sm mb-3 rounded-3 overflow-hidden">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed fw-bold text-dark bg-white py-3" type="button" data-bs-toggle="collapse" data-bs-target="#brochureSection">
                             <div class="d-flex align-items-center gap-2">
                                <span class="bg-secondary-subtle text-secondary p-2 rounded"><i class="bi bi-file-earmark-pdf-fill"></i></span>
                                <div>Company Brochure</div>
                            </div>
                        </button>
                    </h2>
                    <div id="brochureSection" class="accordion-collapse collapse" data-bs-parent="#settingsAccordion">
                         <div class="accordion-body p-4">
                            @if($settings->brochure_path)
                                <div class="d-flex align-items-center mb-3 p-3 bg-light rounded">
                                    <i class="bi bi-file-pdf text-danger fs-1 me-3"></i>
                                    <div>
                                        <h6 class="fw-bold mb-0">Current File</h6>
                                        <a href="{{ asset('storage/' . $settings->brochure_path) }}" target="_blank" class="small text-decoration-none">View PDF</a>
                                    </div>
                                </div>
                            @endif
                            <input type="file" name="brochure" class="form-control" accept=".pdf">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- Right Column - Section Visibility -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white py-3 border-bottom">
                    <h6 class="mb-0 fw-bold text-dark"><i class="bi bi-toggle-on me-2 text-primary"></i>Section Visibility</h6>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                         @foreach([
                            'show_about' => ['About Us Section', 'bi-info-circle'],
                            'show_products' => ['Products Grid', 'bi-grid'],
                            'show_certificates' => ['Certificates', 'bi-award'],
                            'show_testimonials' => ['Testimonials', 'bi-chat-quote'],
                            'show_faq' => ['FAQ Section', 'bi-question-circle'],
                            'show_contact' => ['Contact Form', 'bi-envelope'],
                        ] as $field => $info)
                        <div class="list-group-item d-flex justify-content-between align-items-center py-3">
                            <div class="d-flex align-items-center">
                                <i class="bi {{ $info[1] }} me-3 text-muted fs-5"></i>
                                <span class="fw-medium text-dark">{{ $info[0] }}</span>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" name="{{ $field }}" 
                                       {{ $settings->$field ? 'checked' : '' }} style="transform: scale(1.3); cursor: pointer;">
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <h6 class="fw-bold mb-3 small text-muted text-uppercase">Quick Management</h6>
            <div class="d-grid gap-2">
                <a href="{{ route('seller.microsite.testimonials') }}" class="btn btn-white fw-bold text-start p-3 border-0 shadow-sm mb-2 hover-shadow">
                    <i class="bi bi-chat-quote-fill text-primary me-2"></i> Manage Testimonials
                </a>
                <a href="{{ route('seller.microsite.faqs') }}" class="btn btn-white fw-bold text-start p-3 border-0 shadow-sm mb-2 hover-shadow">
                    <i class="bi bi-question-circle-fill text-success me-2"></i> Manage FAQs
                </a>
                <a href="{{ route('seller.banners.index') }}" class="btn btn-white fw-bold text-start p-3 border-0 shadow-sm mb-2 hover-shadow">
                    <i class="bi bi-images text-info me-2"></i> Manage Banners
                </a>
            </div>
        </div>
    </div>

    <!-- Mobile Sticky Save Bar -->
    <div class="fixed-bottom bg-white border-top shadow-lg py-3 px-4 d-flex justify-content-between align-items-center" style="z-index: 1050; box-shadow: 0 -4px 20px rgba(0,0,0,0.05) !important;">
        <div class="d-flex align-items-center">
             <i class="bi bi-info-circle-fill text-primary me-2 fs-5"></i>
             <div>
                <span class="fw-bold text-dark d-block" style="font-size: 0.9rem;">Unsaved Changes</span>
                <span class="text-muted small d-none d-md-block" style="font-size: 0.8rem;">Don't forget to save your updates!</span>
             </div>
        </div>
        <div class="d-flex gap-3">
             <button type="button" onclick="window.location.reload()" class="btn btn-light border fw-bold px-4 rounded-pill d-none d-md-block">Cancel</button>
             <button type="submit" class="btn btn-dark fw-bold px-5 py-2 rounded-pill shadow-sm">
                <i class="bi bi-check-lg me-2"></i> Save Changes
            </button>
        </div>
    </div>
</form>

<style>
    /* Add sufficient padding at bottom so content isn't hidden by sticky bar */
    .main-content, body { padding-bottom: 120px !important; }
    
    .accordion-button:not(.collapsed) {
        background-color: #f8f9fa;
        color: #000;
        box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
    }
    .accordion-button:focus { box-shadow: none; border-color: rgba(0,0,0,.125); }
    .btn-white { background: white; transition: all 0.2s; }
    .btn-white:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important; }
    .accordion-item { overflow: hidden; }
</style>
@endsection
