@extends('layouts.app')

@section('title', 'Ticket ' . $supportTicket->ticket_number)
@section('page_title', 'Ticket #' . $supportTicket->ticket_number)

@section('content')
<div class="container my-4">
    <div class="row mb-4">
        <div class="col-md-12">
            <a href="{{ route('user.tickets.index') }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-2"></i>Back to Tickets
            </a>
        </div>
    </div>

    @if($message = Session::get('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="bi bi-check-circle me-2"></i>{{ $message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <div class="col-md-8">
            <!-- Ticket Details -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light border-bottom d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">{{ $supportTicket->subject }}</h5>
                        <small class="text-muted">Ticket #{{ $supportTicket->ticket_number }}</small>
                    </div>
                    <div>
                        @if($supportTicket->status === 'open')
                            <span class="badge bg-primary">Open</span>
                        @elseif($supportTicket->status === 'in_progress')
                            <span class="badge bg-warning">In Progress</span>
                        @elseif($supportTicket->status === 'resolved')
                            <span class="badge bg-success">Resolved</span>
                        @else
                            <span class="badge bg-secondary">Closed</span>
                        @endif
                    </div>
                </div>
                <div class="card-body">
                    <p class="text-muted mb-3">
                        <small>Created on {{ $supportTicket->created_at->format('M d, Y H:i') }}</small>
                    </p>
                    <div class="bg-light p-3 rounded mb-4">
                        <h6 class="fw-bold mb-2">Issue Description:</h6>
                        <p class="mb-0">{{ $supportTicket->description }}</p>
                    </div>
                </div>
            </div>

            <!-- Replies Section -->
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light border-bottom">
                    <h5 class="mb-0">Conversation</h5>
                </div>
                <div class="card-body" style="max-height: 500px; overflow-y: auto;">
                    @forelse($supportTicket->replies as $reply)
                        <div class="mb-4 {{ $reply->is_admin_reply ? 'text-end' : '' }}">
                            <div class="d-flex {{ $reply->is_admin_reply ? 'justify-content-end' : '' }} mb-2">
                                <div class="badge {{ $reply->is_admin_reply ? 'bg-danger' : 'bg-success' }}">
                                    {{ $reply->is_admin_reply ? 'Admin' : 'You' }} - {{ $reply->user->name }}
                                </div>
                            </div>
                            <div class="bg-light p-3 rounded {{ $reply->is_admin_reply ? '' : 'ms-4' }} {{ $reply->is_admin_reply ? 'me-4' : '' }}" style="display: inline-block;">
                                <p class="mb-2">{{ $reply->message }}</p>
                                @if($reply->attachment)
                                    <small class="text-muted d-block">
                                        <a href="{{ Storage::url('tickets/' . $reply->attachment) }}" target="_blank">
                                            <i class="bi bi-paperclip me-1"></i>{{ $reply->attachment }}
                                        </a>
                                    </small>
                                @endif
                                <small class="text-muted d-block mt-2">{{ $reply->created_at->format('M d, Y H:i') }}</small>
                            </div>
                        </div>
                    @empty
                        <p class="text-muted text-center py-4">No replies yet. Please wait for admin response.</p>
                    @endforelse
                </div>
            </div>

            <!-- Add Reply Form (if ticket is not closed) -->
            @if($supportTicket->status !== 'closed')
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-light border-bottom">
                        <h5 class="mb-0">Add Reply</h5>
                    </div>
                    <div class="card-body">
                        <form action="{{ route('user.tickets.addReply', $supportTicket) }}" method="POST" enctype="multipart/form-data">
                            @csrf

                            <div class="mb-3">
                                <label for="message" class="form-label">Message <span class="text-danger">*</span></label>
                                <textarea class="form-control @error('message') is-invalid @enderror" id="message" name="message" rows="4" placeholder="Type your reply..." required></textarea>
                                @error('message')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="attachment" class="form-label">Attachment (Optional)</label>
                                <input type="file" class="form-control @error('attachment') is-invalid @enderror" id="attachment" name="attachment">
                                <small class="text-muted">Max 5MB</small>
                                @error('attachment')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-send me-2"></i>Send Reply
                            </button>
                        </form>
                    </div>
                </div>
            @endif
        </div>

        <!-- Ticket Info Sidebar -->
        <div class="col-md-4">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-light border-bottom">
                    <h5 class="mb-0">Ticket Information</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label text-muted small">Category</label>
                        <p class="h6 mb-0"><span class="badge bg-secondary">{{ ucfirst(str_replace('_', ' ', $supportTicket->category)) }}</span></p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small">Priority</label>
                        <p class="h6 mb-0">
                            <span class="badge {{ $supportTicket->priority === 'urgent' ? 'bg-danger' : ($supportTicket->priority === 'high' ? 'bg-warning' : 'bg-info') }}">
                                {{ ucfirst($supportTicket->priority) }}
                            </span>
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small">Status</label>
                        <p class="h6 mb-0">
                            @if($supportTicket->status === 'open')
                                <span class="badge bg-primary">Open</span>
                            @elseif($supportTicket->status === 'in_progress')
                                <span class="badge bg-warning">In Progress</span>
                            @elseif($supportTicket->status === 'resolved')
                                <span class="badge bg-success">Resolved</span>
                            @else
                                <span class="badge bg-secondary">Closed</span>
                            @endif
                        </p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small">Replies</label>
                        <p class="h6 mb-0">{{ $supportTicket->replies->count() }}</p>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small">Created</label>
                        <p class="h6 mb-0">{{ $supportTicket->created_at->format('M d, Y H:i') }}</p>
                    </div>
                    @if($supportTicket->resolved_at)
                        <div class="mb-3">
                            <label class="form-label text-muted small">Resolved</label>
                            <p class="h6 mb-0">{{ $supportTicket->resolved_at->format('M d, Y H:i') }}</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Close Ticket -->
            @if($supportTicket->status !== 'closed')
                <form action="{{ route('user.tickets.close', $supportTicket) }}" method="POST">
                    @csrf
                    <button type="submit" class="btn btn-outline-danger w-100" onclick="return confirm('Are you sure you want to close this ticket?')">
                        <i class="bi bi-x-circle me-2"></i>Close Ticket
                    </button>
                </form>
            @endif
        </div>
    </div>
</div>
@endsection