@extends('layouts.app')

@section('content')
<div class="container mt-5">
    <h1 class="mb-4" style="color: rgb(177, 41, 171);">User Profile</h1>

    <!-- Profile Card -->
    <div class="card shadow mb-4">
        <div class="card-header bg-dark text-white">
            <h4>Profile Details</h4>
        </div>
        <div class="card-body">
            <div class="row mb-3">
                <div class="col-md-3">
                    <strong>Name:</strong>
                </div>
                <div class="col-md-9">
                    {{ $admin->name }}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <strong>Email:</strong>
                </div>
                <div class="col-md-9">
                    {{ $admin->email }}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <strong>Role:</strong>
                </div>
                <div class="col-md-9">
                    {{ ucfirst($admin->role) }}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <strong>Department:</strong>
                </div>
                <div class="col-md-9">
                    {{ ucfirst($admin->department ?? 'N/A') }}
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <strong>Status:</strong>
                </div>
                <div class="col-md-9">
                    <span class="badge {{ $admin->status == 'active' ? 'bg-success' : 'bg-danger' }}">
                        {{ ucfirst($admin->status) }}
                    </span>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-md-3">
                    <strong>Last Login:</strong>
                </div>
                <div class="col-md-9">
                    {{ $lastLogin }}
                </div>
            </div>
        </div>
    </div>

    <!-- Associated Properties -->
    <div class="card shadow mb-4">
        <div class="card-header bg-primary text-white">
            <h4>Associated Properties</h4>
        </div>
        <div class="card-body">
            @if ($properties->isEmpty())
                <p>No properties associated with this user.</p>
            @else
                <table class="table table-bordered table-hover">
                    <thead>
                        <tr>
                            <th>Address</th>
                            <th>Beds</th>
                            <th>Baths</th>
                            <th>Square Footage</th>
                            <th>Lot Size</th>
                            <th>Year Built</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($properties as $property)
                            <tr>
                                <td>{{ $property->address }}</td>
                                <td>{{ $property->beds }}</td>
                                <td>{{ $property->baths }}</td>
                                <td>{{ $property->square_footage }}</td>
                                <td>{{ $property->lot_size }}</td>
                                <td>{{ $property->year_built }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif
        </div>
    </div>

    <!-- Actions -->
    <div class="card shadow mb-4">
        <div class="card-header bg-secondary text-white">
            <h4>Actions</h4>
        </div>
        <div class="card-body">
            <a href="{{ route('admin.users.edit', $admin->id) }}" class="btn btn-warning me-2">Edit Profile</a>
            <a href="{{ route('password.change') }}" class="btn btn-info">Change Password</a>
        </div>
    </div>
</div>
@endsection