@extends('layouts.app')

@section('styles')

<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<style type="text/css">
   .all-projects img{
        height: 250px !important
    }
   
</style>
@endsection

@section('content')

  <div class="container-fluid">

      <div class="row" style="margin-top: 7rem!important;">
        <h2 class="text-muted text-center p-5">All Articles </h2>
       </div> 
      <div class="row">
        @foreach($articles as $newsArticle)
        
           @php
                preg_match_all('/<([^>]+)>(?:([^<]+))*(?=[^>]*\<)/',$newsArticle->body,$matches);
            
                $strings = array_pop($matches); 

                $shortDescription = '';

                foreach ($strings as $string)
                {
                    $string = trim(str_replace('&nbsp;', ' ', $string));

                    if (strlen($string) != 0){
                        $shortDescription .= $string;
                    }
                } 

            @endphp
            @php($id = Crypt::encrypt($newsArticle->id))
            
          <div class="col-md-10 offset-md-1">
            <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
              <div class="col-md-4 d-none d-lg-block all-projects">
               <a href="{{ route('news-article-detail', ['id'=> $id]) }}">
                @if($newsArticle->feature_img != '')

                
                 <img src="{{ asset('assets/uploads/media/feature-images/'.$newsArticle->feature_img) }}" class="d-block w-100">
                @else
                  <img src="{{ asset('assets/images/slider-placeholder.png') }}" class="d-block w-100" alt="...">
                @endif

              </a>   

              </div>

              <div class="col-md-8 p-4 d-flex flex-column position-static">
                <a href="{{ route('news-article-detail', ['id'=> $id]) }}"><h3 class="mb-0">{{ ucwords($newsArticle->title)  }}</h3></a>
                <div class="mb-1 text-muted">Published: {{ human_date($newsArticle->created_at) }}</div>
                <p class="mb-auto text-muted">{{ ( strlen($shortDescription) > 80 )? substr($shortDescription, 0, 150).'...': $shortDescription   }}
                  @if(strlen($shortDescription) > 80 )
              ... <a href="{{ route('news-article-detail', ['id'=> $id]) }}" class="btn btn-link text-primary">Read More</a>
            @endif</p>
                
                
              </div>
              
            </div>
          </div>
        @endforeach  
      </div>

  </div>
@endsection