@extends('website.includes.master')

@section('title')
    Blogs
@endsection

@section('content')

    <style>

        .shadow-sm {
            display: none;
        }

        .blog_pginations nav > div > span {
            color: #5BA55B !important;
        }

        .blog_pginations nav > div > a {
            color: #5BA55B !important;
        }

        .single-blog-style1:hover .img-holder img {
            transform: none !important;
        }

        .service-page {
            position: relative;
            display: block;
            padding: 25px 0 45px;
            background: #ffffff;
            overflow: hidden;
            z-index: 10;
        }

        .single-blog-style1 .text-holder {
            position: relative;
            display: block;
            background: #ffffff;
            padding: 10px 40px 40px;
            border: 1px solid #d9e3e4;
            border-top: none;
            transition: all 200ms linear;
            transition-delay: 0.1s;
        }
        .single-blog-style1:hover .img-holder::before {
            opacity: 1.0;
            transform: scale(0) !important;
        }

        .single-blog-style1 .img-holder img {
            mix-blend-mode: normal !important;
            transform: scale(1) rotate(0deg) !important;
        }

    </style>

    <!--Start breadcrumb area paroller-->
    <section class="breadcrumb-area">
        <div class="breadcrumb-area-bg"
             style="background-image: url({{URL::to('admin/assets/uploads/'.$banner->image)}});height:100% !important;">
        </div>
        {{--        <div class="shape-box"></div>--}}
        <div class="container">
            <div class="row">
                <div class="col-xl-12">
                    <div class="inner-content">

                        <div class="breadcrumb-menu">
                            <ul>
                                <li><a href="{{ route('/') }}">Home</a></li>
                                <li class="active">Blogs</li>
                            </ul>
                        </div>
                        {{--                        <div class="title" data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1500">--}}
                        {{--                            <h2>Blogs</h2>--}}
                        {{--                        </div>--}}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--End breadcrumb area-->

    <!--Start Blog Page One-->
    {{--    <section class="blog-page-one">--}}
    <section class="service-page">
        <div class="container">
            <div class="row">
                @forelse($blogs as $b=>$blog)

                    <div class="col-xl-4 col-lg-6">
                        <div class="single-blog-style1" style="margin-bottom: 8px !important;">
                            <div class="img-holder">
                                <a href="{{ route('blogdetail',$blog->slug) }}">
                                    <img src="{{URL::asset('admin/assets/uploads/'.$blog->image)}}"
                                         alt="{{ $blog->heading }}" style="width:100%;height:310px">
                                </a>
                                <div class="date-box">
                                    <p>{{ \Carbon\Carbon::parse($blog->created_at)->format('d M') }}</p>
                                </div>
                            </div>
                            <div class="text-holder" style="min-height:300px;max-height:300px">
                                <div class="row">
                                    <div class="col-md-10 col-sm-8 col-xs-8 col-8"><span class="icon-user"
                                                                                         style="color: #5BA55B"></span>
                                        <a> By {{ $setting->name }}</a></div>

                                    <div class="col-md-2c">
                                        <i class="fa fa-sharp fa-light fa-retweet"
                                           onclick="copyToClipboardtext({{ $blog->id }})"
                                           style="font-size: 32px;color: #5BA55B;cursor: pointer"></i>
                                    </div>
                                </div>

                                <h3><a href="{{ route('blogdetail',$blog->slug) }}">{{ $blog->heading }}</a></h3>
                                <div class="text">
                                    <p>
                                        {!! Str::limit($blog->description,100) !!}
                                    </p>
                                </div>
                                <div class="row">
                                    <div class="col-md-7 col-sm-7 col-xs-7 col-7"></div>
                                    <div class="col-md-5 col-sm-5 col-xs-5 col-5">
                                        <div class="btn-box">
                                            <a href="{{ route('blogdetail',$blog->slug) }}">Read More</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <input type="hidden" id="copylink_{{ $blog->id }}" value="{{ url('blogdetail/'.$blog->slug) }}">

                @empty
                @endforelse
            </div>

            <div class="row text-center justify-content-center blog_pginations">
                {{ $blogs->links() }}
            </div>

        </div>
    </section>
    <!--End Blog Page One-->

@endsection
<link rel="stylesheet" href="{{ URL::asset('admin/assets/vendors/sweetalert2/sweetalert2.min.css') }}">
<script src="{{ URL::asset('admin/assets/vendors/sweetalert2/sweetalert2.min.js') }}"></script>
<script src="{{ URL::asset('admin/assets/js/sweet-alert.js') }}"></script>
<script>
    function copyToClipboardtext(element) {
        var $temp = $("<input>");
        $("body").append($temp);
        $temp.val($("#copylink_" + element).val()).select();
        document.execCommand("copy");
        $temp.remove();
        SuccessMessage("Link Copied")
    }

    function SuccessMessage(message) {
        const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
        });

        Toast.fire({
            icon: 'success',
            title: message
        })
    }
</script>