@extends('layouts.master')

@section('title', 'Help & Support - The Mini Port')

@section('content')
<style>
    .help-hero {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        position: relative;
        overflow: hidden;
    }
    .help-hero::before {
        content: '';
        position: absolute;
        top: -50%; right: -20%;
        width: 600px; height: 600px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
        border-radius: 50%;
    }
    .faq-card {
        border: 1px solid #f0f0f0;
        border-radius: 12px;
        transition: all 0.3s ease;
    }
    .faq-card:hover {
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        border-color: #f97316;
    }
    .help-category-card {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .help-category-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    }
</style>

<!-- Hero Section -->
<section class="help-hero py-5 text-white">
    <div class="container position-relative">
        <div class="row align-items-center py-4">
            <div class="col-lg-8 mx-auto text-center">
                <h1 class="display-4 fw-bold mb-3">How can we help you?</h1>
                <p class="lead mb-4 opacity-75">Find answers to common questions about The Mini Port platform</p>
                <div class="position-relative mx-auto" style="max-width: 600px;">
                    <input type="text" class="form-control form-control-lg border-0 shadow-lg ps-4 py-3 rounded-pill" 
                           placeholder="Search for help topics..." id="helpSearch">
                    <button class="btn btn-dark rounded-pill position-absolute top-50 end-0 translate-middle-y me-2 px-4">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Help Categories -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row g-4">
            <!-- For Buyers -->
            <div class="col-md-4">
                <div class="help-category-card card border-0 shadow-sm h-100 rounded-4 overflow-hidden">
                    <div class="card-body p-4 text-center">
                        <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-cart4 text-primary fs-1"></i>
                        </div>
                        {!! \App\Models\Setting::getValue('help_buyers_guide') !!}
                        <a href="#buyers" class="btn btn-outline-primary rounded-pill px-4 mt-3">View Guide</a>
                    </div>
                </div>
            </div>
            
            <!-- For Sellers -->
            <div class="col-md-4">
                <div class="help-category-card card border-0 shadow-sm h-100 rounded-4 overflow-hidden">
                    <div class="card-body p-4 text-center">
                        <div class="bg-success bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-shop text-success fs-1"></i>
                        </div>
                        {!! \App\Models\Setting::getValue('help_sellers_guide') !!}
                        <a href="#sellers" class="btn btn-outline-success rounded-pill px-4 mt-3">View Guide</a>
                    </div>
                </div>
            </div>
            
            <!-- Account & Billing -->
            <div class="col-md-4">
                <div class="help-category-card card border-0 shadow-sm h-100 rounded-4 overflow-hidden">
                    <div class="card-body p-4 text-center">
                        <div class="bg-warning bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 80px; height: 80px;">
                            <i class="bi bi-credit-card text-warning fs-1"></i>
                        </div>
                        {!! \App\Models\Setting::getValue('help_plans_guide') !!}
                        <a href="#subscription-info" class="btn btn-outline-warning rounded-pill px-4 mt-3">View Guide</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Important Notes Section -->
<section class="py-5 bg-white" id="notes">
    <div class="container">
        <div class="text-center mb-5">
            <span class="badge bg-danger bg-opacity-10 text-danger mb-2 px-3 py-2 rounded-pill">Important</span>
            <h2 class="fw-bold">Platform Notes & Guidelines</h2>
            <p class="text-muted">Please read these important notes before using The Mini Port</p>
        </div>
        
        <div class="row g-4">
            <div class="col-lg-6">
                <div class="card border-0 bg-light rounded-4 h-100">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start gap-3 mb-3">
                            <div class="bg-info bg-opacity-10 rounded-circle p-2">
                                <i class="bi bi-info-circle text-info fs-4"></i>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-2">For Free Sellers</h5>
                                <div class="text-muted mb-0">
                                    {!! \App\Models\Setting::getValue('help_notes_free') !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="card border-0 bg-light rounded-4 h-100">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start gap-3 mb-3">
                            <div class="bg-success bg-opacity-10 rounded-circle p-2">
                                <i class="bi bi-patch-check text-success fs-4"></i>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-2">MOQ (Minimum Order Quantity)</h5>
                                <div class="text-muted mb-0">
                                    {!! \App\Models\Setting::getValue('help_notes_moq') !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="card border-0 bg-light rounded-4 h-100">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start gap-3 mb-3">
                            <div class="bg-primary bg-opacity-10 rounded-circle p-2">
                                <i class="bi bi-shield-check text-primary fs-4"></i>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-2">KYC Verification</h5>
                                <div class="text-muted mb-0">
                                    {!! \App\Models\Setting::getValue('help_notes_kyc') !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-6">
                <div class="card border-0 bg-light rounded-4 h-100">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-start gap-3 mb-3">
                            <div class="bg-warning bg-opacity-10 rounded-circle p-2">
                                <i class="bi bi-exclamation-triangle text-warning fs-4"></i>
                            </div>
                            <div>
                                <h5 class="fw-bold mb-2">Payment Policy</h5>
                                <div class="text-muted mb-0">
                                    {!! \App\Models\Setting::getValue('help_notes_payment') !!}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Dynamic FAQs Sections -->
@foreach($faqCategories as $catKey => $catLabel)
    <section class="py-5 {{ $loop->index % 2 == 0 ? 'bg-light' : 'bg-white' }}" id="{{ $catKey }}">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge mb-2 px-3 py-2 rounded-pill" style="{{ $loop->index % 2 == 0 ? 'background-color: rgba(var(--bs-primary-rgb), 0.1); color: var(--bs-primary);' : 'background-color: rgba(25, 135, 84, 0.1); color: #198754;' }}">{{ $catLabel }}</span>
                <h2 class="fw-bold">Frequently Asked Questions</h2>
            </div>
            
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    @if(isset($faqs[$catKey]) && $faqs[$catKey]->count() > 0)
                        <div class="accordion" id="{{ $catKey }}Faq">
                            @foreach($faqs[$catKey] as $faq)
                                <div class="accordion-item faq-card mb-3 border-0 rounded-3 overflow-hidden">
                                    <h2 class="accordion-header">
                                        <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }} fw-bold" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $faq->id }}">
                                            {{ $faq->question }}
                                        </button>
                                    </h2>
                                    <div id="faq{{ $faq->id }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}" data-bs-parent="#{{ $catKey }}Faq">
                                        <div class="accordion-body text-muted">
                                            {!! nl2br(e($faq->answer)) !!}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4 text-muted">
                            <i class="bi bi-chat-square-dots fs-1 mb-3 opacity-50"></i>
                            <p>No FAQs available for this section yet.</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endforeach

<!-- Subscription Plans -->
<section class="py-5 bg-light" id="subscription-info">
    <div class="container">
        <div class="text-center mb-5">
            <span class="badge bg-warning bg-opacity-10 text-warning mb-2 px-3 py-2 rounded-pill">Plans & Pricing</span>
            <h2 class="fw-bold">Subscription Information</h2>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-5">
                        <div class="table-responsive">
                            <table class="table table-borderless mb-0">
                                <thead>
                                    <tr class="border-bottom">
                                        <th>Feature</th>
                                        <th class="text-center">Free</th>
                                        <th class="text-center text-primary">Paid Plans</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Product Listings</td>
                                        <td class="text-center">3</td>
                                        <td class="text-center text-success fw-bold">10-50+</td>
                                    </tr>
                                    <tr>
                                        <td>Images per Product</td>
                                        <td class="text-center">4</td>
                                        <td class="text-center text-success fw-bold">5-10+</td>
                                    </tr>
                                    <tr>
                                        <td>Contact Visibility</td>
                                        <td class="text-center"><i class="bi bi-x-circle text-danger"></i></td>
                                        <td class="text-center"><i class="bi bi-check-circle text-success"></i></td>
                                    </tr>
                                    <tr>
                                        <td>Priority in Search</td>
                                        <td class="text-center"><i class="bi bi-x-circle text-danger"></i></td>
                                        <td class="text-center"><i class="bi bi-check-circle text-success"></i></td>
                                    </tr>
                                    <tr>
                                        <td>Analytics Dashboard</td>
                                        <td class="text-center">Basic</td>
                                        <td class="text-center text-success fw-bold">Advanced</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="text-center mt-4 pt-4 border-top">
                            <a href="{{ route('public.subscription.plans') }}" class="btn btn-primary btn-lg rounded-pill px-5 fw-bold">
                                View All Plans <i class="bi bi-arrow-right ms-2"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Contact Support -->
<section class="py-5 bg-dark text-white">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <h3 class="fw-bold mb-2">Still need help?</h3>
                <p class="text-white-50 mb-0">Our support team is available to assist you with any questions.</p>
            </div>
            <div class="col-lg-4 text-lg-end mt-3 mt-lg-0">
                <a href="mailto:{{ $supportEmail }}" class="btn btn-light btn-lg rounded-pill px-4 fw-bold">
                    <i class="bi bi-envelope me-2"></i> Contact Support
                </a>
            </div>
        </div>
    </div>
</section>
@endsection