@extends('storefront.layouts.main')

@section('title', $page->meta_title ?? $page->title)

@section('meta_description', $page->meta_description ?? '')

@section('content')
<!-- Page Hero Banner -->
<div class="row">
    <div class="col-md-12">
        <div class="portlet box blue">
            <div class="portlet-title">
                <div class="caption"><h2 class="no-margin">{{ $page->title }}</h2></div>
            </div>
            <div class="portlet-body" style="padding: 20px 30px;">
                <h4 class="text-center" style="margin:0;">
                    @if($page->slug === 'announcements')
                        Latest news and updates from our team
                    @elseif($page->slug === 'knowledge-base')
                        Guides and tutorials to help you get started
                    @elseif($page->slug === 'network-status')
                        Real-time status of our infrastructure
                    @elseif($page->slug === 'about-us')
                        Learn more about who we are
                    @elseif($page->slug === 'terms-of-service')
                        Please read our terms carefully
                    @elseif($page->slug === 'privacy-policy')
                        How we handle your data
                    @else
                        {{ $page->meta_description ?? '' }}
                    @endif
                </h4>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- Main Content -->
    <div class="col-md-9">
        <div class="portlet light">
            <div class="portlet-body">
                <div class="page-content-inner">
                    {!! $page->content !!}
                </div>
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="col-md-3">
        <!-- Quick Links -->
        <div class="portlet light">
            <div class="portlet-title">
                <div class="caption">
                    <span class="caption-subject bold uppercase" style="font-size:13px;">Quick Links</span>
                </div>
            </div>
            <div class="portlet-body" style="padding-top:0;">
                <ul class="page-sidebar-nav">
                    <li class="{{ $page->slug === 'announcements' ? 'active' : '' }}"><a href="{{ route('storefront.page', 'announcements') }}"><i class="fa fa-bullhorn"></i> Announcements</a></li>
                    <li class="{{ $page->slug === 'knowledge-base' ? 'active' : '' }}"><a href="{{ route('storefront.page', 'knowledge-base') }}"><i class="fa fa-book"></i> Knowledgebase</a></li>
                    <li class="{{ $page->slug === 'network-status' ? 'active' : '' }}"><a href="{{ route('storefront.page', 'network-status') }}"><i class="fa fa-signal"></i> Network Status</a></li>
                </ul>
            </div>
        </div>

        <!-- Need Help -->
        <div class="portlet light">
            <div class="portlet-body text-center" style="padding: 20px 15px;">
                <i class="fa fa-headphones fa-3x" style="color:#3598dc; margin-bottom:12px;"></i>
                <h4 class="bold">Need Help?</h4>
                <p class="font-grey-mint" style="font-size:13px;">Our support team is available to assist you.</p>
                <a href="{{ route('storefront.contact') }}" class="btn btn-sm" style="background:#3598dc; color:#fff; border:none; margin-top:5px;">
                    <i class="fa fa-envelope"></i> Contact Us
                </a>
                @auth
                <br>
                <a href="{{ route('client.tickets.create') }}" class="btn btn-sm btn-default" style="margin-top:8px;">
                    <i class="fa fa-ticket"></i> Open Ticket
                </a>
                @endauth
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    /* Page Content */
    .page-content-inner {
        font-size: 14px;
        line-height: 1.8;
        color: #444;
        overflow-x: auto;
    }
    .page-content-inner h2 {
        font-size: 22px;
        font-weight: 700;
        color: #333;
        margin: 25px 0 12px 0;
        padding-bottom: 8px;
        border-bottom: 2px solid #f0f0f0;
    }
    .page-content-inner h2:first-child {
        margin-top: 0;
    }
    .page-content-inner h3 {
        font-size: 17px;
        font-weight: 600;
        color: #333;
        margin: 20px 0 10px 0;
    }
    .page-content-inner h4 {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        margin: 15px 0 8px 0;
    }
    .page-content-inner p {
        margin-bottom: 12px;
    }
    .page-content-inner ul, .page-content-inner ol {
        padding-left: 20px;
        margin-bottom: 15px;
    }
    .page-content-inner ul li, .page-content-inner ol li {
        margin-bottom: 6px;
    }
    .page-content-inner img {
        max-width: 100%;
        height: auto;
    }
    .page-content-inner .table {
        margin-top: 10px;
    }
    .page-content-inner .table th,
    .page-content-inner .table td {
        word-break: break-word;
    }

    /* Announcement Items */
    .page-content-inner .announcement-item {
        padding: 18px 0;
        border-bottom: 1px solid #eee;
    }
    .page-content-inner .announcement-item:last-child {
        border-bottom: none;
    }
    .page-content-inner .announcement-item h4 {
        margin-top: 0;
        margin-bottom: 4px;
        font-size: 16px;
    }
    .page-content-inner .announcement-item .text-muted {
        font-size: 12px;
        display: block;
        margin-bottom: 8px;
    }
    .page-content-inner .announcement-item p:last-child {
        margin-bottom: 0;
        color: #555;
    }

    /* Status Banner */
    .page-content-inner .status-operational {
        background: #eafaf1;
        color: #27ae60;
        border: 1px solid #d4efdf;
        padding: 15px 20px;
        border-radius: 4px;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 20px;
    }
    .page-content-inner .status-operational i {
        margin-right: 8px;
    }

    /* Panel overrides inside page content */
    .page-content-inner .panel {
        margin-bottom: 15px;
    }
    .page-content-inner .panel .panel-heading h4 {
        margin: 0;
        font-size: 14px;
    }
    .page-content-inner .panel .panel-body {
        font-size: 13px;
    }
    .page-content-inner .panel .panel-body ul {
        padding-left: 0;
        list-style: none;
    }
    .page-content-inner .panel .panel-body ul li {
        padding: 4px 0;
    }

    /* Sidebar Nav */
    .page-sidebar-nav {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .page-sidebar-nav li a {
        display: block;
        padding: 9px 12px;
        color: #555;
        font-size: 13px;
        text-decoration: none;
        border-radius: 3px;
        transition: all 0.15s ease;
    }
    .page-sidebar-nav li a i {
        width: 20px;
        text-align: center;
        margin-right: 8px;
        color: #999;
    }
    .page-sidebar-nav li a:hover {
        background: #f5f7fa;
        color: #3598dc;
    }
    .page-sidebar-nav li a:hover i {
        color: #3598dc;
    }
    .page-sidebar-nav li.active a {
        background: #e8f4fd;
        color: #3598dc;
        font-weight: 600;
    }
    .page-sidebar-nav li.active a i {
        color: #3598dc;
    }

    @media (max-width: 991px) {
        .page-content-inner .row {
            margin-left: -5px;
            margin-right: -5px;
        }
        .page-content-inner .row > [class*="col-"] {
            padding-left: 5px;
            padding-right: 5px;
        }
    }
</style>
@endpush