@extends('layouts.app')

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

@php
use Illuminate\Support\Facades\Storage;
@endphp

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-2">
        <div class="col-12">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="mb-0">
                                <i class="fas fa-user me-1"></i>
                                User Details
                            </h4>
                            <small class="text-muted">View user information and permissions</small>
                        </div>
                        <div class="d-flex gap-1">
                            <a href="{{ route('users.edit', $user) }}" class="btn btn-warning btn-sm">
                                <i class="fas fa-edit me-1"></i>Edit User
                            </a>
                            <a href="{{ route('users.index') }}" class="btn btn-secondary btn-sm">
                                <i class="fas fa-arrow-left me-1"></i>Back to Users
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- User Information -->
        <div class="col-md-8">
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-1"></i>
                        Basic Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-user me-1"></i>Full Name
                            </label>
                            <p class="mb-0 text-dark">{{ $user->name }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-envelope me-1"></i>Email Address (Login ID)
                            </label>
                            <p class="mb-0 text-dark">{{ $user->email }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-phone me-1"></i>Phone Number
                            </label>
                            <p class="mb-0 text-dark">{{ $user->phone ?? 'Not provided' }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-user-tag me-1"></i>Role
                            </label>
                            <p class="mb-0">
                                <span class="badge bg-{{ $user->role === 'admin' ? 'danger' : ($user->role === 'manager' ? 'warning' : ($user->role === 'technician' ? 'info' : 'secondary')) }}">
                                    {{ ucfirst($user->role) }}
                                </span>
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-toggle-on me-1"></i>Status
                            </label>
                            <p class="mb-0">
                                <span class="badge bg-{{ $user->status === 'active' ? 'success' : ($user->status === 'inactive' ? 'warning' : 'danger') }}">
                                    {{ ucfirst($user->status) }}
                                </span>
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-check-circle me-1"></i>Active Status
                            </label>
                            <p class="mb-0">
                                <span class="badge bg-{{ $user->is_active ? 'success' : 'danger' }}">
                                    {{ $user->is_active ? 'Active' : 'Inactive' }}
                                </span>
                            </p>
                        </div>
                        @if($user->branch)
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-building me-1"></i>ISP Name
                            </label>
                            <p class="mb-0">
                                <span class="badge bg-primary">
                                    <i class="fas fa-network-wired me-1"></i>{{ $user->branch->name }}
                                </span>
                                <br><small class="text-muted">{{ $user->branch->code }}</small>
                            </p>
                        </div>
                        @endif
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-calendar me-1"></i>Account Created
                            </label>
                            <p class="mb-0 text-dark">{{ $user->created_at->format('M d, Y \a\t h:i A') }}</p>
                        </div>
                        <div class="col-12 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-map-marker-alt me-1"></i>Address
                            </label>
                            <p class="mb-0 text-dark">{{ $user->address ?? 'Not provided' }}</p>
                        </div>
                        @if($user->last_login_at)
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-sign-in-alt me-1"></i>Last Login
                            </label>
                            <p class="mb-0 text-dark">{{ $user->last_login_at->format('M d, Y \a\t h:i A') }}</p>
                        </div>
                        @endif
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-edit me-1"></i>Last Updated
                            </label>
                            <p class="mb-0 text-dark">{{ $user->updated_at->format('M d, Y \a\t h:i A') }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- System Information -->
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-1"></i>
                        System Information
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-id-card me-1"></i>User ID
                            </label>
                            <p class="mb-0 text-dark">{{ $user->id }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-clock me-1"></i>Account Age
                            </label>
                            <p class="mb-0 text-dark">{{ $user->created_at->diffForHumans() }}</p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-bars me-1"></i>Assigned Menus
                            </label>
                            <p class="mb-0">
                                <span class="badge bg-info">
                                    {{ $user->menus()->count() }} Menus
                                </span>
                            </p>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-shield-alt me-1"></i>Permissions
                            </label>
                            <p class="mb-0">
                                <span class="badge bg-{{ $user->userPermissions->where('is_granted', true)->count() > 0 ? 'success' : 'warning' }}">
                                    {{ $user->userPermissions->where('is_granted', true)->count() }} Granted
                                </span>
                                <span class="badge bg-danger">
                                    {{ $user->userPermissions->where('is_granted', false)->count() }} Denied
                                </span>
                            </p>
                        </div>
                        @if($user->last_login_at)
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-history me-1"></i>Login Duration
                            </label>
                            <p class="mb-0 text-dark">{{ $user->last_login_at->diffForHumans() }}</p>
                        </div>
                        @endif
                        <div class="col-md-6 mb-3">
                            <label class="form-label fw-bold">
                                <i class="fas fa-database me-1"></i>Profile Photo
                            </label>
                            <p class="mb-0">
                                @if($user->profile_photo)
                                    <span class="badge bg-success">
                                        <i class="fas fa-image me-1"></i>Uploaded
                                    </span>
                                @else
                                    <span class="badge bg-secondary">
                                        <i class="fas fa-user me-1"></i>Default
                                    </span>
                                @endif
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Profile Photo & Permissions -->
        <div class="col-md-4">
            <!-- Profile Photo -->
            <div class="custom-card mb-3">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-camera me-1"></i>
                        Profile Photo
                    </h5>
                </div>
                <div class="custom-card-body text-center">
                    @php
                        $hasPhoto = false;
                        $photoUrl = '';
                        
                        if($user->profile_photo) {
                            // Try to check if file exists
                            try {
                                if(Storage::disk('public')->exists($user->profile_photo)) {
                                    $hasPhoto = true;
                                    $photoUrl = Storage::disk('public')->url($user->profile_photo);
                                }
                            } catch (\Exception $e) {
                                // File doesn't exist or error checking
                                $hasPhoto = false;
                            }
                        }
                    @endphp
                    
                    @if($hasPhoto)
                        <img src="{{ $photoUrl }}" 
                             alt="{{ $user->name }}" 
                             class="rounded-circle img-thumbnail" 
                             width="150" height="150"
                             style="object-fit: cover;"
                             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center text-white mx-auto" 
                             style="width: 150px; height: 150px; display: none;">
                            <i class="fas fa-user fa-4x"></i>
                        </div>
                    @else
                        <div class="bg-secondary rounded-circle d-flex align-items-center justify-content-center text-white mx-auto" 
                             style="width: 150px; height: 150px;">
                            <i class="fas fa-user fa-4x"></i>
                        </div>
                    @endif
                    
                    @if($user->profile_photo)
                        <small class="text-muted d-block mt-2">
                            Photo path: {{ $user->profile_photo }}
                        </small>
                    @endif
                </div>
            </div>

            <!-- User Permissions -->
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-shield-alt me-1"></i>
                        User Permissions
                    </h5>
                </div>
                <div class="custom-card-body">
                    @if($user->userPermissions->count() > 0)
                        <div class="mb-3">
                            <h6 class="text-muted">Granted Permissions</h6>
                            @foreach($user->userPermissions->where('is_granted', true) as $userPermission)
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-check-circle text-success me-2"></i>
                                    <small class="text-dark">{{ $userPermission->permission->permission_key }}</small>
                                </div>
                            @endforeach
                        </div>
                        
                        <div class="mb-3">
                            <h6 class="text-muted">Denied Permissions</h6>
                            @foreach($user->userPermissions->where('is_granted', false) as $userPermission)
                                <div class="d-flex align-items-center mb-2">
                                    <i class="fas fa-times-circle text-danger me-2"></i>
                                    <small class="text-dark">{{ $userPermission->permission->permission_key }}</small>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-muted mb-0">No permissions assigned.</p>
                    @endif
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="custom-card">
                <div class="custom-card-header py-2">
                    <h5 class="mb-0">
                        <i class="fas fa-bolt me-1"></i>
                        Quick Actions
                    </h5>
                </div>
                <div class="custom-card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-outline-{{ $user->is_active ? 'warning' : 'success' }} btn-sm"
                                onclick="toggleUserStatus({{ $user->id }})">
                            <i class="fas fa-{{ $user->is_active ? 'pause' : 'play' }} me-1"></i>
                            {{ $user->is_active ? 'Deactivate' : 'Activate' }} User
                        </button>
                        
                        @if($user->trashed())
                            <form method="POST" action="{{ route('users.restore', $user->id) }}" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-outline-info btn-sm w-100">
                                    <i class="fas fa-undo me-1"></i>Restore User
                                </button>
                            </form>
                        @else
                            <button type="button" 
                                    class="btn btn-outline-danger btn-sm"
                                    onclick="deleteUser({{ $user->id }})">
                                <i class="fas fa-trash me-1"></i>Delete User
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Are you sure you want to delete this user? This action can be undone.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <form id="deleteForm" method="POST" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete User</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
function deleteUser(userId) {
    const modal = new bootstrap.Modal(document.getElementById('deleteModal'));
    const form = document.getElementById('deleteForm');
    form.action = `/users/${userId}`;
    modal.show();
}


function toggleUserStatus(userId) {
    fetch(`/users/${userId}/toggle-status`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        },
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Reload page to show updated status
            location.reload();
        } else {
            alert('Error: ' + data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error updating user status');
    });
}
</script>
@endsection