<?php
require_once 'config/db.php';
$settings = getAllSettings($pdo);
$activePage = 'ourproject';
$pageTitle = 'Our Project - '.($settings['site_name']??'');

$filter = $_GET['cat'] ?? 'all';
if ($filter !== 'all') {
    $stmt = $pdo->prepare("SELECT * FROM our_projects WHERE is_active=1 AND category=? ORDER BY sort_order ASC");
    $stmt->execute([$filter]);
    $projects = $stmt->fetchAll();
} else {
    $projects = $pdo->query("SELECT * FROM our_projects WHERE is_active=1 ORDER BY sort_order ASC")->fetchAll();
}

include 'partials/header.php';
?>

<div class="page-hero">
    <div class="container">
        <nav aria-label="breadcrumb"><ol class="breadcrumb mb-2"><li class="breadcrumb-item"><a href="index.php">Home</a></li><li class="breadcrumb-item active" data-en="Our Project" data-id="Proyek Kami">Our Project</li></ol></nav>
        <h1 class="fw-bold mb-1 fs-2" data-en="Our Project" data-id="Proyek Kami">Our Project</h1>
        <p class="mb-0" style="color:rgba(255,255,255,.6);" data-en="A portfolio of our completed upholstery projects" data-id="Portofolio proyek upholstery yang telah kami kerjakan">Portofolio proyek upholstery yang telah kami kerjakan</p>
    </div>
</div>

<section class="py-5 py-lg-6">
    <div class="container">
        <div class="filter-tabs fade-up">
            <a href="our-project.php" class="filter-tab <?= $filter==='all'?'active':'' ?>" data-en="All Projects" data-id="Semua Proyek">Semua Proyek</a>
            <a href="our-project.php?cat=Automotive" class="filter-tab <?= $filter==='Automotive'?'active':'' ?>">Automotive</a>
            <a href="our-project.php?cat=Interior" class="filter-tab <?= $filter==='Interior'?'active':'' ?>">Interior</a>
            <a href="our-project.php?cat=Marine" class="filter-tab <?= $filter==='Marine'?'active':'' ?>">Marine</a>
        </div>
        <div class="row g-4">
            <?php foreach ($projects as $proj): ?>
            <div class="col-md-6 col-lg-4 fade-up">
                <div class="project-card h-100" style="cursor:pointer"
                     onclick='openProjectModal(<?= htmlspecialchars(json_encode([
                         "name"          => $proj["name"],
                         "category"      => $proj["category"],
                         "year"          => $proj["year"],
                         "location"      => $proj["location"] ?? "-",
                         "project_value" => $proj["project_value"] ?? "-",
                         "description"   => $proj["description"] ?? "",
                         "image"         => $proj["image"] ?? "",
                     ]), ENT_QUOTES) ?>)'>
                    <div class="proj-img-wrap">
                        <img src="<?= htmlspecialchars($proj['image']??'') ?>" class="proj-img" alt="<?= htmlspecialchars($proj['name']) ?>"
                             onerror="this.src='https://placehold.co/600x240/e0e0e0/888?text=Project'">
                        <div class="proj-img-overlay"><i class="bi bi-eye-fill fs-4"></i></div>
                    </div>
                    <div class="project-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <span class="proj-cat"><?= htmlspecialchars($proj['category']) ?></span>
                            <span class="badge bg-light text-muted border"><?= $proj['year'] ?></span>
                        </div>
                        <div class="proj-title"><?= htmlspecialchars($proj['name']) ?></div>
                        <p class="small text-muted mt-2"><?= htmlspecialchars(substr($proj['description']??'',0,100)).'...' ?></p>
                        <hr class="my-2">
                        <div class="proj-meta"><i class="bi bi-geo-alt me-1"></i><?= htmlspecialchars($proj['location']??'-') ?></div>
                        <div class="proj-value mt-1"><i class="bi bi-currency-exchange me-1"></i><?= htmlspecialchars($proj['project_value']??'-') ?></div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
            <?php if (empty($projects)): ?>
                <div class="col-12 text-center py-5 text-muted"><i class="bi bi-building display-4 mb-3 d-block"></i>Tidak ada proyek ditemukan.</div>
            <?php endif; ?>
        </div>
    </div>
</section>

<!-- Stats -->
<section class="py-5 bg-section">
    <div class="container">
        <div class="row g-0">
            <?php
            $tot = $pdo->query("SELECT COUNT(*) as c FROM our_projects WHERE is_active=1")->fetch()['c'];
            $auto = $pdo->query("SELECT COUNT(*) as c FROM our_projects WHERE is_active=1 AND category='Automotive'")->fetch()['c'];
            $intr = $pdo->query("SELECT COUNT(*) as c FROM our_projects WHERE is_active=1 AND category='Interior'")->fetch()['c'];
            $mar = $pdo->query("SELECT COUNT(*) as c FROM our_projects WHERE is_active=1 AND category='Marine'")->fetch()['c'];
            ?>
            <div class="col-6 col-md-3 text-center py-4 border-end"><div class="fw-bold fs-2 text-dark"><?= $tot ?>+</div><div class="text-muted small" data-en="Total Projects" data-id="Total Proyek">Total Proyek</div></div>
            <div class="col-6 col-md-3 text-center py-4 border-end"><div class="fw-bold fs-2 text-dark"><?= $auto ?>+</div><div class="text-muted small">Automotive</div></div>
            <div class="col-6 col-md-3 text-center py-4 border-end"><div class="fw-bold fs-2 text-dark"><?= $intr ?>+</div><div class="text-muted small">Interior</div></div>
            <div class="col-6 col-md-3 text-center py-4"><div class="fw-bold fs-2 text-dark"><?= $mar ?>+</div><div class="text-muted small">Marine</div></div>
        </div>
    </div>
</section>

<!-- Project Detail Modal -->
<div class="modal fade" id="projectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content border-0 overflow-hidden rounded-4">
            <div class="position-absolute top-0 end-0 p-3" style="z-index:10">
                <button type="button" class="btn btn-light btn-sm rounded-circle shadow d-flex align-items-center justify-content-center" data-bs-dismiss="modal" style="width:36px;height:36px;opacity:.9;">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>
            <!-- Gambar full-width -->
            <div id="pmImgWrap" style="background:#111;max-height:320px;overflow:hidden;">
                <img id="pmImg" src="" alt="" class="w-100" style="height:320px;object-fit:cover;opacity:.92;"
                     onerror="this.src='https://placehold.co/800x320/e0e0e0/888?text=Project'">
            </div>
            <div class="modal-body p-4">
                <div class="d-flex flex-wrap gap-2 align-items-center mb-2">
                    <span class="proj-cat" id="pmCat"></span>
                    <span class="badge bg-light text-muted border" id="pmYear"></span>
                </div>
                <h4 class="fw-bold mb-3" id="pmName"></h4>
                <p class="text-muted" id="pmDesc" style="line-height:1.7"></p>
                <div class="row g-3 mt-1">
                    <div class="col-sm-6">
                        <div class="d-flex align-items-center gap-2 p-3 rounded-3" style="background:#f8f9fa">
                            <i class="bi bi-geo-alt-fill fs-5" style="color:var(--accent)"></i>
                            <div>
                                <div class="small text-muted" data-en="Location" data-id="Lokasi">Lokasi</div>
                                <div class="fw-semibold" id="pmLocation"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="d-flex align-items-center gap-2 p-3 rounded-3" style="background:#f8f9fa">
                            <i class="bi bi-currency-exchange fs-5" style="color:var(--accent)"></i>
                            <div>
                                <div class="small text-muted" data-en="Project Value" data-id="Nilai Proyek">Nilai Proyek</div>
                                <div class="fw-semibold" id="pmValue"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.proj-img-overlay { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; color:#fff; opacity:0; transition:.3s; }
.project-card:hover .proj-img-overlay { background:rgba(0,0,0,.45); opacity:1; }
</style>

<script>
function openProjectModal(data) {
    document.getElementById('pmImg').src      = data.image || '';
    document.getElementById('pmName').textContent     = data.name;
    document.getElementById('pmCat').textContent      = data.category;
    document.getElementById('pmYear').textContent     = data.year;
    document.getElementById('pmLocation').textContent = data.location;
    document.getElementById('pmValue').textContent    = data.project_value;
    document.getElementById('pmDesc').textContent     = data.description;
    new bootstrap.Modal(document.getElementById('projectModal')).show();
}
</script>

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