@extends('layouts.app')

@section('content')
<style>
    body {
        background-color: #141414;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
    }

    .profiles-wrapper {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        animation: fadeIn 1s ease-in-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .profiles-title {
        font-size: 3rem;
        margin-bottom: 40px;
    }

    .profiles-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 30px;
    }

    .profile-card {
        text-decoration: none;
        color: #aaa;
        position: relative;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    .profile-card:hover {
        transform: scale(1.12);
        color: #fff;
    }

    .profile-avatar {
        width: 160px;
        height: 160px;
        border-radius: 8px;
        object-fit: cover;
        border: 3px solid transparent;
        transition: all 0.3s ease;
    }

    .profile-card:hover .profile-avatar {
        border: 3px solid #e50914;
        box-shadow: 0 0 25px rgba(229,9,20,0.8);
    }

    .profile-name {
        margin-top: 10px;
        font-size: 1.2rem;
    }

    .kids-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #e50914;
        padding: 3px 8px;
        font-size: 12px;
        border-radius: 4px;
    }

    .manage-btn {
        margin-top: 40px;
        background: transparent;
        border: 1px solid #aaa;
        color: #aaa;
        padding: 10px 25px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .manage-btn:hover {
        border-color: #fff;
        color: #fff;
    }

    .delete-btn {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: #e50914;
        border: none;
        padding: 5px 10px;
        font-size: 12px;
        cursor: pointer;
        display: none;
    }

    .manage-mode .delete-btn {
        display: block;
    }

    .add-profile {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3rem;
        background: #333;
        color: #aaa;
    }

    .add-profile:hover {
        background: #444;
        color: #fff;
    }

    @media (max-width: 768px) {
        .profile-avatar {
            width: 110px;
            height: 110px;
        }

        .profiles-title {
            font-size: 2rem;
        }
    }
</style>

<div class="profiles-wrapper" id="profilesContainer">
    <h1 class="profiles-title">Who's watching?</h1>

    <div class="profiles-grid">

        @foreach($profiles as $profile)
            <div class="profile-card-wrapper">
                <a href="{{ route('profiles.select', $profile->id) }}" class="profile-card">
                    
                    @if($profile->is_kids)
                        <div class="kids-badge">Kids</div>
                    @endif

                    <img src="{{ asset($profile->avatar) }}" 
     alt="{{ $profile->name }}" 
     class="profile-avatar">
                    >

                    <div class="profile-name">
                        {{ $profile->name }}
                    </div>
                </a>

                <form method="POST" action="{{ route('profiles.destroy', $profile->id) }}">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="delete-btn">Delete</button>
                </form>
            </div>
        @endforeach

        {{-- Add Profile Card --}}
        <a href="{{ route('profiles.create') }}" class="profile-card">
            <div class="profile-avatar add-profile">+</div>
            <div class="profile-name">Add Profile</div>
        </a>

    </div>

    <button class="manage-btn" onclick="toggleManageMode()">
        Manage Profiles
    </button>
</div>

<script>
    function toggleManageMode() {
        document.getElementById('profilesContainer')
            .classList.toggle('manage-mode');
    }
</script>

@endsection