@extends('layouts.app')

@section('content')
@php
    $canEditUser = auth()->check() && auth()->user()->hasPermission('users', 'edit');
    $canDeleteUser = auth()->check() && auth()->user()->hasPermission('users', 'delete');
    $canViewSecurityTab = $canEditUser || $canDeleteUser;
    $profileImage = $user->getFirstMediaUrl('profile', 'thumb') ?: $user->getFirstMediaUrl('profile');
    $coverImage = $user->getFirstMediaUrl('cover');
    $galleryMedia = $user->getMedia('album');
@endphp

<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="breadcrumb-title pe-3">User Management</div>
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item"><a href="{{ route('users.index') }}"><i class="bx bx-home-alt"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Users</a></li>
                        <li class="breadcrumb-item active" aria-current="page">View User</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto d-flex gap-2">
                @if($canEditUser)
                    <a href="{{ route('users.edit', $user->id) }}" class="btn btn-primary">Edit User</a>
                @endif
                <a href="{{ route('users.index') }}" class="btn btn-light">Back</a>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-body p-4">
                <div class="row align-items-center g-4">
                    <div class="col-md-2 text-center">
                        @if($profileImage)
                            <img src="{{ $profileImage }}" alt="Profile Image" class="rounded-circle border" style="width: 110px; height: 110px; object-fit: cover;">
                        @else
                            <div class="rounded-circle border d-inline-flex align-items-center justify-content-center bg-light" style="width: 110px; height: 110px;">
                                <i class="bx bx-user fs-1 text-secondary"></i>
                            </div>
                        @endif
                    </div>
                    <div class="col-md-7">
                        <h4 class="mb-1">{{ $user->name }}</h4>
                        <p class="mb-1 text-muted">#{{ $user->id }} | {{ $user->email }}</p>
                        <p class="mb-0 text-muted">
                            {{ trim(($user->phone_country_code ?? '') . ' ' . ($user->phone_no ?? '')) }}
                        </p>
                    </div>
                    <div class="col-md-3">
                        <div class="text-md-end">
                            <span class="badge {{ $user->status === 'active' ? 'bg-success' : 'bg-danger' }} fs-6 mb-2">
                                {{ ucfirst($user->status) }}
                            </span>
                            <div class="small text-muted">Account Type: {{ ucfirst(str_replace('_', ' ', $user->account_type)) }}</div>
                            <div class="small text-muted">Created: {{ optional($user->created_at)->format('d M Y, h:i A') }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body p-4">
                <ul class="nav nav-tabs nav-primary" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab-overview" type="button" role="tab">
                            <i class="bx bx-grid-alt me-1"></i>Overview
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-profile" type="button" role="tab">
                            <i class="bx bx-user-circle me-1"></i>Profile
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-address" type="button" role="tab">
                            <i class="bx bx-map me-1"></i>Address
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-gallery" type="button" role="tab">
                            <i class="bx bx-images me-1"></i>Gallery
                        </button>
                    </li>
                    {{-- @if($canViewSecurityTab)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab-permissions" type="button" role="tab">
                                <i class="bx bx-shield-quarter me-1"></i>Permissions
                            </button>
                        </li>
                    @endif --}}
                </ul>

                <div class="tab-content pt-4">
                    <div class="tab-pane fade show active" id="tab-overview" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Basic Info</h6>
                                    <div class="mb-2"><strong>Name:</strong> {{ $user->name }}</div>
                                    <div class="mb-2"><strong>Email:</strong> {{ $user->email ?: '-' }}</div>
                                    <div class="mb-2"><strong>Phone:</strong> {{ trim(($user->phone_country_code ?? '') . ' ' . ($user->phone_no ?? '')) ?: '-' }}</div>
                                    <div class="mb-2"><strong>Status:</strong> {{ ucfirst($user->status) }}</div>
                                        <div class="mb-2"><strong>Created At:</strong> {{ optional($user->created_at)->format('d M Y, h:i A') ?: '-' }}</div>
                                        <div class="mb-2"><strong>Updated At:</strong> {{ optional($user->updated_at)->format('d M Y, h:i A') ?: '-' }}</div>
                                        @if($user->deleted_at)
                                            <div class="mb-2"><strong>Deleted At:</strong> {{ optional($user->deleted_at)->format('d M Y, h:i A') ?: '-' }}</div>
                                        @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Verification</h6>
                                    
                                    <div class="mb-3 d-flex align-items-center">
                                        <div class="form-check form-switch me-2 mb-0">
                                            <input class="form-check-input" type="checkbox" id="email_verified_toggle" {{ $user->email_verified_at ? 'checked' : '' }} onchange="toggleVerification('email')" {{ !$canEditUser ? 'disabled' : '' }}>
                                        </div>
                                        <strong class="me-1">Email Verified:</strong>
                                        <span id="email_verified_status" class="ms-1 text-secondary">
                                            {{ $user->email_verified_at ? 'Yes (' . \Carbon\Carbon::parse($user->email_verified_at)->format('d M Y, h:i A') . ')' : 'No' }}
                                        </span>
                                    </div>

                                    <div class="mb-3 d-flex align-items-center">
                                        <div class="form-check form-switch me-2 mb-0">
                                            <input class="form-check-input" type="checkbox" id="phone_verified_toggle" {{ $user->phone_no_verified_at ? 'checked' : '' }} onchange="toggleVerification('phone')" {{ !$canEditUser ? 'disabled' : '' }}>
                                        </div>
                                        <strong class="me-1">Phone Verified:</strong>
                                        <span id="phone_verified_status" class="ms-1 text-secondary">
                                            {{ $user->phone_no_verified_at ? 'Yes (' . \Carbon\Carbon::parse($user->phone_no_verified_at)->format('d M Y, h:i A') . ')' : 'No' }}
                                        </span>
                                    </div>

                                    <div class="mb-2"><strong>KYC Status:</strong> {{ ucfirst(str_replace('_', ' ', $user->kyc_status ?? 'not_submitted')) }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-profile" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Personal</h6>
                                    <div class="mb-2"><strong>Gender:</strong> {{ ucfirst(optional($user->profile)->gender ?? '-') }}</div>
                                    <div class="mb-2"><strong>Date of Birth:</strong> {{ optional(optional($user->profile)->date_of_birth)->format('d M Y') ?: (optional($user->profile)->date_of_birth ?? '-') }}</div>
                                    <div class="mb-2">
                                        <strong>Cover Photo:</strong>
                                        @if($coverImage)
                                            <div class="mt-2">
                                                <img src="{{ $coverImage }}" alt="Cover Photo" class="rounded border" style="max-width: 100%; height: auto; max-height: 150px; object-fit: cover;">
                                            </div>
                                        @else
                                            <span>-</span>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Languages</h6>
                                    @if($user->languages->count())
                                        <div class="d-flex flex-wrap gap-2">
                                            @foreach($user->languages as $language)
                                                <span class="badge bg-light text-dark border">{{ $language->name }}</span>
                                            @endforeach
                                        </div>
                                    @else
                                        <span class="text-muted">No languages added.</span>
                                    @endif
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="border rounded p-3">
                                    <h6 class="mb-3">Bio</h6>
                                    <p class="mb-0 text-muted">{{ optional($user->profile)->bio ?: 'No bio available.' }}</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-address" role="tabpanel">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Location</h6>
                                    <div class="mb-2"><strong>Country:</strong> {{ optional(optional($user->address)->country)->name ?: '-' }}</div>
                                    <div class="mb-2"><strong>State:</strong> {{ optional(optional($user->address)->state)->name ?: '-' }}</div>
                                    <div class="mb-2"><strong>City:</strong> {{ optional(optional($user->address)->city)->name ?: '-' }}</div>
                                    <div class="mb-2"><strong>Address:</strong> {{ optional($user->address)->address ?: '-' }}</div>
                                    <div class="mb-2"><strong>Pin Code:</strong> {{ optional($user->address)->pin_code ?: '-' }}</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="border rounded p-3 h-100">
                                    <h6 class="mb-3">Coordinates</h6>
                                    <div class="mb-2"><strong>Latitude:</strong> {{ optional($user->address)->current_latitude ?: '-' }}</div>
                                    <div class="mb-2"><strong>Longitude:</strong> {{ optional($user->address)->current_longitude ?: '-' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="tab-gallery" role="tabpanel">
                        @if($galleryMedia->count())
                            <div class="row g-3">
                                @foreach($galleryMedia as $media)
                                    <div class="col-sm-6 col-md-4 col-xl-3">
                                        <a href="{{ $media->getUrl() }}" target="_blank" class="d-block">
                                            <img src="{{ $media->getUrl('album_thumb') ?: $media->getUrl() }}" class="img-fluid rounded border" alt="Gallery Image" style="height: 180px; width: 100%; object-fit: cover;">
                                        </a>
                                    </div>
                                @endforeach
                            </div>
                        @else
                            <p class="text-muted mb-0">No gallery images available.</p>
                        @endif
                    </div>

                    {{-- @if($canViewSecurityTab)
                        <div class="tab-pane fade" id="tab-permissions" role="tabpanel">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <div class="border rounded p-3 h-100">
                                        <h6 class="mb-3">Action Access</h6>
                                        <div class="mb-2"><strong>Can Edit User:</strong> {{ $canEditUser ? 'Yes' : 'No' }}</div>
                                        <div class="mb-2"><strong>Can Delete User:</strong> {{ $canDeleteUser ? 'Yes' : 'No' }}</div>
                                        <div class="mb-2"><strong>Can View User:</strong> {{ auth()->user()->hasPermission('users', 'view') ? 'Yes' : 'No' }}</div>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="border rounded p-3 h-100">
                                        <h6 class="mb-3">Audit</h6>
                                        <div class="mb-2"><strong>Created At:</strong> {{ optional($user->created_at)->format('d M Y, h:i A') ?: '-' }}</div>
                                        <div class="mb-2"><strong>Updated At:</strong> {{ optional($user->updated_at)->format('d M Y, h:i A') ?: '-' }}</div>
                                        <div class="mb-2"><strong>Deleted At:</strong> {{ optional($user->deleted_at)->format('d M Y, h:i A') ?: '-' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endif --}}
                </div>
            </div>
        </div>
    </div>

@if($canEditUser)
<script>
function toggleVerification(type) {
    const isChecked = document.getElementById(type + '_verified_toggle').checked;
    
    $.ajax({
        url: "{{ route('users.verify.toggle') }}",
        type: 'POST',
        data: {
            _token: "{{ csrf_token() }}",
            user_id: "{{ $user->id }}",
            type: type,
            verified: isChecked ? 1 : 0
        },
        success: function(response) {
            if (response.status) {
                // Update status label
                const statusSpan = document.getElementById(type + '_verified_status');
                if (response.verified_at) {
                    statusSpan.innerHTML = 'Yes (' + response.formatted_date + ')';
                } else {
                    statusSpan.innerHTML = 'No';
                }
            } else {
                // Revert checkbox on error
                document.getElementById(type + '_verified_toggle').checked = !isChecked;
                alert(response.message || 'Something went wrong.');
            }
        },
        error: function(xhr) {
            // Revert checkbox on error
            document.getElementById(type + '_verified_toggle').checked = !isChecked;
            alert(xhr.responseJSON?.message || 'Something went wrong.');
        }
    });
}
</script>
@endif
@endsection