@extends('layouts.nova')

@section('content')

<div class="min-h-screen bg-deep text-white py-12">

    <!-- Container -->
    <div class="max-w-5xl mx-auto px-4">

        <!-- Page Title -->
        <h1 class="text-3xl font-semibold mb-8">
            Edit Profile
        </h1>

        @if ($errors->any())
            <div class="mb-4 rounded-lg bg-red-700/10 border border-red-700/20 p-3 text-sm text-red-300">
                <div class="font-semibold mb-2">Please fix the following errors:</div>
                <ul class="list-disc pl-5 space-y-1">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif


        <!-- ================= Profile Card ================= -->
        <div class="bg-panel rounded-xl shadow-lg p-8 mb-10">

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

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

                    <!-- LEFT COLUMN -->
                    <div class="space-y-5">

                        <!-- Email -->
                        <div>
                            <label class="form-label">Email</label>
                            <input type="email" name="email"
                                   class="form-input"
                                   value="{{ old('email', auth()->user()->email) }}">
                        </div>

                        <!-- Username -->
                        <div>
                            <label class="form-label">Username</label>
                            <input type="text" name="username"
                                class="form-input"
                                value="{{ old('username', auth()->user()->username) }}"
                                readonly>
                        </div>

                        <!-- Real Name -->
                        <div>
                            <label class="form-label">Real Name</label>
                            <input type="text" name="name"
                                   class="form-input"
                                   value="{{ old('name', auth()->user()->name) }}">
                        </div>

                        <!-- Homepage -->
                        <div>
                            <label class="form-label">Homepage</label>
                            <input type="url" name="homepage"
                                   class="form-input"
                                   placeholder="https://"
                                   value="{{ old('homepage', auth()->user()->homepage ?? auth()->user()->website ?? '') }}">
                        </div>

                        <!-- Birthday -->
                        <div>
                            <label class="form-label">Birthday</label>

                            <div class="grid grid-cols-3 gap-3">
                                @php
                                    $currentYear = date('Y');
                                    $startYear = $currentYear - 100;
                                    $months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
                                @endphp

                                <select name="day" class="form-input" aria-label="Day">
                                    <option value="">Day</option>
                                    @for($d = 1; $d <= 31; $d++)
                                        <option value="{{ $d }}" @if(intval(old('day', $birthDay)) == $d) selected @endif>{{ $d }}</option>
                                    @endfor
                                </select>

                                <select name="month" class="form-input" aria-label="Month">
                                    <option value="">Month</option>
                                    @foreach($months as $idx => $m)
                                        @php $val = $idx + 1; @endphp
                                        <option value="{{ $val }}" @if(intval(old('month', $birthMonth)) == $val) selected @endif>{{ $m }}</option>
                                    @endforeach
                                </select>

                                <select name="year" class="form-input" aria-label="Year">
                                    <option value="">Year</option>
                                    @for($y = $currentYear; $y >= $startYear; $y--)
                                        <option value="{{ $y }}" @if(intval(old('year', $birthYear)) == $y) selected @endif>{{ $y }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>

                        <!-- Gender -->
                        <div>
                            <label class="form-label">Gender</label>

                            <div class="flex gap-6 mt-2 text-soft">
                                <label><input type="radio" name="gender" value="m" @if(old('gender', strtolower(auth()->user()->gender ?? '')) == 'm') checked @endif> Male</label>
                                <label><input type="radio" name="gender" value="f" @if(old('gender', strtolower(auth()->user()->gender ?? '')) == 'f') checked @endif> Female</label>
                                <label><input type="radio" name="gender" value="x" @if(old('gender', strtolower(auth()->user()->gender ?? '')) == 'x') checked @endif> N/A</label>
                            </div>
                        </div>

                        <!-- Country -->
                        <div>
                            <label class="form-label">Country</label>
                            <input type="text" name="country"
                                class="form-input"
                                value="{{ old('country', auth()->user()->country ?? auth()->user()->country_code ?? '') }}">
                        </div>

                        <!-- Preferences -->
                        <div class="flex gap-6 text-soft">
                            <label>
                                <input type="checkbox" name="mailing" @if(old('mailing', auth()->user()->mlist ?? false)) checked @endif>
                                Mailing List
                            </label>

                            <label>
                                <input type="checkbox" name="notify" @if(old('notify', auth()->user()->friend_upload_notice ?? false)) checked @endif>
                                Upload Notifications
                            </label>
                        </div>

                    </div>


                    <!-- RIGHT COLUMN -->
                    <div class="space-y-5">

                        <!-- Avatar -->
                        <div>
                            <label class="form-label">Avatar</label>
                            <input type="file" name="avatar" class="form-file">
                        </div>

                        <!-- Emoticon -->
                        <div>
                            <label class="form-label">Emoticon</label>
                            <input type="file" name="emoticon" class="form-file">
                        </div>

                        <!-- Personal Picture -->
                        <div>
                            <label class="form-label">Personal Picture</label>
                            <input type="file" name="photo" class="form-file">
                        </div>

                        <!-- About -->
                        <div>
                            <label class="form-label">About Me</label>
                            <textarea name="about" rows="4"
                                      class="form-textarea">{{ old('about', auth()->user()->about ?? auth()->user()->about_me ?? '') }}</textarea>
                        </div>

                        <!-- Signature -->
                        <div>
                            <label class="form-label">Signature</label>
                            <textarea name="signature" rows="3"
                                      class="form-textarea">{{ old('signature', auth()->user()->signature ?? '') }}</textarea>
                        </div>

                        <!-- Description -->
                        <div>
                            <label class="form-label">Description</label>
                            <textarea name="description" rows="4"
                                      class="form-textarea">{{ old('description', auth()->user()->description ?? '') }}</textarea>
                        </div>

                    </div>

                </div>


                <!-- Save Button -->
                <div class="mt-8 text-right">
                    <button type="submit"
                            class="btn-primary">
                        Update Profile
                    </button>
                </div>

            </form>

        </div>


        <!-- ================= PASSWORD CARD ================= -->
        <div class="bg-panel rounded-xl shadow-lg p-8">

            <h2 class="text-xl font-semibold mb-6">
                Change Password
            </h2>

            <form method="POST" action="{{ route('profile.password') }}">
                @csrf
                @method('PUT')

                <div class="space-y-5 max-w-md">

                    <div>
                        <label class="form-label">Current Password</label>
                        <input type="password" name="current_password"
                               class="form-input">
                    </div>

                    <div>
                        <label class="form-label">New Password</label>
                        <input type="password" name="password"
                               class="form-input">
                    </div>

                    <div>
                        <label class="form-label">Repeat Password</label>
                        <input type="password" name="password_confirmation"
                               class="form-input">
                    </div>

                    <button class="btn-secondary">
                        Change Password
                    </button>

                </div>

            </form>

        </div>

    </div>
</div>

@endsection