@extends('layouts.app')

@section('title', 'Upload Audio Tracks')
@section('idname', 'single')
@section('content')

<div class="container" style="margin-top: 200px;">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
    <div class="container-custom">
        <div class="card-custom">
            <div class="form-row" style="margin-top:20px">
                <div class="form-group col-md-12">
                    <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) }}" style="text-decoration: none; color: black;">1. Release Info</a></li>
                        <li style="margin-right: 20px;"><a href="{{ route('album.editOther', $release->id) }}" style="text-decoration: none; color: black;">2. Licenses</a></li>
                        <li style="margin-right: 20px;"><a href="{{ route('audio.upload.form', $release->id) }}" style="text-decoration: none; color: black;">3. Tracks</a></li>
                        <li style="margin-right: 20px;"><a href="{{ route('albums.preview', $release->id) }}" style="text-decoration: none; color: black;">4. Preview and Distribute</a></li>
                        <li style="margin-right: 20px;"><a href="{{ route('releases.show', $release->id) }}" style="text-decoration: none; color: black;">5. Distribution</a></li>
                    </ul>
                </div>
            </div>

            @if (session('success'))
                <div class="alert alert-success">
                    {{ session('success') }}
                </div>
            @endif

            <div class="form-row">
                <div class="form-group col-md-12">
                    <label for="title">Title</label>
                    <input disabled placeholder="Write here" value="{{ $release->title }}" required type="text" class="form-control" name="title" id="title">
                </div>
                <div class="form-group col-md-12">
                    <small class="form-text text-muted">Indicate the name of this release as it should appear publicly. The title must be accurate and correctly formatted in the language of the release and must not include names of artists or any additional information.</small>
                </div>
            </div>

            <div class="form-row">
            <div class="form-group col-md-4">
    <form id="uploadForm" action="{{ route('audio.upload.post') }}" method="POST" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <label class="btn btn-secondary" id="loadFromComputerBtn">
            <i class="fas fa-cloud-upload-alt mr-2"></i> Load from Computer
            <input type="file" class="form-control-file" id="audioUpload" name="audios[]" accept="audio/*" multiple style="display: none;">
            <input type="hidden" name="release_id" value="{{$release->id}}">
        </label>
    </form>
    <button class="btn btn-secondary" id="loadCatalogBtn">Load from Catalog</button>
</div>


                <div class="form-group col-md-8">
                    <div id="track_list">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Track Title</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody id="audioList">
                                <!-- Dynamic Audio List -->
                                @foreach ($audioTracks as $track)
                                <tr id="row_track_{{ $track->id }}" class="{{ $loop->even ? 'table-active' : '' }}" data-track-src="{{ asset('storage/music/'.$track->file_path) }}">
                                    <td>{{ $loop->iteration }}</td>
                                    <td class="track_title">
                                        <a data-track_id="{{ $track->id }}" href="#" class="play_track" style="color: blue;">
                                            {{ $track->file_path }}
                                        </a>
                                        <a data-src="{{ 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>
                                    </td>
                                    <td>
    @if (Auth::user()->role_id == 1 || Auth::user()->role_id == 3)
        <a class="edit_track" data-track_id="{{ $track->id }}" href="{{ route('audiotracks.edit', $track->id) }}" style="color: blue;">view</a>
    @elseif (Auth::user()->role_id == 2)
        <a class="edit_track" data-track_id="{{ $track->id }}" href="{{ route('audiotracks.edit', $track->id) }}" style="color: blue;">edit</a>
        <a href="#" class="delete_track" data-track_id="{{ $track->id }}" style="padding: 0; margin-left: 10px; color: red;">delete</a>
        <form id="delete-form-{{ $track->id }}" action="{{ route('audiotracks.destroy', $track->id) }}" method="POST" style="display: none;">
            @csrf
            @method('DELETE')
        </form>
    @endif
</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        <div class="audio-player mt-4">
                            <audio id="audio" controls class="w-100 mb-3">
                                <source src="" type="audio/mp3">
                                Your browser does not support the audio element.
                            </audio>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<!-- Modal for catalog -->
<div class="modal fade" id="catalogModal" tabindex="-1" role="dialog" aria-labelledby="catalogModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="catalogModalLabel">Select Audio Tracks from Catalog</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Select</th>
                            <th>Track Title</th>
                        </tr>
                    </thead>
                    <tbody id="catalogList">
                        <!-- Catalog items will be populated here -->
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="addSelectedTracks">Add Selected Tracks</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
.catalog-item {
    cursor: pointer;
}

.catalog-item.selected {
    background-color: #d3d3d3;
}
</style>

</div>

<style>
    .table .play_icon img {
        width: 20px;
    }

    .table .track_title {
        display: flex;
        align-items: center;
    }

    .audio-player {
        margin-top: 20px;
    }

    .modal {
  display: none;
  position: fixed;
  z-index: 1050;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  outline: 0;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: .5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform .3s ease-out;
  transform: translate(0, -25%);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: translate(0, 0);
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  content: "";
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, .2);
  border-radius: .3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: .5;
}

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: .3rem;
  border-top-right-radius: .3rem;
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: .3rem;
  border-bottom-left-radius: .3rem;
}

.modal-footer > :not(:first-child) {
  margin-left: .25rem;
}

.modal-footer > :not(:last-child) {
  margin-right: .25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}
</style>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const trackIds = [];
    document.querySelectorAll('.delete_track').forEach(function(element) {
        trackIds.push(element.getAttribute('data-track_id'));
    });
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'track_ids[]';
    hiddenInput.value = JSON.stringify(trackIds);
    document.getElementById('uploadForm').appendChild(hiddenInput);

    const loadCatalogBtn = document.getElementById('loadCatalogBtn');
    const catalogModal = new bootstrap.Modal(document.getElementById('catalogModal'), {});
    const catalogList = document.getElementById('catalogList');
    const audioList = document.getElementById('audioList');
    const audioPlayer = document.getElementById('audio');
    let trackNumber = document.querySelectorAll('#audioList tr').length;

    // Function to add tracks to the audio list table
    function addTrackToList(track) {
        const listItem = document.createElement('tr');
        listItem.className = trackNumber % 2 === 0 ? 'table-active' : '';

        const indexCell = document.createElement('td');
        trackNumber += 1;
        indexCell.textContent = trackNumber;
        listItem.appendChild(indexCell);

        const titleCell = document.createElement('td');
        titleCell.className = 'track_title';
        const titleLink = document.createElement('a');
        titleLink.dataset.track_id = track.id;
        titleLink.href = '#';
        titleLink.className = 'play_track';
        titleLink.textContent = track.file_path;
        titleLink.style.color = 'blue';
        titleCell.appendChild(titleLink);

        const playLink = document.createElement('a');
        playLink.dataset.src = track.path; // Assuming path contains the URL
        playLink.className = 'play_icon ml-2';
        playLink.href = '#';
        const playIconImg = document.createElement('img');
        playIconImg.src = 'https://cdn-icons-png.flaticon.com/512/727/727245.png';
        playIconImg.alt = 'Play';
        playIconImg.style.width = '20px';
        playLink.appendChild(playIconImg);
        titleCell.appendChild(playLink);
        listItem.appendChild(titleCell);

        const editCell = document.createElement('td');
        const editLink = document.createElement('a');
        editLink.className = 'edit_track';
        editLink.dataset.track_id = track.id;
        editLink.href = '#'; // Update with actual edit link
        editLink.textContent = 'edit';
        editLink.style.color = 'blue';
        editCell.appendChild(editLink);

        const deleteLink = document.createElement('a');
        deleteLink.href = '#';
        deleteLink.className = 'delete_track';
        deleteLink.dataset.track_id = track.id;
        deleteLink.textContent = 'delete';
        deleteLink.style.color = 'red';
        deleteLink.style.padding = '0';
        deleteLink.style.marginLeft = '10px';
        editCell.appendChild(deleteLink);

        const deleteForm = document.createElement('form');
        deleteForm.id = `delete-form-${track.id}`;
        deleteForm.action = `/audiotracks/${track.id}`;
        deleteForm.method = 'POST';
        deleteForm.style.display = 'none';
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = '{{ csrf_token() }}';
        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'DELETE';
        deleteForm.appendChild(csrfInput);
        deleteForm.appendChild(methodInput);
        editCell.appendChild(deleteForm);

        listItem.appendChild(editCell);
        audioList.appendChild(listItem);

        const hiddenInput = document.querySelector('input[name="track_ids[]"]');
    let trackIds = JSON.parse(hiddenInput.value);
    //alert(track.id);
    if (!trackIds.includes(track.id)) {
        trackIds.push(track.id);
        hiddenInput.value = JSON.stringify(trackIds);
    }
    }

    loadCatalogBtn.addEventListener('click', function() {
        fetch('{{ route('catalog.tracks') }}')
            .then(response => response.json())
            .then(data => {
                catalogList.innerHTML = '';
                data.forEach(track => {
                    const row = document.createElement('tr');
                    row.classList.add('catalog-item');
                    const selectCell = document.createElement('td');
                    const checkbox = document.createElement('input');
                    checkbox.type = 'checkbox';
                    checkbox.value = track.id;
                    selectCell.appendChild(checkbox);
                    row.appendChild(selectCell);

                    const titleCell = document.createElement('td');
                    titleCell.textContent = track.file_path;
                    row.appendChild(titleCell);

                    catalogList.appendChild(row);

                    row.addEventListener('click', function() {
                        if (checkbox.checked) {
                            checkbox.checked = false;
                            row.classList.remove('selected');
                        } else {
                            checkbox.checked = true;
                            row.classList.add('selected');
                        }
                    });
                });
                catalogModal.show();
            });
    });

    document.getElementById('addSelectedTracks').addEventListener('click', function() {
        const selectedTracks = document.querySelectorAll('#catalogList input[type="checkbox"]:checked');
        selectedTracks.forEach(checkbox => {
            const trackId = checkbox.value;
            fetch(`/audiotracks/${trackId}`)
                .then(response => response.json())
                .then(track => {
                    addTrackToList(track);
                });
        });
        const hiddenInput = document.querySelector('input[name="track_ids[]"]');
    let trackIds = JSON.parse(hiddenInput.value);
            // After all tracks are added, update the album IDs
    fetch(`/update-album-ids/{{ $release->id }}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
        },
        body: JSON.stringify({ track_ids: trackIds })
    })
    .then(response => response.json())
    .then(data => {
        if (data.message) {
            alert(data.message);
            window.location.href = data.redirect;
        }
    })
    .catch(error => console.error('Error:', error));
        catalogModal.hide();
    });

    audioList.addEventListener('click', function(e) {
        if (e.target.closest('.play_icon')) {
            e.preventDefault();
            const src = e.target.closest('a').dataset.src;
            audioPlayer.src = src;
            audioPlayer.play();
        }
    });

    document.querySelectorAll('.delete_track').forEach(function(element) {
        element.addEventListener('click', function(event) {
            event.preventDefault();
            const trackId = this.getAttribute('data-track_id');
            const deleteForm = document.getElementById('delete-form-' + trackId);
            if (confirm('Are you sure you want to delete this track?')) {
                deleteForm.submit();
            }
        });
    });

    // document.getElementById('uploadForm').addEventListener('submit', function(e) {
    //     e.preventDefault();
    //     const formData = new FormData(this);
    //     fetch('{{ route('audio.upload.post') }}', {
    //         method: 'POST',
    //         body: formData
    //     })
    //     .then(response => response.json())
    //     .then(data => {
    //         if (data.errors) {
    //             alert(data.errors.join('\n'));
    //         } else {
    //             alert(data.message);
    //             data.audios.forEach(track => {
    //                 addTrackToList(track);
    //             });
    //             document.getElementById('audioUpload').value = '';
    //         }
    //     })
    //     .catch(error => console.error('Error:', error));
    // });
});

</script>

<script>
    document.getElementById('audioUpload').addEventListener('change', function() {
        document.getElementById('uploadForm').submit();
    });
</script>

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

@endsection