@extends('layouts.app')

@section('content')
<div style="background:#141414; min-height:100vh; color:white; display:flex; align-items:center; justify-content:center;">

    <div style="width:100%; max-width:700px; text-align:center;">

        <h1 style="font-size:38px; font-weight:600; margin-bottom:40px;">
            Add Profile
        </h1>

        @if ($errors->any())
            <div style="color:#ff4d4d; margin-bottom:20px;">
                @foreach ($errors->all() as $error)
                    <div>{{ $error }}</div>
                @endforeach
            </div>
        @endif

        <form action="{{ route('profiles.store') }}" 
              method="POST" 
              enctype="multipart/form-data">
            @csrf

            {{-- Avatar Preview --}}
            <div style="margin-bottom:25px;">
                <img id="avatarPreview"
                     src="https://via.placeholder.com/150"
                     style="width:150px; height:150px; border-radius:10px; object-fit:cover; border:3px solid #333;">
            </div>

            {{-- Profile Name --}}
            <div style="margin-bottom:20px;">
                <input type="text"
                       name="name"
                       placeholder="Profile Name"
                       required
                       style="padding:12px; width:280px; border-radius:6px; border:none; background:#333; color:white;">
            </div>

            {{-- Avatar Upload --}}
            <div style="margin-bottom:20px;">
                <input type="file"
                       name="avatar"
                       accept="image/*"
                       onchange="previewImage(event)"
                       style="color:white;">
            </div>

            {{-- OR Divider --}}
            <div style="margin:25px 0; color:#aaa;">OR</div>

            {{-- Avatar Selection Grid --}}
            <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:30px;">
                @for ($i = 1; $i <= 8; $i++)
                    <img src="{{ asset('default-avatars/avatar'.$i.'.png') }}"
                         onclick="selectAvatar(this)"
                         style="width:100%; border-radius:8px; cursor:pointer; border:2px solid transparent;">
                @endfor
            </div>

            {{-- Hidden input for selected avatar --}}
            <input type="hidden" name="selected_avatar" id="selectedAvatar">

            {{-- Kids Profile --}}
            <div style="margin-bottom:25px;">
                <label style="cursor:pointer;">
                    <input type="checkbox" name="is_kids" value="1">
                    Kids Profile
                </label>
            </div>

            {{-- Submit Button --}}
            <button type="submit"
                    style="background:#e50914; border:none; padding:12px 40px; font-size:16px; border-radius:4px; color:white; cursor:pointer;">
                Create Profile
            </button>

        </form>
    </div>
</div>

<script>
function previewImage(event) {
    const reader = new FileReader();
    reader.onload = function(){
        const output = document.getElementById('avatarPreview');
        output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
}

function selectAvatar(img) {
    document.getElementById('avatarPreview').src = img.src;
    document.getElementById('selectedAvatar').value = img.src;

    document.querySelectorAll('[onclick="selectAvatar(this)"]').forEach(el => {
        el.style.border = "2px solid transparent";
    });

    img.style.border = "2px solid #e50914";
}
</script>
@endsection