
<?php
require_once __DIR__ . '/includes/db.php';

$base_url = 'http://localhost/medsfaq/';

function medsfaq_medication_slug(): string
{
    $slug = trim((string)($_GET['slug'] ?? ''));
    if ($slug !== '') {
        return $slug;
    }

    $path = parse_url($_SERVER['REQUEST_URI'] ?? '', PHP_URL_PATH) ?: '';
    $parts = array_values(array_filter(explode('/', $path)));
    return $parts ? urldecode((string)end($parts)) : '';
}

function medsfaq_meta_excerpt(string $html, int $length = 160): string
{
    $text = trim(preg_replace('/\s+/', ' ', strip_tags($html)) ?? '');
    if ($text === '') {
        return '';
    }

    if (function_exists('mb_strlen') && mb_strlen($text) > $length) {
        return mb_substr($text, 0, $length - 3) . '...';
    }

    if (!function_exists('mb_strlen') && strlen($text) > $length) {
        return substr($text, 0, $length - 3) . '...';
    }

    return $text;
}

$medication_slug = medsfaq_medication_slug();
$medication = null;

if ($medication_slug !== '') {
    try {
        $stmt = db()->prepare("SELECT * FROM medications WHERE slug = :slug AND status = 'published' LIMIT 1");
        $stmt->execute(['slug' => $medication_slug]);
        $medication = $stmt->fetch() ?: null;
    } catch (Throwable $e) {
        $medication = null;
    }
}

if ($medication) {
    $meta_title = (string)($medication['metatitle'] ?: $medication['title'] ?: $medication['titleTag'] ?: 'Medication Details');
    $meta_description = (string)($medication['metadescription'] ?: medsfaq_meta_excerpt((string)($medication['content'] ?? '')));
    $canonical_url = (string)($medication['canonical'] ?? $medication['connical'] ?? '');

    if ($canonical_url === '') {
        $canonical_url = $base_url . 'medication/' . rawurlencode((string)$medication['slug']);
    }
} elseif ($medication_slug !== '') {
    $canonical_url = $base_url . 'medication/' . rawurlencode($medication_slug);
}

include 'includes/header.php';
?>
<body>
    <!-- MAIN WRAPPER
    ================================================== -->
    <div class="main-wrapper">

        <!-- HEADER
        ================================================== -->
        <?php include 'includes/nav.php'; ?>

        <style>

            .blog-section {background: #ffffff00;}
        .breadcrumb {
            padding: 10px 0;
            font-family: Arial, sans-serif;
        }

        .blog-title{ 
            font-size: 38px;
            margin-bottom: 0px;
        }

        .breadcrumb ul {
            list-style: none;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0;
            margin: 0;
        }

        .breadcrumb li {
            font-size: 14px;
            color: #777;
        }

        /* Separator */
        .breadcrumb li+li::before {
            content: ">";
            margin-right: 8px;
            color: #aaa;
        }

        .breadcrumb a {
            text-decoration: none;
            color: #fec44a;
            font-weight: 500;
            transition: color 0.2s ease;
        }

        .breadcrumb a:hover {
            color: #ffc107;
            text-decoration: underline;
        }

        .mental-section {
            background: #f4f4f4;
            text-align: center;
            position: relative;
        }

        .blog-details-section {
            overflow: visible;
        }

        .blog-details-right {
            align-self: flex-start;
            position: sticky;
            top: 110px;
            height: fit-content;
        }

        .blog-details-right .blog-sidebar {
            position: static;
        }

        .blog-details-section .container,
        .blog-details-section .row,
        .blog-details-section .blog-details-right {
            overflow: visible;
            transform: none;
        }

        @media (max-width: 991.98px) {
            .blog-details-right .blog-sidebar {
                position: static;
                top: auto;
            }

            .blog-details-right {
                position: static;
                top: auto;
                height: auto;
            }
        }
        

        figure.table {
            margin: 20px 0;
            overflow-x: auto;
        }

        figure.table table {
            width: 100%;
            border-collapse: collapse;
            font-family: Arial, sans-serif;
            font-size: 15px;
            background-color: #ffffff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        figure.table th,
        figure.table td {
            padding: 12px 16px;
            text-align: left;
        }

        figure.table thead {
            background-color: #4a90e2;
            color: #ffffff;
        }

        figure.table thead th {
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        figure.table tbody tr {
            border-bottom: 1px solid #e6e6e6;
            transition: background 0.2s ease;
        }

        figure.table tbody tr:nth-child(even) {
            background-color: #f9fbfd;
        }

        figure.table tbody tr:hover {
            background-color: #eef5ff;
        }

        figure.table td:first-child {
            font-weight: 600;
            color: #333;
        }

        /* Responsive tweak */
        @media (max-width: 600px) {
            figure.table table {
                font-size: 14px;
            }

            figure.table th,
            figure.table td {
                padding: 10px;
            }
        }
    </style>

        <section class="blog-section" style="padding-bottom: 0px; padding-top: 30px;">
            <div class="container">
                <h1 class="blog-title" id="pageTitle"></h1>
                <div class="breadcrumb">
                    <ul>
                        <li><a href="<?= $base_url;?>">Home</a></li>
                        <li><a href="<?= $base_url?>medications">Medications</a></li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- BLOG DETAILS
        ================================================== -->
        <section class="blog-details-section" style="padding-top: 0px;">
            <div class="container">
                <div class="row">
                    <!-- blog-details left -->
                    <div class="col-lg-8 mb-5 mb-lg-0">
                        <div class="pe-lg-1-6">

                            <article class="card card-style6">
                                <div class="image-box image-hover">
                                    <img id="blogImage" src="" class="border-radius-10" alt="...">
                                    <!-- <div class="blog-date" id="blogDate"><span></span></div> -->
                                </div>
                                <div class="card-body border-radius-10">
                                    <ul class="list-unstyled mb-3">
                                        <li class="d-inline-block me-3 text-capitalize"><i
                                                class="ti-user me-2 text-primary"></i><a href="#">admin</a></li>
                                        <li class="d-inline-block"><i
                                                class="far fa-calendar-check me-2 text-primary align-middle"></i><span
                                                id="blogDate">Loading...</span></li>
                                    </ul>
                                    <!-- <h2 class="mb-4" id="blogTitle">Loading...</h2> -->
                                    <div id="blogContent"></div>
                                </div>
                                <div class="p-1-9 g-0 d-md-flex align-items-center entry-footer float-start">
                                    <div class="tags flex-grow-1 mb-4 mb-md-0 pe-md-3">
                                        <label class="h6 me-3 mb-0">Tags:</label>
                                        <span id="blogTags"></span>
                                    </div>
                                    <div class="blog-share-icon">
                                        <label class="h6 me-1 mb-0">Share:</label>
                                        <ul class="share-post m-0 p-0 d-inline-block">
                                            <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                                            <li><a href="#"><i class="fa-brands fa-x-twitter"></i></a></li>
                                            <li><a href="#"><i class="fab fa-pinterest-p"></i></a></li>
                                            <li><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </article>

                        </div>
                    </div>
                    <!-- end blog-details left -->

                    <!-- blog-details right -->
                    <div class="col-lg-4 blog-details-right">
                        <div class="blog-sidebar">
                            <!-- <div class="widget search">
                                <h4 class="widget-title title-font text-secondary">Search</h4>
                                <form action="#!" class="search-bar">
                                    <input type="search" name="search" placeholder="Type here ...">
                                    <a href="#" class="btn-newsletter"><i class="fas fa-search"></i></a>
                                </form>
                            </div> -->

                            <div class="widget widget-categories">
                                <h4 class="widget-title title-font text-secondary">Categories</h4>
                                <div class="widget-body">
                                    <ul class="list-style4" id="categoryList">
                                        <li>Loading...</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="widget widget-categories">
                                <h4 class="widget-title title-font text-secondary">Query Form</h4>
                                <div class="widget-body">
                                    <form id="contactForm">

                                        <div class="mb-3">
                                            <label class="form-label">Full Name</label>
                                            <input type="text" id="name" class="form-control"
                                                placeholder="Enter your name" required>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Email Address</label>
                                            <input type="email" id="email" class="form-control"
                                                placeholder="Enter your email" required>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Phone Number</label>
                                            <input type="tel" id="phone" class="form-control"
                                                placeholder="Enter your phone number" required>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Subject</label>
                                            <input type="text" id="subject" class="form-control"
                                                placeholder="Enter subject" required>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Your Query</label>
                                            <textarea id="message" class="form-control" rows="4"
                                                placeholder="Write your message..." required></textarea>
                                        </div>

                                        <button type="submit" class="butn border-0 w-100">Send Message</button>

                                    </form>
                                </div>
                            </div>

                            <div class="widget widget-post">
                                <h4 class="widget-title title-font text-secondary">Latest Posts</h4>
                                <div class="widget-body" id="latestPosts">
                                    <div>Loading...</div>
                                </div>
                            </div>

                            <!-- <div class="widget widget-tag">
                                <h4 class="widget-title title-font text-secondary">Popular Tags</h4>
                                <div class="widget-body">
                                    <ul class="blog-tags">
                                        <li><a href="#">Nutrition</a></li>
                                        <li><a href="#">Fitness</a></li>
                                        <li><a href="#">Diet</a></li>
                                        <li><a href="#">Health</a></li>
                                        <li><a href="#">Protein</a></li>
                                        <li><a href="#">Advice</a></li>
                                        <li><a href="#">Workout</a></li>
                                    </ul>
                                </div>
                            </div> -->

                            <!-- <div class="widget widget-social-icon">
                                <h4 class="widget-title title-font text-secondary">Follow Us</h4>
                                <div class="widget-body">
                                    <ul class="blog-social-icon">
                                        <li>
                                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fa-brands fa-x-twitter"></i></a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fab fa-youtube"></i></a>
                                        </li>
                                        <li>
                                            <a href="#"><i class="fab fa-linkedin-in"></i></a>
                                        </li>
                                    </ul>
                                </div>
                            </div> -->

                        </div>
                    </div>
                    <!-- end blog-details right -->
                </div>
            </div>
            <div class="bg-secondary p-2-2 d-sm-inline-block rounded-circle position-absolute bottom-10 right-5 d-none">
            </div>
            <div
                class="bg-primary p-3 d-sm-inline-block rounded-circle position-absolute bottom-10 right-5 ani-top-bottom d-none">
            </div>
        </section>

        <!-- FOOTER
        ================================================== -->
<?php include 'includes/footer.php'; ?>
