@extends('adminlte::page')

@section('title', 'Communication Details')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1>Communication Details</h1>
        <div>
            <a href="{{ route('communications.edit', $communication) }}" class="btn btn-warning">
                <i class="fas fa-edit"></i> Edit
            </a>
            <a href="{{ route('communications.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back
            </a>
        </div>
    </div>
@stop

@section('content')
<div class="row">
    <div class="col-md-8">
        <!-- Main Communication -->
        <div class="card">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h3 class="card-title">{{ $communication->subject }}</h3>
                    <div>
                        @php
                            $priorityColors = [
                                'low' => 'success',
                                'medium' => 'info', 
                                'high' => 'warning',
                                'urgent' => 'danger'
                            ];
                            $color = $priorityColors[$communication->priority] ?? 'secondary';
                        @endphp
                        <span class="badge badge-{{ $color }}">{{ ucfirst($communication->priority) }} Priority</span>
                        <span class="badge badge-secondary">{{ ucfirst($communication->communication_type) }}</span>
                        <span class="badge badge-info">{{ ucfirst($communication->direction) }}</span>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-md-6">
                        <strong>From:</strong> {{ $communication->user->name ?? 'Unknown' }}<br>
                        <strong>Date:</strong> {{ $communication->communication_date->format('M j, Y g:i A') }}<br>
                        @if($communication->duration)
                            <strong>Duration:</strong> {{ $communication->duration }} minutes<br>
                        @endif
                    </div>
                    <div class="col-md-6">
                        @if($communication->case)
                            <strong>Case:</strong> 
                            <a href="{{ route('cases.show', $communication->case) }}" class="text-primary">
                                {{ $communication->case->case_number }} - {{ $communication->case->title }}
                            </a><br>
                            @if($communication->case->client)
                                <strong>Client:</strong> {{ $communication->case->client->display_name }}<br>
                            @endif
                        @endif
                        @if($communication->participants && count($communication->participants) > 0)
                            <strong>Participants:</strong><br>
                            @foreach($communication->participants as $participant)
                                <small class="badge badge-light">{{ $participant['name'] ?? 'Unknown' }}</small>
                            @endforeach
                        @endif
                    </div>
                </div>
                
                <hr>
                
                <div class="communication-content">
                    {!! nl2br(e($communication->content)) !!}
                </div>
            </div>
        </div>

        <!-- Replies Thread -->
        @if($communication->replies->count() > 0)
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-reply"></i> Replies ({{ $communication->replies->count() }})
                    </h3>
                </div>
                <div class="card-body">
                    @foreach($communication->replies as $reply)
                        <div class="reply-item border-left border-primary pl-3 mb-3">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <div>
                                    <strong>{{ $reply->user->name ?? 'Unknown' }}</strong>
                                    <small class="text-muted">{{ $reply->communication_date->format('M j, Y g:i A') }}</small>
                                    @if($reply->priority !== 'medium')
                                        <span class="badge badge-{{ $priorityColors[$reply->priority] ?? 'secondary' }} badge-sm">
                                            {{ ucfirst($reply->priority) }}
                                        </span>
                                    @endif
                                </div>
                                <div class="reply-actions">
                                    <a href="{{ route('communications.edit', $reply) }}" class="btn btn-sm btn-outline-warning">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <form action="{{ route('communications.destroy', $reply) }}" method="POST" class="d-inline">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this reply?')">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </form>
                                </div>
                            </div>
                            <div class="reply-content">
                                {!! nl2br(e($reply->content)) !!}
                            </div>
                        </div>
                        @if(!$loop->last)
                            <hr>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif

        <!-- Reply Form -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-reply"></i> Reply
                </h3>
            </div>
            <form action="{{ route('communications.reply', $communication) }}" method="POST">
                @csrf
                <div class="card-body">
                    <div class="form-group">
                        <label for="content">Your Reply <span class="text-danger">*</span></label>
                        <textarea name="content" id="content" rows="5" class="form-control @error('content') is-invalid @enderror" 
                                  required placeholder="Type your reply here...">{{ old('content') }}</textarea>
                        @error('content')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                    
                    <div class="form-group">
                        <label for="priority">Priority</label>
                        <select name="priority" id="priority" class="form-control @error('priority') is-invalid @enderror">
                            <option value="medium" {{ old('priority', 'medium') == 'medium' ? 'selected' : '' }}>Medium</option>
                            <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Low</option>
                            <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>High</option>
                            <option value="urgent" {{ old('priority') == 'urgent' ? 'selected' : '' }}>Urgent</option>
                        </select>
                        @error('priority')
                            <span class="invalid-feedback">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-primary">
                        <i class="fas fa-reply"></i> Send Reply
                    </button>
                </div>
            </form>
        </div>
    </div>

    <div class="col-md-4">
        <!-- Case Information -->
        @if($communication->case)
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Case Information</h3>
            </div>
            <div class="card-body">
                <strong>Case Number:</strong> {{ $communication->case->case_number }}<br>
                <strong>Title:</strong> {{ $communication->case->title }}<br>
                <strong>Status:</strong> <span class="badge badge-info">{{ ucfirst($communication->case->status) }}</span><br>
                <strong>Priority:</strong> <span class="badge badge-warning">{{ ucfirst($communication->case->priority) }}</span><br>
                @if($communication->case->client)
                    <strong>Client:</strong> {{ $communication->case->client->display_name }}<br>
                @endif
                @if($communication->case->primaryLawyer)
                    <strong>Primary Lawyer:</strong> {{ $communication->case->primaryLawyer->name }}<br>
                @endif
                <hr>
                <a href="{{ route('cases.show', $communication->case) }}" class="btn btn-sm btn-primary">
                    <i class="fas fa-eye"></i> View Case
                </a>
                <a href="{{ route('communications.create', ['case_id' => $communication->case->id]) }}" class="btn btn-sm btn-success">
                    <i class="fas fa-plus"></i> New Communication
                </a>
            </div>
        </div>
        @endif

        <!-- Related Communications -->
        @if($communication->case)
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Related Communications</h3>
            </div>
            <div class="card-body">
                @php
                    $relatedComms = $communication->case->communications()
                        ->where('id', '!=', $communication->id)
                        ->latest('communication_date')
                        ->limit(5)
                        ->get();
                @endphp
                
                @if($relatedComms->count() > 0)
                    @foreach($relatedComms as $related)
                        <div class="border-bottom pb-2 mb-2">
                            <a href="{{ route('communications.show', $related) }}" class="text-dark">
                                <strong>{{ $related->subject }}</strong>
                            </a><br>
                            <small class="text-muted">
                                {{ $related->communication_date->format('M j, Y') }} - 
                                {{ ucfirst($related->communication_type) }}
                            </small>
                        </div>
                    @endforeach
                    
                    <a href="{{ route('communications.index', ['case_id' => $communication->case->id]) }}" class="btn btn-sm btn-outline-primary">
                        View All Case Communications
                    </a>
                @else
                    <p class="text-muted">No other communications for this case.</p>
                @endif
            </div>
        </div>
        @endif

        <!-- Actions -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Actions</h3>
            </div>
            <div class="card-body">
                @if(!$communication->is_read)
                    <button type="button" class="btn btn-sm btn-info btn-block" onclick="markAsRead()">
                        <i class="fas fa-check"></i> Mark as Read
                    </button>
                @endif
                
                <a href="{{ route('communications.edit', $communication) }}" class="btn btn-sm btn-warning btn-block">
                    <i class="fas fa-edit"></i> Edit Communication
                </a>
                
                <form action="{{ route('communications.destroy', $communication) }}" method="POST" class="mt-2">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-danger btn-block" onclick="return confirm('Are you sure you want to delete this communication?')">
                        <i class="fas fa-trash"></i> Delete Communication
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
.communication-content {
    font-size: 1.1em;
    line-height: 1.6;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    border-left: 4px solid #007bff;
}

.reply-item {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
}

.reply-content {
    margin-top: 10px;
    line-height: 1.5;
}

.reply-actions {
    opacity: 0.7;
    transition: opacity 0.2s;
}

.reply-item:hover .reply-actions {
    opacity: 1;
}
</style>
@stop

@section('js')
<script>
function markAsRead() {
    $.post('{{ route("communications.mark-read", $communication) }}', {
        _token: '{{ csrf_token() }}'
    }, function(response) {
        if (response.success) {
            location.reload();
        }
    });
}

// Auto-refresh for new replies every 30 seconds
setInterval(function() {
    // You can implement real-time updates here
}, 30000);
</script>
@stop