@extends('frontend.layouts.app')

@section('content')
    <section class="bread ">
        <div class="container">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{route('frontend.home')}}">Home</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{$category->name}} Details</li>
                </ol>
            </nav>
        </div>
    </section>

    <section class="intro intro-details section-padding bg1">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="right-intro">
                        <div class="intro-images">
                            <img src="{{$categoryItem->media[0]->getFullUrl()}}" alt="">
                        </div>
                        <div class="intro-head">

                            <h1>{{$categoryItem->title}}</h1>

                            <p class="lineclamp">
                                {!! $categoryItem->description !!}
                            </p>
                        </div>
                    </div>
                </div>

            </div>
            @if(!empty($categoryItem->youtube_link))
                <div class="row">
                    <div class="col-md-12">
                        <div class="left-intro speech-img speech-img-detail">
                            <img src="{{$categoryItem->media[0]->getFullUrl()}}" alt=""/>
                            <!-- <a href="https://www.youtube.com/watch?v=K1iTqjGDmbE" data-fancybox="images"><i class="far fa-play-circle play-btn button"></i></a> -->
                            <a href="{{$categoryItem->youtube_link}}" data-fancybox="images"
                               class=" play-button" href="#">
                                <span></span>
                            </a>
                        </div>
                    </div>
                </div>
            @endif

        </div>
    </section>
    <section class="letter speech-letter">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="left-letter">
                        <span>Get Our News</span>
                        <h2>Subscribe to our newsletter!</h2>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="input-group mb-3 mt-4">
                        <input type="text" class="form-control" placeholder="Your e-mail"
                               aria-label="Recipient's username" aria-describedby="basic-addon2">
                        <div class="input-group-append">
                            <button class="btn" type="button">Subscribe</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection