@extends('layouts.app')

@section('content')
    <div class="container my-5 py-5">
        <header class="mb-5 text-center">
            <h1 class="display-5 fw-bold mb-3">メッセージ</h1>
            <p class="lead text-muted">日曜礼拝のメッセージ録画と資料をご覧いただけます。</p>
        </header>

        <div class="row justify-content-center mb-5">
            <div class="col-md-6 col-lg-4">
                <div class="input-group">
                    <span class="input-group-text bg-white border-end-0"><i class="bi bi-calendar3"></i></span>
                    <select id="archives" class="form-select border-start-0" onchange="location.href='?date='+this.value">
                        @php
                            $start = \Carbon\Carbon::now()->startOfMonth();
                            $end = \Carbon\Carbon::now()->subYears(2)->startOfMonth();
                        @endphp
                        @while ($start->gte($end))
                            <option value="{{ $start->format('Y-m') }}"
                                {{ $currentDate == $start->format('Y-m') ? 'selected' : '' }}>
                                {{ $start->format('Y年m月') }}
                            </option>
                            @php $start->subMonth(); @endphp
                        @endwhile
                    </select>
                </div>
            </div>
        </div>

        <div class="row g-4">
            @forelse($messages as $message)
                <div class="col-md-6">
                    <div class="card h-100 border-0 shadow-sm transition-hover overflow-hidden">
                        <div class="row g-0 h-100">
                            <div class="col-sm-5">
                                @if ($message->youtube_url)
                                    @php
                                        preg_match(
                                            '/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/',
                                            $message->youtube_url,
                                            $matches,
                                        );
                                        $videoId = $matches[1] ?? null;
                                    @endphp
                                    @if ($videoId)
                                        <img src="https://img.youtube.com/vi/{{ $videoId }}/mqdefault.jpg"
                                            class="img-fluid h-100 w-100" style="object-fit: cover;" alt="Thumbnail">
                                    @else
                                        <div class="bg-light h-100 d-flex align-items-center justify-content-center">
                                            <i class="bi bi-play-btn h1 mb-0 text-muted"></i>
                                        </div>
                                    @endif
                                @else
                                    <div class="bg-light h-100 d-flex align-items-center justify-content-center">
                                        <i class="bi bi-mic h1 mb-0 text-muted"></i>
                                    </div>
                                @endif
                            </div>
                            <div class="col-sm-7">
                                <div class="card-body">
                                    <p class="text-primary small mb-1 fw-bold">{{ $message->date->format('Y/m/d') }}</p>
                                    <h5 class="card-title fw-bold mb-3">{{ $message->title }}</h5>
                                    <a href="{{ route('messages.show', $message->id) }}"
                                        class="btn btn-outline-primary btn-sm rounded-pill px-4">詳細を見る</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <p class="text-muted">選択された月のメッセージは見つかりませんでした。</p>
                </div>
            @endforelse
        </div>
    </div>

    <style>
        .transition-hover {
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .transition-hover:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08) !important;
        }
    </style>
@endsection