<?php
// Session Guard: Keamanan akses halaman
if (empty($_SESSION['namauser']) && empty($_SESSION['passuser'])) {
    echo "
    <div class='card bg-dark text-light border-secondary shadow-lg text-center py-5 mx-auto my-5' style='max-width: 420px; border-radius: 16px; background-color: #1e293b !important;'>
        <div class='card-body p-4'>
            <div class='mb-3 text-danger'>
                <i class='fa fa-lock fa-3x'></i>
            </div>
            <h4 class='fw-bold mb-2 text-white'>Akses Terbatas</h4>
            <p class='text-secondary small mb-4'>
                Silakan login terlebih dahulu untuk mengakses modul ini.
            </p>
            <a href='../../index.php' class='btn btn-danger w-100 py-2 fw-semibold shadow-sm'>
                <i class='fa fa-sign-in-alt me-1'></i> Login Sekarang
            </a>
        </div>
    </div>";
    exit();
}

include "../config/koneksi.php";

$aksi = "modul/mod_kontak/aksi_kontak.php";
$act  = isset($_GET['act']) ? $_GET['act'] : '';

switch ($act) {
    // ==========================================
    // TAMPIL DETAIL KONTAK & IDENTITAS (DEFAULT)
    // ==========================================
    default:
        $query = "SELECT * FROM kontak LIMIT 1";
        $hasil = mysqli_query($konek, $query);
        $r     = mysqli_fetch_array($hasil);

        $id_kontak = $r['id_kontak'] ?? '';
        $logo      = !empty($r['logo']) ? "../foto_icon/" . htmlspecialchars($r['logo']) : '';
        $maps_code = $r['maps'] ?? '';
?>
    <!-- Custom Dark Inline Styles for Extra Polish -->
    <style>
        .dark-card {
            background-color: #1e293b !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 16px !important;
        }
        .dark-input {
            background-color: #0f172a !important;
            border: 1px solid #334155 !important;
            color: #f8fafc !important;
            border-radius: 10px !important;
        }
        .dark-input:focus {
            background-color: #0f172a !important;
            border-color: #f43f5e !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 0.25rem rgba(244, 63, 94, 0.15) !important;
        }
        .text-subtle { color: #94a3b8 !important; }
        .icon-box {
            width: 36px;
            height: 36px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
        }
    </style>

    <!-- Header Section -->
    <div class="row align-items-center gy-3 mb-4">
        <div class="col-12 col-md">
            <h4 class="fw-bold mb-1 text-white">Informasi Kontak & Identitas</h4>
            <p class="text-subtle small mb-0">Kelola profil website, informasi kontak, dan tautan sosial media</p>
        </div>
        <div class="col-12 col-md-auto">
            <a href="?module=kontak&act=editkontak&id=<?= $id_kontak ?>" class="btn btn-danger w-100 w-md-auto d-inline-flex align-items-center justify-content-center gap-2 py-2 px-4 fw-semibold shadow-sm" style="border-radius: 10px;">
                <i class="fa fa-edit"></i> <span>Edit Informasi</span>
            </a>
        </div>
    </div>

    <div class="row g-4">
        <!-- Kolom Kiri: Detail Identitas & Kontak -->
        <div class="col-12 col-lg-6">
            <div class="card dark-card shadow-lg h-100">
                <div class="card-body p-3 p-md-4">
                    <h5 class="fw-bold mb-4 pb-3 border-bottom border-secondary border-opacity-25 d-flex align-items-center text-white fs-6">
                        <span class="icon-box me-2 text-danger"><i class="fa fa-building"></i></span> Identitas Website
                    </h5>

                    <!-- Logo Display Box -->
                    <div class="mb-4 text-center text-md-start">
                        <span class="d-block text-subtle small fw-semibold mb-2">Logo Website Saat Ini</span>
                        <?php if ($logo && file_exists($logo)): ?>
                            <div class="p-3 rounded-3 border border-secondary border-opacity-25 d-inline-block mw-100" style="background-color: #0f172a;">
                                <img src="<?= $logo ?>" alt="Logo Website" class="img-fluid" style="max-height: 70px; object-fit: contain;">
                            </div>
                        <?php else: ?>
                            <div class="p-3 rounded-3 border border-secondary border-opacity-25 text-subtle small text-center" style="background-color: #0f172a;">
                                <i class="fa fa-image me-1"></i> Belum ada logo terpasang
                            </div>
                        <?php endif; ?>
                    </div>

                    <!-- Table Data Kontak -->
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle mb-0 text-white text-break">
                            <tbody>
                                <tr>
                                    <td style="width: 140px;" class="text-subtle fw-medium py-2 ps-0"><i class="fab fa-whatsapp text-success me-2"></i> WhatsApp</td>
                                    <td class="py-2 pe-0">: <?= htmlspecialchars($r['wa'] ?? '-') ?></td>
                                </tr>
                                <tr>
                                    <td class="text-subtle fw-medium py-2 ps-0"><i class="fa fa-phone text-info me-2"></i> Telepon</td>
                                    <td class="py-2 pe-0">: <?= htmlspecialchars($r['tlp'] ?? '-') ?></td>
                                </tr>
                                <tr>
                                    <td class="text-subtle fw-medium py-2 ps-0"><i class="fa fa-envelope text-danger me-2"></i> Email</td>
                                    <td class="py-2 pe-0">: <?= htmlspecialchars($r['email'] ?? '-') ?></td>
                                </tr>
                                <tr>
                                    <td class="text-subtle fw-medium py-2 ps-0 align-top"><i class="fa fa-map-marker-alt text-warning me-2"></i> Alamat</td>
                                    <td class="py-2 pe-0">: <?= nl2br(htmlspecialchars($r['alamat'] ?? '-')) ?></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Kolom Kanan: Media Sosial & Maps -->
        <div class="col-12 col-lg-6">
            <!-- Card Medsos -->
            <div class="card dark-card shadow-lg mb-4">
                <div class="card-body p-3 p-md-4">
                    <h5 class="fw-bold mb-3 pb-3 border-bottom border-secondary border-opacity-25 d-flex align-items-center text-white fs-6">
                        <span class="icon-box me-2 text-danger"><i class="fa fa-share-alt"></i></span> Media Sosial
                    </h5>
                    <div class="table-responsive">
                        <table class="table table-borderless align-middle mb-0 text-white text-break">
                            <tbody>
                                <tr>
                                    <td style="width: 140px;" class="text-subtle fw-medium py-2 ps-0"><i class="fab fa-facebook text-primary me-2"></i> Facebook</td>
                                    <td class="py-2 pe-0">: <?= htmlspecialchars($r['fb'] ?? '-') ?></td>
                                </tr>
                                <tr>
                                    <td class="text-subtle fw-medium py-2 ps-0"><i class="fab fa-instagram text-danger me-2"></i> Instagram</td>
                                    <td class="py-2 pe-0">: <?= htmlspecialchars($r['ig'] ?? '-') ?></td>
                                </tr>
                                <tr>
                                    <td class="text-subtle fw-medium py-2 ps-0"><i class="fab fa-tiktok text-light me-2"></i> TikTok</td>
                                    <td class="py-2 pe-0">: <?= htmlspecialchars($r['tiktok'] ?? '-') ?></td>
                                </tr>
                                <tr>
                                    <td class="text-subtle fw-medium py-2 ps-0"><i class="fab fa-twitter text-info me-2"></i> Twitter / X</td>
                                    <td class="py-2 pe-0">: <?= htmlspecialchars($r['tw'] ?? '-') ?></td>
                                </tr>
                                <tr>
                                    <td class="text-subtle fw-medium py-2 ps-0"><i class="fab fa-linkedin text-primary me-2"></i> LinkedIn</td>
                                    <td class="py-2 pe-0">: <?= htmlspecialchars($r['lingked'] ?? '-') ?></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Card Peta Google Maps -->
            <div class="card dark-card shadow-lg">
                <div class="card-body p-3 p-md-4">
                    <h5 class="fw-bold mb-3 pb-3 border-bottom border-secondary border-opacity-25 d-flex align-items-center text-white fs-6">
                        <span class="icon-box me-2 text-danger"><i class="fa fa-map-marked-alt"></i></span> Lokasi Peta
                    </h5>
                    <?php if (!empty($maps_code)): ?>
                        <div class="ratio ratio-16x9 rounded-3 overflow-hidden border border-secondary border-opacity-25 shadow-sm">
                            <?= $maps_code ?>
                        </div>
                    <?php else: ?>
                        <div class="p-3 rounded-3 border border-secondary border-opacity-25 text-center text-subtle small" style="background-color: #0f172a;">
                            <i class="fa fa-map-pin me-1"></i> Belum ada embed Google Maps
                        </div>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
<?php
    break;

    // ==========================================
    // FORM EDIT KONTAK & IDENTITAS
    // ==========================================
    case "editkontak":
        $id     = mysqli_real_escape_string($konek, $_GET['id'] ?? '');
        $query  = "SELECT * FROM kontak WHERE id_kontak='$id'";
        $hasil  = mysqli_query($konek, $query);
        $r      = mysqli_fetch_array($hasil);

        if (!$r) {
            echo "<script>alert('Data kontak tidak ditemukan!'); window.location='?module=kontak';</script>";
            exit();
        }

        $logo = !empty($r['logo']) ? "../foto_icon/" . htmlspecialchars($r['logo']) : '';
?>
    <style>
        .dark-card {
            background-color: #1e293b !important;
            border: 1px solid rgba(255, 255, 255, 0.08) !important;
            border-radius: 16px !important;
        }
        .dark-input {
            background-color: #0f172a !important;
            border: 1px solid #334155 !important;
            color: #f8fafc !important;
            border-radius: 10px !important;
        }
        .dark-input:focus {
            background-color: #0f172a !important;
            border-color: #f43f5e !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 0.25rem rgba(244, 63, 94, 0.15) !important;
        }
        .text-subtle { color: #94a3b8 !important; }
    </style>

    <!-- Header Section -->
    <div class="row align-items-center gy-3 mb-4">
        <div class="col-12 col-md">
            <h4 class="fw-bold mb-1 text-white">Edit Informasi Kontak</h4>
            <p class="text-subtle small mb-0">Perbarui data identitas dan tautan media sosial</p>
        </div>
        <div class="col-12 col-md-auto">
            <button onclick="self.history.back()" class="btn btn-outline-light w-100 w-md-auto d-inline-flex align-items-center justify-content-center gap-2 py-2 px-3" style="border-radius: 10px; border-color: #334155;">
                <i class="fa fa-arrow-left"></i> <span>Kembali</span>
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-12 col-xl-10">
            <div class="card dark-card shadow-lg">
                <div class="card-body p-3 p-md-4">
                    <form method="POST" enctype="multipart/form-data" action="<?= $aksi ?>?module=kontak&act=update">
                        <input type="hidden" name="id" value="<?= htmlspecialchars($r['id_kontak']) ?>">

                        <!-- Section 1: Informasi Utama -->
                        <h6 class="fw-bold mb-4 text-danger d-flex align-items-center">
                            <i class="fa fa-info-circle me-2"></i> Informasi Utama & Logo
                        </h6>

                        <!-- Preview Logo & Input Logo -->
                        <div class="row mb-3 align-items-start">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">Logo Website</label>
                            <div class="col-12 col-md-9">
                                <?php if ($logo && file_exists($logo)): ?>
                                    <div class="mb-2 p-2 rounded-3 border border-secondary border-opacity-25 d-inline-block mw-100" style="background-color: #0f172a;">
                                        <img src="<?= $logo ?>" alt="Logo Saat Ini" class="img-fluid" style="max-height: 60px; object-fit: contain;">
                                    </div>
                                <?php endif; ?>
                                <input type="file" name="logo" class="form-control dark-input" accept="image/*">
                                <span class="text-subtle d-block mt-1" style="font-size: 0.8rem;">
                                    Biarkan kosong jika tidak ingin mengubah logo (Format: JPG, PNG, GIF, WEBP).
                                </span>
                            </div>
                        </div>

                        <!-- WhatsApp -->
                        <div class="row mb-3">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">WhatsApp</label>
                            <div class="col-12 col-md-9">
                                <input type="text" name="wa" class="form-control dark-input" value="<?= htmlspecialchars($r['wa'] ?? '') ?>" placeholder="08123456789">
                            </div>
                        </div>

                        <!-- Telepon -->
                        <div class="row mb-3">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">Telepon</label>
                            <div class="col-12 col-md-9">
                                <input type="text" name="tlp" class="form-control dark-input" value="<?= htmlspecialchars($r['tlp'] ?? '') ?>" placeholder="(021) 555-1234">
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="row mb-3">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">Email</label>
                            <div class="col-12 col-md-9">
                                <input type="email" name="email" class="form-control dark-input" value="<?= htmlspecialchars($r['email'] ?? '') ?>" placeholder="info@domain.com">
                            </div>
                        </div>

                        <!-- Alamat -->
                        <div class="row mb-4">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">Alamat Lengkap</label>
                            <div class="col-12 col-md-9">
                                <textarea name="alamat" rows="3" class="form-control dark-input" placeholder="Tuliskan alamat lokasi perusahaan/toko..."><?= htmlspecialchars($r['alamat'] ?? '') ?></textarea>
                            </div>
                        </div>

                        <!-- Section 2: Google Maps Embed -->
                        <h6 class="fw-bold mb-4 pt-3 border-top border-secondary border-opacity-25 text-danger d-flex align-items-center">
                            <i class="fa fa-map-marker-alt me-2"></i> Lokasi Google Maps
                        </h6>

                        <div class="row mb-4">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">Google Maps Code</label>
                            <div class="col-12 col-md-9">
                                <textarea name="maps" rows="3" class="form-control dark-input" placeholder="Sematkan tag <iframe> Google Maps di sini..."><?= htmlspecialchars($r['maps'] ?? '') ?></textarea>
                                <span class="text-subtle d-block mt-1" style="font-size: 0.8rem;">
                                    Buka Google Maps &rarr; Bagikan &rarr; Sematkan Peta &rarr; Salin HTML.
                                </span>
                            </div>
                        </div>

                        <!-- Section 3: Media Sosial -->
                        <h6 class="fw-bold mb-4 pt-3 border-top border-secondary border-opacity-25 text-danger d-flex align-items-center">
                            <i class="fa fa-share-alt me-2"></i> Akun Media Sosial
                        </h6>

                        <!-- Facebook -->
                        <div class="row mb-3">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">Facebook</label>
                            <div class="col-12 col-md-9">
                                <input type="text" name="fb" class="form-control dark-input" value="<?= htmlspecialchars($r['fb'] ?? '') ?>" placeholder="https://facebook.com/username">
                            </div>
                        </div>

                        <!-- Instagram -->
                        <div class="row mb-3">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">Instagram</label>
                            <div class="col-12 col-md-9">
                                <input type="text" name="ig" class="form-control dark-input" value="<?= htmlspecialchars($r['ig'] ?? '') ?>" placeholder="https://instagram.com/username">
                            </div>
                        </div>

                        <!-- TikTok -->
                        <div class="row mb-3">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">TikTok</label>
                            <div class="col-12 col-md-9">
                                <input type="text" name="tiktok" class="form-control dark-input" value="<?= htmlspecialchars($r['tiktok'] ?? '') ?>" placeholder="https://tiktok.com/@username">
                            </div>
                        </div>

                        <!-- Twitter -->
                        <div class="row mb-3">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">Twitter / X</label>
                            <div class="col-12 col-md-9">
                                <input type="text" name="tw" class="form-control dark-input" value="<?= htmlspecialchars($r['tw'] ?? '') ?>" placeholder="https://twitter.com/username">
                            </div>
                        </div>

                        <!-- LinkedIn -->
                        <div class="row mb-4">
                            <label class="col-12 col-md-3 col-form-label fw-medium text-subtle">LinkedIn</label>
                            <div class="col-12 col-md-9">
                                <input type="text" name="lingked" class="form-control dark-input" value="<?= htmlspecialchars($r['lingked'] ?? '') ?>" placeholder="https://linkedin.com/in/username">
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row pt-3 border-top border-secondary border-opacity-25">
                            <div class="col-12 col-md-9 offset-md-3">
                                <div class="d-grid d-md-flex gap-2">
                                    <button type="submit" class="btn btn-danger px-4 py-2 fw-semibold d-inline-flex align-items-center justify-content-center gap-2" style="border-radius: 10px;">
                                        <i class="fa fa-save"></i> Perbarui Data
                                    </button>
                                    <button type="button" onclick="self.history.back()" class="btn btn-outline-secondary px-4 py-2 text-white" style="border-radius: 10px; border-color: #334155;">
                                        Batal
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<?php
    break;
}
?>