@extends('frontend.layouts.main')

@section('content')
<section class="hero-section">
    <div class="container-fluid p-0">
        <div class="row">
            <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-indicators">
                    @foreach ($slides as $index => $slide)
                        <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ $index }}"
                            @if($index === 0) class="active" @endif aria-label="Slide {{ $index + 1 }}"></button>
                    @endforeach
                </div>
                <div class="carousel-inner">
                    @foreach ($slides as $index => $slide)
                        <div class="carousel-item @if($index === 0) active @endif">
                            <img src="{{ asset($slide->banner) }}" class="img-fluid d-block w-100" alt="...">
                        </div>
                    @endforeach
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
                    data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
</section>

    <section class="intro-section">
        <div class="container">
            <div class="row">
                @foreach($basics as $basic)
                <div class="col-lg-6">
                    <div class="single">
                        <img src="{{ asset($basic->thumbnail) }}" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="col-lg-6">
                    <h3 class="intro-heading">{{ $basic->title }}</h3>
                    <p class="para-1">{!! $basic->description !!}</p>
                   <a href="{{ route('frontend.introduction.index') }}"> <button type="button" class="btn btn-outline-danger view-button">View More</button></a>

                </div>
            </div>
            @endforeach

        </div>

    </section>

    <section class="ventures-section">
        <div class="container">
            <div class="row">
                <h4 class="text-center pb-2">Our Ventures </h4>
                @foreach($ventures as $venture)
                <div class="col-lg-6 mt-3">
                    <div class="card">
                        <h4 class="card-header">{{ $venture->top_header }}</h4>
                        <img src="{{ asset($venture->logo) }}" class="card-img-top" alt="...">
                        <div class="card-body">
                           <a href="{{ $venture->link }}"> <button type="button" class="btn  btn-outline-danger visit-button pb-2 pt-2 ">
                                Visit</button></a>

                        </div>
                    </div>
                </div>
                @endforeach   
            </div>

        </div>

    </section>
{{-- @dd($videos) --}}
    <section class="video-section">
        <div class="container">
            <div class="row">
                <h3 class="text-center pb-2">Latest Videos</h3>
                @foreach($videos as $video)
                <div class="col-lg-4">
                    <iframe width="415" height="300" src="https://www.youtube.com/embed/{!! $video->link !!}"
                        title={{ $video->title }}
                        frameborder="0"
                        allowfullscreen></iframe>
                </div>
                @endforeach
                <div class="col-lg-12 text-center mt-4">
                   <a href="{{ route('frontend.videos.index') }}"> <button type="button" class="btn  btn-outline-danger view-button ">View All</button> </a>
                </div>
            </div>
        </div>
    </section>
@endsection