@extends('layouts.front-end.app')
@section('title',' products')
@push('css_or_js')
    <meta property="og:image" content="{{asset('storage/company')}}/{{$web_config['web_logo']}}"/>
    <meta property="og:title" content="Products of {{$web_config['name']}} "/>
    <meta property="og:url" content="{{env('APP_URL')}}">
    <meta property="og:description" content="{!! substr($web_config['about']->value,0,100) !!}">

    <meta property="twitter:card" content="{{asset('storage/company')}}/{{$web_config['web_logo']}}"/>
    <meta property="twitter:title" content="Products of {{$web_config['name']}}"/>
    <meta property="twitter:url" content="{{env('APP_URL')}}">
    <meta property="twitter:description" content="{!! substr($web_config['about']->value,0,100) !!}">
@endpush

@section('content')
<!-- Start Breadcamp -->
<div class="cs_height_40 cs_height_lg_30"></div>
<div class="container">
  <div class="cs_breadcamp_wrap cs_style_1 cs_accent_light_bg cs_bg_filed cs_radius_8" data-src="{{ asset('assets/front-end') }}/images/Blog_banner.jpg">
    <div>
      <h1 class="cs_breadcamp_title cs_fs_54 cs_semibold">Explore the World of Beauty <br>and Fashion</h1>
      <ol class="breadcrumb cs_fs_18 mb-0">
        <li class="breadcrumb-item"><a href="{{ route('home')}}">Home</a></li>
        <li class="breadcrumb-item active">About</li>
      </ol>
    </div>
  </div>
</div>
<!-- End Breadcamp -->
<div class="cs_height_70 cs_height_lg_70"></div>
<div class="container">
  <div class="row cs_gap_y_40">
    <div class="col-lg-4">
      <div class="cs_sidebar cs_right_sidebar cs_accent_light_bg">
        <div class="cs_sidebar_item widget_search">
          <form class="cs_sidebar_search" action="#">
            <input type="text" placeholder="Search...">
            <button class="cs_sidebar_search_btn">
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M2.91484 16.976C4.64396 18.712 6.95263 19.7477 9.39783 19.8844C11.843 20.0211 14.2525 19.249 16.164 17.7164L20.1056 21.6731C20.2082 21.7767 20.3303 21.8589 20.4649 21.915C20.5994 21.9711 20.7437 22 20.8895 22C21.0353 22 21.1796 21.9711 21.3141 21.915C21.4487 21.8589 21.5708 21.7767 21.6734 21.6731C21.7769 21.5703 21.859 21.4481 21.9151 21.3134C21.9711 21.1787 22 21.0343 22 20.8884C22 20.7425 21.9711 20.598 21.9151 20.4634C21.859 20.3287 21.7769 20.2064 21.6734 20.1037L17.6655 16.1471C19.0951 14.3978 19.8754 12.2069 19.8737 9.94685C19.8737 7.30878 18.8268 4.77876 16.9633 2.91336C15.0998 1.04797 12.5723 0 9.93688 0C7.30146 0 4.77399 1.04797 2.91046 2.91336C1.04694 4.77876 2.76361e-05 7.30878 2.76361e-05 9.94685C-0.00306236 11.2533 0.252996 12.5473 0.753353 13.754C1.25371 14.9606 1.98841 16.0557 2.91484 16.976ZM4.47161 4.47608C5.92841 3.01782 7.90426 2.19857 9.96448 2.19857C12.0247 2.19857 14.0006 3.01782 15.4574 4.47608C16.9142 5.93435 17.7326 7.91218 17.7326 9.97448C17.7326 12.0368 16.9142 14.0146 15.4574 15.4729C14.0079 16.9238 12.042 17.7389 9.99209 17.7389C7.94221 17.7389 5.9763 16.9238 4.52682 15.4729C3.07734 14.0219 2.26303 12.054 2.26303 10.0021C2.26303 7.95018 3.07734 5.98228 4.52682 4.53134L4.47161 4.47608Z" fill="currentColor"/>
              </svg>
            </button>
          </form>
        </div>
        <div class="cs_sidebar_item cs_widget_categories">
          <h4 class="cs_sidebar_widget_title cs_secondary_font cs_normal cs_fs_18">Categories</h4>
          <ul>
            @foreach (\App\CPU\CategoryManager::parents() as $category)
            <li class="cat-item">
              <a href="#">{{ $category['name'] }}</a>
            </li>
            @endforeach
          </ul>
        </div>
        <div class="cs_sidebar_item">
          <h4 class="cs_sidebar_widget_title cs_secondary_font cs_normal cs_fs_18">Recent Posts</h4>
          <ul class="cs_recent_posts cs_mp_0">
            @foreach ($blogsRecentPost as $recentPost)
            <li>
              <div class="cs_recent_post">
                <div class="cs_recent_post_info">
                  <h3 class="cs_recent_post_title cs_fs_24 cs_medium cs_secondary_font">
                    <a href="{{route('blog.details',$recentPost->slug)}}">{{$recentPost->title}}</a>
                  </h3>
                  <div class="cs_recent_post_date"><i class="fa-solid fa-clock"></i> Published on {{ \Carbon\Carbon::parse($recentPost->date)->format('M d y') }}</div>
                </div>
              </div>
            </li>
            @endforeach
          </ul>
        </div>
        <div class="cs_sidebar_item widget_tag_cloud">
          <h4 class="cs_sidebar_widget_title cs_secondary_font cs_normal cs_fs_18">Tags</h4>
          <div class="cs_tagcloud">
            <a href="#" class="tag-cloud-link">Beauty</a>
            <a href="#" class="tag-cloud-link">Skincare</a>
            <a href="#" class="tag-cloud-link">Makeup</a>
            <a href="#" class="tag-cloud-link">Haircare</a>
            <a href="#" class="tag-cloud-link">Fashion</a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <ul class="cs_blog_list_1 cs_mp_0">
        @foreach ($blogs as $blog)
        <li>
          <div class="cs_post cs_style_1 cs_type_1">
            <div class="cs_post_top">
              <div class="cs_post_category text-uppercase cs_accent_color cs_light text-center cs_accent_light_bg">{{ $blog->category->name }}</div>
              <div class="cs_post_thumb_wrap">
                <a href="{{route('blog.details',$blog->slug)}}" class="cs_post_thumb cs_bg_filed" data-src="{{ asset('storage/blogs') }}/{{ $blog->image }}"></a>
              </div>
            </div>
            <div class="cs_post_info">
              <div class="cs_post_meta cs_light">
                <span>
                  <i class="fa-solid fa-clock"></i>{{ \Carbon\Carbon::parse($blog->date)->format('M d y') }}
                </span>
                <span>
                  <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path opacity="0.75" fill-rule="evenodd" clip-rule="evenodd" d="M8.5 0C13.1867 0 17 3.81331 17 8.5C17 13.1867 13.1867 17 8.5 17C3.81331 17 0 13.1867 0 8.5C0 3.81331 3.81331 0 8.5 0ZM13.8045 12.7501C12.5571 14.3037 10.6427 15.3 8.5 15.3C6.35728 15.3 4.44275 14.3036 3.19541 12.7499C4.44275 11.1963 6.35723 10.2 8.4999 10.2C10.6426 10.2 12.5571 11.1964 13.8045 12.7501ZM8.5 8.5C9.90837 8.5 11.05 7.35832 11.05 5.95C11.05 4.54168 9.90837 3.4 8.5 3.4C7.09168 3.4 5.95 4.54168 5.95 5.95C5.95 7.35832 7.09168 8.5 8.5 8.5Z" fill="#303030"/>
                  </svg>
                  {{ $blog->author }}
                </span>
              </div>
              <div>
                <h2 class="cs_post_title cs_fs_36 cs_medium cs_secondary_font"><a href="{{route('blog.details',$blog->slug)}}">{{ $blog->title }}</a></h2>
                <p class="cs_post_subtitle">{!! Str::limit($blog->details,20,'...') !!}</p>
              </div>
              <div><a href="{{route('blog.details', $blog->slug)}}" class="cs_post_btn cs_accent_color">Read More</a></div>
            </div>
          </div>
        </li>
        @endforeach
      </ul>
      <div class="cs_height_70 cs_height_lg_40"></div>
      <ul class="cs_pagination_box">
        {{ $blogs->appends(request()->input())->links('web-views.partials.paginator') }}
      </ul>
    </div>
  </div>
</div>
<div class="cs_height_120 cs_height_lg_70"></div>
<!-- Start CTA Section -->
<div class="container">
  <div class="cs_cta cs_style_3 cs_accent_strong_bg cs_radius_16 position-relative overflow-hidden">
    <div class="cs_cta_text">
      <h2 class="cs_cta_title cs_white_color cs_fs_54 cs_semibold">Your beauty journey is our journey</h2>
      <p class="cs_cta_subtitle cs_fs_18">Join us, explore our handpicked selection of products, and let's embark on a radiant experience together.</p>
      <a href="#" class="cs_btn cs_style_1 cs_medium"><span>JOIN THE GLOWIFY COMUNITY</span></a>
    </div>
    <img src="{{ asset('assets/front-end') }}/images/Blog_footer_banner.jpg" alt="" class="cs_cta_img">
    <div class="cs_star_shape_1">
      <svg width="51" height="51" viewBox="0 0 51 51" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.975597 24.1509L8.29239 22.0555C11.5873 21.1246 14.5888 19.3618 17.0095 16.9358C19.4302 14.5099 21.1891 11.502 22.1181 8.1999L24.209 0.867266C24.3141 0.610722 24.493 0.391297 24.7229 0.236873C24.9528 0.0824499 25.2233 0 25.5 0C25.7767 0 26.0472 0.0824499 26.2771 0.236873C26.507 0.391297 26.6859 0.610722 26.791 0.867266L28.8819 8.1999C29.8109 11.502 31.5698 14.5099 33.9905 16.9358C36.4112 19.3618 39.4127 21.1246 42.7076 22.0555L50.0244 24.1509C50.3053 24.2309 50.5526 24.4004 50.7287 24.6339C50.9047 24.8674 51 25.1521 51 25.4448C51 25.7374 50.9047 26.0221 50.7287 26.2556C50.5526 26.4891 50.3053 26.6587 50.0244 26.7386L42.7076 28.834C39.4127 29.765 36.4112 31.5278 33.9905 33.9537C31.5698 36.3797 29.8109 39.3876 28.8819 42.6897L26.791 50.0223C26.7113 50.3038 26.5421 50.5516 26.3091 50.7281C26.0761 50.9045 25.792 51 25.5 51C25.208 51 24.9239 50.9045 24.6909 50.7281C24.4579 50.5516 24.2887 50.3038 24.209 50.0223L22.1181 42.6897C21.1891 39.3876 19.4302 36.3797 17.0095 33.9537C14.5888 31.5278 11.5873 29.765 8.29239 28.834L0.975597 26.7386C0.694656 26.6587 0.447395 26.4891 0.271328 26.2556C0.0952606 26.0221 0 25.7374 0 25.4448C0 25.1521 0.0952606 24.8674 0.271328 24.6339C0.447395 24.4004 0.694656 24.2309 0.975597 24.1509Z" fill="#FAEFF2"/>
      </svg>
    </div>
    <div class="cs_star_shape_2">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.459105 11.3651L3.9023 10.3791C5.45286 9.94098 6.8653 9.11143 8.00445 7.96981C9.1436 6.82819 9.97135 5.4127 10.4085 3.85878L11.3925 0.408125C11.4419 0.287398 11.5261 0.18414 11.6343 0.11147C11.7425 0.0388 11.8698 0 12 0C12.1302 0 12.2575 0.0388 12.3657 0.11147C12.4739 0.18414 12.5581 0.287398 12.6075 0.408125L13.5915 3.85878C14.0286 5.4127 14.8564 6.82819 15.9956 7.96981C17.1347 9.11143 18.5471 9.94098 20.0977 10.3791L23.5409 11.3651C23.6731 11.4028 23.7895 11.4826 23.8723 11.5924C23.9552 11.7023 24 11.8363 24 11.974C24 12.1117 23.9552 12.2457 23.8723 12.3556C23.7895 12.4655 23.6731 12.5453 23.5409 12.5829L20.0977 13.569C18.5471 14.0071 17.1347 14.8366 15.9956 15.9782C14.8564 17.1198 14.0286 18.5353 13.5915 20.0892L12.6075 23.5399C12.57 23.6724 12.4904 23.789 12.3808 23.872C12.2711 23.9551 12.1374 24 12 24C11.8626 24 11.7289 23.9551 11.6192 23.872C11.5096 23.789 11.43 23.6724 11.3925 23.5399L10.4085 20.0892C9.97135 18.5353 9.1436 17.1198 8.00445 15.9782C6.8653 14.8366 5.45286 14.0071 3.9023 13.569L0.459105 12.5829C0.326897 12.5453 0.210537 12.4655 0.127682 12.3556C0.0448284 12.2457 0 12.1117 0 11.974C0 11.8363 0.0448284 11.7023 0.127682 11.5924C0.210537 11.4826 0.326897 11.4028 0.459105 11.3651Z" fill="#FAEFF2"/>
      </svg>
    </div>
  </div>
</div>
<!-- End CTA Section -->
@endsection