@extends('layouts.admin')

@section('title', 'User Details')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">User Details</h2>
        <p class="text-body-tertiary lh-sm">View complete member information</p>
    </div>
    <div class="col-md-4 d-flex justify-content-end">
        <a href="{{ route('admin.users.index') }}" class="btn btn-phoenix-secondary me-2">
            <span class="fas fa-arrow-left me-2"></span>Back
        </a>
        <a href="{{ route('admin.users.edit', $user->id) }}" class="btn btn-phoenix-primary">
            <span class="fas fa-edit me-2"></span>Edit
        </a>
    </div>
</div>

<div class="row g-3">
    <div class="col-xxl-4">
        <div class="card border h-100">
            <div class="card-body">
                <div class="text-center">
                    <div class="avatar avatar-5xl mb-3">
                        <div class="avatar-name rounded-circle bg-primary">
                            <span class="text-white fs-2">{{ substr($user->name, 0, 1) }}</span>
                        </div>
                    </div>
                    <h5 class="mb-2">{{ $user->name }}</h5>
                    <p class="text-body-tertiary mb-3">{{ $user->email }}</p>
                    
                    @if($user->status == 'active')
                        <span class="badge badge-phoenix badge-phoenix-success fs-9 mb-4">Active Member</span>
                    @elseif($user->status == 'inactive')
                        <span class="badge badge-phoenix badge-phoenix-warning fs-9 mb-4">Inactive</span>
                    @else
                        <span class="badge badge-phoenix badge-phoenix-danger fs-9 mb-4">Suspended</span>
                    @endif
                    
                    <div class="d-flex justify-content-center gap-2">
                        <button class="btn btn-phoenix-primary btn-sm" data-bs-toggle="modal" data-bs-target="#statusModal">
                            <span class="fas fa-edit me-2"></span>Update Status
                        </button>
                        <button class="btn btn-phoenix-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#beltModal">
                            <span class="fas fa-medal me-2"></span>Update Belt
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-8">
        <div class="card border h-100">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Member Information</h6>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Personal Information</h6>
                            <div class="border-start border-primary ps-3">
                                <div class="mb-2">
                                    <strong>Full Name:</strong> {{ $user->name }}
                                </div>
                                <div class="mb-2">
                                    <strong>Email:</strong> {{ $user->email }}
                                </div>
                                <div class="mb-2">
                                    <strong>Phone:</strong> {{ $user->phone ?? 'Not provided' }}
                                </div>
                                <div class="mb-2">
                                    <strong>Date of Birth:</strong> {{ $user->date_of_birth ?? 'Not provided' }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Training Information</h6>
                            <div class="border-start border-success ps-3">
                                <div class="mb-2">
                                    <strong>Current Belt:</strong> 
                                    <span class="badge badge-phoenix badge-phoenix-info">{{ $user->belt_level ?? 'White Belt' }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Program:</strong> {{ $user->program ?? 'Adult Program' }}
                                </div>
                                <div class="mb-2">
                                    <strong>Experience:</strong> {{ $user->experience_years ?? 0 }} years
                                </div>
                                <div class="mb-2">
                                    <strong>Instructor:</strong> {{ $user->instructor ?? 'Master Kim' }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Membership Details</h6>
                            <div class="border-start border-info ps-3">
                                <div class="mb-2">
                                    <strong>Member Since:</strong> {{ $user->created_at->format('F d, Y') }}
                                </div>
                                <div class="mb-2">
                                    <strong>Membership Type:</strong> {{ $user->membership_type ?? 'Standard' }}
                                </div>
                                <div class="mb-2">
                                    <strong>Status:</strong> 
                                    @if($user->status == 'active')
                                        <span class="text-success">✓ Active</span>
                                    @elseif($user->status == 'inactive')
                                        <span class="text-warning">⏸ Inactive</span>
                                    @else
                                        <span class="text-danger">⛔ Suspended</span>
                                    @endif
                                </div>
                                <div class="mb-2">
                                    <strong>Last Login:</strong> {{ $user->last_login_at ? $user->last_login_at->format('F d, Y \a\t g:i A') : 'Never' }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Emergency Contact</h6>
                            <div class="border-start border-warning ps-3">
                                <div class="mb-2">
                                    <strong>Contact Name:</strong> {{ $user->emergency_contact_name ?? 'Not provided' }}
                                </div>
                                <div class="mb-2">
                                    <strong>Contact Phone:</strong> {{ $user->emergency_contact_phone ?? 'Not provided' }}
                                </div>
                                <div class="mb-2">
                                    <strong>Relationship:</strong> {{ $user->emergency_contact_relationship ?? 'Not provided' }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusModalLabel">Update Member Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('admin.users.status', $user->id) }}">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="active" {{ $user->status == 'active' ? 'selected' : '' }}>Active</option>
                            <option value="inactive" {{ $user->status == 'inactive' ? 'selected' : '' }}>Inactive</option>
                            <option value="suspended" {{ $user->status == 'suspended' ? 'selected' : '' }}>Suspended</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">Notes</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="Add any notes about the status change..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-phoenix-primary">Update Status</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Belt Update Modal -->
<div class="modal fade" id="beltModal" tabindex="-1" aria-labelledby="beltModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="beltModalLabel">Update Belt Level</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('admin.users.belt', $user->id) }}">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="belt_level" class="form-label">Belt Level</label>
                        <select class="form-select" id="belt_level" name="belt_level" required>
                            <option value="White Belt" {{ ($user->belt_level ?? 'White Belt') == 'White Belt' ? 'selected' : '' }}>White Belt</option>
                            <option value="Yellow Belt" {{ ($user->belt_level ?? '') == 'Yellow Belt' ? 'selected' : '' }}>Yellow Belt</option>
                            <option value="Orange Belt" {{ ($user->belt_level ?? '') == 'Orange Belt' ? 'selected' : '' }}>Orange Belt</option>
                            <option value="Green Belt" {{ ($user->belt_level ?? '') == 'Green Belt' ? 'selected' : '' }}>Green Belt</option>
                            <option value="Blue Belt" {{ ($user->belt_level ?? '') == 'Blue Belt' ? 'selected' : '' }}>Blue Belt</option>
                            <option value="Purple Belt" {{ ($user->belt_level ?? '') == 'Purple Belt' ? 'selected' : '' }}>Purple Belt</option>
                            <option value="Brown Belt" {{ ($user->belt_level ?? '') == 'Brown Belt' ? 'selected' : '' }}>Brown Belt</option>
                            <option value="Black Belt" {{ ($user->belt_level ?? '') == 'Black Belt' ? 'selected' : '' }}>Black Belt</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="promotion_date" class="form-label">Promotion Date</label>
                        <input type="date" class="form-control" id="promotion_date" name="promotion_date" value="{{ now()->format('Y-m-d') }}">
                    </div>
                    <div class="mb-3">
                        <label for="notes" class="form-label">Notes</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="Add any notes about the promotion..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-phoenix-primary">Update Belt</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection