@extends('layouts.app')

@php
    $authUser = auth()->user();
    $avatar = trim((string) ($authUser?->avatar ?? ''));
    $avatarSrc = $avatar !== ''
        ? (preg_match('/^https?:\/\//', $avatar) ? $avatar : asset($avatar))
        : '';
    $userInitial = strtoupper(substr(trim((string) ($authUser?->name ?? 'N')), 0, 1)) ?: 'N';

    $firstName = old('first_name', $authUser?->first_name);
    $lastName = old('last_name', $authUser?->last_name);
    if (empty($firstName) && empty($lastName) && !empty($authUser?->name)) {
        $parts = explode(' ', trim($authUser->name), 2);
        $firstName = $parts[0] ?? '';
        $lastName = $parts[1] ?? '';
    }
    if (empty($firstName)) $firstName = 'Naeem';
    if (empty($lastName)) $lastName = 'Ahmed';

    $dobRaw = $authUser?->dob ? $authUser->dob->format('Y-m-d') : '2026-05-20';
    $dobDisplay = $authUser?->dob ? $authUser->dob->format('M.d,Y') : 'May.20,2026';
    $genderVal = strtolower((string) ($authUser?->gender ?: 'male'));
    $genderDisplay = ucfirst($genderVal === 'female' ? 'Female' : 'Male');
    $showContact = (bool) ($authUser?->show_contact_to_cosubscribers ?? false);
    $phoneDisplay = $authUser?->phone ? $authUser->phone : 'Your phone number';
@endphp

@section('content')
<style>
    .profile-container-wrapper {
        max-width: 1180px;
        margin: 0 auto;
        padding: 2rem 1.5rem 4rem;
        font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    .profile-main-title {
        font-size: 2.2rem;
        font-weight: 800;
        color: #111;
        margin-bottom: 1.5rem;
        letter-spacing: -0.02em;
    }

    .profile-avatar-row {
        display: flex;
        align-items: center;
        gap: 1.2rem;
        margin-bottom: 2.5rem;
    }

    .profile-avatar-circle {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: #0284c7;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: 700;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
        transition: transform 0.2s ease;
    }

    .profile-avatar-circle:hover {
        transform: scale(1.04);
    }

    .profile-avatar-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
    }

    .profile-avatar-hint {
        color: #4b5563;
        font-size: 0.98rem;
        font-weight: 500;
    }

    .profile-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.8rem;
        align-items: start;
    }

    .profile-card {
        background: #ffffff;
        border-radius: 20px;
        border: 1px solid #f1f3f5;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
        padding: 2rem 2.2rem;
        transition: box-shadow 0.25s ease;
    }

    .profile-card:hover {
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.05);
    }

    .profile-card-title {
        font-size: 1.35rem;
        font-weight: 800;
        color: #111;
        margin-bottom: 1.8rem;
        letter-spacing: -0.01em;
    }

    .profile-info-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.15rem 0;
        border-bottom: 1px solid #f3f4f6;
    }

    .profile-info-row:last-child {
        border-bottom: none;
    }

    .profile-info-label-val {
        font-size: 1.05rem;
        font-weight: 700;
        color: #1f2937;
    }

    .profile-info-subtext {
        font-size: 0.88rem;
        color: #9ca3af;
        margin-top: 0.2rem;
        font-weight: 500;
    }

    .profile-edit-btn {
        background: transparent;
        border: none;
        color: #111;
        font-size: 0.98rem;
        font-weight: 700;
        text-decoration: underline;
        cursor: pointer;
        padding: 0.3rem 0.5rem;
        border-radius: 6px;
        transition: color 0.2s ease, background 0.2s ease;
    }

    .profile-edit-btn:hover {
        color: #c98e4a;
    }

    .profile-chevron-btn {
        background: transparent;
        border: none;
        color: #111;
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        padding: 0.3rem;
    }

    /* Edit Form Expansion Block */
    .profile-edit-box {
        background: #fafafa;
        border: 1px solid #eaeaea;
        border-radius: 16px;
        padding: 1.4rem 1.4rem;
        margin: 0.8rem 0;
        display: none;
        animation: fadeIn 0.25s ease-in-out;
    }

    .profile-edit-box.active {
        display: block;
    }

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

    .profile-inline-form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
        align-items: center;
        margin-bottom: 1.2rem;
    }

    .profile-input-field {
        width: 100%;
        min-height: 48px;
        padding: 0.75rem 1.1rem;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #ffffff;
        font-size: 1.05rem;
        font-weight: 700;
        color: #111;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .profile-input-field:focus {
        border-color: #c98e4a;
        box-shadow: 0 0 0 3px rgba(201, 142, 74, 0.15);
    }

    .profile-select-field {
        width: 100%;
        min-height: 48px;
        padding: 0.75rem 1.1rem;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #ffffff;
        font-size: 1.05rem;
        font-weight: 700;
        color: #111;
        outline: none;
        cursor: pointer;
    }

    .profile-select-field:focus {
        border-color: #c98e4a;
        box-shadow: 0 0 0 3px rgba(201, 142, 74, 0.15);
    }

    .profile-btn-save {
        background: #c98e4a;
        color: #ffffff;
        font-size: 1.05rem;
        font-weight: 800;
        padding: 0.75rem 2.2rem;
        border-radius: 12px;
        border: none;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(201, 142, 74, 0.28);
        transition: transform 0.18s ease, background 0.18s ease;
    }

    .profile-btn-save:hover {
        background: #b57a37;
        transform: translateY(-1px);
    }

    .profile-btn-cancel {
        color: #111;
        font-size: 1.05rem;
        font-weight: 800;
        text-decoration: underline;
        background: transparent;
        border: none;
        cursor: pointer;
        margin-left: 1.2rem;
    }

    /* iOS Switch Toggle */
    .switch-toggle {
        position: relative;
        display: inline-block;
        width: 52px;
        height: 28px;
    }

    .switch-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider-round {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #e5e7eb;
        transition: .3s;
        border-radius: 34px;
    }

    .slider-round:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    }

    input:checked + .slider-round {
        background-color: #c98e4a;
    }

    input:checked + .slider-round:before {
        transform: translateX(24px);
    }

    @media (max-width: 868px) {
        .profile-cards-grid {
            grid-template-columns: 1fr;
        }

        .profile-inline-form-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="profile-container-wrapper">
    <h1 class="profile-main-title">Profile</h1>

    <!-- Hidden Avatar File Form -->
    <form id="avatarForm" method="POST" action="{{ route('profile.update') }}" enctype="multipart/form-data" class="d-none">
        @csrf
        @method('PATCH')
        <input type="file" id="avatarInput" name="avatar" accept="image/*">
    </form>

    <!-- Avatar Header -->
    <div class="profile-avatar-row">
        <div class="profile-avatar-circle" onclick="document.getElementById('avatarInput').click();" title="Click to change profile picture">
            @if($avatarSrc !== '')
                <img src="{{ $avatarSrc }}" alt="{{ $authUser?->name }}" class="profile-avatar-img">
            @else
                <span>{{ $userInitial }}</span>
            @endif
        </div>
        <div class="profile-avatar-hint">
            The profile picture reassures other users in a group.
        </div>
    </div>

    <!-- Cards Grid -->
    <div class="profile-cards-grid">
        
        <!-- CARD 1: Personal Info -->
        <div class="profile-card">
            <h2 class="profile-card-title">Personal info</h2>

            <!-- Name Row (Default View & Inline Edit View) -->
            <div id="nameRowDefault" class="profile-info-row">
                <div class="profile-info-label-val" id="nameDisplayVal">
                    {{ $firstName }} {{ $lastName }}
                </div>
                <button type="button" class="profile-edit-btn" onclick="toggleEditBox('nameEditBox', true);">Edit</button>
            </div>

            <!-- Inline Edit Form: Name -->
            <div id="nameEditBox" class="profile-edit-box">
                <form onsubmit="saveProfileField(event, 'name');">
                    <div class="profile-inline-form-grid">
                        <input type="text" id="firstNameInput" class="profile-input-field" value="{{ $firstName }}" placeholder="First Name" required>
                        <input type="text" id="lastNameInput" class="profile-input-field" value="{{ $lastName }}" placeholder="Last Name" required>
                    </div>
                    <div class="d-flex align-items-center">
                        <button type="submit" class="profile-btn-save">Save</button>
                        <button type="button" class="profile-btn-cancel" onclick="toggleEditBox('nameEditBox', false);">Cancel</button>
                    </div>
                </form>
            </div>

            <!-- Date of Birth Row -->
            <div id="dobRowDefault" class="profile-info-row">
                <div class="profile-info-label-val" id="dobDisplayVal">
                    {{ $dobDisplay }}
                </div>
                <button type="button" class="profile-edit-btn" onclick="toggleEditBox('dobEditBox', true);">Edit</button>
            </div>

            <!-- Inline Edit Form: DOB -->
            <div id="dobEditBox" class="profile-edit-box">
                <form onsubmit="saveProfileField(event, 'dob');">
                    <div class="mb-3">
                        <input type="date" id="dobInput" class="profile-input-field" value="{{ $dobRaw }}" required>
                    </div>
                    <div class="d-flex align-items-center">
                        <button type="submit" class="profile-btn-save">Save</button>
                        <button type="button" class="profile-btn-cancel" onclick="toggleEditBox('dobEditBox', false);">Cancel</button>
                    </div>
                </form>
            </div>

            <!-- Gender Row (Male & Female only) -->
            <div id="genderRowDefault" class="profile-info-row">
                <div class="profile-info-label-val" id="genderDisplayVal">
                    {{ $genderDisplay }}
                </div>
                <button type="button" class="profile-edit-btn" onclick="toggleEditBox('genderEditBox', true);">Edit</button>
            </div>

            <!-- Inline Edit Form: Gender -->
            <div id="genderEditBox" class="profile-edit-box">
                <form onsubmit="saveProfileField(event, 'gender');">
                    <div class="mb-3">
                        <label class="form-label font-weight-bold" style="font-size: 0.95rem; font-weight:700; color:#374151; margin-bottom: 0.5rem; display:block;">Select Gender</label>
                        <select id="genderInput" class="profile-select-field">
                            <option value="male" @selected($genderVal === 'male')>Male</option>
                            <option value="female" @selected($genderVal === 'female')>Female</option>
                        </select>
                    </div>
                    <div class="d-flex align-items-center">
                        <button type="submit" class="profile-btn-save">Save</button>
                        <button type="button" class="profile-btn-cancel" onclick="toggleEditBox('genderEditBox', false);">Cancel</button>
                    </div>
                </form>
            </div>

        </div>

        <!-- CARD 2: Contact Information -->
        <div class="profile-card">
            <h2 class="profile-card-title">Contact information</h2>

            <!-- Email Row -->
            <div id="emailRowDefault" class="profile-info-row">
                <div>
                    <div class="profile-info-label-val" id="emailDisplayVal">
                        {{ $authUser?->email }}
                    </div>
                </div>
                <button type="button" class="profile-chevron-btn" onclick="toggleEditBox('emailEditBox', true);" title="Edit Email">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
            </div>

            <!-- Inline Edit Form: Email -->
            <div id="emailEditBox" class="profile-edit-box">
                <form onsubmit="saveProfileField(event, 'email');">
                    <div class="mb-3">
                        <input type="email" id="emailInput" class="profile-input-field" value="{{ $authUser?->email }}" required>
                    </div>
                    <div class="d-flex align-items-center">
                        <button type="submit" class="profile-btn-save">Save</button>
                        <button type="button" class="profile-btn-cancel" onclick="toggleEditBox('emailEditBox', false);">Cancel</button>
                    </div>
                </form>
            </div>

            <!-- Show my email to co-subscribers (Toggle Switch) -->
            <div class="profile-info-row">
                <div>
                    <div class="profile-info-subtext" style="color: #6b7280; font-size: 1rem; font-weight: 500;">
                        Show my email to co-subscribers
                    </div>
                </div>
                <div>
                    <label class="switch-toggle">
                        <input type="checkbox" id="showContactToggle" @checked($showContact) onchange="updateContactToggle(this.checked);">
                        <span class="slider-round"></span>
                    </label>
                </div>
            </div>

            <!-- Phone Number Row -->
            <div id="phoneRowDefault" class="profile-info-row">
                <div>
                    <div class="profile-info-subtext" style="color: #9ca3af; font-size: 0.95rem;" id="phoneDisplayVal">
                        {{ $phoneDisplay }}
                    </div>
                </div>
                <button type="button" class="profile-chevron-btn" onclick="toggleEditBox('phoneEditBox', true);" title="Edit Phone Number">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
            </div>

            <!-- Inline Edit Form: Phone -->
            <div id="phoneEditBox" class="profile-edit-box">
                <form onsubmit="saveProfileField(event, 'phone');">
                    <div class="mb-3">
                        <input type="text" id="phoneInput" class="profile-input-field" value="{{ $authUser?->phone }}" placeholder="Enter phone number" required>
                    </div>
                    <div class="d-flex align-items-center">
                        <button type="submit" class="profile-btn-save">Save</button>
                        <button type="button" class="profile-btn-cancel" onclick="toggleEditBox('phoneEditBox', false);">Cancel</button>
                    </div>
                </form>
            </div>

        </div>

    </div>
</div>

<script>
    const updateProfileRoute = "{{ route('profile.update') }}";
    const csrfToken = "{{ csrf_token() }}";

    function toggleEditBox(boxId, show) {
        const box = document.getElementById(boxId);
        if (!box) return;
        if (show) {
            box.classList.add('active');
        } else {
            box.classList.remove('active');
        }
    }

    function saveProfileField(event, fieldType) {
        event.preventDefault();
        const payload = {
            _token: csrfToken,
            _method: 'PATCH'
        };

        if (fieldType === 'name') {
            payload.first_name = document.getElementById('firstNameInput').value;
            payload.last_name = document.getElementById('lastNameInput').value;
        } else if (fieldType === 'dob') {
            payload.dob = document.getElementById('dobInput').value;
        } else if (fieldType === 'gender') {
            payload.gender = document.getElementById('genderInput').value;
        } else if (fieldType === 'email') {
            payload.email = document.getElementById('emailInput').value;
        } else if (fieldType === 'phone') {
            payload.phone = document.getElementById('phoneInput').value;
        }

        fetch(updateProfileRoute, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(payload)
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                if (fieldType === 'name') {
                    document.getElementById('nameDisplayVal').textContent = (data.user.first_name || '') + ' ' + (data.user.last_name || '');
                    toggleEditBox('nameEditBox', false);
                } else if (fieldType === 'dob') {
                    document.getElementById('dobDisplayVal').textContent = data.user.dob || 'Not set';
                    toggleEditBox('dobEditBox', false);
                } else if (fieldType === 'gender') {
                    document.getElementById('genderDisplayVal').textContent = data.user.gender || 'Not specified';
                    toggleEditBox('genderEditBox', false);
                } else if (fieldType === 'email') {
                    document.getElementById('emailDisplayVal').textContent = data.user.email;
                    toggleEditBox('emailEditBox', false);
                } else if (fieldType === 'phone') {
                    document.getElementById('phoneDisplayVal').textContent = data.user.phone || 'Your phone number';
                    toggleEditBox('phoneEditBox', false);
                }
            } else {
                alert(data.message || 'Error updating profile');
            }
        })
        .catch(err => {
            console.error(err);
            alert('Something went wrong. Please try again.');
        });
    }

    function updateContactToggle(checked) {
        fetch(updateProfileRoute, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': csrfToken,
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({
                _token: csrfToken,
                _method: 'PATCH',
                show_contact_to_cosubscribers: checked ? 1 : 0
            })
        })
        .then(res => res.json())
        .then(data => {
            console.log('Contact preference updated:', data);
        })
        .catch(err => {
            console.error(err);
        });
    }

    // Avatar upload preview and submit
    document.getElementById('avatarInput').addEventListener('change', function() {
        if (this.files && this.files[0]) {
            document.getElementById('avatarForm').submit();
        }
    });
</script>
@endsection