@extends('layouts.master')

@section('page-title', $pageTitle)

@section('meta_og_img', config('app.static_asset_url') . '/thumbnails/' . $episode->artwork->filename)

@section('meta_description', 'Artwork for the ' . $episode->podcast->name . ' podcast,  episode ' . $episode->episode_number + 0 . ' by ' . $episode->artwork->artist->name)

@section('page-top')
<section class="inner-page-banner bg-2 bg-image">
    <div class="container">
        <div class="inner text-center">
            <h1 class="title">"{{ $episode->title }}"</h1>
            <nav class="mt-4">
                <ol class="breadcrumb justify-content-center">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item"><a href="/podcasts">Podcasts</a></li>
                    <li class="breadcrumb-item"><a href="/podcasts/{{ $episode->podcast->slug }}">{{ $episode->podcast->name }}</a></li>
                    <li class="breadcrumb-item active">Ep. {{ number_format($episode->episode_number + 0) }}</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
@endsection

@section('page-content')
<section class="product-details section-bg-separation-2 pt-120 pb-90">
    <div class="container">
        <div class="row">
            <div class="col-xxl-6 mb-6">
                <div class="explore-style-one">
                    <div class="thumb"><a href="{{ config('app.static_asset_url') }}/artworks/{{ $episode->artwork->filename }}"
                        ><img id="largeImage"src="{{ config('app.static_asset_url') }}/artworks/{{ $episode->artwork->filename }}"
                            alt="{{ $episode->artwork->title }} by {{ $episode->artwork->artist->name }} for {{ $episode->artwork->podcast->title }}"></a>
                    </div>
                </div>
            </div>
            <div class="col-xxl-6 mb-6 mb-6">
                <div class="details-content">
                    <h2 class="main_title">{{ $episode->podcast->name }}<br> &ldquo;{{ $episode->title }}&rdquo;</h2>
                    <h4 class="mb-1">Episode {{ number_format($episode->episode_number + 0) }}</h4>
                    <h4 class="mb-4">{{ $episode->episode_date->format('l, F j') }}<sup>{{ $episode->episode_date->format('S') }}</sup>,
                        {{ $episode->episode_date->format('Y') }}</h4>
                    <h4 class="mb-4">Artwork By: <a href="/artist/{{ $episode->artwork->artist->slug }}">{{ $episode->artwork->artist->name }}</a></h4>
                    <p class="subtitle">
                        {{ number_format($episode->artworks->count()) }} Artworks Submitted.
                    </p>
                    <div class="container">
                        <div class="row">
                            <div class="col">
                                <a class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"
                                    href="{{ config('app.static_asset_url') }}/artworks/{{ $episode->artwork->filename }}">
                                    <span>Download 3,000 px Image</span></a>
                            </div>
                            <div class="col">
                                <a class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"
                                    href="{{ config('app.static_asset_url') }}/thumbnails/{{ $episode->artwork->filename }}">
                                    <span>Download 512px Image</span></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <a href="{{ $episode->mp3 }}"
                                    class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"><span><i
                                        class="ri-headphone-fill"></i>
                                        Direct Link to MP3
                                    </span></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <a href="/podcasts/{{ $episode->podcast->slug }}"
                                    class="btn btn-medium btn-gradient w-100 justify-content-center mt-5"><span><i
                                        class="ri-broadcast-line"></i>
                                        More From {{ $episode->podcast->name }}
                                    </span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{{--  Start Live Auction --}}
<section class="ptb-120 live-auction">
    <div class="container">
        <div class="section-title">
            <span class="subtitle">Other Submitted Artworks</span>
            <h3>{{ number_format($episode->artworks->count() - 1) }} other art pieces submitted</h3>
        </div>
    </div>
    <div class="container">
        {{-- End .section-title --}}
        <div class="grid-filter-wrapper masonry-list">
            <div class="resizer"></div>
            @foreach ($episode->artworks as $recent)
                @if ($recent->id != $episode->artwork_id)
                    @php
                        $thisArtwork = $recent;
                        $thisPodcast = $recent->podcast;
                        $thisEpisode = $recent->episode;
                    @endphp
                    <div class="grid-item">
                        @include('artworks.card')
                    </div>
                @endif
            @endforeach
        {{-- End .slick-activation-01 --}}
        </div>
    {{-- End .container --}}
    </div>
</section>
{{-- End Live Auction --}}


@endsection