@php
    use App\Enums\Calls\RelatedToType;
@endphp


  
<div class="row justify-content-center">

    <div class="table-responsive">
        @if ($calls->count() > 0)
            <table class="table bordered-table mb-0 table-hover">
                <thead>
                    <tr>
                        <th scope="col">Subject</th>
                        <th scope="col">related type</th>

                        <th scope="col">related To</th>
                        <th scope="col">Time</th>
                        {{-- <th scope="col">Schedule Time</th> --}}
                        {{-- <th scope="col">Duration in minutes</th> --}}
                        <th scope="col" class="text-center">Status</th>
                        <th scope="col" class="text-center">action</th>
                        <th scope="col" class="text-center">Notes</th>
                        {{-- <th scope="col" class="text-center">Created At</th>
                        <th scope="col" class="text-center">Updated At</th> --}}
                        <th scope="col" class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($calls as $call)
                        <tr> 
                           
                            
                            <td style=" @if($call?->call_time->isPast() && $call->callStatus?->name == 'in_progress') 
                                background: red !important;
                                color:#ffffff;
                            @elseif($call?->call_time->isToday() && $call->callStatus?->name == 'in_progress') 
                                background: green !important ;
                                color:#ffffff;
                            @endif" >                                
                                <a href="{{ route('calls.edit', $call->id) }}">
                                     {{ $call->subject }}
                                </a>
                           
                            </td>
                            <td>{{ str(RelatedToType::from($call->related_to_type)?->name)->lower() }}
                                
                            </td>

                            <td>
                                <div class="d-flex align-items-center">
                                    <a href="{{ route(str(RelatedToType::from($call->related_to_type)?->name)->lower().'s.'.'edit', $call?->related_to_id) }}"
                                        class="text-lg text-secondary-light fw-semibold flex-grow-1"> 
                                        {{ $call->relatedTo?->name }}
                                    </a>
                                </div>
                            </td>

                            <td>
                                {{ $call->call_time->format('Y-m-d h:i') }}
                            </td>
                            {{-- <td>
                                {{ $call->schedule_call_time?->format('Y-m-d h:i') }}
                            </td> --}}
                            {{-- <td>{{ $call->duration_in_minutes }}</td> --}}
                            <td>{{ $call->callStatus->name ?? '-' }}</td>
                            <td>{{ str($call->action)->replace('_', ' ')->ucfirst() }}</td>
                            <td>{{ str($call->notes)->limit(30) }}</td>
                            {{-- <td class="text-center">{{ $call->created_at ?? '-' }}</td>
                            <td class="text-center">{{ $call->updated_at ?? '-' }}</td> --}}
                            <td class="text-center">
                                <div class="d-flex justify-content-center gap-2">
                                    <a href="{{ route('calls.edit', $call->id) }}"
                                        class="btn btn-outline-primary btn-sm radius-8" title="Edit Call">
                                        <iconify-icon icon="lucide:edit" class="text-lg"></iconify-icon>
                                    </a>
                                    <form action="{{ route('calls.destroy', ['call' => $call->id]) }}" method="POST"
                                        onsubmit="return confirm('Are you sure you want to delete this call?');">
                                        @method('DELETE')
                                        @csrf
                                        <button type="submit" class="btn btn-outline-danger btn-sm radius-8"
                                            title="Delete Call">
                                            <iconify-icon icon="fluent:delete-24-regular"
                                                class="text-lg"></iconify-icon>
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @else
            <div class="alert text-center rounded-3 shadow-sm mt-8" role="alert">
                <i class="bi bi-info-circle me-2"></i> No calls exist
            </div>
        @endif
    </div>
    <div class="py-8 px-4">
        {{ $calls->links('pagination::bootstrap-5') }}
    </div>
</div>