@extends('master.front')

@section('title')
    {{ __('Blog') }}
@endsection
 
@section('content')
    <!-- Page Title-->
    
 <style>
    .ratio-26x9 {
    --bs-aspect-ratio: calc(9 / 26* 100%);
}


.boximg80 {
    width: 100px;
}
 </style>
    <div class="container-fluid container60">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb py-3">
                <li class="breadcrumb-item"><a href="{{ route('front.index') }}">{{ __('Home') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ __('Blog') }}</li>
            </ol>
        </nav>
        <div class="row">
            <div class="col-12 py-4">
                <h2 class="fw-semibold text-center d-flex align-items-center justify-content-start text-blue1">
                    {{ __('ข่าวสารและโปรโมชั่น') }}
                </h2>
            </div>
        </div>
    </div>
 

    <div class="container-fluid container60">
        <div class="row">
            <div class="col-md-6 col-xl-3">
 
                <select id="categorySelect" class="form-select mb-3">
                    <option value="{{url('blog')}}">{{ __('ทั้งหมด') }}</option>
                    @foreach ($categories as $category)
                        <option    {{ request()->get('category') == $category->slug ? 'selected' : '' }}  value="{{ route('front.blog') . '?category=' . $category->slug }}">{{ __($category->name) }}
                        </option>
                    @endforeach
                </select>
 
                <script>
                    document.getElementById('categorySelect').addEventListener('change', function() {
                        var url = this.value;
                        
                        if (url) { 
                            window.location.href = url;
                        }
                    });
                </script>
            </div>
            {{-- <div class="col-md-6 col-xl-3">
                <section class="widget">
                    <form action="{{ route('front.blog') }}" class="input-group form-group" method="get"><span
                            class="input-group-btn">
                            <button type="submit"><i class="icon-search"></i></button></span>
                        <input class="form-control" name="search" type="text"
                            placeholder="{{ __('Search blog') }}">
                    </form>
                </section>
            </div> --}}
        </div>

  
        <div class="row g-4 pb-5">

        @foreach ($posts as $post)
            <div class="col-md-3 col-xl-3">
                <div class="card card-news border-0">
                    <div class="ratio ratio-26x9">
                        @if($post->photo !== "[]" ) 
                        <a href="{{ route('front.blog.details', $post->slug) }}" >
                        <img src="{{ asset('assets/images/' . json_decode($post->photo, true)[array_key_first(json_decode($post->photo, true))]) }}" class="card-img-top rounded-10 object-cover" alt="...">
                        </a>
                        @endif
                    </div>
 
                    <div class="card-body">
 
                        @if ($post->category_id == 1)
                        <p class="badge bg-blue1 fw-normal">{{ __('โปรโมชั่น') }}</p>
                        @else
                        <p class="badge bg-blue1 fw-normal">{{ __('บทความ') }}</p>
                        @endif

                        <h5 class="card-title">{{ Str::limit($post->title, 55) }}</h5>
                        <p class="card-text">{{ Str::limit(strip_tags($post->details), 120) }}</p>
                    </div>
                    <div class="card-footer justify-content-between d-flex align-items-center">
                        <a href="{{ route('front.blog.details', $post->slug) }}"  class="btn btn-link text-black fw-semibold px-0 fs-16 stretched-link" style="background: #fff !important; color: black !important;">{{ __('อ่านเพิ่มเติม') }}</a>

                                                <p class="mb-0 fs-12 text-gray1">{{ $date }}</p>
                    </div>
                </div>
            </div>

        @endforeach
            
       
        </div>
        <div class="text-center mb-5">
            {{ $posts->links() }}
        </div>
    </div>
@endsection