<?php 
include 'includes/header.php';
include 'includes/navbar.php';

error_reporting(E_ALL);
ini_set('display_errors', 1);

$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

$stmt = $conn->prepare("SELECT * FROM local_tours WHERE id = ?");
$stmt->bind_param("i", $id);
$stmt->execute();
$tour = $stmt->get_result()->fetch_assoc();

if(!$tour) {
    echo "<div class='container py-5 text-center' style='margin-top: 150px;'>
            <div class='card border-0 shadow-sm p-5' style='border-radius: 30px;'>
                <i class='fas fa-map-marked-alt mb-4 text-muted' style='font-size: 60px;'></i>
                <h2 class='fw-bold'>Tour Not Found</h2>
                <p class='text-muted'>The tour you're looking for (ID: $id) may have been removed.</p>
                <a href='local-tours.php' class='btn btn-primary rounded-pill px-5 py-3 fw-bold mt-3'>Browse Local Tours</a>
            </div>
          </div>";
    include 'includes/footer.php';
    exit;
}

$tour_img = !empty($tour['main_image']) ? "uploads/".$tour['main_image'] : "";
$gal_stmt = $conn->prepare("SELECT * FROM local_tour_gallery WHERE tour_id = ?");
$gal_stmt->bind_param("i", $id);
$gal_stmt->execute();
$gallery = $gal_stmt->get_result();

$wa_link = "https://wa.me/" . (!empty($settings['whatsapp_number']) ? $settings['whatsapp_number'] : '94771957420') . "?text=" . urlencode("Hello! I am interested in " . $tour['title'] . " local tour.");
?>
<div class="local-detail-hero" style="min-height: 50vh; background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('<?= $tour_img ? str_replace(' ', '%20', $tour_img) : 'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600' ?>'); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding-bottom: 80px; color: #fff; position: relative;">
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <nav aria-label="breadcrumb" class="mb-3">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="index.php" class="text-white opacity-75 text-decoration-none">Home</a></li>
                        <li class="breadcrumb-item"><a href="local-tours.php" class="text-white opacity-75 text-decoration-none">Local Tours</a></li>
                        <li class="breadcrumb-item active text-white fw-bold" aria-current="page"><?= htmlspecialchars($tour['title']) ?></li>
                    </ol>
                </nav>
                <span class="badge bg-primary px-3 py-2 rounded-pill mb-3" style="letter-spacing: 2px; font-size: 10px;"><?= strtoupper(htmlspecialchars($tour['location'])) ?></span>
                <h1 class="display-3 fw-bold mb-0" style="letter-spacing: -2px;"><?= htmlspecialchars($tour['title']) ?></h1>
            </div>
        </div>
    </div>
</div>

<section class="py-5" style="background: #fdfcfb; min-height: 500px;">
    <div class="container" style="margin-top: -50px; position: relative; z-index: 10;">
        <div class="row">
            <div class="col-lg-8">
                <!-- Stats Row -->
                <div class="row g-3 mb-5">
                    <div class="col-md-6">
                        <div class="p-4 bg-white shadow-sm rounded-4 d-flex align-items-center gap-3 h-100">
                            <div class="icon-box bg-light text-primary rounded-3" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 20px;"><i class="fas fa-map-marker-alt"></i></div>
                            <div><small class="text-muted d-block">Location</small><strong style="font-size: 14px;"><?= htmlspecialchars($tour['location']) ?></strong></div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="p-4 bg-white shadow-sm rounded-4 d-flex align-items-center gap-3 h-100">
                            <div class="icon-box bg-light text-primary rounded-3" style="width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 20px;"><i class="fas fa-tag"></i></div>
                            <div><small class="text-muted d-block">Tour Type</small><strong style="font-size: 14px;">Sri Lanka Heritage</strong></div>
                        </div>
                    </div>
                </div>

                <!-- Tabs Navigation -->
                <ul class="nav nav-pills mb-4 gap-2 bg-white p-2 rounded-pill shadow-sm" id="localTab" role="tablist" style="border: 1px solid #eee;">
                    <li class="nav-item flex-fill"><button class="nav-link active rounded-pill w-100 py-3 fw-bold" data-bs-toggle="tab" data-bs-target="#overview">Overview</button></li>
                    <?php if($gallery->num_rows > 0): ?>
                    <li class="nav-item flex-fill"><button class="nav-link rounded-pill w-100 py-3 fw-bold" data-bs-toggle="tab" data-bs-target="#tour-gallery">Gallery</button></li>
                    <?php endif; ?>
                </ul>

                <!-- Tabs Content -->
                <div class="tab-content bg-white p-4 p-md-5 rounded-4 shadow-sm" id="localTabContent">
                    <div class="tab-pane fade show active" id="overview">
                        <h4 class="fw-bold mb-4">Tour Overview</h4>
                        <div class="text-muted fs-6" style="line-height: 1.8; white-space: pre-line;"><?= htmlspecialchars($tour['description'] ?: 'No description available.') ?></div>
                    </div>
                    <?php if($gallery->num_rows > 0): ?>
                    <div class="tab-pane fade" id="tour-gallery">
                        <h4 class="fw-bold mb-4">Gallery</h4>
                        <div class="row g-3">
                            <?php while($img = $gallery->fetch_assoc()): ?>
                            <div class="col-md-4 col-6">
                                <div class="overflow-hidden rounded-4" style="height: 150px;">
                                    <img src="uploads/<?= $img['image'] ?>" class="w-100 h-100" style="object-fit: cover; cursor: pointer;">
                                </div>
                            </div>
                            <?php endwhile; ?>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4 mt-5 mt-lg-0">
                <div class="sticky-top" style="top: 120px;">
                    <div class="card border-0 shadow-lg mb-4" style="border-radius: 30px; overflow: hidden;">
                        <div class="bg-primary text-white p-5 text-center">
                            <small class="text-uppercase opacity-75 fw-bold" style="letter-spacing: 2px;">Starting from</small>
                            <h2 class="display-5 fw-bold mb-0">LKR <?= number_format($tour['price'], 0) ?></h2>
                        </div>
                        <div class="card-body p-5">
                            <div class="text-center">
                                <p class="small text-muted mb-3">Questions? Chat with an expert</p>
                                <a href="<?= $wa_link ?>" target="_blank" class="btn btn-success w-100 py-3 rounded-pill fw-bold" style="background: #25D366; border: none;">
                                    <i class="fab fa-whatsapp me-2"></i> WHATSAPP INQUIRY
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<style>
    .local-detail-hero::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 60%);
        pointer-events: none;
    }
    .nav-pills .nav-link { color: #666; transition: 0.3s; }
    .nav-pills .nav-link.active { background: var(--primary) !important; color: #fff !important; }

    @media (max-width: 768px) {
        .local-detail-hero {
            min-height: 40vh !important;
            padding-bottom: 60px !important;
            margin-top: 150px !important;
        }
        .display-3 { font-size: 32px !important; line-height: 1.2; }
        .tab-content { padding: 30px 20px !important; }
    }
</style>

<?php include 'includes/footer.php'; ?>
