@extends('layouts.app')

@section('content')
    @include('partials.navbar')
  
    @include('articles.partials.home-css')
    <div class="container mt-4">
        <h2>Interviews</h2>

        @php
            $featured = $interviews->first(); // newest (make sure controller orders latest)
            $others = $interviews->skip(1);
        @endphp

        {{-- FEATURED INTERVIEW --}}
        @if ($featured)
            <div class="card mb-4 h-100 shadow-none">
                <div class="row g-0">

                    <div class="col-md-4">
                        @if ($featured->photo)
                            <img src="{{ asset('storage/' . $featured->photo) }}" class="img-fluid w-100"
                                style="height: 360px; object-fit: cover;" alt="{{ $featured->interviewee }}">
                        @endif
                    </div>

                    <div class="col-md-8">
                        <div class="card-body">
                            {{-- <span class="badge bg-dark mb-3">Latest Interview</span> --}}
                            <span class="badge bg-dark mb-3">
                                {{ $featured->created_at->gt(now()->subDays(700)) ? ' 🔥 Latest Interview' : 'Interview' }}
                            </span>

                            <h3 class="card-title mt-2" style="font-size: 30px !important">{{ $featured->title }}</h3>
                            <h6 class="text-muted mb-2" style="color: darkgreen">Interview with {{ $featured->interviewee }}
                            </h6>

                            <p class="card-text mt-0 poa" style="font-size: 18px">
                                {!! Str::limit(strip_tags($featured->summary), 390) !!}
                            </p>

                            <a href="{{ route('interviews.show', $featured->id) }}" class="btn btn-primary">
                                Read Full Interview
                            </a>
                        </div>
                        @foreach ($interviews as $interview)
                            &nbsp; &nbsp;<span style="color: blue">Estimated Reading
                                Time:{{ $interview->readingTime }} Min</span> |
                            <span style="color:green">Total Words:</span> {{ $interview->wordCount }} |
                            <span class="text-mute" style="font-size: 0.9rem;mrgin-top:-1rem; color:brown">
                                Published: {{ \Carbon\Carbon::parse($interview->created_at)->format('F j, Y') }}
                            </span>
                        @endforeach
                    </div>

                </div>
            </div>
        @endif

        {{-- OTHER INTERVIEWS --}}
        <div class="row">
            @foreach ($others as $interview)
                <div class="col-md-4 mb-4">
                    <div class="card h-100 border-none p-3">
                        @if ($interview->photo)
                            <img src="{{ asset('storage/' . $interview->photo) }}" class="card-img-top"
                                style="height: 200px; object-fit: cover;" alt="{{ $interview->interviewee }}">
                        @endif
                        <div class="card-body">
                            <h5 class="card-title">{{ Str::limit($interview->title, 60) }}</h5>

                            <p class="text-muted mb-2" style="font-size: 14px;">
                                Interview with {{ $interview->interviewee }}
                            </p>

                            <p class="card-text">
                                {!! Str::limit(strip_tags($interview->summary), 120) !!}
                            </p>
                        </div>

                        <div class="card-footer bg-white border-0">
                            <a href="{{ route('interviews.show', $interview->id) }}"
                                class="btn btn-sm btn-outline-primary">
                                Read Interview
                            </a>
                        </div>

                    </div>
                </div>
            @endforeach
        </div>

        {{-- PAGINATION --}}
        <div class="d-flex justify-content-center mt-3">
            {{ $interviews->links('pagination::bootstrap-4') }}
        </div>
    </div>

@endsection