@extends('adminlte::page')

@section('title', 'Communications')

@section('content_header')
    <div class="d-flex justify-content-between align-items-center">
        <h1 class="font-condensed">Communications</h1>
        <a href="{{ route('communications.create') }}" class="btn btn-primary btn-sm">
            <i class="fas fa-plus"></i> New Communication
        </a>
    </div>
@include('partials.datatables')
@stop

@section('content')
<div class="row">
    <div class="col-12">
        <!-- Filters -->
        <div class="card card-outline card-primary collapsed-card">
            <div class="card-header p-compact">
                <h3 class="card-title font-condensed">
                    <i class="fas fa-filter"></i> Filters & Search
                </h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body table-filters" style="display: none;">
                <form method="GET" action="{{ route('communications.index') }}">
                    <div class="form-row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Case</label>
                                <select name="case_id" class="form-control form-control-sm">
                                    <option value="">All Cases</option>
                                    @foreach($cases as $case)
                                        <option value="{{ $case->id }}" {{ request('case_id') == $case->id ? 'selected' : '' }}>
                                            {{ $case->case_number }} - {{ Str::limit($case->title, 25) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Type</label>
                                <select name="type" class="form-control form-control-sm">
                                    <option value="">All Types</option>
                                    <option value="email" {{ request('type') == 'email' ? 'selected' : '' }}>Email</option>
                                    <option value="phone" {{ request('type') == 'phone' ? 'selected' : '' }}>Phone</option>
                                    <option value="meeting" {{ request('type') == 'meeting' ? 'selected' : '' }}>Meeting</option>
                                    <option value="note" {{ request('type') == 'note' ? 'selected' : '' }}>Note</option>
                                    <option value="letter" {{ request('type') == 'letter' ? 'selected' : '' }}>Letter</option>
                                    <option value="message" {{ request('type') == 'message' ? 'selected' : '' }}>Message</option>
                                    <option value="whatsapp" {{ request('type') == 'whatsapp' ? 'selected' : '' }}>WhatsApp</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Options</label>
                                <div class="mt-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="unread" value="1" {{ request('unread') ? 'checked' : '' }}>
                                        <label class="form-check-label text-compact">Unread Only</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label class="form-label">Actions</label>
                                <div class="mt-2">
                                    <button type="submit" class="btn btn-primary btn-sm">
                                        <i class="fas fa-search"></i> Filter
                                    </button>
                                    <a href="{{ route('communications.index') }}" class="btn btn-secondary btn-sm">
                                        <i class="fas fa-times"></i> Clear
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Communications List -->
        <div class="card dashboard-table-card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h3 class="card-title mb-0"><i class="fas fa-comments mr-1"></i> Communications List</h3>
                <div class="card-header-actions"><span class="badge badge-light border">{{ $communications->total() }} total</span></div>
            </div>
            <div class="card-body p-0">
                @if($communications->count() > 0)
                    <div class="dashboard-table-container">
                        <table class="table table-modern table-hover w-100">
                            <thead class="thead-light">
                                <tr>
                                    <th class="text-center text-nowrap" width="36"><i class="fas fa-eye"></i></th>
                                    <th class="text-nowrap">Subject</th>
                                    <th class="text-nowrap">Case</th>
                                    <th class="text-nowrap">Type</th>
                                    <th class="text-nowrap">From/To</th>
                                    <th class="text-nowrap">Date</th>
                                    <th class="text-nowrap">Priority</th>
                                    <th class="text-nowrap text-right" width="140">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($communications as $communication)
                                    @php
                                        $type = strtolower($communication->communication_type);
                                        $icons = [
                                            'email' => 'envelope',
                                            'phone' => 'phone',
                                            'meeting' => 'handshake',
                                            'note' => 'sticky-note',
                                            'letter' => 'file-alt',
                                            'message' => 'comment-dots',
                                            'whatsapp' => 'whatsapp',
                                        ];
                                        $icon = $icons[$type] ?? 'comments';
                                        $typeColors = [
                                            'email' => 'info',
                                            'phone' => 'warning',
                                            'meeting' => 'secondary',
                                            'note' => 'secondary',
                                            'letter' => 'secondary',
                                            'message' => 'primary',
                                            'whatsapp' => 'success',
                                        ];
                                        $color = $typeColors[$type] ?? 'secondary';
                                    @endphp
                                    <tr class="{{ !$communication->is_read ? 'font-weight-bold' : '' }}">
                                        <td class="text-center align-middle">
                                            @if(!$communication->is_read)
                                                <i class="fas fa-circle text-primary" title="Unread" style="font-size: 9px;"></i>
                                            @endif
                                            @if($communication->replies->count() > 0)
                                                <i class="fas fa-reply text-info ml-1" title="Has replies" style="font-size: 11px;"></i>
                                            @endif
                                        </td>
                                        <td class="align-middle subject-cell">
                                            <a href="{{ route('communications.show', $communication) }}" class="text-body" title="{{ $communication->subject ?: Str::limit(strip_tags($communication->content), 120) }}">
                                                <strong>{{ Str::limit($communication->subject ?: strip_tags($communication->content), 80) }}</strong>
                                            </a>
                                            @if($communication->parent_id)
                                                <br><small class="text-muted">Re: {{ Str::limit($communication->parent->subject ?? 'Previous message', 40) }}</small>
                                            @endif
                                        </td>
                                        <td class="text-nowrap">
                                            @if($communication->case)
                                                <a href="{{ route('cases.show', $communication->case) }}" class="text-primary">
                                                    {{ $communication->case->case_number }}
                                                </a>
                                            @else
                                                —
                                            @endif
                                        </td>
                                        <td class="text-nowrap align-middle">
                                            <span class="badge badge-{{ $color }} badge-pill"><i class="fas fa-{{ $icon }} mr-1"></i>{{ ucfirst($type) }}</span>
                                            @if($communication->direction)
                                                <small class="text-muted d-block">{{ ucfirst($communication->direction) }}</small>
                                            @endif
                                        </td>
                                        <td class="text-nowrap align-middle">
                                            <div>{{ $communication->user->name ?? 'Unknown' }}</div>
                                            @if($communication->to_phone)
                                                <small class="text-muted">→ {{ $communication->to_phone }}</small>
                                            @endif
                                        </td>
                                        <td class="text-nowrap align-middle">
                                            <small>
                                                {{ $communication->communication_date->format('Y-m-d') }}
                                                {{ $communication->communication_date->format('H:i') }}
                                            </small>
                                        </td>
                                        <td class="text-nowrap align-middle">
                                            @php
                                                $priorityColors = [
                                                    'low' => 'success',
                                                    'medium' => 'info',
                                                    'high' => 'warning',
                                                    'urgent' => 'danger'
                                                ];
                                                $color = $priorityColors[$communication->priority] ?? 'secondary';
                                            @endphp
                                            <span class="badge badge-{{ $color }}">{{ ucfirst($communication->priority) }}</span>
                                            @if($communication->external_status)
                                                <small class="d-block mt-1 text-muted">WA: {{ $communication->external_status }}</small>
                                            @endif
                                        </td>
                                        <td class="text-nowrap text-right align-middle">
                                            <a href="{{ route('communications.show', $communication) }}" class="btn btn-sm btn-outline-info" data-toggle="tooltip" title="View">
                                                <i class="fas fa-eye"></i>
                                            </a>
                                            <a href="{{ route('communications.edit', $communication) }}" class="btn btn-sm btn-outline-warning" data-toggle="tooltip" title="Edit">
                                                <i class="fas fa-edit"></i>
                                            </a>
                                            <form action="{{ route('communications.destroy', $communication) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure?')">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger" data-toggle="tooltip" title="Delete">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-comments fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">No communications found</h5>
                        <p class="text-muted">Start a conversation by creating a new communication.</p>
                        <a href="{{ route('communications.create') }}" class="btn btn-primary">
                            <i class="fas fa-plus"></i> New Communication
                        </a>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@stop

@section('css')
<style>
.font-weight-bold {
    font-weight: 600 !important;
}
.subject-cell { max-width: 520px; }
.subject-cell a { display: inline-block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
@stop

@section('js')
<script>
$(document).ready(function() {
    // Init tooltips
    $('[data-toggle="tooltip"]').tooltip();

    // Auto-refresh unread badge without duplicating
    function updateUnreadBadge(){
        $.get('{{ route("communications.unread-count") }}', function(data) {
            var $link = $('.nav-link[href*="communications"]').first();
            if (!$link.length) return;
            $link.find('.js-comm-unread-badge').remove();
            if (data.count > 0) {
                $link.append(' <span class="badge badge-danger js-comm-unread-badge">' + data.count + '</span>');
            }
        });
    }
    updateUnreadBadge();
    setInterval(updateUnreadBadge, 30000);
});
</script>
@stop