@extends('layouts.app')

@section('title', __('messages.settings') . ' - ' . __('messages.app_name'))
@section('description', __('messages.settings') . ' - ' . __('messages.app_name'))

@section('content')
@php
    $lang = app()->getLocale();
    $langNames = [
        'ar' => 'العربية',
        'fr' => 'Français',
        'en' => 'English',
    ];
    $playStoreUrl = 'https://play.google.com/store/apps/details?id=com.app.lebuttn';
    $instagramUrl = 'https://www.instagram.com/lebuttn/';
    $facebookUrl = 'https://www.facebook.com/lebuttn/';
@endphp

<div class="bg-[#F5F7FA] min-h-screen">
    {{-- ===== HEADER ===== --}}
    <div class="bg-[#2e8b6b] text-white">
        <div class="flex items-center px-2 pt-3 pb-4">
            <button type="button" onclick="if(history.length>1){history.back()}else{location.href='{{ route('home') }}'}" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/10" aria-label="Back">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="{{ $lang === 'ar' ? 'rotate-180' : '' }}">
                    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
                </svg>
            </button>
            <h1 class="flex-1 text-center font-bold" style="font-size: 18px;">{{ __('messages.settings') }}</h1>
            <div class="w-10"></div>
        </div>
    </div>

    <div class="px-4 pt-4 pb-32">
        {{-- ===== PROFILE SECTION (logged-out state by default; swapped on load if user is in localStorage) ===== --}}
        <div id="profile-card-loggedout" class="rounded-2xl p-4 mb-6" style="background:#E3EDF7;">
            <div class="flex items-center gap-3">
                <div class="w-[50px] h-[50px] rounded-full flex items-center justify-center" style="background:#D0D9E3;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="#9BA5B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="font-bold text-[#374151]" style="font-size: 14px;">{{ __('messages.welcome') }}</div>
                    <div class="text-[#6B7280] truncate" style="font-size: 12px;">{{ __('messages.login_prompt') }}</div>
                </div>
            </div>
            <div class="mt-4 flex gap-3">
                <a href="{{ route('login') }}" class="flex-1 bg-white rounded-[10px] py-3 flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="#2e8b6b"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
                    <span class="text-[#2e8b6b] font-bold" style="font-size: 12px;">{{ __('messages.login') }}</span>
                </a>
                <a href="{{ route('login') }}" class="flex-1 bg-[#2e8b6b] rounded-[10px] py-3 flex items-center justify-center gap-2">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="white"><path d="M18 8c0-3.31-2.69-6-6-6S6 4.69 6 8c0 3.31 2.69 6 6 6s6-2.69 6-6zm-2 0c0 2.21-1.79 4-4 4s-4-1.79-4-4 1.79-4 4-4 4 1.79 4 4zm4 12v-2c0-2.66-5.33-4-8-4s-8 1.34-8 4v2h16zm-14 0v-.02c.22-.72 3.31-2 6-2 2.7 0 5.8 1.29 6 2.02H4z"/></svg>
                    <span class="text-white font-bold" style="font-size: 12px;">{{ __('messages.new_account') }}</span>
                </a>
            </div>
        </div>

        {{-- Logged-in variant (hidden by default; shown by JS when localStorage has user) --}}
        <div id="profile-card-loggedin" class="hidden rounded-2xl p-4 mb-6" style="background:#E3EDF7;">
            <div class="flex items-center gap-3">
                <div class="w-[50px] h-[50px] rounded-full overflow-hidden flex items-center justify-center" style="background:#D0D9E3;">
                    <img id="profile-avatar" src="" alt="" class="w-full h-full object-cover hidden" onerror="this.classList.add('hidden');this.nextElementSibling.classList.remove('hidden')">
                    <svg id="profile-avatar-placeholder" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="#9BA5B0"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                </div>
                <div class="flex-1 min-w-0">
                    <div id="profile-name" class="font-bold text-[#374151] truncate" style="font-size: 14px;">—</div>
                    <div id="profile-email" class="text-[#6B7280] truncate" style="font-size: 12px;">—</div>
                </div>
            </div>
        </div>

        {{-- ===== SECTION TITLE: GENERAL ===== --}}
        <div class="text-[#6B7280] ps-2 mb-3" style="font-size: 14px;">{{ __('messages.general') }}</div>

        {{-- ===== SETTINGS CARD ===== --}}
        <div class="bg-white rounded-xl overflow-hidden shadow-sm">
            {{-- Language --}}
            <button type="button" onclick="document.getElementById('lang-sheet').classList.remove('hidden')" class="w-full flex items-center px-4 py-3.5 hover:bg-gray-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#6B7280"><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>
                <span class="ms-4 flex-1 text-start text-[#374151]" style="font-size: 13px;">{{ __('messages.language') }}</span>
                <span class="text-[#9CA3AF]" style="font-size: 12px;">{{ $langNames[$lang] ?? $lang }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#9CA3AF" class="ms-2 {{ $lang === 'ar' ? '' : 'rotate-180' }}"><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>
            </button>
            <div class="h-px bg-[#F0F0F0] ms-14"></div>

            {{-- Privacy policy --}}
            <a href="{{ route('privacy.policy') }}" class="w-full flex items-center px-4 py-3.5 hover:bg-gray-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#6B7280"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
                <span class="ms-4 flex-1 text-[#374151]" style="font-size: 13px;">{{ __('messages.privacy_policy') }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#9CA3AF" class="{{ $lang === 'ar' ? '' : 'rotate-180' }}"><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>
            </a>
            <div class="h-px bg-[#F0F0F0] ms-14"></div>

            {{-- Terms & conditions --}}
            <a href="{{ route('terms') }}" class="w-full flex items-center px-4 py-3.5 hover:bg-gray-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#6B7280"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
                <span class="ms-4 flex-1 text-[#374151]" style="font-size: 13px;">{{ __('messages.terms_conditions') }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#9CA3AF" class="{{ $lang === 'ar' ? '' : 'rotate-180' }}"><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>
            </a>
            <div class="h-px bg-[#F0F0F0] ms-14"></div>

            {{-- Contact us --}}
            <a href="{{ route('contact') }}" class="w-full flex items-center px-4 py-3.5 hover:bg-gray-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#6B7280"><path d="M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z"/></svg>
                <span class="ms-4 flex-1 text-[#374151]" style="font-size: 13px;">{{ __('messages.contact_us') }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#9CA3AF" class="{{ $lang === 'ar' ? '' : 'rotate-180' }}"><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>
            </a>
            <div class="h-px bg-[#F0F0F0] ms-14"></div>

            {{-- Rate app --}}
            <a href="{{ $playStoreUrl }}" target="_blank" rel="noopener" class="w-full flex items-center px-4 py-3.5 hover:bg-gray-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#6B7280"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                <span class="ms-4 flex-1 text-[#374151]" style="font-size: 13px;">{{ __('messages.rate_app') }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#9CA3AF" class="{{ $lang === 'ar' ? '' : 'rotate-180' }}"><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>
            </a>
            <div class="h-px bg-[#F0F0F0] ms-14"></div>

            {{-- Clear cache --}}
            <button type="button" onclick="clearAppCache()" class="w-full flex items-center px-4 py-3.5 hover:bg-gray-50">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#6B7280"><path d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"/></svg>
                <span class="ms-4 flex-1 text-start text-[#374151]" style="font-size: 13px;">{{ __('messages.clear_cache') }}</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#9CA3AF" class="{{ $lang === 'ar' ? '' : 'rotate-180' }}"><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>
            </button>
        </div>

        {{-- ===== LOGOUT CARD (hidden by default; shown by JS when signed in) ===== --}}
        <button type="button" id="logout-btn" onclick="logoutUser()" class="hidden w-full mt-2 flex items-center px-4 py-3.5 rounded-xl bg-white shadow-sm">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#EF4444"><path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/></svg>
            <span class="ms-4 flex-1 text-start font-bold" style="font-size: 13px; color: #EF4444;">{{ __('messages.logout') }}</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="#9CA3AF" class="{{ $lang === 'ar' ? '' : 'rotate-180' }}"><path d="M11.67 3.87L9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"/></svg>
        </button>

        {{-- ===== FOLLOW US ===== --}}
        <div class="text-[#6B7280] ps-2 mt-6 mb-3" style="font-size: 14px;">{{ __('messages.follow_us') }}</div>

        {{-- Instagram --}}
        <a href="{{ $instagramUrl }}" target="_blank" rel="noopener" class="block w-full py-3.5 rounded-xl mb-3 flex items-center justify-center gap-2" style="background: linear-gradient(135deg, #833AB4 0%, #E1306C 50%, #F77737 100%);">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.3 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.3 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.3-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.8c.1-1.2.3-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4C8.4 2.2 8.8 2.2 12 2.2zm0 2.2c-3.2 0-3.5 0-4.8.1-1.1.1-1.7.2-2.1.4-.5.2-.9.4-1.3.8-.4.4-.6.8-.8 1.3-.2.4-.3 1-.4 2.1 0 1.3-.1 1.6-.1 4.8s0 3.5.1 4.8c.1 1.1.2 1.7.4 2.1.2.5.4.9.8 1.3.4.4.8.6 1.3.8.4.2 1 .3 2.1.4 1.3.1 1.6.1 4.8.1s3.5 0 4.8-.1c1.1-.1 1.7-.2 2.1-.4.5-.2.9-.4 1.3-.8.4-.4.6-.8.8-1.3.2-.4.3-1 .4-2.1.1-1.3.1-1.6.1-4.8s0-3.5-.1-4.8c-.1-1.1-.2-1.7-.4-2.1-.2-.5-.4-.9-.8-1.3-.4-.4-.8-.6-1.3-.8-.4-.2-1-.3-2.1-.4-1.3-.1-1.6-.1-4.8-.1zm0 3.7c2.2 0 3.9 1.8 3.9 3.9s-1.8 3.9-3.9 3.9-3.9-1.8-3.9-3.9 1.8-3.9 3.9-3.9zm0 6.5c1.4 0 2.6-1.1 2.6-2.6s-1.1-2.6-2.6-2.6-2.6 1.1-2.6 2.6 1.1 2.6 2.6 2.6zm5-6.6c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9z"/></svg>
            <span class="text-white font-bold" style="font-size: 14px;">Instagram</span>
        </a>

        {{-- Facebook --}}
        <a href="{{ $facebookUrl }}" target="_blank" rel="noopener" class="block w-full py-3.5 rounded-xl flex items-center justify-center gap-2" style="background:#1877F2;">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
            <span class="text-white font-bold" style="font-size: 14px;">Facebook</span>
        </a>
    </div>
</div>

{{-- ===== LANGUAGE BOTTOM SHEET ===== --}}
<div id="lang-sheet" class="hidden fixed inset-0 z-50" onclick="if(event.target===this)this.classList.add('hidden')">
    <div class="absolute inset-0 bg-black/40"></div>
    <div class="absolute bottom-0 left-0 right-0 bg-white rounded-t-2xl pt-3 pb-6 px-4">
        <div class="w-10 h-1 bg-gray-300 rounded-full mx-auto mb-4"></div>
        <h3 class="text-center font-bold text-black mb-3" style="font-size: 16px;">{{ __('messages.language') }}</h3>
        @foreach(['ar' => 'العربية', 'fr' => 'Français', 'en' => 'English'] as $code => $label)
            <a href="{{ route('locale.switch', $code) }}" class="flex items-center px-3 py-3 rounded-lg hover:bg-gray-50">
                @if($lang === $code)
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="#2e8b6b"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>
                @else
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="#9CA3AF"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
                @endif
                <span class="ms-3 text-black" style="font-size: 14px;">{{ $label }}</span>
            </a>
        @endforeach
    </div>
</div>

@push('scripts')
<script>
function clearAppCache() {
    try {
        localStorage.clear();
        sessionStorage.clear();
        if ('caches' in window) {
            caches.keys().then(keys => keys.forEach(k => caches.delete(k)));
        }
        alert('{{ __('messages.cache_cleared') }}');
    } catch (e) {
        console.error(e);
    }
}

// Swap profile card based on localStorage user
(function () {
    try {
        const raw = localStorage.getItem('lebuttn_user');
        if (!raw) return;
        const user = JSON.parse(raw);
        if (!user || !user.uid) return;

        document.getElementById('profile-card-loggedout')?.classList.add('hidden');
        const card = document.getElementById('profile-card-loggedin');
        card?.classList.remove('hidden');

        const nameEl = document.getElementById('profile-name');
        const emailEl = document.getElementById('profile-email');
        if (nameEl) nameEl.textContent = user.name || user.email || '—';
        if (emailEl) emailEl.textContent = user.email || '';

        if (user.photo) {
            const img = document.getElementById('profile-avatar');
            const ph = document.getElementById('profile-avatar-placeholder');
            if (img && ph) {
                img.src = user.photo;
                img.classList.remove('hidden');
                ph.classList.add('hidden');
            }
        }

        document.getElementById('logout-btn')?.classList.remove('hidden');
    } catch (e) {
        console.error('[settings] user parse error', e);
    }
})();
</script>

<script type="module">
    import { initializeApp } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js";
    import { getAuth, signOut } from "https://www.gstatic.com/firebasejs/10.14.1/firebase-auth.js";

    const firebaseConfig = {
        apiKey: "AIzaSyAzMbCMTgmqkbk6_rDOnnVNigysAs3stj8",
        authDomain: "lebuttn-4a213.firebaseapp.com",
        projectId: "lebuttn-4a213",
        storageBucket: "lebuttn-4a213.firebasestorage.app",
        messagingSenderId: "720826047492",
        appId: "1:720826047492:web:14446a49293333bd066951",
        measurementId: "G-SBFVNZFPZ0"
    };

    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);

    window.logoutUser = async function () {
        if (!confirm('{{ __('messages.logout_confirm') }}')) return;
        try { await signOut(auth); } catch (_) {}
        try { localStorage.removeItem('lebuttn_user'); } catch (_) {}
        location.href = '{{ route('home') }}';
    };
</script>
@endpush
@endsection