@extends('layouts.app')

@section('title', 'Checkpoint - Skener fiskalnih računa za Srbiju')

@section('content')
<section class="section section-height-3 bg-color-grey-scale-1 position-relative border-0 m-0">
    <div class="container pb-5 mb-5">
        <div class="row align-items-center">
            <div class="col-lg-6 mb-5 mb-lg-0">
                <h1 class="font-weight-bold text-10 line-height-1 mb-3">
                    Skeniraj. Sačuvaj. Analiziraj.
                </h1>
                <p class="text-4 text-color-dark mb-4">
                    Najlakši način da upravljate fiskalnim računima u Srbiji. 
                    Skenirajte QR kod sa računa i automatski sačuvajte sve podatke.
                </p>
                <div>
                    @guest
                        <a href="{{ route('register') }}" class="btn btn-primary btn-modern btn-lg mb-2">
                            <i class="fas fa-user-plus me-2"></i>Registrujte se besplatno
                        </a>
                        <a href="{{ route('login') }}" class="btn btn-outline-primary btn-modern btn-lg mb-2 ms-2">
                            <i class="fas fa-sign-in-alt me-2"></i>Prijavite se
                        </a>
                    @else
                        <a href="{{ route('dashboard') }}" class="btn btn-primary btn-modern btn-lg mb-2">
                            <i class="fas fa-tachometer-alt me-2"></i>Kontrolna tabla
                        </a>
                        <a href="{{ route('scan') }}" class="btn btn-success btn-modern btn-lg mb-2 ms-2">
                            <i class="fas fa-qrcode me-2"></i>Skeniraj račun
                        </a>
                    @endguest
                </div>
                
                <!-- Install PWA button -->
                <button id="install-pwa" class="btn btn-dark btn-modern btn-lg mb-2 ms-2" style="display:none;">
                    <i class="fas fa-download me-2"></i>Instaliraj aplikaciju
                </button>
            </div>
            <div class="col-lg-6">
                <div class="position-relative">
                    <img src="/pt/img/demos/demo-auto-services-home-1.png" class="img-fluid" alt="Checkpoint App">
                    <div class="position-absolute top-50 start-50 translate-middle">
                        <div class="bg-primary rounded-circle p-5 opacity-8">
                            <i class="fas fa-qrcode text-white" style="font-size: 5rem;"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section class="section section-height-3 bg-color-light position-relative border-0 m-0">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12 text-center mb-5">
                <h2 class="font-weight-bold text-8 mb-3">Funkcionalnosti</h2>
                <p class="text-4">Sve što vam je potrebno za upravljanje fiskalnim računima</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light box-shadow-1 box-shadow-1-hover">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-qrcode text-primary" style="font-size: 4rem;"></i>
                        <h4 class="font-weight-bold text-5 mt-3">QR Skeniranje</h4>
                        <p class="text-3">Brzo skeniranje QR koda sa fiskalnih računa pomoću kamere telefona ili računara</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light box-shadow-1 box-shadow-1-hover">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-database text-primary" style="font-size: 4rem;"></i>
                        <h4 class="font-weight-bold text-5 mt-3">Automatsko čuvanje</h4>
                        <p class="text-3">Svi podaci sa računa se automatski parsiraju i čuvaju u bazi podataka</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light box-shadow-1 box-shadow-1-hover">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-search text-primary" style="font-size: 4rem;"></i>
                        <h4 class="font-weight-bold text-5 mt-3">Pretraga i filteri</h4>
                        <p class="text-3">Napredna pretraga po prodavcu, datumu, iznosu i kategorijama</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light box-shadow-1 box-shadow-1-hover">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-chart-bar text-primary" style="font-size: 4rem;"></i>
                        <h4 class="font-weight-bold text-5 mt-3">Analitika</h4>
                        <p class="text-3">Grafički prikazi mesečne potrošnje i statistike po kategorijama</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light box-shadow-1 box-shadow-1-hover">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-shield-alt text-primary" style="font-size: 4rem;"></i>
                        <h4 class="font-weight-bold text-5 mt-3">Garancije</h4>
                        <p class="text-3">Praćenje garancijskih rokova i podsetnici za istek garancije</p>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="card border-0 border-radius-0 bg-color-light box-shadow-1 box-shadow-1-hover">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-envelope text-primary" style="font-size: 4rem;"></i>
                        <h4 class="font-weight-bold text-5 mt-3">Slanje knjigovođi</h4>
                        <p class="text-3">Automatsko slanje gotovinskih računa knjigovođi putem emaila</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- User Types Section -->
<section class="section section-height-3 bg-color-grey-scale-1 position-relative border-0 m-0">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12 text-center mb-5">
                <h2 class="font-weight-bold text-8 mb-3">Za sve tipove korisnika</h2>
                <p class="text-4">Prilagođeno fizičkim licima, preduzetnicima i firmama</p>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-4 mb-4">
                <div class="card border-width-3 border-radius-0 border-color-hover-dark">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-user text-color-primary" style="font-size: 3rem;"></i>
                        <h4 class="font-weight-bold text-4 mt-3">Fizička lica</h4>
                        <ul class="list list-icons list-primary text-left mt-3">
                            <li><i class="fas fa-check"></i> Skeniranje i čuvanje računa</li>
                            <li><i class="fas fa-check"></i> Praćenje garancija</li>
                            <li><i class="fas fa-check"></i> Lična analitika troškova</li>
                            <li><i class="fas fa-check"></i> Izvoz u CSV/PDF</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="card border-width-3 border-radius-0 border-color-hover-dark">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-briefcase text-color-primary" style="font-size: 3rem;"></i>
                        <h4 class="font-weight-bold text-4 mt-3">Preduzetnici</h4>
                        <ul class="list list-icons list-primary text-left mt-3">
                            <li><i class="fas fa-check"></i> Sve funkcije fizičkih lica</li>
                            <li><i class="fas fa-check"></i> Poslovni režim rada</li>
                            <li><i class="fas fa-check"></i> Mesečni izveštaji</li>
                            <li><i class="fas fa-check"></i> Slanje računa knjigovođi</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 mb-4">
                <div class="card border-width-3 border-radius-0 border-color-hover-dark">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-building text-color-primary" style="font-size: 3rem;"></i>
                        <h4 class="font-weight-bold text-4 mt-3">Firme</h4>
                        <ul class="list list-icons list-primary text-left mt-3">
                            <li><i class="fas fa-check"></i> Sve funkcije preduzetnika</li>
                            <li><i class="fas fa-check"></i> Višekorisnički pristup</li>
                            <li><i class="fas fa-check"></i> Upravljanje timom</li>
                            <li><i class="fas fa-check"></i> Automatizacija procesa</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="section section-height-2 bg-color-primary position-relative border-0 m-0">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-12 text-center">
                <h2 class="font-weight-bold text-color-light text-8 mb-3">Počnite danas!</h2>
                <p class="text-color-light text-4 mb-4">Registracija je besplatna i traje samo nekoliko minuta</p>
                @guest
                    <a href="{{ route('register') }}" class="btn btn-light btn-modern btn-lg">
                        <i class="fas fa-rocket me-2"></i>Registrujte se sada
                    </a>
                @else
                    <a href="{{ route('scan') }}" class="btn btn-light btn-modern btn-lg">
                        <i class="fas fa-qrcode me-2"></i>Skeniraj prvi račun
                    </a>
                @endguest
            </div>
        </div>
    </div>
</section>
@endsection

@push('scripts')
<script>
// Register service worker
if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/service-worker.js')
            .then(registration => {
                console.log('Service Worker registered:', registration);
            })
            .catch(error => {
                console.log('Service Worker registration failed:', error);
            });
    });
}

// PWA install prompt
let deferredPrompt;
const installButton = document.getElementById('install-pwa');

window.addEventListener('beforeinstallprompt', (e) => {
    e.preventDefault();
    deferredPrompt = e;
    installButton.style.display = 'inline-block';
});

installButton.addEventListener('click', async () => {
    if (deferredPrompt) {
        deferredPrompt.prompt();
        const { outcome } = await deferredPrompt.userChoice;
        console.log(`User response: ${outcome}`);
        deferredPrompt = null;
        installButton.style.display = 'none';
    }
});

window.addEventListener('appinstalled', () => {
    console.log('PWA installed');
    installButton.style.display = 'none';
});
</script>
@endpush