@extends('admin.layout.index')

@section('title', 'Support Ticket Details')

@section('content')
<div class="row mb-3">
    <div class="col-12 d-flex align-items-center justify-content-between">
        <div>
            <h4 class="mb-0">TICKET ID: #TCK-1042</h4>
        </div>
        <div>
            <a href="{{ route('admin.support-tickets.index') }}" class="btn btn-light">
                <i class="ri-arrow-left-line me-1"></i> Back to Support Tickets
            </a>
        </div>
    </div>
</div>

<!-- Ticket Information -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Ticket Information</h5>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-lg-6">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-primary-subtle rounded fs-4">
                                    <i class="ri-user-line text-primary"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-1">User</label>
                                <div class="d-flex align-items-center gap-2">
                                    <div class="avatar-xs bg-soft-primary text-primary rounded-circle d-flex align-items-center justify-content-center fw-semibold">JS</div>
                                    <div>
                                        <h6 class="mb-0 fw-semibold">Jenny Smith</h6>
                                        <small class="text-muted">USR-1024</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-info-subtle rounded fs-4">
                                    <i class="ri-file-list-line text-info"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-1">Subject</label>
                                <h6 class="mb-0 fw-semibold">App crashes on start</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-warning-subtle rounded fs-4">
                                    <i class="ri-folder-line text-warning"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-1">Category</label>
                                <div>
                                    <span class="badge bg-warning">Crash</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-danger-subtle rounded fs-4">
                                    <i class="ri-alert-line text-danger"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-1">Priority</label>
                                <div>
                                    <span class="badge bg-danger">High</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-success-subtle rounded fs-4">
                                    <i class="ri-checkbox-circle-line text-success"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-1">Status</label>
                                <div>
                                    <select class="form-select form-select-sm" style="width:200px;">
                                        <option>Open</option>
                                        <option selected>In Progress</option>
                                        <option>Resolved</option>
                                        <option>Closed</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-secondary-subtle rounded fs-4">
                                    <i class="ri-time-line text-secondary"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-1">Created Date</label>
                                <h6 class="mb-0">2024-06-12 10:30 AM</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-info-subtle rounded fs-4">
                                    <i class="ri-refresh-line text-info"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-1">Last Updated</label>
                                <h6 class="mb-0">2024-06-12 02:45 PM</h6>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-primary-subtle rounded fs-4">
                                    <i class="ri-smartphone-line text-primary"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-1">Device Information</label>
                                <div>
                                    <div class="fw-semibold">iPhone 13 Pro</div>
                                    <small class="text-muted">iOS 16.4.1</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="d-flex align-items-start gap-3 p-3 border rounded">
                            <div class="avatar-sm flex-shrink-0">
                                <span class="avatar-title bg-secondary-subtle rounded fs-4">
                                    <i class="ri-message-line text-secondary"></i>
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <label class="form-label text-muted mb-2">Description</label>
                                <p class="mb-0">The app crashes immediately after opening. I've tried restarting my phone and reinstalling the app, but the issue persists. This started happening after the latest update. The app shows the splash screen for a second and then closes automatically.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Conversation/Activity Timeline -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h5 class="card-title mb-0">Activity Timeline</h5>
                <button class="btn btn-primary btn-sm">
                    <i class="ri-reply-line me-1"></i> Add Response
                </button>
            </div>
            <div class="card-body">
                <div class="timeline">
                    <div class="timeline-item d-flex gap-3 mb-4">
                        <div class="flex-shrink-0">
                            <div class="avatar-xs bg-soft-primary text-primary rounded-circle d-flex align-items-center justify-content-center fw-semibold">JS</div>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h6 class="mb-0 fw-semibold">Jenny Smith</h6>
                                <span class="badge bg-primary">User</span>
                                <small class="text-muted">2024-06-12 10:30 AM</small>
                            </div>
                            <p class="mb-0 text-muted">The app crashes immediately after opening. I've tried restarting my phone and reinstalling the app, but the issue persists.</p>
                        </div>
                    </div>
                    <div class="timeline-item d-flex gap-3 mb-4">
                        <div class="flex-shrink-0">
                            <div class="avatar-xs bg-soft-success text-success rounded-circle d-flex align-items-center justify-content-center fw-semibold">AD</div>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h6 class="mb-0 fw-semibold">Admin</h6>
                                <span class="badge bg-success">Support</span>
                                <small class="text-muted">2024-06-12 11:15 AM</small>
                            </div>
                            <p class="mb-0 text-muted">Thank you for reporting this issue. We're looking into it. Can you please provide your device model and iOS version?</p>
                        </div>
                    </div>
                    <div class="timeline-item d-flex gap-3 mb-4">
                        <div class="flex-shrink-0">
                            <div class="avatar-xs bg-soft-primary text-primary rounded-circle d-flex align-items-center justify-content-center fw-semibold">JS</div>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h6 class="mb-0 fw-semibold">Jenny Smith</h6>
                                <span class="badge bg-primary">User</span>
                                <small class="text-muted">2024-06-12 11:45 AM</small>
                            </div>
                            <p class="mb-0 text-muted">I'm using iPhone 13 Pro with iOS 16.4.1. The app version is 2.3.1.</p>
                        </div>
                    </div>
                    <div class="timeline-item d-flex gap-3 mb-4">
                        <div class="flex-shrink-0">
                            <div class="avatar-xs bg-soft-success text-success rounded-circle d-flex align-items-center justify-content-center fw-semibold">AD</div>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex align-items-center gap-2 mb-1">
                                <h6 class="mb-0 fw-semibold">Admin</h6>
                                <span class="badge bg-success">Support</span>
                                <small class="text-muted">2024-06-12 02:45 PM</small>
                            </div>
                            <p class="mb-0 text-muted">We've identified the issue and are working on a fix. We'll update you once the patch is available. Status changed to "In Progress".</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Attachments (if any) -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Attachments</h5>
            </div>
            <div class="card-body">
                <div class="d-flex flex-wrap gap-3">
                    <div class="border rounded p-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="ri-file-image-line fs-4 text-primary"></i>
                            <div>
                                <div class="fw-semibold">screenshot_001.png</div>
                                <small class="text-muted">2.4 MB</small>
                            </div>
                            <a href="#" class="btn btn-sm btn-soft-primary ms-auto">
                                <i class="ri-download-line"></i>
                            </a>
                        </div>
                    </div>
                    <div class="border rounded p-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="ri-file-video-line fs-4 text-danger"></i>
                            <div>
                                <div class="fw-semibold">crash_video.mp4</div>
                                <small class="text-muted">5.8 MB</small>
                            </div>
                            <a href="#" class="btn btn-sm btn-soft-primary ms-auto">
                                <i class="ri-download-line"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection