@push('css')
<style>
    .timeline-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #f1f1f1;
        font-size: 16px;
    }
</style>
@endpush

{{-- detials log section for all, email , notes , test and call logs --}}
@use('Carbon\Carbon', 'Carbon')


@php
$badgeClasses = ['primary', 'info', 'danger', 'success', 'warning'];
@endphp
{{-- <h4 class="text-primary mt-0">Records</h4> --}}


<div class="d-flex align-items-center mb-4 ">
    <div class="flex-grow-1 border-top border-custom"></div>
    <h4 class="text-custom mx-3 mb-0">Records</h4>
    <div class="flex-grow-1 border-top border-custom"></div>
</div>




<div class="row">
    <div class="card">
        <div class="card-body p-0">
            <div class="default-tab pt-3">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link text-black active" data-bs-toggle="tab" href="#all-communication-section">
                            <i class="la la-thumbtack me-2"></i> All
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-black" data-bs-toggle="tab" href="#notes-communication-section">
                            <i class="bi bi-journal-text me-2" style="font-size: smaller;"></i> Notes
                        </a>
                    </li>

                    <li class="nav-item">
                        <a class="nav-link text-black" data-bs-toggle="tab" href="#emails-communication-section">
                            <i class="la la-envelope me-2"></i> Emails
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-black" data-bs-toggle="tab" href="#texts-communication-section">
                            <i class="la la-sms me-2"></i> Texts
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-black" data-bs-toggle="tab" href="#call_logs-communication-section">
                            <i class="la la-phone me-2"></i> Log Call
                        </a>
                    </li>
                </ul>
                @php
                $sections = [
                'notes' => 'Notes',
                'emails' => 'Emails',
                'texts' => 'Texts',
                'call_logs' => 'Log Call',
                ];
                $communications = collect();
                foreach (['notes', 'emails', 'texts', 'call_logs'] as $type) {
                if (!empty($contact[$type])) {
                foreach ($contact[$type] as $item) {
                $item['type'] = $type;
                $communications->push($item);
                }
                }
                }
                $communications = $communications->sortByDesc('created_at');
                // Define colors for each type
                $bgColors = [
                'notes' => 'bg-info-subtle',
                'emails' => 'bg-warning-subtle',
                'texts' => 'bg-success-subtle',
                'call_logs' => 'bg-primary-subtle',
                ];
                @endphp

                <div class="tab-content">
                    <div class="tab-pane fade show active overflow-auto " id="all-communication-section" role="tabpanel" style="max-height: 400px;">
                    @if (!empty($contact['contact_notes']) || count($communications) > 0)
                        @forelse ($communications as $comm)
                        @php    
                        $createdDate = Carbon::parse($comm['created_at']);
                        $iconClass = [
                        'notes' => 'bi bi-journal-text text-primary',
                        'emails' => 'fa-solid fa-envelope text-primary',
                        'texts' => 'fa-solid fa-comment-dots text-success',
                        'call_logs' => 'fa-solid fa-phone text-danger',
                        ][$comm['type']];
                        $bgColor = $bgColors[$comm['type']];
                        @endphp
                        <li class="mb-3">
                            <div class="timeline-icon">
                                <i class="{{ $iconClass }}"></i>
                            </div>
                            <div class="timeline-panel text-muted p-3 border rounded {{ $bgColor }}">
                                <div class="d-flex heading justify-content-between mb-2">
                                    <span class="text-primary">{{ $createdDate->diffForHumans() }}</span>
                                    <span class="text-secondary">
                                        {{ str_replace('-', ' ', ucfirst(session('username'))) }}
                                        {{ $createdDate->format('d/m/Y') }}
                                    </span>
                                </div>

                                @if ($comm['type'] === 'emails')
                                <p class="mb-1"><strong>To: </strong> {{ $comm['to_email'] ?? '' }}</p>
                                @if (!empty($comm['cc_emails']))
                                <p class="mb-1"><strong>CC: </strong>
                                    @foreach (explode(',', $comm['cc_emails']) as $cc_email)
                                    <span class="badge rounded-pill text-bg-success me-1 mb-1">{{ trim($cc_email) }}</span>
                                    @endforeach
                                </p>
                                @endif
                                <p class="mb-1"><strong>Subject: </strong> {!! $comm['subject'] ?? 'No Subject' !!}</p>
                                <p class="mb-1"><strong>Message: </strong> {!! $comm['message'] ?? 'No Message' !!}</p>

                                @elseif ($comm['type'] === 'notes' || $comm['type'] === 'texts' || $comm['type'] === 'call_logs')
                                <h6 class="mb-0">{!! $comm['note'] ?? '' !!}</h6>
                                @endif
                            </div>
                        </li>
                        @empty
                        <!-- <p class="text-center text-danger">No communication records found.</p> -->
                        @endforelse
                        @if (!empty($contact['contact_notes']))
                        <li class="mb-3">
                            <div class="timeline-icon">
                                <i class="bi bi-journal-text text-primary"></i>
                            </div>
                            <div class="timeline-panel text-muted p-3 border rounded bg-info-subtle">
                                <a class="timeline-panel text-muted" href="#">
                                    <div class="d-flex heading justify-content-between">
                                        <span class="text-primary">{{ Carbon::parse($contact['created_at'])->diffForHumans() }}</span>
                                        <span class="text-secondary">{{ str_replace('-', ' ', ucfirst(session('username'))) }}
                                            {{ Carbon::parse($contact['created_at'])->format('d/m/Y') }}</span>
                                    </div>
                                    <h6 class="mb-0">{!! $contact['contact_notes'] !!}</h6>
                                </a>
                            </div>
                        </li>
                        @endif
                            @else
                            <div class="text-center text-muted" style="margin: 33px 0px;">
                            <p class="text-center text-danger">No Data Found</p>
                        </div>
                            @endif
                    </div>

                    @foreach ($sections as $key => $label)
                    @switch($key)
                    @case('notes')
                    <x-time-line-tab-pane id="{{ $key }}-communication-section">
                        @php
                        $hasNotes =
                        !empty($contact[$key]) || !empty($contact['contact_notes']);
                        @endphp

                        @if ($hasNotes)
                        @if (!empty($contact['contact_notes']))
                        <li>
                            <div class="badge-outline-light bg-info timeline-badge "
                                style="width: 12px;height: 12px;"></div>
                            <a class="timeline-panel text-muted bg-info-subtle badge-outline-light"
                                href="#">
                                <div class="d-flex heading justify-content-between">
                                    <span>{{ Carbon::parse($contact['created_at'])->diffForHumans() }}</span>
                                    <span>{{ str_replace('-', ' ', ucfirst(session('username'))) }}
                                        {{ Carbon::parse($contact['created_at'])->format('d/m/Y') }}</span>
                                </div>
                                <h6 class="mb-0">{!! $contact['contact_notes'] !!}</h6>
                            </a>
                        </li>
                        @endif

                        @foreach (array_reverse($contact[$key] ?? []) as $note)
                        @php
                        $badgeClass =
                        $badgeClasses[$note['id'] % count($badgeClasses)];
                        $createdDate = Carbon::parse($note['created_at']);
                        @endphp
                        <li>
                            <div class="timeline-badge {{ $badgeClass }}"></div>
                            <a class="timeline-panel text-muted" href="#">
                                <div class="d-flex heading justify-content-between">
                                    <span>{{ $createdDate->diffForHumans() }}</span>
                                    <span>{{ str_replace('-', ' ', ucfirst(session('username'))) }}
                                        {{ $createdDate->format('d/m/Y') }}</span>
                                </div>
                                <h6 class="mb-0">{!! $note['note'] ?? '' !!}</h6>
                            </a>
                        </li>
                        @endforeach
                        @else
                        <p class="text-center text-danger">{{ $label }} Not Found</p>
                        @endif
                    </x-time-line-tab-pane>
                    @break
                    @case('emails')
                    <x-time-line-tab-pane id="{{ $key }}-communication-section">
                        @if (isset($contact[$key]))
                        @forelse (array_reverse($contact[$key]) as $email)
                        @php
                        $badgeClass = $badgeClasses[$email['id'] % count($badgeClasses)];
                        $createdDate = Carbon::parse($email['created_at']);

                        // Extract to_email
                        $toEmail = $email['to_email'] ?? '';

                        // Remove to_email from cc_emails list
                        $ccEmails = collect(explode(',', $email['cc_emails'] ?? ''))
                        ->map(fn($cc) => trim($cc))
                        ->reject(fn($cc) => $cc === $toEmail) // Remove to_email from CC
                        ->toArray();
                        @endphp

                        <li>
                            <div class="timeline-badge {{ $badgeClass }}"></div>
                            <div class="timeline-panel text-muted p-2 border rounded">
                                <div class="d-flex heading justify-content-between mb-2">
                                    <span class="text-primary">{{ $createdDate->diffForHumans() }}</span>
                                    <span class="text-secondary">
                                        {{ str_replace('-', ' ', ucfirst(session('username'))) }}
                                        {{ $createdDate->format('d/m/Y') }}
                                    </span>
                                </div>

                                <div class="email-details">
                                    <!-- Display "To:" -->
                                    <p class="mb-1"><strong>To: </strong> {{ $toEmail }}</p>

                                    <!-- Display CC if there are remaining emails -->
                                    @if (!empty($ccEmails))
                                    <div class="mb-1 d-flex align-items-center">
                                        <strong>CC: &nbsp;</strong>
                                        <div class="d-flex flex-wrap">
                                            @foreach ($ccEmails as $cc_email)
                                            <span class="badge rounded-pill text-bg-success me-1 mb-1">{{ $cc_email }}</span>
                                            @endforeach
                                        </div>
                                    </div>
                                    @endif

                                    <p class="mb-1"><strong>Subject: </strong> {!! $email['subject'] ?? 'No Subject' !!}</p>
                                    <p class="mb-1"><strong>Message: </strong> {!! $email['message'] ?? 'No Message' !!}</p>
                                </div>
                            </div>
                        </li>
                        @empty
                        <p class="text-center text-danger">{{ $label }} Not Found</p>
                        @endforelse
                        @else
                        <p class="text-center text-danger">{{ $label }} Not Found</p>
                        @endif
                    </x-time-line-tab-pane>
                    @break
                    @case('texts')
                    <x-time-line-tab-pane id="{{ $key }}-communication-section">

                        @if (isset($contact[$key]))
                        @forelse (array_reverse($contact[$key]) as $text)
                        @php
                        $badgeClass =
                        $badgeClasses[$note['id'] % count($badgeClasses)];
                        $createdDate = Carbon::parse($note['created_at']);
                        @endphp
                        <li>
                            <div class="timeline-badge {{ $badgeClass }}"></div>
                            <a class="timeline-panel text-muted" href="#">
                                <div class="d-flex heading justify-content-between">
                                    <span>{{ $createdDate->diffForHumans() }}</span>
                                    <span>{{ str_replace('-', ' ', ucfirst(session('username'))) }}
                                        {{ $createdDate->format('d/m/Y') }}</span>
                                </div>
                                <h6 class="mb-0">{!! $note['note'] ?? '' !!}</h6>
                            </a>
                        </li>
                        @empty
                        <p class="text-center text-danger">{{ $label }} Not Found</p>
                        @endforelse
                        @else
                        <p class="text-center text-danger">{{ $label }} Not Found</p>
                        @endif

                    </x-time-line-tab-pane>
                    @break
                    @case('call_logs')
                    <x-time-line-tab-pane id="{{ $key }}-communication-section">

                        @if (isset($contact[$key]))
                        @forelse (array_reverse($contact[$key]) as $logs)
                        @php
                        $badgeClass =
                        $badgeClasses[
                        $logs['id'] % count($badgeClasses)
                        ];
                        $createdDate = Carbon::parse($logs['created_at']);
                        @endphp
                        <li>
                            <div class="timeline-badge {{ $badgeClass }}"></div>
                            <a class="timeline-panel text-muted" href="#">
                                <div class="d-flex heading justify-content-between">
                                    <span>{{ $createdDate->diffForHumans() }}</span>
                                    <span>{{ str_replace('-', ' ', ucfirst(session('username'))) }}
                                        {{ $createdDate->format('d/m/Y') }}</span>
                                </div>
                                <h6 class="mb-0">{!! $note['note'] ?? '' !!}</h6>
                            </a>
                        </li>
                        @empty
                        <p class="text-center text-danger">{{ $label }} Not Found</p>
                        @endforelse
                        @else
                        <p class="text-center text-danger">{{ $label }} Not Found</p>
                        @endif

                    </x-time-line-tab-pane>
                    @break
                    @default
                    @endswitch
                    @endforeach

                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .border-custom {
        border-color: rgb(23, 162, 184) !important;
    }

    .text-custom {
        color: rgb(23, 162, 184) !important;
    }
</style>