@extends('layouts.app')

@section('content')
@php
    use Illuminate\Support\Str;
@endphp

<meta property="og:title" content="{{ $shareTitle }}">
<meta property="og:description" content="{{ $shareDescription }}">
<meta property="og:url" content="{{ $shareUrl }}">
<meta property="og:type" content="website">
<meta property="og:image" content="{{ $shareImage }}">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ $shareTitle }}">
<meta name="twitter:description" content="{{ $shareDescription }}">
<meta name="twitter:image" content="{{ $shareImage }}">

<div class="container my-5">
    <!--h2 class="text-center mb-4">
        @if($categorie)
            {{ trans_field($categorie, 'nom') ?? $categorie->nom_ar }}
        @else
            {{ __('site.programmes.tous_les_programmes') ?? 'البرامج والأنشطة' }}
        @endif
    </h2-->
	
	<h2 class="text-center mb-4">
            {{ __('site.programmes.tous_les_programmes') ?? 'البرامج والأنشطة' }}
    </h2>
	<span class="text-center d-block h4 mb-3" style="color: #D82B2A;">
		{{ trans_field($categorie, 'nom') ?? $categorie->nom_ar }}
	</span>

    <div class="row">
        @forelse($programmes as $programme)
            @php
                $titre = trans_field($programme, 'titre');
                $resume = Str::limit(strip_tags(trans_field($programme, 'resume') ?? trans_field($programme, 'desc')), 120);
                $imageUrl = $programme->imageSrc ?? asset('assets/img/placeholder-programme.jpg');
                $detailUrl = route('programmes2.show3', $programme->id);
            @endphp

            <div class="col-md-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-img-top text-center pt-10" style="height:200px; overflow:hidden;">
                        @if(!empty($programme->image) && !empty($programme->imageSrc))
                            <img src="{{ $programme->imageSrc }}"
                                 alt="{{ $titre }}" 
                                 class="img-fluid rounded" 
                                 style="max-height:200px; width:100%; object-fit:cover;">
                        @elseif(!empty($programme->youtube_url))
                            @php
                                preg_match('/(youtu\.be\/|v=)([A-Za-z0-9_\-]+)/', $programme->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"
                                 style="height:200px; width:100%; object-fit:cover;">
                        @endif

                        @if($programme->categorie)
                            <!--div style="position: absolute; bottom: 10px; left: 10px;">
                                <span style="background: linear-gradient(90deg, #FF6B35, #FF8C42); color: #fff; padding: 5px 12px; border-radius: 30px; font-size: 11px; font-weight: 600;">
                                    {{ trans_field($programme->categorie, 'nom') ?? $programme->categorie->nom_ar }}
                                </span>
                            </div-->
                        @endif
                    </div>

                    <div class="card-body text-center">
                        <h5>{{ $titre }}</h5>
                        
                        <div class="col-md-12" style="line-height: 1.9; font-size: 1.1rem; color:#333;">
                            {!! strip_tags(Str::limit(trans_field($programme, 'resume') ?? trans_field($programme, 'desc'), 100)) !!}
                        </div>
                    </div>

                    <div class="it-blog-btn text-center pb-10">
                        <a href="{{ $detailUrl }}" class="it-btn-orange">
                            <span>
                                <span class="text-1">{{ __('site.programmes.voir_plus') ?? 'اقرأ المزيد' }}</span>
                                <span class="text-2">{{ __('site.programmes.voir_plus') ?? 'اقرأ المزيد' }}</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>
        @empty
            <div class="col-12 text-center">
                <div class="alert alert-info">
                    {{ __('site.programmes.aucun_programme') ?? 'Aucun programme disponible pour le moment.' }}
                </div>
            </div>
        @endforelse
    </div>

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

@push('styles')
<style>
/* Styles additionnels pour harmoniser avec le style news */
.it-btn-orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(90deg, #FF6B35, #FF8C42);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.it-btn-orange:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255,107,53,0.3);
    color: #fff;
}

.it-btn-orange span {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.it-btn-orange .text-1 {
    display: inline-block;
    transition: transform 0.3s ease;
}

.it-btn-orange .text-2 {
    display: inline-block;
    position: absolute;
    top: 100%;
    left: 0;
    transition: transform 0.3s ease;
}

.it-btn-orange:hover .text-1 {
    transform: translateY(-100%);
}

.it-btn-orange:hover .text-2 {
    transform: translateY(-100%);
}

.it-btn-orange i {
    display: inline-flex;
    transition: transform 0.3s ease;
}

.it-btn-orange:hover i {
    transform: translateX(5px);
}

.it-btn-orange i svg:first-child {
    display: inline-block;
}

.it-btn-orange i svg:last-child {
    display: none;
}

.it-btn-orange:hover i svg:first-child {
    display: none;
}

.it-btn-orange:hover i svg:last-child {
    display: inline-block;
}

/* Style des cartes */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    border-radius: 15px;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
}

.card-img-top {
    position: relative;
    background: #f8f9fa;
}

.card-img-top img,
.card-img-top iframe {
    object-fit: cover;
}

.card-body h5 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a2b4e;
    margin-bottom: 15px;
    line-height: 1.4;
}

/* RTL Support */
[dir="rtl"] .it-btn-orange i svg {
    transform: rotate(180deg);
}

[dir="rtl"] .it-btn-orange:hover i {
    transform: translateX(-5px) rotate(180deg);
}

[dir="rtl"] div[style*="position: absolute"] {
    left: auto !important;
    right: 10px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .container.my-5 {
        padding: 0 15px;
    }
    
    .card-body h5 {
        font-size: 1rem;
    }
    
    .col-md-12[style*="line-height"] {
        font-size: 0.9rem !important;
    }
    
    .it-btn-orange {
        padding: 8px 20px;
        font-size: 12px;
    }
}

@media (max-width: 576px) {
    h2.text-center {
        font-size: 1.5rem;
    }
    
    .card-img-top {
        height: 180px !important;
    }
}
</style>
@endpush