@extends('layouts.page')
<link rel="stylesheet" href="{{ asset('asset/css/dashboard.css') }}">
@section('title', 'User View')

@section('content')
    @php
        $pageName = 'User View';
    @endphp
    @include('session-message')

    <style>
        @keyframes slideInFromTop {
            from { opacity: 0; transform: translate(-50%, -20px); }
            to { opacity: 1; transform: translate(-50%, 0); }
        }
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(16px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulseDot {
            0% { box-shadow: 0 0 0 0 rgba(34, 168, 102, 0.45); }
            70% { box-shadow: 0 0 0 8px rgba(34, 168, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(34, 168, 102, 0); }
        }

        .uv-fade-in { opacity: 0; animation: fadeInUp 0.5s ease-out forwards; }
        .uv-delay-1 { animation-delay: 0.05s; }
        .uv-delay-2 { animation-delay: 0.15s; }

        .page-stat-pill .bi-circle-fill {
            animation: pulseDot 2s infinite;
            border-radius: 50%;
        }

        .form-section:hover,
        .uv-issues-panel:hover {
            box-shadow: 0 14px 34px rgba(10, 61, 44, 0.12);
            transform: translateY(-2px);
        }
        .form-section, .uv-issues-panel {
            transition: box-shadow 0.3s ease, transform 0.3s ease;
        }

        .form-section img.rounded-circle {
            transition: transform 0.35s ease;
        }
        .form-section img.rounded-circle:hover {
            transform: scale(1.06);
        }

        .status {
            display: inline-block;
            padding: 4px 14px;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.02em;
        }
        .status.active { background: rgba(34, 168, 102, 0.12); color: #1b7a4d; }
        .status.inactive { background: rgba(120, 120, 120, 0.12); color: #6b6b6b; }

        .card-text { transition: transform 0.2s ease; }
        .card-text:hover { transform: translateX(3px); }

        /* ---- Right side: one unified panel, matched to left card ---- */
        .uv-issues-panel {
            display: flex;
            flex-direction: column;
            padding: 24px 22px;
        }

        .uv-issues-split {
            display: flex;
            flex: 1 1 auto;
            gap: 22px;
            min-height: 0;
        }

        .uv-issues-col {
            flex: 1 1 50%;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .uv-issues-col-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11.5px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #0f5236;
            margin-bottom: 12px;
        }

        .uv-issues-col-header i {
            color: #22a866;
            font-size: 14px;
        }

        .uv-issues-col-header .uv-count-badge {
            margin-left: auto;
            background: rgba(20, 108, 67, 0.14);
            color: #0f5236;
            font-size: 10.5px;
            font-weight: 700;
            padding: 2px 9px;
            border-radius: 999px;
        }

        .uv-issues-col .responsive-table {
            flex: 1 1 auto;
        }

        .uv-issues-col .custom-table thead {
            display: none;
        }

        .uv-issues-col .custom-table td {
            text-align: left;
            padding: 10px 8px;
        }

        .uv-issues-col .custom-table tbody tr {
            transition: background-color 0.18s ease, transform 0.18s ease;
            border-radius: 8px;
        }
        .uv-issues-col .custom-table tbody tr:hover {
            background-color: rgba(34, 168, 102, 0.08);
            transform: translateX(2px);
        }

        @media (max-width: 767px) {
            .uv-issues-split {
                flex-direction: column;
            }
        }
    </style>

    @if ($errors->any())
        <div class="position-fixed top-0 start-50 translate-middle-x mt-3" style="z-index: 1050; width: 90%; max-width: 600px; animation: slideInFromTop 0.5s ease-out;">
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    @endif

    @if(session('success'))
        <div class="position-fixed top-0 start-50 translate-middle-x mt-3" style="z-index: 1050; width: 90%; max-width: 600px; animation: slideInFromTop 0.5s ease-out;">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    @endif

    <!-- Page Banner -->
    <div class="page-banner uv-fade-in">
        <div>
            <h2>{{ $user->name }}</h2>
            <p>{{ $user->roles->pluck('name')->map(fn($name) => $roleNameMap[$name] ?? $name)->join(', ') ?: 'No Role' }} &middot; {{ $user->organization->name }}</p>
        </div>
        <div class="page-stat-group">
            <div class="page-stat-pill">
                <i class="bi bi-circle-fill" style="font-size: 10px; color: {{ $user->status ? '#22a866' : '#9aa5a0' }};"></i>
                <span>
                    <span class="stat-value">{{ $user->status ? 'Active' : 'Inactive' }}</span>
                    <span class="stat-label">Status</span>
                </span>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Left: Profile Card -->
        <div class="col-lg-4 mb-3 mb-lg-0 d-flex">
            <div class="form-section text-center h-100 w-100 uv-fade-in uv-delay-1">
                <div class="mb-3">
                    <img src="{{ asset($user->avatar ?? 'default_user.png') }}"
                         alt="User Avatar"
                         class="rounded-circle"
                         style="width: 100px; height: 100px; object-fit: cover; border: 3px solid #ffffff; box-shadow: var(--shadow-md, 0 10px 30px rgba(10, 61, 44, 0.10));">

                    <h5 class="mt-3 mb-1" style="color: var(--ink, #0c2b21); font-weight: 700;">{{ $user->name }}</h5>
                    <span class="status {{ $user->status ? 'active' : 'inactive' }}">
                        {{ $user->status ? 'Active' : 'Inactive' }}
                    </span>
                </div>

                <hr style="border-color: rgba(10, 61, 44, 0.08);">

                <div class="text-start">
                    <p class="card-text mb-2">
                        <i class="bi bi-envelope-at me-2" style="color: var(--forest-500, #22a866);"></i>
                        <strong style="color: var(--ink-soft, #5c7a6f);">Email:</strong>
                        <span style="color: var(--ink, #0c2b21);">{{ $user->email }}</span>
                    </p>
                    <p class="card-text mb-2">
                        <i class="bi bi-people me-2" style="color: var(--forest-500, #22a866);"></i>
                        <strong style="color: var(--ink-soft, #5c7a6f);">Organization:</strong>
                        <span style="color: var(--ink, #0c2b21);">{{ $user->organization->name }}</span>
                    </p>
                    <p class="card-text mb-2">
                        <i class="bi bi-house me-2" style="color: var(--forest-500, #22a866);"></i>
                        <strong style="color: var(--ink-soft, #5c7a6f);">Address:</strong>
                        <span style="color: var(--ink, #0c2b21);">{{ $userinfo->address ?? 'No Address' }}</span>
                    </p>
                    <p class="card-text mb-2">
                        <i class="bi bi-phone me-2" style="color: var(--forest-500, #22a866);"></i>
                        <strong style="color: var(--ink-soft, #5c7a6f);">Phone Number:</strong>
                        <span style="color: var(--ink, #0c2b21);">{{ $userinfo->phone_number ?? 'Not Available' }}</span>
                    </p>
                    @if($user->org_id != 1)
                        <p class="card-text mb-2">
                            <i class="bi bi-globe-asia-australia me-2" style="color: var(--forest-500, #22a866);"></i>
                            <strong style="color: var(--ink-soft, #5c7a6f);">Region:</strong>
                            <span style="color: var(--ink, #0c2b21);">{{ $userinfo->region ?? 'Not Available' }}</span>
                        </p>
                        <p class="card-text mb-0">
                            <i class="bi bi-usb-symbol me-2" style="color: var(--forest-500, #22a866);"></i>
                            <strong style="color: var(--ink-soft, #5c7a6f);">Device:</strong>
                            <span style="color: var(--ink, #0c2b21);">{{ $userinfo->device ?? 'No Device' }}</span>
                        </p>
                    @endif
                </div>

                @if(Auth::User()->id == $user->id)
                    <button class="btn btn-outline-primary btn-sm mt-4" data-bs-toggle="modal" data-bs-target="#editUserInfoModal">
                        <i class="bi bi-pencil-square me-1"></i>Edit Info
                    </button>
                @endif
            </div>
        </div>

        <!-- Right: Issues — one unified panel matching the left card's height & style -->
        <div class="col-lg-8 d-flex">
            @php
                $leftLabel = Auth::User()->org_id == 1 ? 'Assigned' : 'Reported Issues';
                $leftIssues = Auth::User()->org_id == 1 ? $assignedIssues : $myIssues;
                $leftIcon = Auth::User()->org_id == 1 ? 'bi-person-check' : 'bi-flag';
            @endphp

            <div class="form-section uv-issues-panel h-100 w-100 uv-fade-in uv-delay-2">
                <div class="uv-issues-split">
                    <div class="uv-issues-col">
                        <div class="uv-issues-col-header">
                            <i class="bi {{ $leftIcon }}"></i>
                            {{ $leftLabel }}
                            <span class="uv-count-badge">{{ $leftIssues->count() }}</span>
                        </div>
                        <div class="responsive-table">
                            <table class="custom-table mb-0">
                                <thead><tr><th>{{ $leftLabel }}</th></tr></thead>
                                <tbody>
                                @if($leftIssues->isNotEmpty())
                                    @foreach($leftIssues as $issue)
                                        <tr style="cursor: pointer;" onclick="window.location='{{ route('issue.show', $issue->id) }}'">
                                            <td>{{ $issue->title }}</td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td>
                                            <div class="d-flex flex-column justify-content-center align-items-center py-4">
                                                <i class="bi bi-inbox" style="font-size: 32px; color: var(--ink-soft, #5c7a6f);"></i>
                                                <p class="text-secondary mt-2 mb-0" style="font-weight: 400;">No Issue</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="vertical-line d-none d-md-block"></div>

                    <div class="uv-issues-col">
                        <div class="uv-issues-col-header">
                            <i class="bi bi-files"></i>
                            Copied
                            <span class="uv-count-badge">{{ $copiedIssues->count() }}</span>
                        </div>
                        <div class="responsive-table">
                            <table class="custom-table mb-0">
                                <thead><tr><th>Copied</th></tr></thead>
                                <tbody>
                                @if($copiedIssues->isNotEmpty())
                                    @foreach($copiedIssues as $copied)
                                        <tr style="cursor: pointer;" onclick="window.location='{{ route('issue.show', $copied->id) }}'">
                                            <td>{{ $copied->title }}</td>
                                        </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td>
                                            <div class="d-flex flex-column justify-content-center align-items-center py-4">
                                                <i class="bi bi-inbox" style="font-size: 32px; color: var(--ink-soft, #5c7a6f);"></i>
                                                <p class="text-secondary mt-2 mb-0" style="font-weight: 400;">No Issue</p>
                                            </div>
                                        </td>
                                    </tr>
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('profile.editModal')
@endsection