@extends('frontend.app')
{{-- @section('head')
    @if ($schema)
        <script type="application/ld+json">@json($schema)</script>
    @endif
@endsection --}}
@section('content')
    <main class="container overflow-hidden g-1">
        {!! adCode('ad_post_top') !!}
        <div class="row">
            <div class="col-lg-12 my-2">
                <div class="card my-shadow p-2">
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="px-2">
                                <h1 class="fs-4 mb-1 mt-1">{{ $title }}</h1>
                                {{-- <p>{{ trans('By') }} <a href="{{ route('music.user', ['slug' => $music->user->slug]) }}">{{ $music->user->name }}</a>     </p> --}}
                            </div>
                        </div>

                        <div class="col-lg-12 order-lg-3">
                            <div class="row justify-content-center">
                                <div class="col-lg-6">
                                    <div class="d-flex justify-content-center">
                                        <div class="card ringtone-play ringtone bg-gradient-primary"
                                            data-id="{{ $music->id }}">

                                            @if ($media = $music->getFirstMedia(Constant::THUMB_COLLECTION))
                                                <div class="position-absolute" style="display: block">
                                                    {{ $media->img()->conversion(Constant::THUMB)->attributes(['alt' => $music->file_name . ' Image', 'class' => 'card-img lazyload']) }}
                                                </div>
                                            @elseif ($media = $music->album->getFirstMedia(Constant::THUMB_COLLECTION))
                                                <div class="position-absolute" style="display: block">
                                                    {{ $media->img()->conversion(Constant::THUMB)->attributes(['alt' => $music->album->name . ' Image', 'class' => 'card-img lazyload']) }}
                                                </div>
                                            @endif

                                            {{-- <p
                                                class="position-absolute start-0 top-0 m-2 text-light badge bg-badge-ringtone">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    fill="currentColor" class="bi bi-cloud-arrow-down" viewBox="0 0 16 16">
                                                    <path fill-rule="evenodd"
                                                        d="M7.646 10.854a.5.5 0 0 0 .708 0l2-2a.5.5 0 0 0-.708-.708L8.5 9.293V5.5a.5.5 0 0 0-1 0v3.793L6.354 8.146a.5.5 0 1 0-.708.708l2 2z" />
                                                    <path
                                                        d="M4.406 3.342A5.53 5.53 0 0 1 8 2c2.69 0 4.923 2 5.166 4.579C14.758 6.804 16 8.137 16 9.773 16 11.569 14.502 13 12.687 13H3.781C1.708 13 0 11.366 0 9.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383zm.653.757c-.757.653-1.153 1.44-1.153 2.056v.448l-.445.049C2.064 6.805 1 7.952 1 9.318 1 10.785 2.23 12 3.781 12h8.906C13.98 12 15 10.988 15 9.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 4.825 10.328 3 8 3a4.53 4.53 0 0 0-2.941 1.1z" />
                                                </svg> {{ $music->getDownloadsToHuman() }} {{ trans('Downloads') }}
                                            </p> --}}
                                            {{-- 
                                            <p class="position-absolute end-0 top-0 m-2 text-light badge bg-badge-ringtone">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
                                                    <path
                                                        d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
                                                </svg>
                                                {{ $music->created_at->diffForHumans() }}
                                            </p> --}}

                                            {{-- <span class="my-button dark player loader"
                                                style="--rotation: 45deg; --transition: initial;"><svg
                                                    class="icon icon-play">
                                                    <use xlink:href="#icon-play"></use>
                                                </svg>
                                            </span> --}}

                                            {{-- <p
                                                class="position-absolute bottom-0 start-50 translate-middle-x m-2 badge bg-badge-ringtone">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                                    fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
                                                    <path
                                                        d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
                                                    <path
                                                        d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
                                                </svg>
                                                {{ $music->getDuration() }}
                                            </p> --}}

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4 order-lg-2">
                            <div class="ring-actions" data-id="{{ $music->id }}">
                                <span class="my-button fav{{ !$music->isFav(Auth::user()) ? ' light' : '' }}"><svg
                                        class="icon">
                                        <use xlink:href="#icon-heart"></use>
                                    </svg></span>
                                <span class="my-button light share"><svg class="icon">
                                        <use xlink:href="#icon-share"></use>
                                    </svg></span>
                                @if ($music->user_id === Auth::id())
                                    <span class="my-button light edit"><svg class="icon">
                                            <use xlink:href="#icon-edit"></use>
                                        </svg></span>
                                @endif
                            </div>
                        </div>


                    </div>
                    @if (($audioUrl = $music->getFirstMediaUrl(Constant::MUSIC_COLLECTION)) || $music->url)
                        <div class="text-center my-2">
                            <audio id="defaultAudio" loop="" controls="" preload="none" controlslist="nodownload">
                                <source src="{{ $audioUrl ?: $music->url }}" type="audio/mpeg">
                            </audio>
                        </div>
                    @endif
                    <div class="row justify-content-center">
                        <div class="col-md-8">
                            <table class="table table-bordered">
                                <tbody>
                                    <tr>
                                        <td> {{ trans('Album') }}:</td>
                                        <td><a href="{{ route('music.album', ['slug' => $music->album->slug]) }}">
                                                {{ $music->album->name }}</a></td>
                                    </tr>
                                    @if ($music->artists->isNotEmpty())
                                        <tr>
                                            <td>{{ trans('Artists') }}:</td>
                                            <td>
                                                @foreach ($music->artists as $item)
                                                    {!! link_to_route('music.artist', $item->name, ['slug' => $item->slug]) !!}
                                                    @if (!$loop->last)
                                                        ,
                                                    @endif
                                                @endforeach
                                            </td>
                                        </tr>
                                    @endif

                                    @if ($duration = $music->getDuration())
                                        <tr>
                                            <td>{{ trans('Duration') }}:</td>
                                            <td>{{ $duration }}</td>
                                        </tr>
                                    @endif
                                    <tr>
                                        <td>{{ trans('Published') }}</td>
                                        <td>
                                            {{ $music->created_at->format('M d, Y') }}</td>
                                    </tr>
                                </tbody>

                            </table>
                        </div>
                    </div>
                    @if ($music->description)
                        <div class="mx-2">
                            <h2 class="visually-hidden">{{ $music->file_name }} {{ trans('Mp3 Download') }}</h2>
                            {!! $music->description !!}
                        </div>
                    @endif

                    @if ($music->tags->isNotEmpty())
                        <ul class="ring-tags">
                            @foreach ($music->tags as $item)
                                <li><a href="{{ route('music.tag', ['slug' => $item->slug]) }}"
                                        class="btn btn-light btn-sm">{{ $item->name }}</a></li>
                            @endforeach
                        </ul>
                    @endif

                    {!! adCode('ad_post_download') !!}

                    @if (($media = $music->getFirstMedia(Constant::MUSIC_COLLECTION)) || $music->url)
                        <div class="ring-downloads d-flex justify-content-center">
                            <button class="btn text-white bg-gradient-primary downloadSingle"
                                value="{{ $music->getKey() }}" type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                    class="bi bi-cloud-arrow-down-fill" viewBox="0 0 16 16">
                                    <path
                                        d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 6.854-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 9.293V5.5a.5.5 0 0 1 1 0v3.793l1.146-1.147a.5.5 0 0 1 .708.708z" />
                                </svg> {{ trans('Download') }}
                                {{ $media?->size ? ' - ' . \Spatie\MediaLibrary\Support\File::getHumanReadableSize($media->size) : '' }}</button>


                            <button id="playonapp" class="btn text-white bg-gradient-primary d-lg-none"
                                value="{{ $music->getKey() }}" type="button">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                    class="bi bi-google-play" viewBox="0 0 16 16">
                                    <path
                                        d="M14.222 9.374c1.037-.61 1.037-2.137 0-2.748L11.528 5.04 8.32 8l3.207 2.96 2.694-1.586Zm-3.595 2.116L7.583 8.68 1.03 14.73c.201 1.029 1.36 1.61 2.303 1.055l7.294-4.295ZM1 13.396V2.603L6.846 8 1 13.396ZM1.03 1.27l6.553 6.05 3.044-2.81L3.333.215C2.39-.341 1.231.24 1.03 1.27Z" />
                                </svg>

                                {{ trans('Play In App') }}</button>


                            {{-- <a href="{{ route('music.maker') }}" class="btn btn-lg btn-danger" type="button"><svg
                                xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
                                class="bi bi-scissors" viewBox="0 0 16 16">
                                <path
                                    d="M3.5 3.5c-.614-.884-.074-1.962.858-2.5L8 7.226 11.642 1c.932.538 1.472 1.616.858 2.5L8.81 8.61l1.556 2.661a2.5 2.5 0 1 1-.794.637L8 9.73l-1.572 2.177a2.5 2.5 0 1 1-.794-.637L7.19 8.61 3.5 3.5zm2.5 10a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0zm7 0a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z" />
                            </svg> {{ trans('Ringtone Maker') }}</a> --}}
                        </div>
                    @endif

                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mt-3">
                            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ trans('Home') }}</a></li>
                            <li class="breadcrumb-item"><a
                                    href="{{ route('music.album', ['slug' => $music->album->slug]) }}">{{ $music->album->name }}</a>
                            </li>
                            <li class="breadcrumb-item active" aria-current="page">{{ $music->file_name }}</li>
                        </ol>
                    </nav>

                </div>
            </div>


            {{-- <div class="col-lg-4 mt-2">
                <div class="card my-shadow p-2">
                    <div class="accordion" id="accordion">
                        <h2 class="fs-4 mx-2">{{ trans('FAQs for') }} {{ $music->file_name }}</h2>
                        @foreach ($questions as $question => $answer)
                            <div class="accordion-item">
                                <h3 class="accordion-header" id="heading_{{ $loop->index }}">
                                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#qna_{{ $loop->index }}"
                                        aria-expanded="{{ $loop->index != 0 ? 'true' : 'false' }}"
                                        aria-controls="qna_{{ $loop->index }}">
                                        {{ $question }}
                                    </button>
                                </h3>
                                <div id="qna_{{ $loop->index }}"
                                    class="accordion-collapse{{ $loop->index != 0 ? ' collapse' : '' }}"
                                    aria-labelledby="heading_{{ $loop->index }}" data-bs-parent="#accordion">
                                    <p class="accordion-body">
                                        {{ $answer }}
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div> --}}

            @if ($musics->isNotEmpty())
                {!! adCode('ad_post_middle') !!}

                <div class="col-lg-12 mt-2">
                    <h3 class="bg-gradient-primary text-white p-1 fs-4 rounded text-center">{{ trans('Related Songs') }}
                    </h3>
                    <ul id="items" class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-2 list-unstyled">
                        @include('frontend.list')
                    </ul>
                    {{-- @include('frontend.pagination') --}}
                </div>
            @endif


            {{-- <div class="col-12">

            <h2 class="bg-primary text-white p-1 fs-4 rounded text-center w-50 mx-auto">{{ trans('Categories') }}</h2>

        </div> --}}
        </div>
        @if (!isInfiniteScroll())
            {!! adCode('ad_post_bottom') !!}
        @endif
    </main>
@endsection