@extends('layouts.app')

@section('body')
<div class="min-h-screen flex">
    @include('partials.user-sidebar')

    <div class="flex-1 flex flex-col min-w-0">
        <header class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
            <button id="sidebar-toggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
            <h1 class="text-lg font-semibold">@yield('page-title', 'Dashboard')</h1>
            <div class="flex items-center gap-4">
                <div class="text-right">
                    <p class="text-xs text-gray-500">{{ __('Balance') }}</p>
                    <p class="font-bold text-indigo-600">{{ currency(auth()->user()->balance) }}</p>
                </div>
                <a href="{{ route('user.wallet') }}" class="px-3 py-1.5 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">{{ __('Add Funds') }}</a>
            </div>
        </header>

        <main class="flex-1 p-6 overflow-y-auto">
            @if(session('success'))
                <div class="mb-4 p-4 bg-green-50 border border-green-200 text-green-700 rounded-lg">{{ session('success') }}</div>
            @endif
            @if(session('error'))
                <div class="mb-4 p-4 bg-red-50 border border-red-200 text-red-700 rounded-lg">{{ session('error') }}</div>
            @endif
            @if(session('info'))
                <div class="mb-4 p-4 bg-blue-50 border border-blue-200 text-blue-700 rounded-lg">{{ session('info') }}</div>
            @endif

            @yield('content')
        </main>
    </div>
</div>

<script>
document.getElementById('sidebar-toggle')?.addEventListener('click', function() {
    document.getElementById('user-sidebar')?.classList.toggle('-translate-x-full');
});
</script>
@endsection