<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<?= $this->extend('layout/default') ?>

<?= $this->section('content') ?>
<div class="breadcrumb-area pt-30 pb-30 bg-gray border-bottom">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-0">
                <li class="breadcrumb-item"><a href="<?= base_url() ?>">Beranda</a></li>
                <li class="breadcrumb-item"><a href="<?= base_url('berita') ?>">Berita</a></li>
                <li class="breadcrumb-item active text-truncate" style="max-width: 250px;"><?= $berita['judul'] ?></li>
            </ol>
        </nav>
    </div>
</div>

<div class="blog-details-area pt-60 pb-100">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-9">
                <div class="blog-details-wrapper">
                    
                    <h1 class="display-5 fw-800 mb-3" style="color: #1a1a1a; line-height: 1.2; letter-spacing: -1px;">
                        <?= $berita['judul'] ?>
                    </h1>

                    <div class="post-meta-premium d-flex align-items-center justify-content-between mb-4 pb-3 border-bottom">
                        <div class="d-flex align-items-center">
                            <div class="author-img me-3">
                                <img src="<?= base_url('assets/img/logo/logo.png') ?>" alt="Admin" class="rounded-circle border" width="45" height="45" style="object-fit: contain; background: #fff;">
                            </div>
                            <div class="meta-info">
                                <span class="d-block fw-bold text-dark">Admin SMKN 1 Sukalarang</span>
                                <small class="text-muted">
                                    <i class="fa fa-calendar-alt me-1"></i> <?= date('d M Y', strtotime($berita['tanggal_post'])) ?>
                                    <span class="mx-2">|</span>
                                    <i class="fa fa-eye me-1"></i> <?= number_format($berita['views'] ?? 0, 0, ',', '.') ?> Dilihat
                                </small>
                            </div>
                        </div>
                        
                        <div class="like-section">
                            <button type="button" id="btn-like" class="btn btn-outline-danger btn-sm rounded-pill px-3">
                                <i class="fa fa-heart"></i> <span id="like-count"><?= $berita['likes'] ?? 0 ?></span> Suka
                            </button>
                        </div>
                    </div>

                    <div class="blog-details-img mb-40 shadow-sm rounded-4 overflow-hidden">
                        <img src="<?= base_url('assets/img/berita/' . ($berita['gambar'] ?: 'default.jpg')) ?>" 
                             alt="<?= $berita['judul'] ?>" 
                             class="img-fluid w-100" style="max-height: 500px; object-fit: cover;">
                        
                        <?php if (!empty($berita['caption_foto'])) : ?>
                            <div class="caption-box p-3 bg-light border-start border-4 border-success">
                                <small class="text-muted fst-italic">
                                    <i class="fa fa-camera me-1"></i> <?= $berita['caption_foto'] ?>
                                </small>
                            </div>
                        <?php endif; ?>
                    </div>

                    <div class="article-content mt-4 description-style">
                        <?= $berita['isi_berita'] ?>
                    </div>

                    <div class="tag-share-res mb-50 mt-50 d-flex justify-content-between align-items-center border-top border-bottom py-3">
                        <div class="share-label">
                            <span class="fw-bold"><i class="fa fa-share-alt me-2"></i>Bagikan:</span>
                        </div>
                        <div class="blog-details-share">
    <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=<?= current_url() ?>" target="_blank">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
        </svg>
    </a>

    <a class="whatsapp" href="https://api.whatsapp.com/send?text=<?= urlencode($berita['judul'] . ' ' . current_url()) ?>" target="_blank">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
        </svg>
    </a>
</div>
                    </div>

                    <div class="comment-area mt-5">
                        <h3 class="fw-bold mb-4"><i class="fa fa-comments text-success"></i> Komentar (<?= count($komentar ?? []) ?>)</h3>
                        
                        <div class="comment-list mb-5">
                            <?php if (!empty($komentar)) : ?>
                                <?php foreach ($komentar as $k) : ?>
                                    <div class="d-flex mb-4 p-3 rounded-3 bg-white shadow-sm border">
                                        <div class="flex-shrink-0 me-3">
                                            <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; font-weight: bold; font-size: 20px;">
                                                <?= strtoupper(substr($k['nama'], 0, 1)) ?>
                                            </div>
                                        </div>
                                        <div class="flex-grow-1">
                                            <div class="d-flex justify-content-between align-items-center mb-1">
                                                <h6 class="fw-bold mb-0"><?= esc($k['nama']) ?></h6>
                                                <small class="text-muted"><?= date('d/m/Y H:i', strtotime($k['created_at'])) ?></small>
                                            </div>
                                            <p class="mb-0 text-secondary"><?= esc($k['isi_komentar']) ?></p>
                                        </div>
                                    </div>
                                <?php endforeach; ?> <?php else : ?>
                                <div class="alert alert-light border text-center text-muted fst-italic">
                                    Belum ada komentar. Jadilah yang pertama berkomentar!
                                </div>
                            <?php endif; ?>
                        </div>

                        <div class="comment-form-box p-4 rounded-4 shadow-sm" style="background-color: #f8f9fa;">
                            <h4 class="fw-bold mb-2">Tulis Komentar</h4>
                            <p class="small text-danger mb-4 fst-italic">* Komentar Anda akan ditinjau admin sebelum ditampilkan.</p>
                            <?php if (session()->getFlashdata('success_komentar')) : ?>
    <div class="alert alert-success border-0 shadow-sm mb-4">
        <i class="fa fa-check-circle me-2"></i> <?= session()->getFlashdata('success_komentar') ?>
    </div>
<?php endif; ?>
                            <form action="<?= base_url('berita/komentar/simpan') ?>" method="post">
                                <?= csrf_field() ?>
                                <input type="hidden" name="id_berita" value="<?= $berita['id_berita'] ?>">
                                
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="small fw-bold">Nama Lengkap</label>
                                        <input type="text" name="nama" class="form-control border-0 shadow-sm" placeholder="Contoh: Budi Santoso" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="small fw-bold">Email (Opsional)</label>
                                        <input type="email" name="email" class="form-control border-0 shadow-sm" placeholder="budi@email.com">
                                    </div>
                                    <div class="col-12 mb-3">
                                        <label class="small fw-bold">Pesan Komentar</label>
                                        <textarea name="isi_komentar" class="form-control border-0 shadow-sm" rows="4" placeholder="Tuliskan pendapat Bapak/Ibu..." required></textarea>
                                    </div>
                                    <div class="col-12 text-end">
                                        <button type="submit" class="btn btn-success btn-lg px-5 shadow rounded-pill">
                                            <i class="fa fa-paper-plane me-2"></i> Kirim Komentar
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <div class="next-prev-wrap mt-5 pt-4 border-top">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <a href="<?= base_url('berita') ?>" class="btn btn-link text-success p-0 text-decoration-none fw-bold">
                                    <i class="fa fa-arrow-left me-2"></i> Kembali ke Semua Berita
                                </a>
                            </div>
                            <?php if (session()->get('isLoggedIn')) : ?>
                                <div class="col-md-6 text-md-end">
                                    <a href="<?= base_url('admin/berita/edit/' . $berita['id_berita']) ?>" class="btn btn-warning rounded-pill px-4 shadow-sm text-white">
                                        <i class="fa fa-edit me-2"></i> Edit Konten Ini
                                    </a>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

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

<style>
    .fw-800 { font-weight: 800; }
    .bg-gray { background-color: #fdfdfd; }
    
    /* Pengaturan Tipografi Paragraf */
    .article-content {
        white-space: pre-line;
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        line-height: 1.8;
        color: #333;
        text-align: justify;
    }

    .article-content p {
        margin-bottom: 25px !important;
        display: block;
    }

    /* Efek Dropcap */
    .article-content p:first-of-type::first-letter {
        font-size: 4.5rem;
        font-weight: bold;
        float: left;
        margin-right: 12px;
        line-height: 1;
        color: #28a745;
        font-family: 'Playfair Display', serif;
    }

    .article-content img {
        border-radius: 12px;
        margin: 20px 0;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        max-width: 100%;
        height: auto;
    }

    /* Social Share Styling */
    .blog-details-share a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        color: #fff !important;
        margin-left: 10px;
        font-size: 20px; /* Ukuran ikon */
        transition: all 0.3s ease;
    }

    .facebook { background-color: #3b5998; }
    .whatsapp { background-color: #25d366; }

    .blog-details-share a:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }
    .blog-details-share {
        display: flex;
        gap: 15px;
        align-items: center;
    }

    .blog-details-share a {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        color: white !important;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-decoration: none;
    }

    .facebook { background-color: #1877F2; }
    .whatsapp { background-color: #25D366; }

    .blog-details-share a:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    /* Memastikan SVG berwarna putih */
    .blog-details-share svg {
        fill: white;
    }
</style>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#btn-like').on('click', function(e) {
            e.preventDefault();
            const btn = $(this);
            const id_berita = '<?= $berita['id_berita'] ?>';
            
            $.ajax({
                url: '<?= base_url('berita/like') ?>/' + id_berita,
                method: 'POST',
                dataType: 'json',
                success: function(data) {
                    if(data.success) {
                        $('#like-count').text(data.new_likes);
                        btn.removeClass('btn-outline-danger').addClass('btn-danger');
                        btn.prop('disabled', true); // Mencegah spam like
                        alert('Terima kasih! Anda menyukai berita ini.');
                    }
                },
                error: function() {
                    alert('Gagal memproses Like. Pastikan rute sudah terdaftar.');
                }
            });
        });
    });
</script>
<?= $this->endSection() ?>