@extends('layouts.app')
@section('content')
<div class="container my-5">
    <h2 class="text-center mb-4">جميع الأخبار   </h2>

    <div class="row">
        @foreach($news as $item)
            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-img-top text-center" style="height:200px; overflow:hidden;">
                        @if(!empty($item->image))
                            <img src="{{ asset('uploads/' . $item->image) }}" 
                                 alt="{{ $item->title }}" 
                                 class="img-fluid rounded" 
                                 style="max-height:200px;">
                        @elseif(!empty($item->youtube_url))
                            @php
                                preg_match('/(youtu\.be\/|v=)([A-Za-z0-9_\-]+)/', $item->youtube_url, $matches);
                                $youtubeId = $matches[2] ?? null;
                            @endphp
                            @if($youtubeId)
                                <iframe 
                                    src="https://www.youtube.com/embed/{{ $youtubeId }}" 
                                    title="YouTube video"
                                    allowfullscreen 
                                    class="w-100 rounded" 
                                    style="height:200px;">
                                </iframe>
                            @endif
                        @else
                            <img src="{{ asset('assets/img/no-image.jpg') }}" 
                                 alt="Pas d'image" 
                                 class="img-fluid rounded">
                        @endif
                    </div>
                    <div class="card-body text-center">
                        <h5>{{ $item->title }}</h5>
                        
                        <div class="col-md-7" style="line-height: 1.9; font-size: 1.1rem; color:#333;">
                            {!! strip_tags(Str::limit($item->resume_ar, 200)) !!}
                        </div>

                    </div>

                    <div class="it-about-2-btn">
                        <a href="{{ route('news.show', $item->slug) }}" class="it-btn-orange">
                            <span>
                                <span class="text-1">إقرا المزيد</span>
                                <span class="text-2">إقرا المزيد</span>
                            </span>
                            <i>
                                                <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z"
                                                 fill="white" />
                                                </svg>
                                                <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                    <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z"
                                                 fill="white" />
                                                </svg>
                                            </i>
                                        </a>
                                    </div>
                </div>
            </div>

            
        @endforeach
    </div>

    <div class="d-flex justify-content-center mt-4">
        {{ $news->links() }} {{-- pagination --}}
    </div>
</div>
@endsection