@extends('frontend.master.master')

@section('content')
    <!-- Preview Mode Banner -->
    <div class="alert alert-warning alert-dismissible fade show m-0" role="alert" style="border-radius: 0;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-8">
                    <i class="fas fa-eye me-2"></i>
                    <strong>Mode Preview:</strong> Halaman ini menampilkan semua konten termasuk yang belum dipublish (status: entry)
                </div>
                <div class="col-md-4 text-end">
                    <small class="text-muted">Preview Layout MSJ Career</small>
                </div>
            </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>

    <!-- Hero Section -->
    <section id="hero" class="hero section">
        <div class="container" data-aos="fade-up" data-aos-delay="100">
            <div class="row align-items-center content">
                <div class="col-lg-6" data-aos="fade-up" data-aos-delay="200">
                    <h2>Dari Nonwoven, Untuk Hidup Lebih Baik</h2>
                    <p class="lead">Solusi terbaik lahir dari inovasi yang sesuai kebutuhan. Sebagai pabrik nonwoven,
                        kami terus berinovasi menciptakan produk-produk yang menyatu dalam keseharian masyarakat,
                        dari kesehatan, industri, hingga rumah tangga. Kami hadir untuk memberikan kemudahan, kenyamanan,
                        dan kualitas dalam setiap aktivitas harian
                    </p>
                    <div class="cta-buttons" data-aos="fade-up" data-aos-delay="300">
                        <a href="{{ route('lowongan', ['url' => 'krirlp']) }}" class="btn btn-primary">Lowongan Karir</a>
                        <a href="{{ route('lowongan', ['url' => 'mgnglp']) }}" class="btn btn-outline">Lowongan Magang</a>
                    </div>
                    <div class="hero-stats" data-aos="fade-up" data-aos-delay="400">
                        <div class="stat-item">
                            <span class="stat-number counter" id="yearsFounded" data-target="0" data-suffix="+">0</span>
                            <span class="stat-label">Tahun Berdiri</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number counter" data-target="800" data-suffix="+">0</span>
                            <span class="stat-label">Karyawan</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number counter" data-target="10000" data-suffix="m²+">0</span>
                            <span class="stat-label">Area</span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="hero-image">
                        <img src="{{ asset('assets_career/img/hero-image.jpg') }}" alt="MSJ Career" class="img-fluid">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Preview Statistics Section -->
    @if(isset($isPreview) && $isPreview)
    <section class="preview-stats py-4" style="background-color: #f8f9fa;">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h5 class="mb-3"><i class="fas fa-chart-bar me-2"></i>Preview Statistics</h5>
                    <div class="row" id="preview-stats">
                        <!-- Stats akan dimuat via JavaScript -->
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif

    <!-- Agenda Section with Preview Info -->
    @if(isset($agenda) && $agenda->count() > 0)
    <section id="agenda" class="agenda section">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h2>Agenda Terbaru</h2>
                @if(isset($isPreview) && $isPreview)
                <div class="preview-info">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        Menampilkan {{ $agenda->where('status', 'post')->count() }} agenda published dan {{ $agenda->where('status', 'entry')->count() }} agenda draft
                    </small>
                </div>
                @endif
            </div>
            <div class="row">
                @foreach($agenda->take(6) as $item)
                <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="agenda-card">
                        @if(isset($isPreview) && $item->status == 'entry')
                        <div class="preview-badge">
                            <span class="badge bg-warning text-dark">
                                <i class="fas fa-edit me-1"></i>Draft
                            </span>
                        </div>
                        @endif
                        <div class="agenda-content">
                            <h5>{{ $item->title ?? 'No Title' }}</h5>
                            <p class="agenda-date">
                                <i class="fas fa-calendar me-2"></i>
                                {{ isset($item->tanggal) ? \Carbon\Carbon::parse($item->tanggal)->format('d M Y') : 'No Date' }}
                            </p>
                            <p>{{ Str::limit($item->description ?? 'No Description', 100) }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Berita/Artikel Section with Preview Info -->
    @if(isset($berita) && $berita->count() > 0)
    <section id="berita" class="berita section">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h2>Berita & Artikel</h2>
                @if(isset($isPreview) && $isPreview)
                <div class="preview-info">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        Menampilkan {{ $berita->where('status', 'post')->count() }} berita published dan {{ $berita->where('status', 'entry')->count() }} berita draft
                    </small>
                </div>
                @endif
            </div>
            <div class="row">
                @foreach($berita->take(6) as $item)
                <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="berita-card">
                        @if(isset($isPreview) && $item->status == 'entry')
                        <div class="preview-badge">
                            <span class="badge bg-warning text-dark">
                                <i class="fas fa-edit me-1"></i>Draft
                            </span>
                        </div>
                        @endif
                        <div class="berita-content">
                            <h5>{{ $item->title ?? 'No Title' }}</h5>
                            <p class="berita-date">
                                <i class="fas fa-calendar me-2"></i>
                                {{ isset($item->created_at) ? \Carbon\Carbon::parse($item->created_at)->format('d M Y') : 'No Date' }}
                            </p>
                            <p>{{ Str::limit($item->description ?? 'No Description', 100) }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Karir Section with Preview Info -->
    @if(isset($karir) && $karir->count() > 0)
    <section id="karir" class="karir section">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h2>Lowongan Karir</h2>
                @if(isset($isPreview) && $isPreview)
                <div class="preview-info">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        Menampilkan {{ $karir->where('status', 'post')->count() }} lowongan published dan {{ $karir->where('status', 'entry')->count() }} lowongan draft
                    </small>
                </div>
                @endif
            </div>
            <div class="row">
                @foreach($karir->take(6) as $item)
                <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="karir-card">
                        @if(isset($isPreview) && $item->status == 'entry')
                        <div class="preview-badge">
                            <span class="badge bg-warning text-dark">
                                <i class="fas fa-edit me-1"></i>Draft
                            </span>
                        </div>
                        @endif
                        <div class="karir-content">
                            <h5>{{ $item->title ?? 'No Title' }}</h5>
                            <p class="karir-dept">
                                <i class="fas fa-building me-2"></i>
                                {{ $item->dept_name ?? 'No Department' }}
                            </p>
                            <p>{{ Str::limit($item->description ?? 'No Description', 100) }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Testimoni Section with Preview Info -->
    @if(isset($testi) && $testi->count() > 0)
    <section id="testimoni" class="testimoni section">
        <div class="container" data-aos="fade-up">
            <div class="section-title">
                <h2>Testimoni</h2>
                @if(isset($isPreview) && $isPreview)
                <div class="preview-info">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        Menampilkan {{ $testi->where('status', 'post')->count() }} testimoni published dan {{ $testi->where('status', 'entry')->count() }} testimoni draft
                    </small>
                </div>
                @endif
            </div>
            <div class="row">
                @foreach($testi->take(6) as $item)
                <div class="col-md-4 mb-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="testimoni-card">
                        @if(isset($isPreview) && $item->status == 'entry')
                        <div class="preview-badge">
                            <span class="badge bg-warning text-dark">
                                <i class="fas fa-edit me-1"></i>Draft
                            </span>
                        </div>
                        @endif
                        <div class="testimoni-content">
                            <div class="testimoni-avatar">
                                @if($item->picture)
                                <img src="{{ asset('storage/' . $item->picture) }}" alt="Avatar" class="rounded-circle">
                                @else
                                <div class="avatar-placeholder">
                                    <i class="fas fa-user"></i>
                                </div>
                                @endif
                            </div>
                            <h6>{{ $item->name ?? 'Anonymous' }}</h6>
                            <div class="rating">
                                @for($i = 1; $i <= 5; $i++)
                                    @if($i <= ($item->star_rating ?? 0))
                                        <i class="fas fa-star text-warning"></i>
                                    @else
                                        <i class="far fa-star text-muted"></i>
                                    @endif
                                @endfor
                            </div>
                            <p>{{ Str::limit($item->message ?? 'No Message', 100) }}</p>
                        </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </section>
    @endif

    <!-- Preview Mode Footer Info -->
    @if(isset($isPreview) && $isPreview)
    <div class="preview-footer py-3" style="background-color: #e9ecef; border-top: 2px solid #ffc107;">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <small class="text-muted">
                        <i class="fas fa-info-circle me-1"></i>
                        Ini adalah tampilan preview. Data dengan status "entry" tidak akan muncul di homepage publik.
                    </small>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="refreshPreview()">
                        <i class="fas fa-sync-alt me-1"></i>Refresh Preview
                    </button>
                </div>
            </div>
        </div>
    </div>
    @endif
@endsection

@push('styles')
<style>
.preview-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

.preview-info {
    margin-top: 0.5rem;
}

.agenda-card, .berita-card, .karir-card, .testimoni-card {
    position: relative;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    height: 100%;
    transition: transform 0.3s ease;
}

.agenda-card:hover, .berita-card:hover, .karir-card:hover, .testimoni-card:hover {
    transform: translateY(-5px);
}

.testimoni-avatar img, .avatar-placeholder {
    width: 60px;
    height: 60px;
    object-fit: cover;
}

.avatar-placeholder {
    background: #e9ecef;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #6c757d;
}

.rating {
    margin: 10px 0;
}

.preview-stats .col-md-2 {
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    margin: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    @if(isset($isPreview) && $isPreview)
    loadPreviewStats();
    @endif
});

function loadPreviewStats() {
    fetch('/preview-stats')
        .then(response => response.json())
        .then(data => {
            let html = '';
            Object.keys(data).forEach(table => {
                const tableName = table.replace('trs_', '').replace('_', ' ');
                html += `
                    <div class="col-md-2">
                        <h6>${tableName}</h6>
                        <div class="text-success">Post: ${data[table].post}</div>
                        <div class="text-warning">Entry: ${data[table].entry}</div>
                        <div class="text-info">Total: ${data[table].total}</div>
                    </div>
                `;
            });
            document.getElementById('preview-stats').innerHTML = html;
        })
        .catch(error => console.error('Error loading stats:', error));
}

function refreshPreview() {
    window.location.reload();
}
</script>
@endpush