@extends('staff.layout')
@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
    .table tbody tr td:last-child {
        text-align: center !important;
    }

    .add-lead-btn {
        margin-top: 10px;
    }
</style>
<h4 class="my-3">📞 Today's Completed Call</h4>
<div class="table-responsive mt-3">
    <table id="datatable" class="datatables display table table-striped" style="min-width: 845px">
        <thead>
            <tr>
                <th>#</th>
                <th>Lead ID</th>
                <th>Date</th>
                <th>Follow-up Date</th>
                <th>Follow-up Note</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($followups as $followup)
            <tr>
                <td>{{ $loop->iteration }}</td>
                <td>{{ $followup->lead_id }}</td>
                <td>{{ \Carbon\Carbon::parse($followup->created_at)->format('d-m-Y h:i A') }}</td>
                <td>
                    {{ \Carbon\Carbon::parse($followup->date . ' ' . $followup->time)->format('d-m-Y h:i A') }}
                </td>
                <!-- <td>{{ $followup->notes ?? '-' }}</td> -->
                <td style="white-space: pre-line;">
                    {{ $followup->notes }}
                </td>
                <td><span class="badge bg-success">{{ $followup->status }}</span></td>
            </tr>
            @empty
            <tr>
                <td></td>
                <td></td>
                <td class="text-center text-muted" colspan="1">No completed follow-ups for today.</td>
                <td></td>
                <td></td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
<!-- Initialize DataTable -->
<script>
    $(document).ready(function() {
        $('#datatable').DataTable({
            "language": {
                "paginate": {
                    "previous": '<i class="fa-solid fa-angle-left"></i>',
                    "next": '<i class="fa-solid fa-angle-right"></i>'
                }
            }
        });
    });
</script>
@endsection