@php use App\Support\BusinessTimezone; @endphp
@foreach($cancelledAppointments as $key => $booking)
    <tr>
        <td>
            <button type="button" class="btn btn-link view-appointment-detail"  onclick="document.getElementById('appointmentModal-{{ $booking->id }}').showModal()">
                {{ $booking->appointment_id }}
            </button>
        </td>
        <td>
            {{ BusinessTimezone::formatInstant($booking->created_at, 'd-M-Y h:i A') }} <br>
            <small>{{ BusinessTimezone::toBusiness($booking->created_at)?->diffForHumans($booking->scheduledAt()) }}</small>
        </td>
        <td>{{ $booking->scheduledAt()->format('d M Y h:i A') }}</td>
        <td>{{ $booking->name ?? 'N/A' }}</td>
        <td>{{ $booking->email ?? 'N/A' }}</td>
        <td>{{ $booking->serviceNamesLabel() !== '—' ? $booking->serviceNamesLabel() : '—' }}</td>
        <td>
            <div class="admin-table-actions">
                <form action="{{ route('admin.appointments.cancellation', $booking) }}" method="POST" onsubmit="return confirm('Are you sure you want to undo the cancellation for this appointment?');">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-sm btn-danger">
                        Undo Cancellation
                    </button>
                </form>
            </div>
        </td>
    </tr>

    <!-- Bootstrap Modal for Each Appointment -->
    <dialog id="appointmentModal-{{ $booking->id }}"
            aria-labelledby="appointmentModalLabel-{{ $booking->id }}" aria-hidden="true">
        <div>
            <div class="modal-header align-items-center">
                <div>
                    <h5 class="modal-title">Appointment Details</h5>
                    <small><strong>Appointment ID:</strong> {{ $booking->appointment_id }}</small>
                </div>
                <button type="button" onclick="this.closest('dialog').close()" class="close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <ul class="list-group">
                    <li class="list-group-item">
                        <strong>Date:</strong> {{ $booking->scheduledAt()->format('d M Y') }}
                        &nbsp;|&nbsp;
                        <strong>Time:</strong> {{ $booking->scheduledAt()->format('h:i A') }} ({{ BusinessTimezone::label() }})
                    </li>
                    <li class="list-group-item"><strong>Full Name:</strong> {{ $booking->full_name }}</li>
                    <li class="list-group-item"><strong>Email:</strong> {{ $booking->email }}</li>
                    <li class="list-group-item"><strong>Phone:</strong> {{ $booking->phone ?? 'NA' }}</li>
                    @include('partials.appointment._custom-form-fields-list', ['booking' => $booking])
                    <li class="list-group-item"><strong>Status:</strong>
                        @if($booking->is_paid === false  && $booking->price > 0)
                            <form method="POST" action="{{ route('admin.bookings.mark-paid', $booking) }}"
                                  onsubmit="return confirm('Are you sure you want to mark as paid this booking?')">
                                @csrf
                                <button class="btn btn-success btn-sm">Mark as paid</button>
                            </form>
                        @else
                            <span class="badge {{ $booking->isApproved() ? 'badge-success' : 'badge-warning' }}">
                            {{ $booking->isApproved() ? 'Confirmed' : 'Pending' }}
                        </span>
                        @endif
                    </li>
                    @if($booking->isApproved())
                        <li class="list-group-item"><strong>Confirmed
                                At:</strong> {{ BusinessTimezone::formatInstant($booking->approved_at) }}</li>
                    @endif
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="this.closest('dialog').close()">Close</button>
            </div>
        </div>
    </dialog>

@endforeach