@extends('template.basic.layouts.master')

@section('content')
<div class="flex-1 text-gray-100 min-h-screen">
    <div class="container w-full lg:w-5/6 mx-auto px-4 py-6">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
            <div class="flex-1">
                <h3 class="text-lg">
                    <a href="{{ route('user.dashboard') }}" class="inline-flex items-center  text-gray-200 hover:text-white">
                        <i class="bi bi-arrow-left mr-2"></i> Back
                    </a>
                </h3>
            </div>
            <div class="flex-1 text-center text-xl font-normal text-gray-200">Settings</div>
            <div class="flex-1"></div>
        </div>

        <!-- Wallet ID -->
        <div class=" rounded-xl p-4 mb-4 flex justify-between items-center">
            <div>
              <div class="mb-2 text-white font-semibold">Wallet ID</div>
            <div class="text-gray-400 text-sm mb-2 w-1/2">
                Wallet ID is your unique identifier. It is completely individual to you, and it is what you will use to log in and access your wallet. It is NOT a bitcoin address for sending or receiving.
                <div class="text-red-500 mt-1">Do not share your Wallet ID with others.</div>
            </div>  
            </div>
            
            <div class="text-gray-200 font-mono">{{ $user->username }}</div>
        </div>

        <!-- Email -->
        <div class=" rounded-xl p-4 mb-4 flex items-center justify-between border-t border-border-primary">
            <div class="flex items-center space-x-4">
                <div class="text-gray-200">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="#eaecef" viewBox="0 0 24 24" width="24" height="24">
                        <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/>
                    </svg>
                </div>
                <div>
                    <div class="text-gray-200">{{ $user->email }}</div>
                    <div class="text-gray-400 ">
                       
                    </div>
                </div>
            </div>
            @if($user->email_verify != 'yes')
            <button type="button" class="bg-white text-gray-900 px-4 py-2 rounded-lg">Verify</button>
            @endif
        </div>

        <!-- Settings Links -->
        <div class="space-y-4">
            @php
                $settingsLinks = [
                    ['route' => 'user.settings.account.index', 'title' => 'Account', 'desc' => 'Manage your personal information, languages, notifications, themes and more.'],
                    ['route' => 'user.settings.preference.index', 'title' => 'Preference', 'desc' => 'Manage your currency, languages, notifications, themes and more.'],
                    ['route' => 'user.settings.security.index', 'title' => 'Security', 'desc' => 'Manage your account security, manage 2fa, backup phrase.'],
                    ['route' => 'user.support.index', 'title' => 'Customer Support', 'desc' => 'Contact customer support using email, livechat.'],
                    ['route' => 'user.notification.index', 'title' => 'Notifications', 'desc' => 'View all notifications.'],
                ];
            @endphp

            @foreach($settingsLinks as $link)
            <a href="{{ route($link['route']) }}" class="border-t border-border-primary px-4 py-6 flex justify-between items-center transition">
                <div>
                    <div class="text-gray-200 font-semibold">{{ $link['title'] }}</div>
                    <div class="text-gray-400 text-sm">{{ $link['desc'] }}</div>
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#D4C5B9" class="bi bi-box-arrow-up-right" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5"/>
                    <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z"/>
                </svg>
            </a>
            @endforeach
        </div>

        <!-- Footer Links -->
        <div class="mt-6 border-t border-gray-700 pt-4 space-y-2 text-gray-400 text-sm">
            <a href="https://bytswallet.com/about.html" target="_blank" class="hover:text-white block">About</a>
            <a href="https://bytswallet.com/terms.html" target="_blank" class="hover:text-white block">Terms of Service</a>
            <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="hover:text-white block">Log Out</a>
            <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden">{{ csrf_field() }}</form>
        </div>
    </div>
</div>

@endsection