@extends('layouts.app')

@section('title', 'Blog')
@section('idname', 'single')
@section('content')

<div class="container" style="margin-top: 200px;">
    <div class="content preview">
    <div class="form-row" style="margin-top:20px">
            <div class="form-group col-md-12">
                <style>
                    .nav-link {
    text-decoration: none;
    color: black;
    font-weight: bold;
}

                </style>
                
                <ul style="list-style-type: none; padding: 0 0 10px 0; margin: 0; display: flex; border-bottom: 1px solid black;">
    <li style="margin-right: 20px;"><a href="{{ route('album.edit', $release->id) }}" class="nav-link">1. RELEASE INFO</a></li>
    <!--<li style="margin-right: 20px;"><a href="{{ route('album.editOther', $release->id) }}" class="nav-link">2. LICENSES</a></li>-->
    <!--<li style="margin-right: 20px;"><a href="{{ route('audio.upload.form', $release->id) }}" class="nav-link">3. TRACKS</a></li>-->
    <li style="margin-right: 20px;"><a href="{{ route('albums.preview', $release->id) }}" class="nav-link">2. PREVIEW AND DISTRIBUTION</a></li>
    <li style="margin-right: 20px;"><a href="{{ route('releases.show', $release->id) }}" class="nav-link">3. DISTRIBUTION STATUS</a></li>
</ul>
            </div>
            
        </div>
        <table class="table table-bordered">
     
            <!-- Album info -->
        </table>

        <!-- Tab menu -->
        <div class="form-row" style="margin-top: 80px;">
            <div class="form-group row w-100">
                <label for="title" class="col-form-label col-md-2">Title</label>
                <div class="col-md-8">
                    <input placeholder="Write here" disabled value="{{ $release->title }}" required type="text" class="form-control" name="isrc" id="title">
                </div>
                <div class="col-md-2 text-right">
    @php
        $distributionStatus = $release->distributions->first() ? $release->distributions->first()->status : null;
    @endphp

    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 3)
        @if ($distributionStatus === 'submitted' || $distributionStatus === 'approved' || $distributionStatus === 'rejected')

            <form id="approval" action="{{ route('albums.distribute', ['id' => $release->id]) }}" method="POST">
                @csrf
                <button type="submit" name="action" value="approve" class="btn btn-success">Approve</button>
                <button type="submit" name="action" value="reject" class="btn btn-red">Reject</button>
            </form>
        @endif
    @elseif (Auth::user()->role_id == 2)
        @if ($distributionStatus === 'submitted' || $distributionStatus === 'approved' || $distributionStatus === 'rejected')
            <span class="badge badge-{{ $distributionStatus === 'submitted' ? 'warning' : ($distributionStatus === 'approved' ? 'success' : 'danger') }}">
                Submission Status: {{ $distributionStatus === 'submitted' ? 'Pending' : ucfirst($distributionStatus) }}
            </span>
        @else
            <form action="{{ route('albums.distribute', ['id' => $release->id]) }}" method="POST">
                @csrf
                <button type="submit" name="action" value="submit" class="btn btn-red register">Distribute it</button>
            </form>
        @endif
    @endif
</div>






            </div>
        </div>


        <!-- Album cover -->
        <div class="row my-4">
            <!-- Album cover -->
            <div class="col-md-4 text-center">
                <div id="item_cover" class="thumbnail large">
                    <a href="#" id="play_all">
                        <img src="{{ Str::startsWith($release->cover_art, 'https://abacuosawsbucket.s3.us-east-2.amazonaws.com') 
    ? $release->cover_art 
    : asset('storage/' . $release->cover_art) 
}}
" class="img-fluid" alt="Album Cover">
                    </a>
                </div>
            </div>

            <!-- Metadata section -->
            <div id="title_metadata" class="col-md-8">
    <h4 style="color:black">{{ $release->title }}</h4>
    <p><strong>Version:</strong> {{ $release->version }}</p>
    <p><strong>Release Type:</strong> {{ $release->release_type }}</p>
    <p><strong>All Contributors (artists…):</strong> {{ implode(', ', $release->contributors->pluck('name')->toArray()) }}</p>

    <p><strong>Label:</strong> @php
    // Fetch the label name using a raw SQL query
    $label = DB::select('SELECT name FROM labels WHERE id = ?', [$release->label]);
    $labelName = $label ? $label[0]->name : 'N/A';
@endphp


    @if($release->label == 'AB1')
        ABACUOS
    @else
        {{ $labelName }}
    @endif

    <p><strong>Primary Genre:</strong> {{ $release->primary_genre }}</p>
    <p><strong>Secondary Genre:</strong> {{ $release->secondary_genre }}</p>
    <p><strong>UPC/EAN:</strong> {{ $release->upc_ean }}</p>
    <p><strong>Copyright Owner & year:</strong> &copy; {{ $release->copyright_owner }} {{$release->copyright_details}}</p>
    <p><strong>Publishing Rights & year:</strong>&copy;  {{ $release->publishing_rights }} {{$release->publishing_owner }}</p>
    <p><strong>Release date:</strong>  {{ $release->original_release_date }}</p>
</div>


        </div>

        <!-- Track list section -->
        <div id="track_list">
            <table class="table table-striped">
                <thead>
                    <tr>
                        
                        <th>S/L</th>
                        <th>ISRC</th>
                        <th>Track Title</th>
                        <th>Parental Advisory</th>
                        
                        <th>Time</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($tracks as $track)
                    <tr id="row_track_{{ $track->id }}" class="{{ $loop->odd ? 'table-active' : '' }}" data-track-src="{{ Str::startsWith($track->file_path, 'https://abacuosawsbucket.s3.us-east-2.amazonaws.com') ? $track->file_path : asset('storage/music/' . $track->file_path) }}">
                       
                        <td>{{ $loop->iteration }}</td>
                        <td>{{ $track->isrc }}</td>
                        <td class="track_title">
                            <div>
                                <a data-track_id="{{ $track->id }}" href="#" class="play_track">
                                    {{ $track->audio_preview }}
                                </a>
                                <a data-src="{{ Str::startsWith($track->file_path, 'https://abacuosawsbucket.s3.us-east-2.amazonaws.com') ? $track->file_path : asset('storage/music/' . $track->file_path) }}" class="play_icon ml-2" href="#">
                                    <img src="https://cdn-icons-png.flaticon.com/512/727/727245.png" alt="Play" style="width: 20px;">
                                </a>
                            </div>
                            
                        </td>
                        
                        <td>
    @if ($track->is_explicit == 1)
        Not Explicit
    @elseif ($track->is_explicit == 2)
        Explicit
    @else
        Cleaned Version
    @endif
</td>
                        <td>{{ $track->start_point_time }}</td>
                        <td><a class="edit_track" data-track_id="{{ $track->id }}" href="{{ route('audiotracks.edit', ['id' => $track->id, 'release' => $release->id]) }}">edit</a></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Responsive Audio Player -->
        <div class="audio-player mt-4">
            <audio id="audio" controls class="w-100 mb-3">
                <source src="{{ $tracks->first() 
        ? (Str::startsWith($tracks->first()->file_path, 'https://abacuosawsbucket.s3.us-east-2.amazonaws.com') 
            ? $tracks->first()->file_path 
            : asset('storage/music/' . $tracks->first()->file_path)) 
        : '' 
    }}" type="audio/mp3">
                Your browser does not support the audio element.
            </audio>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const audio = document.getElementById('audio');
        const playIcons = document.querySelectorAll('.play_icon');

        playIcons.forEach(icon => {
            icon.addEventListener('click', function(e) {
                e.preventDefault();
                const src = this.getAttribute('data-src');
                audio.src = src;
                audio.play();
            });
        });
    });
</script>

<!--@if (Auth::user()->role_id == 1 || Auth::user()->role_id == 3)-->
<!--    <script>-->
<!--        document.addEventListener('DOMContentLoaded', function() {-->
<!--            const formElements = document.querySelectorAll('form:not(#approval) input, form:not(#approval) select, form:not(#approval) textarea, form:not(#approval) button');-->
<!--            formElements.forEach(element => {-->
<!--                element.disabled = true;-->
<!--            });-->
<!--        });-->
<!--    </script>-->
<!--@endif-->