@extends('layouts.app')

@section('title', 'Profile')

@section('breadcrumb')
    @include('components.breadcrumb', ['items' => ['Profile' => null]])
@endsection

@section('content')
<div class="max-w-4xl mx-auto space-y-6">
    {{-- Profile Header --}}
    <div class="relative bg-gradient-to-br from-primary-600 to-purple-700 rounded-2xl p-6 lg:p-8 shadow-card overflow-hidden">
        <div class="absolute -top-20 -right-20 w-72 h-72 bg-white/10 rounded-full blur-3xl"></div>
        <div class="relative flex flex-col sm:flex-row items-center gap-5">
            <div class="w-20 h-20 rounded-2xl bg-white/20 backdrop-blur flex items-center justify-center text-3xl font-bold text-white border-2 border-white/30">A</div>
            <div class="text-center sm:text-left">
                <h2 class="text-2xl font-bold text-white">Admin User</h2>
                <p class="text-primary-100 text-sm mt-1">Super Administrator</p>
                <p class="text-primary-100 text-xs mt-2">admin@abcyarn.com • +880 1700-000000</p>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2">
            <x-card title="Personal Information" icon="user">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                    <x-form-input name="name" label="Full Name" icon="user" value="Admin User" required />
                    <x-form-input name="email" label="Email Address" type="email" icon="mail" value="admin@abcyarn.com" required />
                    <x-form-input name="phone" label="Phone Number" icon="phone" value="+880 1700-000000" />
                    <x-form-input name="role" label="Role" type="select" icon="shield" :options="['admin' => 'Super Admin', 'manager' => 'Manager', 'accountant' => 'Accountant']" />
                    <x-form-input name="address" label="Address" type="textarea" icon="map-pin" value="12 Industrial Area, Dhaka" />
                </div>
            </x-card>
        </div>

        <div class="space-y-6">
            <x-card title="Account Stats" icon="bar-chart-3">
                <div class="space-y-3">
                    @foreach([
                        ['label' => 'Total Logins', 'value' => '1,284'],
                        ['label' => 'Entries Created', 'value' => '5,621'],
                        ['label' => 'Reports Generated', 'value' => '342'],
                        ['label' => 'Member Since', 'value' => 'Jan 2024'],
                    ] as $s)
                        <div class="flex justify-between text-sm">
                            <span class="text-slate-500">{{ $s['label'] }}</span>
                            <span class="font-semibold">{{ $s['value'] }}</span>
                        </div>
                    @endforeach
                </div>
            </x-card>

            <x-card title="Change Password" icon="lock">
                <div class="space-y-4">
                    <x-form-input name="current" label="Current Password" type="password" icon="lock" />
                    <x-form-input name="new" label="New Password" type="password" icon="key" />
                    <x-form-input name="confirm" label="Confirm Password" type="password" icon="check" />
                    <x-button variant="primary" icon="save" class="w-full justify-center">Update Password</x-button>
                </div>
            </x-card>
        </div>
    </div>
</div>
@endsection
