@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="card card-primary card-outline">
                <div class="card-body box-profile">
                    <div class="text-center">
                        <div class="avatar-lg mx-auto mb-3">
                            <div class="avatar-title rounded-circle bg-primary text-white display-4">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </div>
                        </div>
                        <h3 class="profile-username text-center">{{ $user->name }}</h3>
                        <p class="text-muted text-center">{{ $user->role_display }}</p>
                        
                        <div class="text-center mb-3">
                            @if($user->is_active)
                                <span class="badge badge-success badge-lg">Active</span>
                            @else
                                <span class="badge badge-secondary badge-lg">Inactive</span>
                            @endif
                        </div>
                    </div>

                    <ul class="list-group list-group-unbordered mb-3">
                        <li class="list-group-item">
                            <b>Email</b> 
                            <span class="float-right">{{ $user->email }}</span>
                        </li>
                        <li class="list-group-item">
                            <b>Phone</b> 
                            <span class="float-right">{{ $user->phone ?: 'Not provided' }}</span>
                        </li>
                        <li class="list-group-item">
                            <b>Member Since</b> 
                            <span class="float-right">{{ $user->created_at->format('M j, Y') }}</span>
                        </li>
                        <li class="list-group-item">
                            <b>Last Login</b> 
                            <span class="float-right">{{ $user->last_login_at ? $user->last_login_at->format('M j, Y g:i A') : 'Never' }}</span>
                        </li>
                        <li class="list-group-item">
                            <b>Email Verified</b> 
                            <span class="float-right">
                                @if($user->email_verified_at)
                                    <span class="badge badge-success">Yes</span>
                                @else
                                    <span class="badge badge-warning">No</span>
                                @endif
                            </span>
                        </li>
                    </ul>

                    <div class="row">
                        <div class="col-12">
                            <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-primary btn-block">
                                <i class="fas fa-edit"></i> Edit User
                            </a>
                        </div>
                    </div>

                    @if($user->id !== auth()->id())
                        <div class="row mt-2">
                            <div class="col-6">
                                <form method="POST" action="{{ route('admin.users.toggle-status', $user) }}">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="btn btn-{{ $user->is_active ? 'warning' : 'success' }} btn-block">
                                        <i class="fas fa-{{ $user->is_active ? 'user-slash' : 'user-check' }}"></i>
                                        {{ $user->is_active ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                            </div>
                            <div class="col-6">
                                <form method="POST" action="{{ route('admin.users.send-password-reset', $user) }}">
                                    @csrf
                                    <button type="submit" class="btn btn-info btn-block">
                                        <i class="fas fa-key"></i> Reset Password
                                    </button>
                                </form>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Notification Preferences -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Notification Preferences</h3>
                </div>
                <div class="card-body">
                    @if($user->notificationPreferences)
                        <div class="row">
                            <div class="col-12">
                                <strong>Alert Types:</strong>
                                <ul class="list-unstyled ml-3">
                                    <li><i class="fas fa-{{ $user->notificationPreferences->frost_alerts ? 'check text-success' : 'times text-danger' }}"></i> Frost Alerts</li>
                                    <li><i class="fas fa-{{ $user->notificationPreferences->freeze_alerts ? 'check text-success' : 'times text-danger' }}"></i> Freeze Alerts</li>
                                    <li><i class="fas fa-{{ $user->notificationPreferences->weather_alerts ? 'check text-success' : 'times text-danger' }}"></i> Weather Alerts</li>
                                    <li><i class="fas fa-{{ $user->notificationPreferences->system_alerts ? 'check text-success' : 'times text-danger' }}"></i> System Alerts</li>
                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <strong>Channels:</strong>
                                <ul class="list-unstyled ml-3">
                                    <li><i class="fas fa-{{ $user->notificationPreferences->email_alerts ? 'check text-success' : 'times text-danger' }}"></i> Email</li>
                                    <li><i class="fas fa-{{ $user->notificationPreferences->sms_alerts ? 'check text-success' : 'times text-danger' }}"></i> SMS</li>
                                    <li><i class="fas fa-{{ $user->notificationPreferences->in_app_alerts ? 'check text-success' : 'times text-danger' }}"></i> In-App</li>
                                </ul>
                            </div>
                        </div>
                    @else
                        <p class="text-muted">No notification preferences set. Using default settings.</p>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <!-- Recent Notifications -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Recent Notifications</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    @if($recentNotifications->count() > 0)
                        <div class="timeline timeline-inverse">
                            @foreach($recentNotifications as $notification)
                                <div class="time-label">
                                    <span class="bg-info">
                                        {{ $notification->created_at->format('M j, Y') }}
                                    </span>
                                </div>
                                <div>
                                    <i class="fas fa-bell bg-primary"></i>
                                    <div class="timeline-item">
                                        <span class="time">
                                            <i class="fas fa-clock"></i> {{ $notification->created_at->format('g:i A') }}
                                        </span>
                                        <h3 class="timeline-header">
                                            @if(isset($notification->data['title']))
                                                {{ $notification->data['title'] }}
                                            @else
                                                {{ class_basename($notification->type) }}
                                            @endif
                                        </h3>
                                        <div class="timeline-body">
                                            @if(isset($notification->data['message']))
                                                {{ $notification->data['message'] }}
                                            @else
                                                {{ $notification->data['body'] ?? 'No message content' }}
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <div>
                                <i class="fas fa-clock bg-gray"></i>
                            </div>
                        </div>
                    @else
                        <p class="text-muted">No recent notifications.</p>
                    @endif
                </div>
            </div>

            <!-- Role Permissions -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Role Permissions</h3>
                </div>
                <div class="card-body">
                    @php
                        $permissions = match($user->role) {
                            'admin' => [
                                'User Management' => 'Full access to create, edit, and delete users',
                                'System Settings' => 'Can modify system-wide configurations',
                                'Data Access' => 'Access to all data and reports',
                                'Notification Management' => 'Can configure system notifications',
                                'Field Management' => 'Full access to all field operations'
                            ],
                            'manager' => [
                                'User Management' => 'Can create and edit users (except admins)',
                                'Data Access' => 'Access to all operational data',
                                'Field Management' => 'Can manage field operations and assignments',
                                'Reports' => 'Access to all reports and analytics'
                            ],
                            'worker' => [
                                'Field Updates' => 'Can update field data and conditions',
                                'Task Management' => 'Can view and update assigned tasks',
                                'Data Entry' => 'Can enter field observations and measurements',
                                'Notifications' => 'Receives relevant field alerts'
                            ],
                            'user' => [
                                'View Data' => 'Can view public field data and reports',
                                'Notifications' => 'Receives general notifications',
                                'Profile Management' => 'Can update own profile and preferences'
                            ],
                            default => []
                        };
                    @endphp

                    <div class="row">
                        @foreach($permissions as $permission => $description)
                            <div class="col-md-6 mb-3">
                                <div class="border rounded p-3">
                                    <h6 class="text-primary">{{ $permission }}</h6>
                                    <p class="text-muted mb-0 small">{{ $description }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Actions -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Quick Actions</h3>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-primary btn-block">
                                <i class="fas fa-edit"></i> Edit User Details
                            </a>
                        </div>
                        <div class="col-md-6">
                            <form method="POST" action="{{ route('admin.users.send-password-reset', $user) }}">
                                @csrf
                                <button type="submit" class="btn btn-info btn-block">
                                    <i class="fas fa-key"></i> Send Password Reset
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="col-md-6">
                            <a href="{{ route('admin.users.index') }}" class="btn btn-secondary btn-block">
                                <i class="fas fa-arrow-left"></i> Back to Users
                            </a>
                        </div>
                        @if($user->id !== auth()->id())
                            <div class="col-md-6">
                                <form method="POST" action="{{ route('admin.users.destroy', $user) }}" 
                                      onsubmit="return confirm('Are you sure you want to delete {{ $user->name }}? This action cannot be undone.')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-danger btn-block">
                                        <i class="fas fa-trash"></i> Delete User
                                    </button>
                                </form>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.avatar-lg {
    width: 80px;
    height: 80px;
}
.avatar-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: 600;
}
.badge-lg {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}
.timeline {
    position: relative;
}
.timeline:before {
    content: '';
    position: absolute;
    top: 0;
    left: 30px;
    height: 100%;
    width: 2px;
    background: #dee2e6;
}
.timeline > div {
    margin-bottom: 15px;
    position: relative;
}
.timeline .time-label > span {
    font-weight: 600;
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
}
.timeline .timeline-item {
    background: #fff;
    border-radius: 3px;
    margin-left: 60px;
    margin-right: 15px;
    padding: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.timeline .fa {
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    position: absolute;
    left: 18px;
    color: #fff;
}
.timeline .timeline-header {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: 600;
}
.timeline .time {
    color: #999;
    float: right;
    font-size: 12px;
}
</style>
@endsection