@extends('layouts.app')

@section('title', 'Support Center - Admin')

@section('content')
<div class="row g-4 justify-content-center">
    <!-- Header -->
    <div class="col-lg-10">
        <div class="card border-0 shadow-sm bg-primary text-white overflow-hidden mb-4">
            <div class="card-body p-5">
                <div class="row align-items-center">
                    <div class="col-md-7">
                        <h1 class="fw-bold mb-3">How can we help you today?</h1>
                        <p class="lead opacity-75 mb-4">Search our knowledge base or navigate through the categories below to find answers to your platform questions.</p>
                        <div class="input-group input-group-lg shadow-sm">
                            <span class="input-group-text bg-white border-0"><i class="bi bi-search text-muted"></i></span>
                            <input type="text" name="support_search" id="support_search" class="form-control border-0" placeholder="Search for documentation, guides, or FAQs...">
                        </div>
                    </div>
                    <div class="col-md-5 d-none d-md-block text-center">
                        <i class="bi bi-headset display-1 opacity-25"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Links -->
    <div class="col-lg-10">
        <div class="row g-4 mb-5">
            <div class="col-md-4">
                <div class="card border-0 shadow-sm text-center p-4 hover-lift">
                    <div class="bg-danger bg-opacity-10 text-danger rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                        <i class="bi bi-ticket-perforated fs-3"></i>
                    </div>
                    <h5 class="fw-bold">My Tickets</h5>
                    <p class="text-muted small">Manage and reply to your currently open support tickets.</p>
                    <a href="{{ route('support.tickets.index') }}" class="btn btn-sm btn-outline-danger px-4 rounded-pill">Enter Desk</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm text-center p-4 hover-lift">
                    <div class="bg-success bg-opacity-10 text-success rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                        <i class="bi bi-journal-text fs-3"></i>
                    </div>
                    <h5 class="fw-bold">Platform Docs</h5>
                    <p class="text-muted small">Comprehensive guides on setting up and managing your marketplace.</p>
                    <a href="{{ route('faq') }}" class="btn btn-sm btn-outline-success px-4 rounded-pill">Read Docs</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card border-0 shadow-sm text-center p-4 hover-lift">
                    <div class="bg-info bg-opacity-10 text-info rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3" style="width: 60px; height: 60px;">
                        <i class="bi bi-shield-lock fs-3"></i>
                    </div>
                    <h5 class="fw-bold">Security Guides</h5>
                    <p class="text-muted small">Best practices for keeping your vendor data and transactions safe.</p>
                    <a href="{{ route('policies.index') }}" class="btn btn-sm btn-outline-info px-4 rounded-pill text-dark">Learn More</a>
                </div>
            </div>
        </div>

        <!-- FAQs -->
        <h4 class="fw-bold mb-4 text-dark"><i class="bi bi-chat-left-text me-2 text-primary"></i>Frequently Asked Questions</h4>
        <div class="accordion border-0 shadow-sm rounded overflow-hidden" id="supportAccordion">
            @foreach($faqs as $index => $faq)
            <div class="accordion-item border-0 border-bottom">
                <h2 class="accordion-header">
                    <button class="accordion-button {{ $index == 0 ? '' : 'collapsed' }} fw-bold py-4" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $index }}">
                        {{ $faq['q'] }}
                    </button>
                </h2>
                <div id="collapse{{ $index }}" class="accordion-collapse collapse {{ $index == 0 ? 'show' : '' }}" data-bs-parent="#supportAccordion">
                    <div class="accordion-body py-4 text-secondary" style="line-height: 1.6;">
                        {{ $faq['a'] }}
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <div class="text-center mt-5 py-4 border-top">
             <p class="text-muted">Couldn't find what you were looking for?</p>
             <button class="btn btn-primary px-5 py-2 fw-bold shadow-sm">Contact Support Agent</button>
             <div class="mt-3">
                 <a href="{{ route('admin.dashboard') }}" class="text-decoration-none small text-secondary"><i class="bi bi-arrow-left me-1"></i> Back to Dashboard</a>
             </div>
        </div>
    </div>
</div>

<style>
    .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1)!important; }
    .accordion-button:not(.collapsed) { background-color: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
</style>
@endsection