@extends('layouts/frontend/layoutFrontend')

@section('title', 'Naslovna')

@section('page-style')
<!-- Page -->
<link
    href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">
<link
    href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
    rel="stylesheet">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/all.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/slick.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/style.css')}}">
<link rel="stylesheet" href="{{asset('assets/vendor/frontend/css/style.css')}}">

@endsection

@section('page-script')
<script src="{{asset('assets/vendor/frontend/js/jquery.min.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/slick.min.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/modal.js')}}"></script>
<script src="{{asset('assets/vendor/frontend/js/custom.js')}}"></script>
@endsection


@section('content')

<div class="site-content">
    <!-- Preloader start -->
    <div class="loader-mask">
        <div class="loader">
        </div>
    </div>
    <!-- Preloader end -->

    <!-- Homescreen content start -->
    <section id="homescreen">
        <div class="home-first-sec mt-32">
            <div class="container">
                <div class="home-first-sec-wrap">
                    @if (Auth::check())
                        <h1>{{ Auth::user()->name }}</h1>


                        <p class="mt-8">Dobro došao!</p>
                    @endif
                </div>
            </div>
        </div>
        @if($novosti->count() > 0)
            <div class="home-offer-sec mt-32">
                <div class="container">
                    <div id="carouselExampleIndicators" class="carousel slide carousel slide-shop-now2"
                        data-bs-ride="carousel">
                        <div class="carousel-indicators">
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
                                class="active show-now2-custom-btn" aria-current="true" aria-label="Slide 1"></button>
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
                                class="show-now2-custom-btn" aria-label="Slide 2"></button>
                            <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
                                class="show-now2-custom-btn" aria-label="Slide 3"></button>
                        </div>

                        <div class="carousel-inner">
                            @foreach($novosti as $novost)
                                <div class="carousel-item active">
                                    <div class="shop-now2-sec"
                                        style="background-image: url({{ asset($novost->slika) }}) !important;">
                                        <div class="offer-details">
                                            <div class="offer-details-wrap">
                                                <div class="offer-price">
                                                    <h2 class="mt-12">{{$novost->naslov}}</h2>
                                                </div>
                                                <div class="home1-shop-now-btn">
                                                    <p>{{$novost->kategorija}}</p>
                                                </div>
                                            </div>
                                            <div class="discount-txt mt-16">
                                                <p>{{ substr($novost->sadrzaj, 0, 40) }} <br>
                                                    {{ substr($novost->sadrzaj, 40, 40) }}...</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        @endif

        <div class="home-course mt-32">
            <div class="home-course-wrapper-top">
                <div class="container">
                    <div class="categories-first">
                        <h2 class="home1-txt3">Meni</h2>
                    </div>
                </div>
            </div>
            <div class="chatscree2-wrap-sec mt-32" style="padding: 10px;">
                @foreach($proizvodi as $proizvod)
                    <div class="chatscree2-content chat-screen-redirect">
                        <div class="chatscree2-wrap" style="padding-top: 10px !important;">
                            @if($proizvod->slika)
                                <div class="chat-img" style="padding-left: 5px;">
                                    <div class="chat-img-sec">
                                        <img src="{{ asset($proizvod->slika) }}" alt="client-img" class="w-100">
                                    </div>
                                </div>
                            @else
                                <div class="chat-img" style="padding-left: 5px;">
                                    <div class="chat-img-sec">
                                        <img src="{{ asset('images/17.jpg') }}" alt="client-img" class="w-100">
                                    </div>
                                </div>
                            @endif
                            <div class="chat-content">
                                <div class="chat-content-wrap">
                                    <div class="chat-content-top"
                                        style="color: white; padding-left: 20px; padding-right: 20px;">
                                        <h3>{{$proizvod->naziv}}</h3>
                                        <h3 style="color:white">{{$proizvod->cijena}} KM</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="chat-border"></div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <div class="dark-overlay"></div>
    @endsection