@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">Profile</div>
                        <h2 class="page-title">My Followers</h2>
                    </div>
                    <div class="col-auto ms-auto">
                        <div class="btn-list">
                            <a href="{{ route('user.profile.my-assets') }}"
                                class="btn btn-outline-primary d-none d-sm-inline-block">
                                <i class="ti ti-arrow-left me-2"></i>Back to Profile
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="page-body">
            <div class="container-xl">
                <div class="card">
                    <div class="card-header">
                        <div class="ms-auto d-flex">
                            <div class="btn-group me-2" role="group">
                                <input type="radio" class="btn-check" name="followers-filter" id="all-followers"
                                    value="all" {{ $filter === 'all' ? 'checked' : '' }}>
                                <label class="btn btn-outline-primary btn-sm" for="all-followers">All</label>

                                <input type="radio" class="btn-check" name="followers-filter" id="artists-followers"
                                    value="artists" {{ $filter === 'artists' ? 'checked' : '' }}>
                                <label class="btn btn-outline-primary btn-sm" for="artists-followers">Artists</label>

                                <input type="radio" class="btn-check" name="followers-filter" id="composers-followers"
                                    value="composers" {{ $filter === 'composers' ? 'checked' : '' }}>
                                <label class="btn btn-outline-primary btn-sm" for="composers-followers">Composers</label>
                            </div>
                            <form action="{{ route('user.profile.followers', ['filter' => $filter]) }}" method="GET">
                                <div class="input-group">

                                    <span class="input-group-text">
                                        <i class="ti ti-search"></i>
                                    </span>
                                    <input type="text" class="form-control" placeholder="Cari..." name="search"
                                        value="{{ request('search') }}">
                                    <button type="submit" class="btn btn-danger">Search</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row row-cards">
                            @forelse ($followers as $follower)
                                <div class="col-md-6 col-lg-4">
                                    <div class="card card-sm">
                                        <div class="card-body">
                                            <div class="d-flex align-items-center mb-3">
                                                <span class="avatar avatar-md me-3"
                                                    style="background-image: url({{ $follower->profile_picture ? asset('storage/' . $follower->profile_picture) : 'https://ui-avatars.com/api/?name=' . urlencode($follower->name) . '&background=e53935&color=fff' }})"></span>
                                                <div>
                                                    <div class="font-weight-medium">{{ $follower['name'] }}</div>
                                                    <div class="text-muted">{{ '@' . $follower['username'] }}</div>
                                                </div>
                                                <div class="ms-auto">
                                                    <span class="badge bg-purple-lt">
                                                        @if ($follower->roles->isNotEmpty())
                                                            {{ $follower->roles->first()->name }}
                                                        @else
                                                            No Role
                                                        @endif
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="text-muted mb-3">
                                                {{ $follower->profile->bio ?? 'No bio available.' }}
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <span class="text-muted small">
                                                    <i class="ti ti-clock me-1"></i>

                                                    @if ($follower->pivot && $follower->pivot->created_at)
                                                        {{ $follower->pivot->created_at->diffForHumans() }}
                                                    @else
                                                        Tidak ada info waktu
                                                    @endif

                                                </span>
                                                <div>
                                                    @auth
                                                        <button data-artist-id="{{ $follower->id }}"
                                                            data-is-following="{{ auth()->user()->isFollowing($follower)? 'true': 'false' }}"
                                                            data-follow-url="{{ route('artists.follow', $follower->id) }}"
                                                            data-unfollow-url="{{ route('artists.unfollow', $follower->id) }}"
                                                            class="btn btn-sm follow-toggle-button
                                                                @if (auth()->user()->isFollowing($follower)) bg-green-500 text-white border-green-500 hover:bg-green-600 hover:border-green-600
                                                                @else
                                                                    btn-outline-primary @endif">
                                                            <i
                                                                class="ti me-1 follow-icon
                                                                @if (auth()->user()->isFollowing($follower)) ti-check
                                                                @else
                                                                    ti-user-plus @endif"></i>
                                                            <span class="follow-text">
                                                                {{ auth()->user()->isFollowing($follower)? 'Following': 'Follow back' }}
                                                            </span>
                                                        </button>
                                                    @else
                                                        <a href="{{ route('login') }}" class="btn btn-sm btn-outline-primary">
                                                            <i class="ti ti-user-plus me-1"></i> Follow back
                                                        </a>
                                                    @endauth
                                                    <a href="#"
                                                        class="btn btn-sm btn-icon btn-outline-secondary ms-1">
                                                        <i class="ti ti-message-circle"></i>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="col-12">
                                    <div class="empty">
                                        <div class="empty-img">
                                            <svg xmlns="http://www.w3.org/2000/svg"
                                                class="icon icon-tabler icon-tabler-users" width="24" height="24"
                                                viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                                                stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0"></path>
                                                <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path>
                                                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                                                <path d="M21 21v-2a4 4 0 0 0 -3 -3.85"></path>
                                            </svg>
                                        </div>
                                        <p class="empty-title">No Followers yet</p>
                                        <p class="empty-subtitle text-muted">
                                            You don't have any followers yet. Keep creating and sharing content to grow your
                                            audience!
                                        </p>
                                        <div class="empty-action">
                                            <a href="#" class="btn btn-primary">
                                                <i class="ti ti-users"></i> Explore Users
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            @endforelse
                        </div>
                        @if ($followers->hasPages())
                            <div class="d-flex mt-4">
                                {{ $followers->links() }}
                            </div>
                        @endif
                    </div>
                </div>

                <div class="card mt-4">
                    <div class="card-header">
                        <h3 class="card-title">Recommended for You</h3>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            @if (isset($recommendedUsers) && $recommendedUsers->isNotEmpty())
                                @foreach ($recommendedUsers as $recommended)
                                    <div class="col-md-4">
                                        <div class="card card-sm">
                                            <div class="card-body">
                                                <div class="d-flex align-items-center">
                                                    <span class="avatar avatar-md me-3"
                                                        style="background-image: url('{{ $recommended->profile_picture ? asset('storage/' . $recommended->profile_picture) : 'https://ui-avatars.com/api/?name=' . urlencode($recommended->name) . '&background=2c3e50&color=fff&size=100' }}')"></span>
                                                    <div>
                                                        <div class="font-weight-medium">{{ $recommended->name }}</div>
                                                        <div class="text-muted">
                                                            <span
                                                                class="badge bg-blue-lt me-1">{{ $recommended->roles->first()->name ?? 'User' }}</span>
                                                            <span class="small">{{ $recommended->mutual_followers ?? 0 }}
                                                                mutual
                                                                followers</span>
                                                        </div>
                                                    </div>
                                                    <div class="ms-auto">
                                                        @auth
                                                            <button data-artist-id="{{ $recommended->id }}"
                                                                data-is-following="{{ auth()->user()->isFollowing($recommended)? 'true': 'false' }}"
                                                                data-follow-url="{{ route('artists.follow', $recommended->id) }}"
                                                                data-unfollow-url="{{ route('artists.unfollow', $recommended->id) }}"
                                                                class="btn btn-sm follow-toggle-button
                                                                    @if (auth()->user()->isFollowing($recommended)) bg-green-500 text-white border-green-500 hover:bg-green-600 hover:border-green-600
                                                                    @else
                                                                        btn-outline-primary @endif">
                                                                <i
                                                                    class="ti me-1 follow-icon
                                                                    @if (auth()->user()->isFollowing($recommended)) ti-check
                                                                    @else
                                                                        ti-user-plus @endif"></i>
                                                                <span class="follow-text">
                                                                    {{ auth()->user()->isFollowing($recommended)? 'Following': 'Follow' }}
                                                                </span>
                                                            </button>
                                                        @else
                                                            <a href="{{ route('login') }}" class="btn btn-sm btn-primary">
                                                                <i class="ti ti-user-plus me-1"></i> Follow
                                                            </a>
                                                        @endauth
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                <div class="col-12">
                                    <p class="text-muted text-center">No recommendations at the moment.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const radioButtons = document.querySelectorAll('input[name="followers-filter"]');

            radioButtons.forEach(radio => {
                radio.addEventListener('change', function() {
                    const selectedFilter = this.value;
                    window.location.href =
                        "{{ route('user.profile.followers', ['filter' => 'PLACEHOLDER']) }}"
                        .replace('PLACEHOLDER', selectedFilter);
                });
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const followButtons = document.querySelectorAll('.follow-toggle-button');

            followButtons.forEach(button => {
                let isFollowing = button.dataset.isFollowing === 'true';
                const artistId = button.dataset.artistId;
                const followUrl = button.dataset.followUrl;
                const unfollowUrl = button.dataset.unfollowUrl;
                const artistName = button.dataset.artistName || 'user';

                updateButtonUI(isFollowing, button);

                button.addEventListener('click', async function() {
                    button.disabled = true;
                    button.classList.add('opacity-75', 'pe-none');

                    const url = isFollowing ? unfollowUrl : followUrl;

                    try {
                        const response = await fetch(url, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json'
                            },
                        });

                        let data;
                        try {
                            data = await response.json();
                        } catch (e) {
                            throw new Error(
                                'Server mengembalikan respons non-JSON atau kosong. Status: ' +
                                response.status + ' ' + response.statusText);
                        }

                        if (!response.ok) {
                            throw new Error(data.message ||
                                'Terjadi kesalahan pada server dengan status: ' + response
                                .status);
                        }

                        isFollowing = !isFollowing;
                        button.dataset.isFollowing = isFollowing ? 'true' : 'false';
                        updateButtonUI(isFollowing, button);

                        Swal.fire({
                            title: 'Berhasil!',
                            text: isFollowing ?
                                `Anda berhasil mengikuti ${artistName}.` :
                                `Anda berhasil berhenti mengikuti ${artistName}.`,
                            icon: isFollowing ? 'success' : 'info',
                            confirmButtonColor: '#28a745',
                        });

                    } catch (error) {
                        console.error('Error during fetch operation:', error);
                        Swal.fire({
                            title: 'Gagal!',
                            text: error.message ||
                                'Terjadi kesalahan yang tidak terduga. Silakan coba lagi.',
                            icon: 'error',
                            confirmButtonColor: '#dc3545',
                        });
                    } finally {
                        button.disabled = false;
                        button.classList.remove('opacity-75', 'pe-none');
                    }
                });
            });

            function updateButtonUI(followingStatus, buttonElement) {

                buttonElement.className = 'btn btn-sm follow-toggle-button';

                if (followingStatus) {

                    buttonElement.classList.add('btn-outline-success');
                } else {

                    buttonElement.classList.add('btn-outline-primary');
                }


                const iconClass = followingStatus ? 'ti-check' : 'ti-user-plus';
                const text = followingStatus ? 'Following' : 'Follow back';

                buttonElement.innerHTML = `
                <i class="ti me-1 ${iconClass}"></i>
                <span>${text}</span>
            `;
            }

            function confirmUnfollow(artistId, artistName) {
                Swal.fire({
                    title: 'Unfollow ' + artistName + '?',
                    text: "You won't see their updates in your feed anymore",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#dc3545',
                    cancelButtonColor: '#6c757d',
                    confirmButtonText: 'Yes, unfollow'
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch('/artists/' + artistId + '/unfollow', {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json'
                                },
                            })
                            .then(response => {
                                if (!response.ok) {
                                    return response.json().then(errorData => {
                                        throw new Error(errorData.message ||
                                            'Terjadi kesalahan pada server.');
                                    });
                                }
                                return response.json();
                            })
                            .then(data => {
                                Swal.fire(
                                    'Unfollowed!',
                                    data.message,
                                    'success'
                                ).then(() => {
                                    location.reload();
                                });
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire(
                                    'Error',
                                    error.message ||
                                    'Terjadi kesalahan yang tidak terduga saat unfollowing.',
                                    'error'
                                );
                            });
                    }
                });
            }
        });
    </script>
@endsection