<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>PeGas</title>
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <link href="{{ asset('img/favicon.ico') }}" rel="icon">
  <link rel="icon" type="image/png" href="{{ asset('img/logo-pegas.png') }}">

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap"
    rel="stylesheet">

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet">

  <link href="{{ asset('landing-asset/lib/animate/animate.min.css') }}" rel="stylesheet">
  <link href="{{ asset('landing-asset/lib/owlcarousel/assets/owl.carousel.min.css') }}" rel="stylesheet">

  <link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet">
  <link href="{{ asset('css/landing.css') }}" rel="stylesheet">
</head>

<body>
  <div class="bg-white p-0">

    {{-- spinner start --}}
    <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-border text-primary" style="width: 3rem; height: 3rem;" role="status">
        <span class="sr-only">Loading...</span>
      </div>
    </div>
    {{-- spinner end --}}

    {{-- 
      PERBAIKAN: Hapus class 'sticky-top' dari sini.
      Sebelumnya: class="navbar navbar-expand-lg navbar-light sticky-top"
      sticky-top di HTML menyebabkan konflik dengan JS scroll handler yang
      menambah/menghapus sticky-top secara dinamis — sehingga saat scroll
      ke atas, navbar tidak kembali ke state awal (logo terpotong, tinggi navbar tidak reset).
      Sekarang class sticky-top HANYA dikontrol oleh landing.js lewat scroll event.
    --}}
    <nav class="navbar navbar-expand-lg navbar-light" id="mainNavbar">
      <div class="container-xxl">
        <a href="#home" class="navbar-brand p-0">
          <div class="d-flex align-items-center">
            <img src="{{ asset('img/logo-pegas2.png') }}" alt="Logo PeGas" class="me-2">
            <h1 class="m-0 text-white">PeGas</h1>
          </div>
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
          <span class="fa fa-bars"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <div class="navbar-nav ms-auto py-0">
            <a href="#home" class="nav-item nav-link active">Home</a>
            <a href="#about" class="nav-item nav-link">About</a>
            <a href="#artikel" class="nav-item nav-link">Berita</a>
            <a href="#faq" class="nav-item nav-link">FAQ</a>
            <a href="#contact" class="nav-item nav-link">Contact</a>
          </div>
          @auth
            <a href="{{ auth()->user()->role === 'admin' ? route('admin.dashboard') : route('user.dashboard') }}"
              class="btn btn-primary py-2 px-4 ms-4">Dashboard</a>
          @else
            <a href="{{ route('login') }}" class="btn btn-secondary py-2 px-4 ms-4">Login</a>
          @endauth
        </div>
      </div>
    </nav>

    {{-- home --}}
    <div class="hero-wrapper position-relative" id="home">
      <div class="hero-header bg-primary text-white py-5">
        <div class="container">
          <div class="row g-5 align-items-center">
            <div class="col-lg-6 pt-5 text-center text-lg-start">
              <h1 class="display-4 mb-4 animated slideInLeft">PeGas</h1>
              <p class="animated slideInLeft text-justify">PeGas atau Prediksi Gas merupakan sebuah website yang
                used untuk membantu memprediksi ketersedian stok gas LPG khususnya LPG 3 Kg pada pangkalan dengan
                memanfaatkan data historis dari penjualan.</p>
              <a href="{{ route('login') }}" class="btn btn-secondary py-sm-3 px-sm-5 animated slideInLeft">Prediksi Sekarang</a>
            </div>
            <div class="col-lg-6 text-center text-lg-end">
              <img class="img-fluid animated zoomIn" src="{{ asset('img/hero.png') }}" alt="Hero Image">
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- about --}}
    <div class="py-5" id="about">
      <div class="container">
        <div class="row g-5 align-items-center mb-5">
          <div class="col-lg-5 text-center wow zoomIn" data-wow-delay="0.5s">
            <img class="img-fluid" src="{{ asset('img/about.png') }}" alt="About Image">
          </div>
          <div class="col-lg-7 wow fadeInUp" data-wow-delay="0.1s">
            <div class="section-title position-relative mb-4 pb-4">
              <h1 class="mb-2">Tentang PeGas</h1>
            </div>
            <p class="mb-4 text-justify"><b>PeGas atau Prediksi Gas</b> adalah sistem berbasis teknologi informasi yang
              dirancang untuk memonitor dan memprediksi ketersediaan stok LPG, khususnya LPG 3kg, menggunakan algoritma
              Prophet. Sistem ini membantu mengantisipasi kelangkaan dan mengoptimalkan pengelolaan stok secara efisien.
            </p>
          </div>
        </div>

        <div class="row g-4 justify-content-center mt-4">
          <div class="col-12 text-center mb-2 wow fadeInUp" data-wow-delay="0.1s">
            <h3 class="font-weight-bold text-dark">Mengapa Menggunakan PeGas?</h3>
            <p class="text-muted">Keuntungan utama integrasi teknologi kecerdasan buatan pada manajemen pangkalan LPG</p>
          </div>
          <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.2s">
            <div class="card border-0 shadow-sm p-4 text-center h-100 border-top border-primary border-5">
              <div class="btn-square bg-light text-primary rounded-circle mx-auto mb-4" style="width: 64px; height: 64px;">
                <i class="fas fa-brain fa-2x"></i>
              </div>
              <h5 class="font-weight-bold mb-3">Prediksi Algoritma Machine Learning</h5>
              <p class="text-muted small mb-0">Menggunakan model analisis deret waktu (time-series forecasting) yang akurat mendeteksi pola musiman dan tren libur penjualan pangkalan.</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.4s">
            <div class="card border-0 shadow-sm p-4 text-center h-100 border-top border-secondary border-5">
              <div class="btn-square bg-light text-secondary rounded-circle mx-auto mb-4" style="width: 64px; height: 64px;">
                <i class="fas fa-chart-line fa-2x"></i>
              </div>
              <h5 class="font-weight-bold mb-3">Optimalisasi Stok Manajemen</h5>
              <p class="text-muted small mb-0">Menghindari terjadinya penumpukan tabung berlebih (overstock) maupun kekosongan pasokan gas (stockout) pada pangkalan.</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6 wow fadeInUp" data-wow-delay="0.6s">
            <div class="card border-0 shadow-sm p-4 text-center h-100 border-top border-success border-5">
              <div class="btn-square bg-light text-success rounded-circle mx-auto mb-4" style="width: 64px; height: 64px;">
                <i class="fas fa-file-excel fa-2x"></i>
              </div>
              <h5 class="font-weight-bold mb-3">Ekspor Laporan Otomatis</h5>
              <p class="text-muted small mb-0">Hasil peramalan angka batas atas dan batas bawah kebutuhan stok lpg selama 180 hari ke depan dapat diunduh instan ke file format Excel.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="bg-light py-5" id="workflow">
      <div class="container py-3">
        <div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s" style="max-width: 600px;">
          <h1 class="mb-3">Alur Kerja Sistem</h1>
          <p class="mb-1 text-muted">Bagaimana sistem PeGas mengolah data penjualan menjadi rekomendasi stok nyata</p>
        </div>
        <div class="row g-4 justify-content-center">
          <div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-delay="0.1s">
            <div class="position-relative p-3">
              <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3 shadow" style="width: 70px; height: 70px; font-size: 1.5rem; font-weight: bold;">1</div>
              <h5 class="font-weight-bold text-dark">Input Data Historis</h5>
              <p class="text-muted small">Pemilik pangkalan menginputkan data kuantitas penjualan harian LPG minimal 365 hari secara manual atau import berkas Excel.</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-delay="0.3s">
            <div class="position-relative p-3">
              <div class="bg-secondary text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3 shadow" style="width: 70px; height: 70px; font-size: 1.5rem; font-weight: bold;">2</div>
              <h5 class="font-weight-bold text-dark">Sinkronisasi Server</h5>
              <p class="text-muted small">Laravel mengirimkan data penjualan harian tersebut menuju server tempat proses prediksi dijalankan.</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-delay="0.5s">
            <div class="position-relative p-3">
              <div class="bg-info text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3 shadow" style="width: 70px; height: 70px; font-size: 1.5rem; font-weight: bold;">3</div>
              <h5 class="font-weight-bold text-dark">Pemrosesan Machine Learning</h5>
              <p class="text-muted small">Kecerdasan buatan memproses data tren deret waktu, menghitung tingkat variasi musiman, serta memproyeksikan kebutuhan stok masa depan.</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center wow fadeInUp" data-wow-delay="0.7s">
            <div class="position-relative p-3">
              <div class="bg-success text-white rounded-circle d-flex align-items-center justify-content-center mx-auto mb-3 shadow" style="width: 70px; height: 70px; font-size: 1.5rem; font-weight: bold;">4</div>
              <h5 class="font-weight-bold text-dark">Visualisasi & Keputusan</h5>
              <p class="text-muted small">Hasil ramalan dikembalikan ke dasbor pengguna dalam bentuk grafik Chart harian/mingguan dan rincian tabel angka siap ekspor.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- artikel --}}
    <div class="py-5" id="artikel">
      <div class="container">
        <div class="section-title position-relative text-center mx-auto mb-5 pb-4 wow fadeInUp" data-wow-delay="0.1s"
          style="max-width: 600px;">
          <h1 class="mb-3">Berita Terbaru</h1>
          <p class="mb-1">Informasi terkini seputar Gas LPG</p>
        </div>
        <div class="owl-carousel artikel-carousel wow fadeInUp" data-wow-delay="0.3s">
          @foreach($artikels->take(5) as $item)
            <div class="card border-0 shadow-sm m-2">
              @if($item->gambar && file_exists(public_path($item->gambar)))
                <img src="{{ asset($item->gambar) }}" class="card-img-top" style="height:220px; object-fit:cover;" alt="Gambar Berita">
              @else
                <img src="https://placehold.co/600x400?text=PeGas+LPG" class="card-img-top" style="height:220px; object-fit:cover;" alt="Default Berita">
              @endif
              <div class="card-body">
                <h5 class="card-title text-primary">{{ Str::limit($item->judul, 50) }}</h5>
                <p class="card-text text-muted" style="font-size: 0.9rem;">{{ Str::limit($item->deskripsi, 90) }}</p>
                <div class="d-flex justify-content-between align-items-center mt-3">
                  <small class="text-muted">Sumber: {{ Str::limit($item->sumber, 20) }}</small>
                  <a href="{{ $item->sumber }}" target="_blank" class="btn btn-sm btn-outline-primary">Baca</a>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </div>

    {{-- faq --}}
    <div class="py-5 wow fadeInUp" data-wow-delay="0.1s" id="faq">
      <div class="container">
        <h2 class="mb-4 text-center">Frequently Asked Questions</h2>
        <div class="mx-auto" style="max-width: 800px;">
          @foreach($faqs->take(7) as $faq)
            <div class="faq-item">
              <div class="faq-question py-3 fw-bold">{{ $faq->question }}</div>
              <div class="faq-answer pb-3 text-muted">{{ $faq->answer }}</div>
            </div>
          @endforeach
        </div>
      </div>
    </div>

    {{-- footer --}}
    <div class="container-fluid bg-primary text-white footer mt-5 pt-5 wow fadeIn" id="contact">
      <div class="container py-5">
        <div class="row gy-5 justify-content-between">

          <div class="col-lg-3 col-md-6">
            <h5 class="fw-bold text-white mb-4 border-bottom pb-2" style="display: inline-block;">Tentang PEGAS</h5>
            <p class="mb-3">Sistem prediksi stok LPG berbasis machine learning untuk membantu pangkalan memprediksi jumlah stok lpg 3 kg mereka</p>
            <a class="btn btn-link text-white p-0" href="#about">Selengkapnya</a>
          </div>

          <div class="col-lg-3 col-md-6">
            <h5 class="fw-bold text-white mb-4 border-bottom pb-2" style="display: inline-block;">Kontak Kami</h5>
            <p class="mb-2"><i class="fa fa-envelope me-3"></i>pegaslpgsystem@gmail.com</p>
            <p class="mb-2"><i class="fa fa-phone-alt me-3"></i>089506332856</p>
            <p class="mb-2"><i class="fa fa-map-marker-alt me-3"></i>Perum Griya Gebang Permai Blok J-06, Gebang, Patrang, Jember, Jawa Timur, Indonesia, kode pos 68117</p>
            <div class="d-flex pt-2">
              <a class="btn btn-outline-light btn-social me-2" href="https://www.facebook.com/eka.p.styo" target="blank"><i class="fab fa-facebook-f"></i></a>
              <a class="btn btn-outline-light btn-social" href="https://www.instagram.com/eksty" target="blank"><i class="fab fa-instagram"></i></a>
            </div>
          </div>

          <div class="col-lg-4 col-md-12">
            <div class="bg-white rounded p-4 shadow-lg">
              <h5 class="text-dark mb-3 text-center fw-bold">Kirim Pesan</h5>
              <form id="landingContactForm">
                @csrf
                <div class="mb-2">
                  <input type="text" name="subject" id="mailSubject" class="form-control" placeholder="Subjek Pesan / Nama Anda" required>
                </div>
                <div class="mb-2">
                  <input type="email" name="email" id="mailSender" class="form-control" placeholder="Alamat Email Anda" required>
                </div>
                <div class="mb-2">
                  <textarea name="message" id="mailBody" class="form-control" rows="3" placeholder="Tuliskan pesan Anda di sini..." required></textarea>
                </div>
                <button class="btn btn-primary w-100 py-2 d-flex align-items-center justify-content-center" type="submit" id="btnSendMail">
                  <span id="btnTextMail">Kirim Pesan</span>
                  <div id="btnSpinnerMail" class="spinner-border spinner-border-sm text-white ms-2 d-none" role="status"></div>
                </button>
              </form>
            </div>
          </div>

        </div>
      </div>

      {{-- Bagian Copyright --}}
      <div class="container">
        <div class="copyright py-4">
          <div class="row">
            <div class="col-md-6 text-center text-md-start">
              &copy; <a class="text-white border-bottom" href="#">PeGas2026</a>, All Right Reserved.
            </div>
            <div class="col-md-6 text-center text-md-end">
              <div class="footer-menu">
                <a href="#home" class="text-white me-3">Home</a>
                <a href="#about" class="text-white me-3">About</a>
                <a href="#artikel" class="text-white me-3">Berita</a>
                <a href="#faq" class="text-white">FAQ</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    {{-- back to top --}}
    <a href="#" class="btn btn-lg btn-secondary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
  </div>

  {{-- TOAST NOTIFICATION --}}
  <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 1100;">
    <div id="liveToastMail" class="toast align-items-center text-white bg-success border-0 fade hide" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div class="toast-body d-flex align-items-center">
          <i class="fas fa-check-circle me-2 fs-5"></i>
          <span id="toastMessageText">Pesan terkirim ke email pegaslpgsystem@gmail.com</span>
        </div>
        <button type="button" class="btn-close btn-close-white m-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="{{ asset('landing-asset/lib/wow/wow.min.js') }}"></script>
  <script src="{{ asset('landing-asset/lib/easing/easing.min.js') }}"></script>
  <script src="{{ asset('landing-asset/lib/waypoints/waypoints.min.js') }}"></script>
  <script src="{{ asset('landing-asset/lib/counterup/counterup.min.js') }}"></script>
  <script src="{{ asset('landing-asset/lib/owlcarousel/owl.carousel.min.js') }}"></script>

  <script src="{{ asset('js/landing.js') }}"></script>

  <script>
    document.getElementById('landingContactForm').addEventListener('submit', function(e) {
        e.preventDefault();

        const btnSubmit = document.getElementById('btnSendMail');
        const btnText   = document.getElementById('btnTextMail');
        const btnSpinner = document.getElementById('btnSpinnerMail');
        const toastElement = document.getElementById('liveToastMail');
        const toastText    = document.getElementById('toastMessageText');

        const bootstrapToast = new bootstrap.Toast(toastElement, { delay: 4000 });

        btnSubmit.setAttribute('disabled', 'true');
        btnText.innerText = "Mengirim...";
        btnSpinner.classList.remove('d-none');

        const formData = new FormData(this);

        fetch("{{ route('landing.contact.mail') }}", {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(res => res.json())
        .then(data => {
            btnSubmit.removeAttribute('disabled');
            btnText.innerText = "Kirim Pesan";
            btnSpinner.classList.add('d-none');
            toastElement.classList.remove('bg-success', 'bg-danger');
            if (data.success) {
                toastElement.classList.add('bg-success');
                toastText.innerText = data.message;
                bootstrapToast.show();
                document.getElementById('landingContactForm').reset();
            } else {
                toastElement.classList.add('bg-danger');
                toastText.innerText = data.message;
                bootstrapToast.show();
            }
        })
        .catch(() => {
            btnSubmit.removeAttribute('disabled');
            btnText.innerText = "Kirim Pesan";
            btnSpinner.classList.add('d-none');
            toastElement.classList.remove('bg-success');
            toastElement.classList.add('bg-danger');
            toastText.innerText = "Gagal terhubung, periksa jaringan internet Anda.";
            bootstrapToast.show();
        });
    });
  </script>
</body>

</html>