@extends('layouts.admin')

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

@section('content')
<div class="row mb-4">
    <div class="col-md-12">
        <a href="{{ route('admin.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">
                <div class="mb-3">
                    <small class="text-muted">From: <strong>{{ $supportTicket->user->name }}</strong> ({{ $supportTicket->user->email }})</small>
                </div>
                <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' : 'Customer' }} - {{ $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.</p>
                @endforelse
            </div>
        </div>

        <!-- Add Reply Form -->
        @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('admin.tickets.reply', $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 response..." 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>

    <!-- Sidebar -->
    <div class="col-md-4">
        <!-- Ticket Info -->
        <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>
        </div>

        <!-- Assign Ticket -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">Assign Ticket</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.tickets.assign', $supportTicket) }}" method="POST">
                    @csrf
                    <select name="assigned_to" class="form-select mb-3">
                        <option value="">-- Assign to Admin --</option>
                        @foreach($admins as $admin)
                            <option value="{{ $admin->id }}" @if($supportTicket->assigned_to === $admin->id) selected @endif>
                                {{ $admin->name }}
                            </option>
                        @endforeach
                    </select>
                    <button type="submit" class="btn btn-primary w-100">Assign</button>
                </form>
            </div>
        </div>

        <!-- Update Status -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-light border-bottom">
                <h5 class="mb-0">Update Status</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.tickets.updateStatus', $supportTicket) }}" method="POST">
                    @csrf
                    <select name="status" class="form-select mb-3">
                        <option value="open" @if($supportTicket->status === 'open') selected @endif>Open</option>
                        <option value="in_progress" @if($supportTicket->status === 'in_progress') selected @endif>In Progress</option>
                        <option value="resolved" @if($supportTicket->status === 'resolved') selected @endif>Resolved</option>
                        <option value="closed" @if($supportTicket->status === 'closed') selected @endif>Closed</option>
                    </select>
                    <button type="submit" class="btn btn-primary w-100">Update</button>
                </form>
            </div>
        </div>

        <!-- Close Ticket -->
        @if($supportTicket->status !== 'closed')
            <form action="{{ route('admin.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>
@endsection