@php($leadId = $lead->id ?? ($leadId ?? 0))
@php($confirmRoute = route('calendar.events.confirm-status'))
@php($statusRoute = route('calendar.events.status'))
@php($appointmentsGrouped = $leadAppointmentsGrouped ?? collect())
@php($tasksGrouped = $leadTasksGrouped ?? collect())
@php($priorityMap = $eventPriorityMap ?? [])
@php($typeMap = $eventTypeMap ?? [])

<div class="lead-event-listings mt-3">
  {{-- Appointments Section --}}
  <div class="event-section appointments-section mb-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="mb-0">APPOINTMENTS ({{ $appointmentsGrouped->flatten()->count() }})</h6>
      <button type="button" class="btn btn-sm btn-light toggle-section" data-target="appointments-list"><i class="bx bx-chevron-down"></i></button>
    </div>
    <div id="appointments-list" class="event-items">
      @php($allAppointments = $appointmentsGrouped->flatten())
      @forelse($allAppointments as $ev)
      @php($startDT = $ev->start_time)
      @php($endDT = $ev->end_time)
      @php($dayLabel = $startDT ? $startDT->format('l, M jS, Y') : 'Date N/A')
      @php($sameDay = ($startDT && $endDT) ? $startDT->isSameDay($endDT) : true)
      @php($start = $startDT ? $startDT->format($sameDay ? 'g:i A' : 'F j, Y g:i A') : '')
      @php($end = $endDT ? $endDT->format($sameDay ? 'g:i A' : 'F j, Y g:i A') : '')
      @php($durationHuman = \App\Helpers\Helper::humanInterval($startDT,$endDT))
      <div class="event-date-group mb-2">
        <div class="date-header px-2 py-1 bg-light border rounded fw-semibold d-flex justify-content-between align-items-center">
          <span>{{ $dayLabel }} <span class="text-muted ms-3">APPOINTMENT</span></span>
          <div class="gap-2 d-flex">
            <a href="#" class="text-danger small event-delete-btn" title="Delete" data-id="{{ $ev->id }}" data-url="{{ route('calendar.event.destroy',$ev->id) }}"><i class="bx bx-trash"></i></a>
            <a href="{{ route('calendar.event.view', $ev->id) }}" class="text-primary small show-modal-lg " title="View" data-id="{{ $ev->id }}" data-url="{{ route('calendar.event.edit',$ev->id) }}"><i class="bx bx-calendar-check"></i></a>
            <a href="{{ route('calendar.event.edit', $ev->id) }}" class="text-primary small event-edit-btn show-modal-lg" title="Edit" data-id="{{ $ev->id }}" data-url="{{ route('calendar.event.edit',$ev->id) }}"><i class="bx bx-pencil"></i></a>
          </div>
        </div>
        <div class="event-item appointment-item border rounded p-2" data-event-id="{{ $ev->id }}">
          <div class="d-flex justify-content-between align-items-start">
            <div class="flex-grow-1">
              <div class="mb-2">Scheduled: <strong>{{ $start }} - {{ $end }}</strong>@if($durationHuman) ({{ $durationHuman }}) @endif</div>
              <div class="d-flex gap-5 mb-2">
                <div>Set For: <img src="{{ $ev->setFor->avatar['thumb'] ?? '' }}" alt="Avatar" class="rounded-circle me-2" width="15"><strong>{{ $ev->setFor->full_name ?? 'N/A' }}</strong></div>
                <div>Set By: <img src="{{ $ev->setBy->avatar['thumb'] ?? '' }}" alt="Avatar" class="rounded-circle me-2" width="15"><strong>{{ $ev->setBy->full_name ?? 'N/A' }}</strong></div>
              </div>
              <div>Description: <em>{{ $ev->title }}</em></div>
            </div>
          </div>
          <div class="mt-2 d-flex gap-3 align-items-center">
            @if($ev->confirm_status == 2)
            <span class="btn btn-outline-primary btn-xs" title="Confirmed">
              <i class="bx bx-check-circle text-success fs-4"></i> Confirmed
            </span>
            @else
            <span class="confirm-toggle btn btn-outline-primary btn-xs" data-event-id="{{ $ev->id }}" style="cursor: pointer;" title="Mark as Confirmed">
              Confirm
            </span>
            @endif

            @if($ev->seen_status == 2)
            <span class="btn btn-outline-secondary btn-xs">
              <i class="bx bx-check-circle text-success fs-4"></i> Seen
            </span>
            @else
            <span class="seen-toggle btn btn-outline-secondary btn-xs" data-event-id="{{ $ev->id }}" style="cursor: pointer;" title="Mark as Seen">
              Seen ?
            </span>
            @endif
          </div>
        </div>
      </div>
      @empty
      <div class="text-muted small">No appointments found for this lead.</div>
      @endforelse
    </div>
  </div>
  {{-- Tasks Section --}}
  <div class="event-section tasks-section mb-4">
    <div class="d-flex justify-content-between align-items-center mb-2">
      <h6 class="mb-0">TASKS ({{ $tasksGrouped->flatten()->count() }})</h6>
      <button type="button" class="btn btn-sm btn-light toggle-section" data-target="tasks-list"><i class="bx bx-chevron-down"></i></button>
    </div>
    <div id="tasks-list" class="event-items">
      @php($allTasks = $tasksGrouped->flatten())
      @forelse($allTasks as $ev)
      @php($startDT = $ev->start_time)
      @php($endDT = $ev->end_time)
      @php($dayLabel = $startDT ? $startDT->format('l, M jS, Y') : 'Date N/A')
      @php($sameDay = ($startDT && $endDT) ? $startDT->isSameDay($endDT) : true)
      @php($start = $startDT ? $startDT->format($sameDay ? 'g:i A' : 'M j, Y g:i A') : '')
      @php($end = $endDT ? $endDT->format($sameDay ? 'g:i A' : 'M j, Y g:i A') : '')
      @php($durationHuman = \App\Helpers\Helper::humanInterval($startDT,$endDT))
      @php($priorityInfo = $priorityMap[$ev->priority] ?? null)
      <div class="event-date-group mb-2">
        <div class="date-header px-2 py-1 bg-light border rounded fw-semibold d-flex justify-content-between align-items-center">
          <span>{{ $dayLabel }} <span class="text-muted ms-3">TASK</span></span>
          <div class="gap-2 d-flex">
            <a href="#" class="text-danger small event-delete-btn" title="Delete" data-id="{{ $ev->id }}" data-url="{{ route('calendar.event.destroy',$ev->id) }}"><i class="bx bx-trash"></i></a>
            <a href="{{ route('calendar.event.view', $ev->id) }}" class="text-primary small show-modal-lg " title="View" data-id="{{ $ev->id }}" data-url="{{ route('calendar.event.edit',$ev->id) }}"><i class="bx bx-calendar-check"></i></a>
            <a href="{{ route('calendar.event.edit', $ev->id) }}" class="text-primary small event-edit-btn show-modal-lg" title="Edit" data-id="{{ $ev->id }}" data-url="{{ route('calendar.event.edit',$ev->id) }}"><i class="bx bx-pencil"></i></a>
          </div>
        </div>
        <div class="event-item task-item border rounded p-2" data-event-id="{{ $ev->id }}">
          <div class="d-flex justify-content-between align-items-start">
            <div class="flex-grow-1">
              <div class="mb-2">Scheduled: <strong>{{ $start }} - {{ $end }}</strong>@if($durationHuman) ({{ $durationHuman }}) @endif</div>
              <div class="d-flex gap-5 mb-2">
                <div>Set For: <img src="{{ $ev->setFor->avatar['thumb'] ?? '' }}" alt="Avatar" class="rounded-circle me-2" width="15"><strong>{{ $ev->setFor->full_name ?? 'N/A' }}</strong></div>
                <div>Set By: <img src="{{ $ev->setBy->avatar['thumb'] ?? '' }}" alt="Avatar" class="rounded-circle me-2" width="15"><strong>{{ $ev->setBy->full_name ?? 'N/A' }}</strong></div>
              </div>
              <div class="mb-2">Description: <em>{{ $ev->title }}</em></div>
              @if($priorityInfo)
              <div class="mt-1">Priority:
                <span class="badge" style="background: {{ $priorityInfo['color'] }};">{{ $priorityInfo['name'] }}</span>
              </div>
              @endif
            </div>
          </div>
        </div>
      </div>
      @empty
      <div class="text-muted small">No tasks found for this lead.</div>
      @endforelse
    </div>
  </div>
</div>
@push('styles')
<style>
  .lead-event-listings .date-header {
    font-size: 11px;
  }

  .lead-event-listings .event-item {
    background: #fff;
  }

  .lead-event-listings .appointment-item {
    border-left: 4px solid #9D9DFC;
  }

  .lead-event-listings .task-item {
    border-left: 4px solid #16C4C0;
  }
</style>
@endpush
@push('page_script')
@include('admin.calendar._calendar_script')

<script src="{{ asset('assets/js/lead-event-listings.js') }}?v={{ time() }}"></script>
<script> 

var default_duration_url = "{{ route('calendar.get_default_duration') }}";

  window.LeadEventListingConfig = {
    routes: {
      confirm: '{{ $confirmRoute }}',
      status: '{{ $statusRoute }}'
    },
    csrf: '{{ csrf_token() }}'
  };
</script>
@endpush