@extends('website.layouts.app')
@section('page-title')
    {{$blog->title}}
@endsection
@section('bootstrap')
    @if(app()->getLocale()=='ar')
        <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap-rtl.css')}}">
    @else
        <link rel="stylesheet" id="brk-direction-bootstrap" href="{{asset('website/css/assets/bootstrap.css')}}">

    @endif
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

@endsection

@section('breadcrumb')
    <div class="breadcrumbs__section breadcrumbs__section-thin brk-bg-center-cover lazyload"
         data-bg="{{asset('website/img/contact-us/1920x260_1.jpg')}}" data-brk-library="component__breadcrumbs_css">
        <span class="brk-abs-bg-overlay brk-base-bg-gradient-right-100 opacity-90"></span>
        <div class="breadcrumbs__wrapper rtl">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12 col-lg-6">
                        <div
                            class="d-flex justify-content-lg-end justify-content-start pr-40 pr-xs-0 breadcrumbs__title">
                            <h2
                                class="brk-white-font-color font__weight-semibold font__size-48 line__height-68 font__family-montserrat">
                                {{$blog->title}}
                            </h2>
                        </div>
                    </div>
                    <div class="col-12 col-lg-6">
                        <div class="pt-25 pb-35 position-static position-lg-relative breadcrumbs__subtitle">
                            <h3
                                class="brk-white-font-color font__family-montserrat font__weight-medium font__size-18 line__height-21 text-uppercase mb-15">
                                {{__('website.follow-up-our-latest-news')}}

                            </h3>
                            <ol
                                    class="breadcrumb font__family-montserrat font__size-15 mt-10 line__height-16 brk-white-font-color">
                                <li>
                                    <a href="{{route('website.home')}}">{{__('website.home')}}</a>

                                    @if(app()->getLocale() == 'ar')
                                        &nbsp;&nbsp;&nbsp;&nbsp;<i class="fal fa-chevron-left icon"></i>
                                    @else
                                        <i class="fal fa-chevron-right icon"></i>&nbsp;&nbsp;&nbsp;
                                    @endif
                                </li>
                                <li class="active"> {{__('website.blogs')}}</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection
@section('meta-deep-link')


    <link rel="icon" href="{{$blog->image()}}" type="image/x-icon">
    <link rel="shortcut icon" href="{{$blog->image()}}" type="image/x-icon">

    <meta property="og:title" content="{{$blog->title}}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{Request::fullUrl()}}">
    <meta property="og:site_name" content="{{Request::url()}}">
    <meta property="og:description" content="{{substr(strip_tags($blog->meta_description),1,50)}}">
    <meta property="og:image" itemprop="image" content="{{$blog->image()}}">
    <meta property="og:image:secure_url" itemprop="image" content="{{$blog->image()}}">
    <meta property="og:image:width" content="300"/>
    <meta property="og:image:height" content="170"/>
    <meta property="og:image:type" content="image/webp"/>
    <meta property="og:image:alt" content="{{$blog->title}}">

    <meta property="og:updated_time" content="1440432930"/>
    <meta property="article:tag" content="{{$blog->title}}">
    <meta property="article:section" content="{{$blog->meta_description}}">
    <meta property="article:published_time" content="{{$blog->created_at}}">
    <meta property="article:modified_time" content="{{$blog->updated_at}}">

    <meta property="twitter:title" content="{{$blog->title}}">
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:description" content="{{$blog->meta_description}}">
    <meta property="twitter:site" content="@grand">
    <meta property="twitter:creator" content="@grand">
    <meta property="twitter:image" content="{{$blog->image()}}">
    <meta property="twitter:image:alt" content="{{$blog->title}}">
@endsection

@section('content')
    <div class="container mt-80 mb-80 rtl t-right">
        <div class="row justify-content-center">
            <div class="col-12 col-lg-12 col-xl-12">
                <div class="brs-posts-container pt-20" data-brk-library="component__blog_page">
                    <div class="brk-post-full">
                        <div class="brk-post-full__meta font__family-montserrat font__weight-semibold font__size-13 line__height-14 text-uppercase">
                            <a href="#" class="brk-post-full__meta-date">
                                <i class="far fa-clock"></i>
                                <span>{{$blog->created_at}}</span>
                            </a>

                        </div>
                        <h1 class="brk-post-full__title font__family-montserrat font__size-lg-36 font__size-26 line-height-1 font__weight-bold mt-10 mb-35">
                            {{$blog->title}}
                        </h1>
                        <p class="brk-dark-font-color font__family-open-sans font__size-15 font__weight-normal line__height-26 mb-25">
                            {!! $blog->description_1 !!}

                        </p>
{{--                        <blockquote class="font__family-montserrat font__size-lg-24 font__size-18 line-height-1-5 font__weight-light mb-25">Maecenas tempus, tellus eget mentum rhoncus, sem quam semper libero, sit amet adipiscing sem.</blockquote>--}}
{{--                        <p class="brk-dark-font-color font__family-open-sans font__size-15 font__weight-normal line__height-26 mb-25">--}}
{{--                            Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.--}}
{{--                        </p>--}}
                        @if(count($blog->images()))

                        <div class="mb-40 ltr">
                            <div class="rotation-slider slick-loading arrows-classic fa-req" data-slick='{"slidesToShow": 1, "slidesToScroll": 1, "arrows": true, "draggable": true, "autoplay": true, "autoplaySpeed": 2000}' data-brk-library="slider__slick,fancybox">
                                @foreach($blog->images() as $image)

                                <div>
                                    <div class="brk-slid">
                                        <a href="{{$image['image']}}" class="frame-image image-popup img-square shadow fancybox">
                                            <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{$image['image']}}" alt="{{$blog->title}}">
                                        </a>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endif

                        <p class="brk-dark-font-color font__family-open-sans font__size-15 font__weight-normal line__height-26 mb-25">
                            {!! $blog->description_2 !!}
                        </p>
{{--                        <div class="d-flex align-items-start mb-10">--}}
{{--                            <span class="font-dark-color-2 font__Family-montserrat font__size-15 line-height-1-5 my-2 font__weight-semibold text-uppercase mr-10 brk-post-full__fixed-width">Tags:</span>--}}
{{--                            <ul class="brk-tags brk-tags_solid font__family-montserrat" data-brk-library="component__tags">--}}
{{--                                <li><a href="#" rel="tag">Network</a></li>--}}
{{--                                <li><a href="#" rel="tag">Development</a></li>--}}
{{--                                <li><a href="#" rel="tag">Bussines</a></li>--}}
{{--                                <li><a href="#" rel="tag">Beauty</a></li>--}}
{{--                                <li><a href="#" rel="tag">WordPress</a></li>--}}
{{--                            </ul>--}}
{{--                        </div>--}}
                        <div class="d-flex align-items-start">
                            <span class="font-dark-color-2 font__Family-montserrat font__size-15 line-height-1-5 font__weight-semibold text-uppercase mr-10 brk-post-full__fixed-width">Share:</span>
                            <div class="brk-social-links brk-social-links_bordered-post brk-dark-font-color font__size-13" data-brk-library="component__social_links">
                                <a href="https://www.facebook.com/sharer.php?u={{route('website.blogs.show',$blog->slug)}}" class="brk-social-links__item">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a href="https://twitter.com/intent/tweet?text={{route('website.blogs.show',$blog->slug)}}" class="brk-social-links__item">
                                    <i class="fa-brands fa-x-twitter"></i>
                                </a>
                                <a href="https://api.whatsapp.com/send/?text={{route('website.blogs.show',$blog->slug)}}" class="brk-social-links__item">
                                    <i class="fab fa-whatsapp"></i>
                                </a>
{{--                                <a href="#" class="brk-social-links__item">--}}
{{--                                    <i class="fab fa-pinterest"></i>--}}
{{--                                </a>--}}
{{--                                <a href="#" class="brk-social-links__item">--}}
{{--                                    <i class="fab fa-linkedin-in"></i>--}}
{{--                                </a>--}}
{{--                                <a href="#" class="brk-social-links__item">--}}
{{--                                    <i class="fab fa-vk"></i>--}}
{{--                                </a>--}}
                            </div>
                        </div>
                    </div>



                </div>
            </div>

        </div>

    </div>

@endsection