@extends('layoutuser.app')
@section('content')

{{-- <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
    <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
        <span class="sr-only">Loading...</span>
    </div>
</div> --}}

<div class="container-fluid header bg-primary p-0 mb-5">
    <div class="row g-0 align-items-center flex-column-reverse flex-lg-row">
        <div class="col-lg-6 p-5 wow fadeIn" data-wow-delay="0.1s">
            <h1 class="display-4 text-white mb-5">HeartChoice</h1>
            <div class="row g-4">
                <div class="col-sm-4">
                    <div class="border-start border-light ps-4">
                        <h2 class="text-white mb-1" data-toggle="counter-up">{{ $totalData }}</h2>
                        <p class="text-light mb-0">Data Yang Diperoleh</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="border-start border-light ps-4">
                        <h2 class="text-white mb-1" data-toggle="counter-up">{{ $totalKriteria }}</h2>
                        <p class="text-light mb-0">Kriteria</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="border-start border-light ps-4">
                        <h2 class="text-white mb-1" data-toggle="counter-up">{{ $totalUser }}</h2>
                        <p class="text-light mb-0">Total User</p>
                    </div>
                </div>
            </div>            
        </div>
        <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
            <div class="owl-carousel header-carousel">
                <div class="owl-carousel-item position-relative">
                    <img class="img-fluid" src="{{ asset('assetss/img/carousel-1.jpg')}}" alt="">
                    <div class="owl-carousel-text">
                        <!-- <h1 class="display-1 text-white mb-0">Cardiology</h1> -->
                    </div>
                </div>
                <div class="owl-carousel-item position-relative">
                    <img class="img-fluid" src="{{ asset('assetss/img/carousel-2.jpg')}}" alt="">
                    <div class="owl-carousel-text">
                        <!-- <h1 class="display-1 text-white mb-0">Neurology</h1> -->
                    </div>
                </div>
                <div class="owl-carousel-item position-relative">
                    <img class="img-fluid" src="{{ asset('assetss/img/carousel-3.jpg')}}" alt="">
                    <div class="owl-carousel-text">
                        <!-- <h1 class="display-1 text-white mb-0">Pulmonary</h1> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Test Alert Section -->
<!-- <div class="container-xxl py-3">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8">
                <div class="card border-warning">
                    <div class="card-header bg-warning text-dark">
                        <h6 class="mb-0">
                            <i class="fas fa-bell me-2"></i>Test Notifikasi Alert
                        </h6>
                    </div>
                    <div class="card-body text-center">
                        <p class="text-muted mb-3">Coba notifikasi alert untuk memastikan sistem berfungsi dengan baik</p>
                        <button type="button" class="btn btn-warning px-4" onclick="testDashboardAlert()">
                            <i class="fas fa-bell me-2"></i>Test Alert Sekarang
                        </button>
                        <a href="{{ route('user.alert-settings') }}" class="btn btn-outline-primary px-4 ms-2">
                            <i class="fas fa-cog me-2"></i>Pengaturan Alert
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> -->

<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                <div class="d-flex flex-column">
                    <img class="img-fluid rounded w-75 align-self-end" src="{{ asset('assetss/img/about-1.jpg')}}" alt="">
                    <img class="img-fluid rounded w-50 bg-white pt-3 pe-3" src="{{ asset('assetss/img/about-2.jpg')}}" alt="" style="margin-top: -25%;">
                </div>
            </div>
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                <p class="d-inline-block border rounded-pill py-1 px-4">About Us</p>
                <h1 class="mb-4">Mengapa Anda Harus Mempercayai Sistem Kami</h1>
                <p>HeartChoice ini merupakan sebuah Sistem Pendukung Keputusan untuk membantu penderita penyakit jantung dalam memilih menu makanan yang sesuai dengan kriteria kesehatan mereka. Dengan menggunakan metode AHP (Analytic Hierarchy Process), kami memberikan rekomendasi yang tepat berdasarkan berbagai kriteria gizi yang penting.</p>
                <p class="mb-4">Aplikasi ini menggunakan pendekatan berbasis web yang mudah diakses oleh siapa saja, memberikan pemahaman yang jelas mengenai perbandingan kriteria seperti lemak, natrium, energi, dan karbohidrat dalam menu makanan. Dengan sistem ini, penderita penyakit jantung dapat membuat keputusan yang lebih sehat dan aman dalam memilih makanan mereka.</p>
                <p><i class="far fa-check-circle text-primary me-3"></i>Mempermudah Pemilihan Makanan yang Sehat</p>
                <p><i class="far fa-check-circle text-primary me-3"></i>Memanfaatkan Metode AHP untuk Keputusan yang Lebih Tepat</p>
                <p><i class="far fa-check-circle text-primary me-3"></i>Aplikasi yang Mudah Digunakan dan Aksesible</p>
                <a class="btn btn-primary rounded-pill py-3 px-5 mt-3" href="{{ route('userabout') }}">Lihat Selengkapnya</a>

            </div>
        </div>
    </div>
</div>
<!-- About End -->


<!-- fEATURES Start -->
<!-- Latar belakang biru lembut -->
<!-- <div class="container-xxl py-5" style="background: linear-gradient(to bottom, #e3f2fd, #bbdefb);">
    <div class="container">
        <div class="text-center mb-5 wow fadeIn" data-wow-delay="0.1s">
            <p class="d-inline-block border rounded-pill bg-primary text-light py-1 px-4">Fitur Unggulan</p>
            <h1 class="text-dark mb-4">Kenali Fitur-fitur Utama Kami</h1>
            <p class="text-dark mb-4 pb-2 px-md-5 mx-auto" style="max-width: 800px;">
                Sistem ini dirancang khusus untuk membantu penderita penyakit jantung memilih menu makanan terbaik dengan pendekatan ilmiah dan teknologi yang mudah digunakan.
            </p>
        </div> -->

        <!-- Daftar Fitur Horizontal -->
        <!-- <div class="row row-cols-2 row-cols-md-3 row-cols-lg-5 g-4 text-center mb-5 px-md-4">
            @php
                $features = [
                    ['id' => 'feature1', 'icon' => 'fas fa-heartbeat', 'label' => 'Rekomendasi Sehat'],
                    ['id' => 'feature2', 'icon' => 'fas fa-brain', 'label' => 'Pendekatan Ilmiah'],
                    ['id' => 'feature3', 'icon' => 'fas fa-desktop', 'label' => 'Tampilan Responsif'],
                    ['id' => 'feature4', 'icon' => 'fas fa-database', 'label' => 'Keamanan Data'],
                    ['id' => 'feature5', 'icon' => 'fas fa-hands-helping', 'label' => 'Dukungan Penuh'],
                ];
            @endphp
            @foreach ($features as $feature)
            <div class="col">
                <a href="{{ url('/userfeatures/' . $feature['id']) }}" class="text-decoration-none">
                    <div class="feature-card p-4 rounded shadow-sm bg-white hover-shadow transition">
                        <div class="icon-circle mb-3">
                            <i class="{{ $feature['icon'] }} text-primary"></i>
                        </div>
                        <h6 class="text-dark mb-2">{{ $feature['label'] }}</h6>
                        <p class="text-primary mb-0 read-more">Lihat Selengkapnya <i class="fas fa-chevron-right ms-1"></i></p>
                    </div>
                </a>                
            </div>
            @endforeach
        </div>
    </div>
</div> -->

<style>
.feature-card {
    cursor: pointer;
    border: none;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.icon-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.icon-circle i {
    font-size: 1.75rem;
}

.read-more {
    font-size: 0.85rem;
    opacity: 0.9;
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) !important;
}

.feature-card:hover .icon-circle {
    background: rgba(33, 150, 243, 0.2);
    transform: scale(1.1);
}

.feature-card:hover .read-more {
    opacity: 1;
}

.feature-card:hover .read-more i {
    transform: translateX(3px);
}

.read-more i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

@media (max-width: 991.98px) {
    .icon-circle {
        width: 60px;
        height: 60px;
    }
    
    .icon-circle i {
        font-size: 1.5rem;
    }
    
    .feature-card {
        padding: 1.25rem !important;
    }
}

@media (max-width: 767.98px) {
    .container-xxl.py-5 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .icon-circle {
        width: 50px;
        height: 50px;
    }
    
    .icon-circle i {
        font-size: 1.25rem;
    }
    
    h6 {
        font-size: 0.9rem;
    }
    
    .read-more {
        font-size: 0.75rem;
    }
    
    .feature-card {
        padding: 1rem !important;
    }
}
</style>

<!-- fEATURES End -->


<!-- <div class="container-xxl py-5">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                <div class="d-flex flex-column">
                    <img class="img-fluid rounded w-75 align-self-end" src="{{ asset('assetss/img/about-1.jpg')}}" alt="">
                    <img class="img-fluid rounded w-50 bg-white pt-3 pe-3" src="{{ asset('assetss/img/about-2.jpg')}}" alt="" style="margin-top: -25%;">
                </div>
            </div>
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                <p class="d-inline-block border rounded-pill py-1 px-4">Menu Makanan</p>
                <p class="mb-4">Eksplorasi pilihan menu makanan yang sehat dan bergizi, lengkap dengan informasi tentang kandungan gizi yang dapat membantu Anda membuat pilihan terbaik untuk diet dan kesehatan.</p>
                <a class="btn btn-primary rounded-pill py-3 px-5 mt-3" href="{{ route('userdata') }}">Lihat Selengkapnya</a>
            </div>
        </div>
    </div>
</div> -->

<!-- Menu Section -->
<div class="container-xxl py-5" style="background: linear-gradient(to bottom right, #e3f2fd, #bbdefb);">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                <div class="h-100">
                    <p class="d-inline-block border rounded-pill py-1 px-4 bg-primary text-light">Menu Makanan</p>
                    <h1 class="mb-4">Pilihan Menu Sehat untuk Jantung Anda</h1>
                    <p class="mb-4">Eksplorasi pilihan menu makanan yang sehat dan bergizi, lengkap dengan informasi tentang kandungan gizi yang dapat membantu Anda membuat pilihan terbaik untuk diet dan kesehatan.</p>
                    <div class="row g-4">
                        <div class="col-12">
                            <div class="d-flex align-items-center rounded p-4" style="background: rgba(33, 150, 243, 0.1);">
                                <div class="ms-4">
                                    <p class="mb-2 text-primary"><i class="fa fa-check-circle text-primary me-2"></i>Informasi nutrisi lengkap</p>
                                    <p class="mb-2 text-primary"><i class="fa fa-check-circle text-primary me-2"></i>Dikelompokkan berdasarkan waktu makan</p>
                                    <p class="mb-0 text-primary"><i class="fa fa-check-circle text-primary me-2"></i>Rekomendasi berdasarkan kebutuhan</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex gap-3 mt-4">
                        <a class="btn btn-primary rounded-pill py-3 px-5" href="{{ route('userdata') }}">
                            <i class="fa fa-utensils me-2"></i>Lihat Menu
                        </a>
                        <!-- <a class="btn btn-outline-primary rounded-pill py-3 px-5" href="{{ route('alternatif.pilih') }}">
                            <i class="fa fa-arrow-right me-2"></i>Mulai Pilih
                        </a> -->
                    </div>
                </div>
            </div>
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                <div class="position-relative">
                    <div class="card border-0 rounded-4 shadow-lg overflow-hidden">
                        <div class="card-body p-0">
                            <img class="img-fluid" src="{{ asset('assetss/img/about-1.jpg')}}" alt="Menu Image">
                            <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center" style="background: rgba(33, 150, 243, 0.1);">
                                <div class="p-4">
                                    <h3 class="text-primary mb-3">Menu Makanan Sehat</h3>
                                    <p class="text-white mb-0">Pilihan menu sehat dengan informasi nutrisi lengkap</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Results Section -->
<div class="container-xxl py-5">
    <div class="container">
        <div class="row g-5 align-items-center">
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.1s">
                <div class="position-relative rounded-4 overflow-hidden shadow-lg">
                    <div class="position-relative">
                        <img class="img-fluid w-100" src="{{ asset('assetss/img/carousel-1.jpg')}}" alt="Results Image">
                        <div class="position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center" style="background: rgba(33, 150, 243, 0.1);">
                            <div class="p-4">
                                <h3 class="text-primary mb-3">Hasil Analisis</h3>
                                <p class="text-white mb-0">Rekomendasi berdasarkan metode AHP</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 wow fadeIn" data-wow-delay="0.5s">
                <div class="h-100">
                    <p class="d-inline-block border rounded-pill py-1 px-4 bg-primary text-light">Hasil Rekomendasi</p>
                    <h1 class="mb-4">Rekomendasi Menu Terbaik untuk Anda</h1>
                    <p class="mb-4">Dapatkan hasil analisis dan rekomendasi menu yang sesuai dengan kebutuhan diet Anda. Sistem kami menggunakan metode AHP untuk memberikan saran menu terbaik berdasarkan berbagai kriteria kesehatan.</p>
                    <div class="row gy-3">
                        <div class="col-sm-6">
                            <div class="bg-light rounded p-3">
                                <i class="fa fa-chart-pie fa-2x text-primary mb-3"></i>
                                <h5 class="mb-2">Analisis AHP</h5>
                                <p class="mb-0">Perhitungan sistematis berdasarkan kriteria nutrisi</p>
                            </div>
                        </div>
                        <div class="col-sm-6">
                            <div class="bg-light rounded p-3">
                                <i class="fa fa-chart-bar fa-2x text-primary mb-3"></i>
                                <h5 class="mb-2">Hasil Detail</h5>
                                <p class="mb-0">Informasi lengkap tentang nutrisi dan skor</p>
                            </div>
                        </div>
                    </div>
                    <a class="btn btn-primary rounded-pill py-3 px-5 mt-4" href="{{ route('userresult') }}">
                        <i class="fa fa-chart-line me-2"></i>Lihat Hasil
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Additional Styles -->
<style>
.card {
    transition: transform 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-10px);
}

.bg-light {
    transition: all 0.3s ease;
}

.bg-light:hover {
    background-color: #e3f2fd !important;
    transform: translateY(-5px);
}

.btn {
    transition: all 0.3s ease;
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
</style>

<script>
function testDashboardAlert() {
    // Tampilkan alert test sederhana
    const container = document.getElementById('alert-container');
    const alertHtml = `
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="fas fa-bell me-2"></i>
            <strong>TEST ALERT:</strong> Ini adalah test notifikasi alert dari dashboard. Sistem alert berfungsi dengan baik!
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `;
    container.innerHTML = alertHtml;
    container.style.display = 'block';
    
    // Auto hide setelah 5 detik
    setTimeout(() => {
        container.style.display = 'none';
    }, 5000);
}
</script>

@endsection