@extends('layouts.app')

@section('content')
    <div class="page-wrapper">
        <div class="page-header d-print-none">
            <div class="container-xl">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <div class="page-pretitle">My Collection</div>
                        <h2 class="page-title">Wishlist</h2>
                    </div>
                    <div class="col-auto ms-auto">
                        <div class="btn-list">
                            <a href="{{ route('user.dashboard') }}" class="btn btn-outline-primary d-none d-sm-inline-block">
                                <i class="ti ti-dashboard me-2"></i>Back to Dashboard
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-body">
            <div class="container-xl">
                @if (count($favoriteSongs ?? []) > 0)
                    <div class="row row-cards">
                        @foreach ($favoriteSongs as $item)
                            <div class="col-md-6 col-lg-4" data-song-id="{{ $item->song->id }}">
                                <div class="card">
                                    <div class="card-status-top bg-primary"></div>
                                    <div class="card-body">
                                        <div class="row align-items-center mb-3">
                                            <div class="col-auto">
                                                <span class="avatar avatar-md"
                                                    style="background-image: url({{ $item->song->cover_image_url_md }})"></span>
                                            </div>
                                            <div class="col">
                                                <h3 class="card-title mb-0">{{ $item->song->title }}</h3>
                                                @if ($item->song->songContributors->isNotEmpty())
                                                    <div class="text-muted">
                                                        @foreach ($item->song->songContributors as $contributor)
                                                            {{ $contributor->user->name }}@if (!$loop->last)
                                                                ,
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                        <div class="row align-items-center">
                                            <div class="col">
                                                <div class="d-flex align-items-center mb-2">
                                                    <div class="me-auto">
                                                        @if ($item->song->album)
                                                            <span
                                                                class="text-muted d-block">{{ $item->song->album->title }}</span>
                                                        @endif
                                                    </div>
                                                    <span class="badge bg-primary-lt">{{ $item->song->type }}</span>
                                                </div>
                                                <div class="d-flex align-items-center">
                                                    <div class="me-auto">
                                                        <div class="text-muted">
                                                            <i class="ti ti-calendar me-1"></i> Added
                                                            {{ $item->created_at->diffForHumans() }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="d-flex justify-content-between">
                                            @if ($item->song)
                                                <a href="{{ route('users.songs.view', ['id' => $item->song->id]) }}"
                                                    class="btn btn-link">
                                                    Preview
                                                </a>
                                            @endif

                                            {{-- <form action="{{ route('wishlist.remove', ['song' => $item->song->id]) }}"
                                                method="POST"
                                                onsubmit="return confirm('Apakah Anda yakin ingin menghapus lagu ini dari wishlist?');">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-icon btn-ghost-danger remove-wishlist"
                                                    data-bs-toggle="tooltip" title="Remove from wishlist">
                                                    <i class="ti ti-trash"></i>
                                                </button>
                                            </form> --}}
                                            <form id="remove-form-{{ $item->song->id }}"
                                                action="{{ route('wishlist.remove', ['song' => $item->song->id]) }}"
                                                method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="button"
                                                    class="btn btn-icon btn-ghost-danger remove-wishlist-btn"
                                                    data-song-id="{{ $item->song->id }}" data-bs-toggle="tooltip"
                                                    title="Remove from wishlist">
                                                    <i class="ti ti-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="empty">
                        <div class="empty-img">
                            <i class="ti ti-heart-off" style="font-size: 4rem; color: var(--primary-color);"></i>
                        </div>
                        <p class="empty-title">Your wishlist is empty</p>
                        <p class="empty-subtitle text-muted">
                            Explore our music collection and add your favorite songs to your wishlist.
                        </p>
                        <div class="empty-action">
                            <a href="{{ route('popular-songs') }}" class="btn btn-primary">
                                <i class="ti ti-music me-2"></i>Explore Music
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Konfirmasi Penghapusan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Apakah Anda yakin ingin menghapus lagu ini dari wishlist?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDeleteBtn">Hapus</button>
            </div>
        </div>
    </div>
</div>

@section('scripts')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
            const removeButtons = document.querySelectorAll('.remove-wishlist');

            removeButtons.forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const songId = this.getAttribute('data-song-id');

                    Swal.fire({
                        title: 'Remove from wishlist?',
                        text: "This item will be removed from your wishlist",
                        icon: 'warning',
                        showCancelButton: true,
                        confirmButtonColor: '#e53935',
                        cancelButtonColor: '#6c757d',
                        confirmButtonText: 'Yes, remove it!'
                    }).then((result) => {
                        if (result.isConfirmed) {
                            fetch(`/wishlist/toggle/${songId}`, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'X-CSRF-TOKEN': csrfToken,
                                    },
                                    body: JSON.stringify({})
                                })
                                .then(response => response.json())
                                .then(data => {
                                    if (data.success) {
                                        Swal.fire(
                                            'Removed!',
                                            'The item has been removed from your wishlist.',
                                            'success'
                                        ).then(() => {
                                            const card = document.querySelector(
                                                `.col-md-6[data-song-id="${songId}"]`
                                            );
                                            if (card) {
                                                card.style.opacity = '0';
                                                setTimeout(() => {
                                                    card.remove();
                                                    const
                                                        remainingItems =
                                                        document
                                                        .querySelectorAll(
                                                            '.col-md-6')
                                                        .length;
                                                    if (remainingItems ===
                                                        0) {
                                                        location
                                                            .reload();
                                                    }
                                                }, 300);
                                            }
                                        });
                                    } else {
                                        Swal.fire(
                                            'Error!',
                                            data.message || 'Something went wrong.',
                                            'error'
                                        );
                                    }
                                })
                                .catch(error => {
                                    console.error('Error:', error);
                                    Swal.fire(
                                        'Error!',
                                        'Something went wrong with the request.',
                                        'error'
                                    );
                                });
                        }
                    });
                });
            });
        });

        $(document).ready(function() {
            // Tangkap klik pada tombol trash
            $('.remove-wishlist-btn').on('click', function() {
                const songId = $(this).data('song-id');
                const formAction = $('#remove-form-' + songId).attr('action');

                // Atur action form di dalam modal
                $('#confirmDeleteBtn').off('click').on('click', function() {
                    $('#remove-form-' + songId).submit();
                });

                // Tampilkan modal
                var myModal = new bootstrap.Modal(document.getElementById('deleteModal'));
                myModal.show();
            });
        });
    </script>
@endsection