citrus/resources/views/blog/show.blade.php

@extends('layouts.site')

@section('content')
<section class="wrapper !bg-[#edf2fc]">
  <div class="container pt-10 pb-36 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-40 lg:pb-40 md:pb-40 !text-center">
    <div class="flex flex-wrap mx-[-15px]">
      <div class="md:w-10/12 lg:w-10/12 xl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
        <div class="post-header !mb-[.9rem]">
          @if($post->category)
            <div class="inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] !mb-[0.4rem] text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
              <a href="{{ route('blog.index', ['category' => $post->category->slug]) }}" class="hover !text-[#e31e24]" rel="category">{{ $post->category->name }}</a>
            </div>
          @endif
          <h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-4">
            {{ method_exists($post, 'translate') ? $post->translate('title') : $post->title }}
          </h1>
          <ul class="!text-[0.8rem] !text-[#aab0bc] m-0 p-0 list-none !mb-5">
            <li class="post-date inline-block">
              <i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i>
              <span>{{ $post->published_at ? $post->published_at->format('d M Y') : $post->created_at->format('d M Y') }}</span>
            </li>
            <li class="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0_.4rem] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
              <span class="!text-[0.8rem] !text-[#aab0bc]">
                <i class="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\ed6f']"></i>
                <span>{{ $post->author ? $post->author->name : 'Trunçgil' }}</span>
              </span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="wrapper !bg-[#ffffff]">
  <div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
    <div class="flex flex-wrap mx-[-15px]">
      <div class="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
        <div class="blog single !mt-[-7rem]">
          <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
            @if($post->featured_image || $post->featured_image_url)
              <figure class="card-img-top">
                <img src="{{ $post->featured_image ? asset('storage/' . $post->featured_image) : $post->featured_image_url }}" alt="{{ $post->title }}" style="width: 100%; max-height: 520px; object-fit: cover;" loading="lazy">
              </figure>
            @endif
            <div class="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
              <div class="classic-view">
                <article class="post !mb-8">
                  <div class="relative !mb-5 post-content">
                    {!! method_exists($post, 'translate') ? $post->translate('content') : ($post->content ?? '') !!}
                  </div>
                  
                  <div class="post-footer xl:!flex xl:!flex-row xl:!justify-between lg:!flex lg:!flex-row lg:!justify-between md:!flex md:!flex-row md:!justify-between !items-center !mt-8">
                    @if($post->tags && count($post->tags) > 0)
                      <div>
                        <ul class="pl-0 list-none tag-list !mb-0">
                          @foreach($post->tags as $tag)
                            <li class="!mt-0 !mb-[0.45rem] !mr-[0.2rem] inline-block">
                              <a href="{{ route('blog.index', ['tag' => $tag]) }}" class="btn btn-soft-ash btn-sm !rounded-[50rem] flex items-center hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,.05)] before:not-italic before:content-['#'] before:font-normal before:!pr-[0.2rem]">{{ $tag }}</a>
                            </li>
                          @endforeach
                        </ul>
                      </div>
                    @endif
                    
                    <div class="!mb-0 xl:!mb-2 lg:!mb-2 md:!mb-2">
                      <div class="dropdown share-dropdown btn-group">
                        <button class="btn btn-sm btn-red !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] btn-icon btn-icon-start dropdown-toggle !mb-0 !mr-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <i class="uil uil-share-alt !mr-[0.3rem] text-[0.8rem] before:content-['\ecb0']"></i> Paylaş </button>
                        <div class="dropdown-menu !shadow-[rgba(30,34,40,0.06)_0px_0px_25px_0px]">
                          <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://twitter.com/intent/tweet?url={{ urlencode(request()->fullUrl()) }}&text={{ urlencode($post->title) }}" target="_blank"><i class="uil uil-twitter w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ed59']"></i>Twitter</a>
                          <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(request()->fullUrl()) }}" target="_blank"><i class="uil uil-facebook-f w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\eae2']"></i>Facebook</a>
                          <a class="dropdown-item text-[0.7rem] !p-[.25rem_1.15rem]" href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(request()->fullUrl()) }}" target="_blank"><i class="uil uil-linkedin w-4 text-[0.8rem] pr-[0.4rem] align-[-.1rem] before:content-['\ebd1']"></i>Linkedin</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </article>
              </div>
              
              <hr>
              
              <!-- Author Bio Widget -->
              <div class="author-info xl:!flex lg:!flex md:!flex items-center !mb-3">
                <div class="flex items-center">
                  <figure class="w-12 h-12 !relative !mr-4 rounded-[100%]">
                    <img class="rounded-[50%]" alt="image" src="{{ $post->author && $post->author->avatar ? asset('storage/' . $post->author->avatar) : asset('assets/img/avatars/u5.webp') }}" onerror="this.src='{{ asset('assets/img/avatars/u5.webp') }}'" loading="lazy">
                  </figure>
                  <div>
                    <h6><a href="#" class="!text-[#343f52] hover:!text-[#e31e24]">{{ $post->author ? $post->author->name : 'Trunçgil' }}</a></h6>
                    <span class="!text-[0.75rem] !text-[#aab0bc] m-0 p-0 list-none">{{ $post->author && $post->author->role ? $post->author->role : 'Trunçgil Teknoloji Editörü' }}</span>
                  </div>
                </div>
                <div class="!mt-3 xl:!mt-0 lg:!mt-0 md:!mt-0 !ml-auto">
                  <a href="{{ route('blog.index', ['author' => $post->author_id]) }}" class="btn btn-sm btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"><i class="uil uil-file-alt !mr-[0.3rem] before:content-['\eaec'] text-[.8rem]"></i> Tüm Yazıları</a>
                </div>
              </div>
              <p>Trunçgil Teknoloji editörleri tarafından kaleme alınmış bu makalede teknoloji, yazılım geliştirme ve dijital dönüşüm konularına dair güncel gelişmeleri incelediniz. Destek ve sorularınız için bizimle iletişime geçebilirsiniz.</p>
              
              <!-- Social Links -->
              <nav class="nav social !mt-4">
                <a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="https://twitter.com/truncgil" target="_blank"><i class="text-[1rem] !text-[#5daed5] before:content-['\ed59'] uil uil-twitter"></i></a>
                <a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="https://facebook.com/truncgil" target="_blank"><i class="text-[1rem] !text-[#4470cf] before:content-['\eae2'] uil uil-facebook-f"></i></a>
                <a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="https://instagram.com/truncgil" target="_blank"><i class="text-[1rem] !text-[#d53581] before:content-['\eb9c'] uil uil-instagram"></i></a>
                <a class="text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]" href="https://youtube.com/truncgil" target="_blank"><i class="text-[1rem] !text-[#c8312b] before:content-['\edb5'] uil uil-youtube"></i></a>
              </nav>
              
              <!-- Related Posts Section (You Might Also Like) -->
              @if($relatedPosts && $relatedPosts->count() > 0)
                <hr>
                <h3 class="!mb-6">Bunları da Beğenebilirsiniz</h3>
                <div class="swiper-container blog grid-view !mb-24 relative z-10" data-margin="30" data-dots="true" data-items-md="2" data-items-xs="1">
                  <div class="swiper">
                    <div class="swiper-wrapper">
                      @foreach($relatedPosts as $rPost)
                        @php
                          $rTitle = method_exists($rPost, 'translate') ? $rPost->translate('title') : $rPost->title;
                          $rCategoryName = $rPost->category ? $rPost->category->name : '';
                          $rImageUrl = $rPost->featured_image ? asset('storage/' . $rPost->featured_image) : asset('assets/img/photos/tb4.jpg');
                          $rUrl = route('blog.show', $rPost->slug);
                          $rDate = $rPost->published_at ? $rPost->published_at->format('d M Y') : $rPost->created_at->format('d M Y');
                        @endphp
                        <div class="swiper-slide">
                          <article>
                            <figure class="overlay overlay-1 hover-scale group rounded !mb-5">
                              <a href="{{ $rUrl }}"> 
                                <img class="!transition-all !duration-[0.35s] !ease-in-out group-hover:scale-105" src="{{ $rImageUrl }}" alt="{{ $rTitle }}" style="height: 220px; object-fit: cover; width: 100%;" loading="lazy">
                              </a>
                              <figcaption class="group-hover:opacity-100 absolute w-full h-full opacity-0 text-center px-4 py-3 inset-0 z-[5] pointer-events-none p-2">
                                <h5 class="from-top !mb-0 absolute w-full translate-y-[-80%] p-[.75rem_1rem] left-0 top-2/4 !text-white">Devamını Oku</h5>
                              </figcaption>
                            </figure>
                            <div class="post-header !mb-[.9rem]">
                              @if($rPost->category)
                                <div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
                                  <a href="{{ route('blog.index', ['category' => $rPost->category->slug]) }}" class="hover !text-[#e31e24]" rel="category">{{ $rCategoryName }}</a>
                                </div>
                              @endif
                              <h2 class="post-title h3 !mt-1 !mb-3">
                                <a class="!text-[#343f52] hover:!text-[#e31e24]" href="{{ $rUrl }}">{{ \Illuminate\Support\Str::limit($rTitle, 50) }}</a>
                              </h2>
                            </div>
                            <div class="post-footer">
                              <ul class="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none !mb-0">
                                <li class="post-date inline-block"><i class="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\e9ba']"></i><span>{{ $rDate }}</span></li>
                              </ul>
                            </div>
                          </article>
                        </div>
                      @endforeach
                    </div>
                  </div>
                  <div class="swiper-controls">
                    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"></div>
                  </div>
                </div>
              @endif
              
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
@endsection