@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">People I Follow</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="following-filter" id="all-following"
                                    value="all" {{ $filter === 'all' ? 'checked' : '' }}>
                                <label class="btn btn-outline-primary btn-sm" for="all-following">All</label>

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

                                <input type="radio" class="btn-check" name="following-filter" id="composers"
                                    value="composers" {{ $filter === 'composers' ? 'checked' : '' }}>
                                <label class="btn btn-outline-primary btn-sm" for="composers">Composers</label>
                            </div>
                            <form action="{{ route('user.profile.following', ['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">
                        @if ($followings->count() > 0)
                            <div class="row row-cards">
                                @foreach ($followings as $following)
                                    <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({{ $following->profile_picture ? asset('storage/' . $following->profile_picture) : 'https://ui-avatars.com/api/?name=' . urlencode($following->name) . '&background=e53935&color=fff' }})"></span>
                                                    <div>
                                                        <div class="font-weight-medium">{{ $following->name }}</div>
                                                        <div class="text-muted">{{ '@' . $following->username }}</div>
                                                    </div>
                                                    <div class="ms-auto">
                                                        @if ($following->roles->isNotEmpty())
                                                            <span
                                                                class="badge bg-purple-lt">{{ $following->roles->first()->name }}</span>
                                                        @endif
                                                    </div>
                                                </div>
                                                <div class="text-muted mb-3">
                                                    <i class="ti ti-activity me-1"></i>
                                                    {{ $following->latest_activity ?? 'No recent activity' }}
                                                </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 ($following->pivot && $following->pivot->created_at)
                                                            {{ $following->pivot->created_at->diffForHumans() }}
                                                        @else
                                                            Tidak ada info waktu
                                                        @endif

                                                    </span>
                                                    <div>
                                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                            onclick="confirmUnfollow('{{ $following->id }}', '{{ $following->name }}')">
                                                            <i class="ti ti-user-x me-1"></i> Unfollow
                                                        </button>
                                                        <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>
                                @endforeach
                            </div>

                            <div class="d-flex mt-4">
                                {{ $followings->links('pagination::bootstrap-5') }}
                            </div>
                        @else
                            <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">Not following anyone yet</p>
                                <p class="empty-subtitle text-muted">
                                    You aren't following anyone yet. Discover new artists and creators to follow!
                                </p>
                                <div class="empty-action">
                                    <a href="#" class="btn btn-primary">
                                        <i class="ti ti-users"></i> Discover People
                                    </a>
                                </div>
                            </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">
                            @php
                                $recommendedUsers = [
                                    [
                                        'id' => 7,
                                        'name' => 'Billie Eilish',
                                        'username' => 'billieeilish',
                                        'role' => 'Artist',
                                        'mutual_followers' => 4,
                                    ],
                                    [
                                        'id' => 8,
                                        'name' => 'Ludwig Göransson',
                                        'username' => 'ludwig',
                                        'role' => 'Composer',
                                        'mutual_followers' => 2,
                                    ],
                                    [
                                        'id' => 9,
                                        'name' => 'Kendrick Lamar',
                                        'username' => 'kendrick',
                                        'role' => 'Artist',
                                        'mutual_followers' => 6,
                                    ],
                                ];
                            @endphp

                            @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('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['role'] }}</span>
                                                        <span class="small">{{ $recommended['mutual_followers'] }} mutual
                                                            followers</span>
                                                    </div>
                                                </div>
                                                <div class="ms-auto">
                                                    <button class="btn btn-sm btn-primary">
                                                        <i class="ti ti-user-plus me-1"></i> Follow
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const radioButtons = document.querySelectorAll('input[name="following-filter"]');

            radioButtons.forEach(radio => {
                radio.addEventListener('change', function() {
                    const selectedFilter = this.value;
                    // Redirect ke URL dengan filter yang dipilih
                    window.location.href =
                        "{{ route('user.profile.following', ['filter' => 'PLACEHOLDER']) }}"
                        .replace('PLACEHOLDER', selectedFilter);
                });
            });
        });

        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: '#e53935',
                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