@extends('layouts.app')

@section('content')
    <div class="profile-page pattern{{ rand(1,6) }}">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-3 text-center">
                    <div class="position-relative">
                        <img src="{{ asset('/img/user_no_avatar.png') }}" alt="{{ $user->name }}'s avatar" class="user-avatar">
                        @if(auth()->check() && auth()->user()->id === $user->id)
                            <div class="avatar-edit-overlay">
                                <a href="#" class="btn btn-sm btn-light rounded-circle">
                                    <span class="iconify" data-icon="mdi:camera"></span>
                                </a>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="profile-info">
                        <h1 class="mb-1">{{ $user->name }}</h1>
                        <div class="user-meta mb-2">
                            <span class="register-date"><span class="iconify" data-icon="mdi:calendar-clock"></span> Member since {{ $user->created_at->format('F Y') }}</span>
                        </div>
                        <div class="user-stats">
                            <div class="row">
                                <div class="col-4 text-center">
                                    <div class="stat-value">2</div>
                                    <div class="stat-label">Followers</div>
                                </div>
                                <div class="col-4 text-center">
                                    <div class="stat-value">3</div>
                                    <div class="stat-label">Following</div>
                                </div>
                                <div class="col-4 text-center">
                                    <div class="stat-value">7.5</div>
                                    <div class="stat-label">Avg Rating</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 text-end">
                    @if(auth()->check() && auth()->user()->id !== $user->id)
                        <button class="btn btn-primary mb-2"><span class="iconify" data-icon="mdi:account-plus"></span> Follow</button>
                    @elseif(auth()->check() && auth()->user()->id === $user->id)
                        <a href="#" class="btn btn-outline-secondary mb-2"><span class="iconify" data-icon="mdi:account-edit"></span> Edit Profile</a>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <div class="profile-page-menu">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <nav class="profile-nav">
                        <ul class="nav nav-pills">
                            <li class="nav-item">
                                <a
                                    class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.show', $user->slug)) ? 'active' : '' }}"
                                    href="{{ route('profile.show', $user->slug) }}"
                                >
                                    <span class="iconify" data-icon="mdi:account"></span> Profile
                                </a>
                            </li>
                            <li class="nav-item">
                                <a
                                    class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.index', $user->slug)) ? 'active' : '' }}"
                                    href="{{ route('profile.list.index', $user->slug) }}"
                                >
                                    <span class="iconify" data-icon="mdi:format-list-bulleted"></span> Lists
                                </a>
                            </li>
                            <li class="nav-item">
                                <a
                                    class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'watched'])) ? 'active' : '' }}"
                                    href="{{ route('profile.list.show', [$user->slug, 'watched']) }}"
                                >
                                    <span class="iconify" data-icon="mdi:history"></span> History
                                </a>
                            </li>
                            <li class="nav-item">
                                <a
                                    class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'watchlist'])) ? 'active' : '' }}"
                                    href="{{ route('profile.list.show', [$user->slug, 'watchlist']) }}"
                                >
                                    <span class="iconify" data-icon="mdi:bookmark-outline"></span> Watchlist
                                </a>
                            </li>
                            <li class="nav-item">
                                <a
                                    class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'collection'])) ? 'active' : '' }}"
                                    href="{{ route('profile.list.show', [$user->slug, 'collection']) }}"
                                >
                                    <span class="iconify" data-icon="mdi:movie-open"></span> Collection
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span class="iconify" data-icon="mdi:star-outline"></span> Ratings
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span class="iconify" data-icon="mdi:comment-text-outline"></span> Reviews
                                </a>
                            </li>
                            <li class="nav-item">
                                <a
                                    class="nav-link {{ \App\Service\ToolService::isCurrentRoute(route('profile.list.show', [$user->slug, 'liked'])) ? 'active' : '' }}"
                                    href="{{ route('profile.list.show', [$user->slug, 'liked']) }}"
                                >
                                    <span class="iconify" data-icon="mdi:heart-outline"></span> Likes
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span class="iconify" data-icon="mdi:account-group"></span> Network
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    <span class="iconify" data-icon="mdi:chart-bar"></span> Stats
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="profile-content py-4">
        @yield('page_content')
    </div>
@endsection