@extends('layouts.admin')

@section('title', 'Ticket Details')
@section('page-title', 'Ticket Details: ' . $ticket->subject)

@section('content')
<div class="row">
    <div class="col-md-8">
        <!-- Ticket Details -->
        <div class="card shadow mb-4">
            <div class="card-header bg-primary text-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Ticket #{{ $ticket->id }}: {{ $ticket->subject }}</h5>
                    <div class="d-flex gap-2">
                        <span class="badge bg-{{ $ticket->priority == 'high' ? 'danger' : ($ticket->priority == 'medium' ? 'warning' : 'secondary') }}">
                            {{ ucfirst($ticket->priority) }} Priority
                        </span>
                        <span class="badge bg-{{ $ticket->status == 'open' ? 'success' : ($ticket->status == 'in_progress' ? 'primary' : ($ticket->status == 'resolved' ? 'info' : 'secondary')) }}">
                            {{ ucfirst(str_replace('_', ' ', $ticket->status)) }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        <strong>User:</strong>
                        <div class="d-flex align-items-center mt-1">
                            <div class="avatar bg-primary text-white rounded-circle me-2" 
                                 style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
                                {{ strtoupper(substr($ticket->user->name, 0, 1)) }}
                            </div>
                            <div>
                                <div>{{ $ticket->user->name }}</div>
                                <small class="text-muted">{{ $ticket->user->email }}</small>
                                <br>
                                <small class="text-muted">{{ $ticket->user->mobile }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <strong>Ticket Information:</strong>
                        <div class="mt-1">
                            <div><small><strong>Category:</strong> {{ ucfirst($ticket->category) }}</small></div>
                            <div><small><strong>Created:</strong> {{ $ticket->created_at->format('M j, Y H:i') }}</small></div>
                            <div><small><strong>Last Update:</strong> {{ $ticket->updated_at->format('M j, Y H:i') }}</small></div>
                            @if($ticket->assignedTo)
                            <div><small><strong>Assigned To:</strong> {{ $ticket->assignedTo->name }}</small></div>
                            @endif
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <strong>Description:</strong>
                    <div class="border rounded p-3 mt-1 bg-light">
                        {{ $ticket->description }}
                    </div>
                </div>

                <!-- Quick Actions -->
                <div class="d-flex gap-2 mb-4">
                    <form action="{{ route('admin.tickets.status', $ticket) }}" method="POST" class="d-inline">
                        @csrf
                        @method('POST')
                        <input type="hidden" name="status" value="in_progress">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="fas fa-play me-1"></i>Start Progress
                        </button>
                    </form>
                    <form action="{{ route('admin.tickets.status', $ticket) }}" method="POST" class="d-inline">
                        @csrf
                        @method('POST')
                        <input type="hidden" name="status" value="resolved">
                        <button type="submit" class="btn btn-success btn-sm">
                            <i class="fas fa-check me-1"></i>Mark Resolved
                        </button>
                    </form>
                    <form action="{{ route('admin.tickets.status', $ticket) }}" method="POST" class="d-inline">
                        @csrf
                        @method('POST')
                        <input type="hidden" name="status" value="closed">
                        <button type="submit" class="btn btn-secondary btn-sm">
                            <i class="fas fa-times me-1"></i>Close Ticket
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Conversation -->
        <div class="card shadow">
            <div class="card-header bg-secondary text-white">
                <h6 class="mb-0"><i class="fas fa-comments me-2"></i>Conversation</h6>
            </div>
            <div class="card-body">
                @foreach($ticket->replies as $reply)
                <div class="message mb-4">
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <div class="d-flex align-items-center">
                            <div class="avatar bg-{{ $reply->is_admin_reply ? 'warning' : 'primary' }} text-white rounded-circle me-2" 
                                 style="width: 35px; height: 35px; line-height: 35px; text-align: center;">
                                {{ strtoupper(substr($reply->user->name, 0, 1)) }}
                            </div>
                            <div>
                                <strong>{{ $reply->user->name }}</strong>
                                @if($reply->is_admin_reply)
                                <span class="badge bg-warning ms-1">Admin</span>
                                @else
                                <span class="badge bg-primary ms-1">User</span>
                                @endif
                                <br>
                                <small class="text-muted">{{ $reply->created_at->format('M j, Y H:i') }}</small>
                            </div>
                        </div>
                    </div>
                    <div class="message-content border rounded p-3 bg-light">
                        {{ $reply->message }}
                    </div>
                </div>
                @endforeach

                <!-- Reply Form -->
                <div class="reply-form mt-4">
                    <form action="{{ route('admin.tickets.reply', $ticket) }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="message" class="form-label">Your Reply</label>
                            <textarea class="form-control @error('message') is-invalid @enderror" 
                                      id="message" name="message" rows="4" 
                                      placeholder="Type your reply here..." required></textarea>
                            @error('message')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="text-end">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-2"></i>Send Reply
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <!-- Ticket Actions -->
        <div class="card shadow mb-4">
            <div class="card-header bg-info text-white">
                <h6 class="mb-0"><i class="fas fa-cog me-2"></i>Ticket Actions</h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <!-- Assign Ticket -->
                    <button type="button" class="btn btn-outline-primary btn-sm" 
                            data-bs-toggle="modal" data-bs-target="#assignModal">
                        <i class="fas fa-user-plus me-2"></i>Assign Ticket
                    </button>

                    <!-- Status Update -->
                    <div class="dropdown">
                        <button class="btn btn-outline-warning btn-sm dropdown-toggle w-100" 
                                type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-sync me-2"></i>Update Status
                        </button>
                        <ul class="dropdown-menu w-100">
                            <li>
                                <form action="{{ route('admin.tickets.status', $ticket) }}" method="POST">
                                    @csrf
                                    @method('POST')
                                    <input type="hidden" name="status" value="open">
                                    <button type="submit" class="dropdown-item">Open</button>
                                </form>
                            </li>
                            <li>
                                <form action="{{ route('admin.tickets.status', $ticket) }}" method="POST">
                                    @csrf
                                    @method('POST')
                                    <input type="hidden" name="status" value="in_progress">
                                    <button type="submit" class="dropdown-item">In Progress</button>
                                </form>
                            </li>
                            <li>
                                <form action="{{ route('admin.tickets.status', $ticket) }}" method="POST">
                                    @csrf
                                    @method('POST')
                                    <input type="hidden" name="status" value="resolved">
                                    <button type="submit" class="dropdown-item">Resolved</button>
                                </form>
                            </li>
                            <li>
                                <form action="{{ route('admin.tickets.status', $ticket) }}" method="POST">
                                    @csrf
                                    @method('POST')
                                    <input type="hidden" name="status" value="closed">
                                    <button type="submit" class="dropdown-item">Closed</button>
                                </form>
                            </li>
                        </ul>
                    </div>

                    <!-- Priority Update -->
                    <div class="dropdown">
                        <button class="btn btn-outline-danger btn-sm dropdown-toggle w-100" 
                                type="button" data-bs-toggle="dropdown">
                            <i class="fas fa-exclamation-triangle me-2"></i>Change Priority
                        </button>
                        <ul class="dropdown-menu w-100">
                            <li>
                                <form action="{{ route('admin.tickets.priority', $ticket) }}" method="POST">
                                    @csrf
                                    @method('POST')
                                    <input type="hidden" name="priority" value="high">
                                    <button type="submit" class="dropdown-item text-danger">High Priority</button>
                                </form>
                            </li>
                            <li>
                                <form action="{{ route('admin.tickets.priority', $ticket) }}" method="POST">
                                    @csrf
                                    @method('POST')
                                    <input type="hidden" name="priority" value="medium">
                                    <button type="submit" class="dropdown-item text-warning">Medium Priority</button>
                                </form>
                            </li>
                            <li>
                                <form action="{{ route('admin.tickets.priority', $ticket) }}" method="POST">
                                    @csrf
                                    @method('POST')
                                    <input type="hidden" name="priority" value="low">
                                    <button type="submit" class="dropdown-item text-secondary">Low Priority</button>
                                </form>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- User Information -->
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h6 class="mb-0"><i class="fas fa-user me-2"></i>User Information</h6>
            </div>
            <div class="card-body">
                <div class="text-center mb-3">
                    <div class="avatar bg-success text-white rounded-circle d-inline-flex align-items-center justify-content-center" 
                         style="width: 60px; height: 60px; font-size: 1.5rem;">
                        {{ strtoupper(substr($ticket->user->name, 0, 1)) }}
                    </div>
                    <h6 class="mt-2 mb-1">{{ $ticket->user->name }}</h6>
                    <p class="text-muted small mb-0">{{ $ticket->user->email }}</p>
                </div>

                <div class="user-stats">
                    <div class="row text-center">
                        <div class="col-6">
                            <div class="border rounded p-2">
                                <div class="text-success fw-bold">{{ $ticket->user->smsLogs->count() }}</div>
                                <small class="text-muted">SMS Sent</small>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="border rounded p-2">
                                <div class="text-primary fw-bold">{{ $ticket->user->tickets->count() }}</div>
                                <small class="text-muted">Tickets</small>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="mt-3">
                    <strong>Account Details:</strong>
                    <div class="small mt-1">
                        <div><strong>Balance:</strong> ৳{{ number_format($ticket->user->balance, 2) }}</div>
                        <div><strong>KYC Status:</strong> 
                            @if($ticket->user->kyc_verified)
                                <span class="badge bg-success">Verified</span>
                            @else
                                <span class="badge bg-warning">Pending</span>
                            @endif
                        </div>
                        <div><strong>Account Status:</strong> 
                            @if($ticket->user->status)
                                <span class="badge bg-success">Active</span>
                            @else
                                <span class="badge bg-danger">Inactive</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Assign Modal -->
<div class="modal fade" id="assignModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Assign Ticket to Admin</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('admin.tickets.assign', $ticket) }}" method="POST">
                    @csrf
                    @method('POST')
                    <div class="mb-3">
                        <label for="assigned_to" class="form-label">Select Admin</label>
                        <select class="form-control" id="assigned_to" name="assigned_to" required>
                            <option value="">Select Admin</option>
                            @foreach($admins as $admin)
                                <option value="{{ $admin->id }}" {{ $ticket->assigned_to == $admin->id ? 'selected' : '' }}>
                                    {{ $admin->name }} ({{ $admin->email }})
                                </option>
                            @endforeach
                        </select>
                    </div>
                    <div class="text-end">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Assign Ticket</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection