@extends('website.layouts.app')

@section('content')

    @if(count($slides) > 0)
        <!-- Hero and nav -->
        <div class="hero is-cover is-relative is-fullheight is-default is-bold">
        
            <!-- Hero Wallop Slider -->
            <div class="Wallop Wallop--v2 Wallop--fade">
                <div class="Wallop-list">
                    @foreach ($slides as $slide)
                        <!-- Slide -->
                        <div class="@if(count($slides) > 1) Wallop-item @endif has-background-image"
                            data-background="{{ asset('storage/'.$slide->image) }}">
                            <div class="Wallop-overlay"></div>
                            <div class="Wallop-caption-wrapper">
                                <div class="container">
                                    <div class="columns is-gapless is-vcentered" style="width: 100%">
                                        <div class="column is-12">
                                            <div class="caption-inner has-text-centered">
                                                <h1>{{ $slide->title }}</h1>
                                                <div class="caption-divider"></div>
                                                <div class="caption-text">
                                                    <span>{{ $slide->description }}</span>
                                                    <div class="action">
                                                        <a href="{{ $slide->link }}" class="button button-cta primary-btn rounded slide_link">
                                                            {{ $slide->link_title }}
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                @if(count($slides) > 1)
                <!-- Pagination dots -->
                <div class="Wallop-pagination">
                    @foreach ($slides as $slide)
                        <button class="Wallop-dot">slide</button>
                    @endforeach
                </div>
                @endif
            </div>
        </div>
    @endif

    <!-- Image carousel v1 -->
    <div id="basic" class="section is-medium">
        <div class="container">
            <div class="section-title-wrapper">
                <h2 class="title section-title has-text-centered dark-text text-bold">
                    Select Your Fish
                </h2>
                <div class="has-text-centered">
                    Smart Masheda offers fish feed to a wide range of Freshwater Fish Feed species. for example, Mullet Fish, Carp, Catfish, Tilapia.
                </div>
            </div>
        </div>

        <div class="content-wrapper">
            <div class="columns is-vcentered">
                <div class="column">
                    <div class="image-carousel" style="max-width: 1216px">
                        @foreach($fishes as $fish)
                            <a href="{{ route('fish_details', ['fish' => $fish->id]) }}">
                                <div class="carousel-item">
                                    <div class="image-wrapper">
                                        <img src="{{ asset('storage/'.$fish->image) }}"
                                        data-demo-src="{{ asset('storage/'.$fish->image) }}"/>
                                    </div>
                                    <div>
                                        <div class="title">{{ $fish->name }}</div>
                                        <div class="type">{{ $fish->fish_type->name }}</div>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                    <div class="has-text-centered mt-60">
                        <a href="{{ route('page', ['page' => 'species']) }}" class="button button-cta primary-btn rounded slide_link">
                            See More
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="services" class="section is-medium">
        <div class="container">
            <!-- Title -->
            <div class="section-title-wrapper has-text-centered">
                <h2 class="section-title-landing">About Us</h2>
            </div>

            <div class="content-wrapper">
                <div class="columns is-vcentered is-multiline has-text-centered">
                    <!-- Icon block -->
                    <div class="column is-4">
                        <div class="wavy-icon-box">
                            <div class="is-icon-reveal">
                                <i class="im im-icon-Duplicate-Window"></i>
                            </div>
                            <div class="box-title">Our Vision</div>
                            <p class="box-content is-tablet-padded">
                                Is to contribute to meeting the rising food needs of a growing world population in a sustainable manner...
                            </p>
                        </div>
                    </div>

                    <div class="column is-4">
                        <div class="wavy-icon-box">
                            <div class="is-icon-reveal">
                                <i class="im im-icon-Button"></i>
                            </div>
                            <div class="box-title">Our Mission</div>
                            <p class="box-content is-tablet-padded">
                                Is to always provide tailor - made products and services to our customers, to optimize their business performance
                            </p>
                        </div>
                    </div>

                    <div class="column is-4">
                        <div class="wavy-icon-box">
                            <div class="is-icon-reveal">
                                <i class="im im-icon-Palette"></i>
                            </div>
                            <div class="box-title">Our Value</div>
                            <p class="box-content is-tablet-padded">
                                is to ensure that our products and service are supplied to achieve consistent customer satisfaction...
                            </p>
                        </div>
                    </div>
                </div>

                <div class="has-text-centered pt-40 pb-40">
                    <a href="{{ route('page', ['page' => 'about-us']) }}" class="button button-cta primary-btn rounded raised">
                        Learn more
                    </a>
                </div>
            </div>
        </div>
    </div>

    @if(count($sections) > 0)
    <div class="section">
        <div class="container">
            @foreach($sections as $section)
                <div class="page_section">
                    {!! $section->description !!}
                </div>
            @endforeach
        </div>
    </div>
    @endif

    <div class="section is-medium">
        <div class="content-wrapper">
            <div class="columns is-vcentered">
                <div class="column parteners">
                    <div class="image-carousel" style="max-width: 1216px">
                        @foreach($parteners as $partener)
                            <a href="{{ $partener->link }}">
                                <div class="carousel-item">
                                    <div class="image-wrapper">
                                        <img src="{{ asset('storage/'.$partener->image) }}"
                                        data-demo-src="{{ asset('storage/'.$partener->image) }}"/>
                                    </div>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection