@extends('crm.layouts.master')
@section('title','Ticket #' . $ticket->id)
@section('main-content')
    <div class="breadcrumb">
        <h3>Ticket #{{ $ticket->id }}</h3>
        <a href="{{ route('crm.tickets') }}" class="btn btn-sm btn-outline-primary ms-auto">
            <i class="fas fa-arrow-left me-1"></i> Back to Tickets
        </a>
    </div>
    <div class="separator-breadcrumb border-top"></div>

    <div class="row">
        {{-- Ticket Info --}}
        <div class="col-lg-8">
            <div class="card shadow-sm mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <strong>{{ $ticket->subject }}</strong>
                    @php
                        $sColors = ['open' => 'warning', 'in_progress' => 'primary', 'resolved' => 'success', 'closed' => 'secondary'];
                    @endphp
                    <span class="badge bg-{{ $sColors[$ticket->status] ?? 'secondary' }}">{{ ucfirst(str_replace('_', ' ', $ticket->status)) }}</span>
                </div>
                <div class="card-body">
                    <div class="mb-3" style="white-space:pre-wrap;font-size:.9rem">{{ $ticket->message }}</div>
                    <div class="text-muted" style="font-size:.8rem">
                        Submitted by <strong>{{ $ticket->lead?->fname }} {{ $ticket->lead?->lname }}</strong>
                        ({{ $ticket->lead?->email }})
                        on {{ $ticket->created_at->format('M d, Y H:i') }}
                    </div>
                </div>
            </div>

            {{-- Replies --}}
            @foreach($ticket->replies as $reply)
            <div class="card shadow-sm mb-3" style="border-left: 3px solid {{ $reply->is_staff ? '#3b82f6' : '#0ecb81' }}">
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-2">
                        <strong style="font-size:.85rem">
                            @if($reply->is_staff)
                                <i class="fas fa-headset text-primary me-1"></i> {{ $reply->user?->name ?? 'Staff' }}
                            @else
                                <i class="fas fa-user text-success me-1"></i> {{ $reply->lead?->fname ?? 'Client' }} {{ $reply->lead?->lname ?? '' }}
                            @endif
                        </strong>
                        <small class="text-muted">{{ $reply->created_at->format('M d, Y H:i') }}</small>
                    </div>
                    <div style="white-space:pre-wrap;font-size:.88rem">{{ $reply->message }}</div>
                </div>
            </div>
            @endforeach

            {{-- Reply form --}}
            @if($ticket->status !== 'closed')
            <div class="card shadow-sm">
                <div class="card-header"><strong>Reply to Client</strong></div>
                <div class="card-body">
                    <textarea class="form-control mb-3" id="replyMessage" rows="4" placeholder="Type your reply..."></textarea>
                    <button class="btn btn-primary" onclick="sendReply({{ $ticket->id }})">
                        <i class="fas fa-paper-plane me-1"></i> Send Reply
                    </button>
                </div>
            </div>
            @endif
        </div>

        {{-- Sidebar --}}
        <div class="col-lg-4">
            <div class="card shadow-sm mb-3">
                <div class="card-header"><strong>Details</strong></div>
                <div class="card-body p-0">
                    <table class="table table-sm mb-0">
                        <tr>
                            <td class="text-muted" style="width:40%">Department</td>
                            <td>
                                <span class="badge {{ $ticket->department === 'sales' ? 'bg-primary' : 'bg-info' }}">
                                    {{ ucfirst($ticket->department) }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Priority</td>
                            <td>
                                @php $pColors = ['low' => 'secondary', 'medium' => 'primary', 'high' => 'warning', 'urgent' => 'danger']; @endphp
                                <span class="badge bg-{{ $pColors[$ticket->priority] ?? 'secondary' }}">{{ ucfirst($ticket->priority) }}</span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Update Via</td>
                            <td>
                                @if($ticket->update_via === 'callback')
                                    <i class="fas fa-phone-flip text-warning me-1"></i> Callback requested
                                @elseif($ticket->update_via === 'phone')
                                    <i class="fas fa-phone text-info me-1"></i> Phone: {{ $ticket->lead?->phone ?? 'N/A' }}
                                @else
                                    <i class="fas fa-bell text-muted me-1"></i> Internal System
                                @endif
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted">Client Phone</td>
                            <td>{{ $ticket->lead?->phone ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Assigned To</td>
                            <td>{{ $ticket->assignee?->name ?? 'Unassigned' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Created</td>
                            <td>{{ $ticket->created_at->format('Y-m-d H:i') }}</td>
                        </tr>
                        @if($ticket->resolved_at)
                        <tr>
                            <td class="text-muted">Resolved</td>
                            <td>{{ $ticket->resolved_at->format('Y-m-d H:i') }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
            </div>

            @if($ticket->status !== 'closed')
            <div class="card shadow-sm mb-3">
                <div class="card-header"><strong>Update Status</strong></div>
                <div class="card-body">
                    <select class="form-control mb-2" id="statusSelect">
                        <option value="open" {{ $ticket->status === 'open' ? 'selected' : '' }}>Open</option>
                        <option value="in_progress" {{ $ticket->status === 'in_progress' ? 'selected' : '' }}>In Progress</option>
                        <option value="resolved" {{ $ticket->status === 'resolved' ? 'selected' : '' }}>Resolved</option>
                        <option value="closed" {{ $ticket->status === 'closed' ? 'selected' : '' }}>Closed</option>
                    </select>
                    <textarea class="form-control mb-2" id="adminNotes" rows="2" placeholder="Internal notes (optional)">{{ $ticket->admin_notes }}</textarea>
                    <button class="btn btn-dark btn-sm w-100" onclick="updateStatus({{ $ticket->id }})">
                        <i class="fas fa-save me-1"></i> Update
                    </button>
                </div>
            </div>
            @endif

            @if($ticket->admin_notes)
            <div class="card shadow-sm">
                <div class="card-header"><strong>Internal Notes</strong></div>
                <div class="card-body" style="font-size:.85rem;white-space:pre-wrap">{{ $ticket->admin_notes }}</div>
            </div>
            @endif
        </div>
    </div>
@endsection

@section('page-js')
<script>
function sendReply(ticketId) {
    var msg = document.getElementById('replyMessage').value.trim();
    if (!msg) return alert('Please enter a reply.');

    $.ajax({
        url: '/tickets/' + ticketId + '/reply',
        method: 'POST',
        data: { _token: '{{ csrf_token() }}', message: msg },
        success: function(res) {
            if (res.icon === 'success') location.reload();
        },
        error: function() { alert('Failed to send reply.'); }
    });
}

function updateStatus(ticketId) {
    var status = document.getElementById('statusSelect').value;
    var notes = document.getElementById('adminNotes').value;

    $.ajax({
        url: '/tickets/' + ticketId + '/status',
        method: 'POST',
        data: { _token: '{{ csrf_token() }}', status: status, admin_notes: notes },
        success: function(res) {
            if (res.icon === 'success') location.reload();
        },
        error: function() { alert('Failed to update status.'); }
    });
}
</script>
@endsection