{{-- resources/views/admin/issues/show.blade.php --}}
<x-layout>
    <div class="container-fluid py-4">
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Issue Details Card -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-primary text-white py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 text-white">
                                <i class="fas fa-bug me-2"></i>Issue Details
                            </h5>
                            <div class="d-flex gap-2">
                                @php
                                $priorityClasses = [
                                'low' => 'bg-success',
                                'medium' => 'bg-primary',
                                'high' => 'bg-warning',
                                'critical' => 'bg-danger'
                                ];
                                $statusClasses = [
                                'pending' => 'bg-warning',
                                'in_progress' => 'bg-info',
                                'resolved' => 'bg-success',
                                'closed' => 'bg-secondary'
                                ];
                                @endphp
                                <span class="badge {{ $priorityClasses[$issue->priority] }} text-capitalize">
                                    {{ $issue->priority }} Priority
                                </span>
                                <span class="badge {{ $statusClasses[$issue->status] }} text-capitalize">
                                    {{ str_replace('_', ' ', $issue->status) }}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Basic Information -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h6 class="text-primary mb-2">
                                    <i class="fas fa-user me-2"></i>Reporter Information
                                </h6>
                                @php
                                $userName = 'N/A';
                                if ($issue->user) {
                                $userName = is_array($issue->user->name) ?
                                ($issue->user->name[app()->getLocale()] ?? $issue->user->name['en'] ?? current($issue->user->name)) :
                                $issue->user->name;
                                }
                                @endphp
                                <p class="mb-1"><strong>Name:</strong> {{ $userName }}</p>
                                <p class="mb-1"><strong>Email:</strong> {{ $issue->user->email ?? 'N/A' }}</p>
                                <p class="mb-0"><strong>Reported:</strong> {{ $issue->created_at->format('M d, Y g:i A') }}</p>
                            </div>
                            <div class="col-md-6">
                                <h6 class="text-primary mb-2">
                                    <i class="fas fa-info-circle me-2"></i>Issue Information
                                </h6>
                                <p class="mb-1"><strong>Type:</strong>
                                    <span class="badge bg-info text-white">{{ $issue->issue_type_display }}</span>
                                </p>
                                <p class="mb-1"><strong>Title:</strong> {{ $issue->title }}</p>
                                @if($issue->application)
                                @php
                                $serviceName = 'N/A';
                                if ($issue->application->service) {
                                $serviceName = is_array($issue->application->service->name) ?
                                ($issue->application->service->name[app()->getLocale()] ?? $issue->application->service->name['en'] ?? current($issue->application->service->name)) :
                                $issue->application->service->name;
                                }
                                @endphp
                                <p class="mb-0"><strong>Related Application:</strong> {{ $serviceName }}</p>
                                @endif
                            </div>
                        </div>

                        <!-- Description -->
                        <div class="mb-4">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-align-left me-2"></i>Issue Description
                            </h6>
                            <div class="bg-light p-4 rounded">
                                <p class="mb-0" style="white-space: pre-wrap;">{{ $issue->description }}</p>
                            </div>
                        </div>

                        <!-- Screenshot -->
                        @if($issue->has_screenshot)
                        <div class="mb-4">
                            <h6 class="text-primary mb-3">
                                <i class="fas fa-camera me-2"></i>Attached Screenshot
                            </h6>
                            <div class="text-center">
                                <img src="{{ $issue->screenshot_url }}"
                                    alt="Issue Screenshot"
                                    class="img-fluid rounded shadow cursor-pointer"
                                    style="max-height: 400px;"
                                    data-bs-toggle="modal"
                                    data-bs-target="#screenshotModal">
                                <p class="text-muted mt-2 mb-0">
                                    <small>Click on the image to view in full size</small>
                                </p>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Admin Actions Card -->
                <div class="card shadow">
                    <div class="card-header bg-success text-white py-3">
                        <h5 class="mb-0 text-white">
                            <i class="fas fa-tools me-2"></i>Admin Actions
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Update Status Form -->
                        <form action="{{ route('admin.issues.update', $issue) }}" method="POST" class="mb-4">
                            @csrf
                            @method('PUT')
                            <div class="row g-3">
                                <div class="col-md-4">
                                    <label class="form-label">Status</label>
                                    <select name="status" class="form-select" required>
                                        <option value="pending" {{ $issue->status == 'pending' ? 'selected' : '' }}>Pending</option>
                                        <option value="in_progress" {{ $issue->status == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                                        <option value="resolved" {{ $issue->status == 'resolved' ? 'selected' : '' }}>Resolved</option>
                                        <option value="closed" {{ $issue->status == 'closed' ? 'selected' : '' }}>Closed</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Priority</label>
                                    <select name="priority" class="form-select" required>
                                        <option value="low" {{ $issue->priority == 'low' ? 'selected' : '' }}>Low</option>
                                        <option value="medium" {{ $issue->priority == 'medium' ? 'selected' : '' }}>Medium</option>
                                        <option value="high" {{ $issue->priority == 'high' ? 'selected' : '' }}>High</option>
                                        <option value="critical" {{ $issue->priority == 'critical' ? 'selected' : '' }}>Critical</option>
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">&nbsp;</label>
                                    <button type="submit" class="btn btn-primary w-100">
                                        <i class="fas fa-save me-2"></i>Update
                                    </button>
                                </div>
                            </div>
                        </form>

                        <!-- Admin Notes -->
                        <form action="{{ route('admin.issues.update', $issue) }}" method="POST">
                            @csrf
                            @method('PUT')
                            <div class="mb-3">
                                <label class="form-label">Admin Notes</label>
                                <textarea name="admin_notes" class="form-control" rows="4"
                                    placeholder="Add internal notes or comments...">{{ $issue->admin_notes }}</textarea>
                            </div>
                            <button type="submit" class="btn btn-outline-primary">
                                <i class="fas fa-sticky-note me-2"></i>Save Notes
                            </button>
                        </form>

                        <!-- Quick Actions -->
                        <div class="mt-4 pt-3 border-top">
                            <h6 class="text-primary mb-3">Quick Actions</h6>
                            <div class="d-flex gap-2 flex-wrap">
                                <!-- Assign Form -->
                                <form action="{{ route('admin.issues.assign', $issue) }}" method="POST" class="d-inline">
                                    @csrf
                                    <div class="input-group input-group-sm">
                                        <select name="assigned_admin_id" class="form-select form-select-sm" style="width: auto;">
                                            <option value="">Assign to...</option>
                                            @foreach($admins as $admin)
                                            @php
                                            $adminName = is_array($admin->name) ?
                                            ($admin->name[app()->getLocale()] ?? $admin->name['en'] ?? current($admin->name)) :
                                            $admin->name;
                                            @endphp
                                            <option value="{{ $admin->id }}" {{ $issue->assigned_admin_id == $admin->id ? 'selected' : '' }}>
                                                {{ $adminName }}
                                            </option>
                                            @endforeach
                                        </select>
                                        <button type="submit" class="btn btn-outline-info btn-sm">
                                            <i class="fas fa-user-plus"></i>
                                        </button>
                                    </div>
                                </form>

                                <!-- Resolve Button -->
                                <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#resolveModal">
                                    <i class="fas fa-check me-1"></i>Mark Resolved
                                </button>

                                <!-- Back Button -->
                                <a href="{{ route('admin.issues.index') }}" class="btn btn-secondary btn-sm">
                                    <i class="fas fa-arrow-left me-1"></i>Back to List
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Assignment Info -->
                <div class="card shadow mb-4">
                    <div class="card-header bg-info text-white py-3">
                        <h5 class="mb-0 text-white">
                            <i class="fas fa-users me-2"></i>Assignment
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($issue->assignedAdmin)
                        @php
                        $adminName = 'N/A';
                        if ($issue->assignedAdmin) {
                        $adminName = is_array($issue->assignedAdmin->name) ?
                        ($issue->assignedAdmin->name[app()->getLocale()] ?? $issue->assignedAdmin->name['en'] ?? current($issue->assignedAdmin->name)) :
                        $issue->assignedAdmin->name;
                        }
                        @endphp
                        <div class="text-center">
                            <div class="mb-3">
                                <i class="fas fa-user-shield fa-3x text-info"></i>
                            </div>
                            <h6 class="text-dark">{{ $adminName }}</h6>
                            <p class="text-muted mb-2">{{ $issue->assignedAdmin->email ?? 'N/A' }}</p>
                            <small class="text-success">
                                <i class="fas fa-calendar-check me-1"></i>
                                Assigned
                            </small>
                        </div>
                        @else
                        <div class="text-center text-muted">
                            <i class="fas fa-user-times fa-3x mb-3"></i>
                            <p class="mb-0">Not assigned to any admin</p>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Resolution Details -->
                @if($issue->resolution_details || $issue->resolved_at)
                <div class="card shadow mb-4">
                    <div class="card-header bg-success text-white py-3">
                        <h5 class="mb-0 text-white">
                            <i class="fas fa-check-circle me-2"></i>Resolution
                        </h5>
                    </div>
                    <div class="card-body">
                        @if($issue->resolution_details)
                        <h6 class="text-success">Resolution Details:</h6>
                        <p class="mb-3" style="white-space: pre-wrap;">{{ $issue->resolution_details }}</p>
                        @endif
                        @if($issue->resolved_at)
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="text-muted">Resolved on:</span>
                            <span class="fw-semibold">{{ $issue->resolved_at->format('M d, Y g:i A') }}</span>
                        </div>
                        @endif
                    </div>
                </div>
                @endif

                <!-- Timeline -->
                <div class="card shadow">
                    <div class="card-header bg-secondary text-white py-3">
                        <h5 class="mb-0 text-white">
                            <i class="fas fa-history me-2"></i>Timeline
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="timeline">
                            <div class="timeline-item">
                                <div class="timeline-marker bg-primary"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Issue Reported</h6>
                                    <p class="text-muted mb-0">{{ $issue->created_at->format('M d, Y g:i A') }}</p>
                                </div>
                            </div>
                            @if($issue->assigned_admin_id)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-info"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Assigned to Admin</h6>
                                    <p class="text-muted mb-0">When issue was assigned</p>
                                </div>
                            </div>
                            @endif
                            @if($issue->admin_notes)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-warning"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Notes Added</h6>
                                    <p class="text-muted mb-0">Internal notes updated</p>
                                </div>
                            </div>
                            @endif
                            @if($issue->resolved_at)
                            <div class="timeline-item">
                                <div class="timeline-marker bg-success"></div>
                                <div class="timeline-content">
                                    <h6 class="mb-1">Issue Resolved</h6>
                                    <p class="text-muted mb-0">{{ $issue->resolved_at->format('M d, Y g:i A') }}</p>
                                </div>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Resolve Modal -->
    <div class="modal fade" id="resolveModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Mark Issue as Resolved</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('admin.issues.resolve', $issue) }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Resolution Details *</label>
                            <textarea name="resolution_details" class="form-control" rows="4" required
                                placeholder="Describe how the issue was resolved..."></textarea>
                            <div class="form-text">This will be visible to the user who reported the issue.</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-success">Mark as Resolved</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Screenshot Modal -->
    <div class="modal fade" id="screenshotModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Screenshot Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img src="{{ $issue->screenshot_url }}" alt="Full size screenshot" class="img-fluid rounded">
                </div>
            </div>
        </div>
    </div>

    <style>
        .cursor-pointer {
            cursor: pointer;
        }

        /* Timeline Styles */
        .timeline {
            position: relative;
            padding-left: 2rem;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 1.5rem;
        }

        .timeline-marker {
            position: absolute;
            left: -2rem;
            top: 0.25rem;
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 0 0 3px currentColor;
        }

        .timeline-content {
            padding-left: 1rem;
        }

        .timeline-item:not(:last-child)::before {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: 1.25rem;
            bottom: -0.5rem;
            width: 2px;
            background-color: #e9ecef;
        }
    </style>

    <script>
        // Initialize tooltips
        document.addEventListener('DOMContentLoaded', function() {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        });

        // Auto-resize textareas
        document.querySelectorAll('textarea').forEach(textarea => {
            textarea.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
        });
    </script>
</x-layout>