@extends('layouts.master')
@section('content')
<div class="h">
@include('inc.header-nav')
<div class="mx-auto container-fluid align-items-center pt-150">
    @include('inc.header-profile')
    <div class="card px-0 pt-3 mb-9" id="kt_chat_messenger">
        <div class="card-header px-0 border-0" id="kt_chat_messenger_header">
            <div class="card-title">
                <div class="d-flex justify-content-center flex-column me-3">
                    <h3 class="px-6"> Appointments</h3>
                    <span class="text-muted mt-1 fw-bold ps-6 fs-7">List of appointments</span>
                </div>
            </div>
        </div>

        <div class="card-body px-7">
            <div class="table-responsive">
            <table class="table align-middle table-row-dashed table-row-bordered gs-0 gy-4 mb-10"> 
                <thead>
                    <tr class="fw-bold text-muted bg-light">
                        <th class="ps-4 rounded-start">Title</th>
                        <th>Descriptions</th>
                        <th>Date and time</th>
                        <th class="rounded-end"></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($appointments as $appointment)
                    <tr>
                        <td class="ps-4">
                            {{ $appointment->title }}
                        </td>
                        <td>
                            {{ $appointment->descriptions }}
                        </td>
                        <td>
                            {{ date('m/d/Y', strtotime($appointment->appointment_date)) }}
                            {{ date('hh:ii A', strtotime($appointment->time)) }}
                        </td>
                        <td>
                            <span class="badge badge-success">{{ $appointment->status }}</span>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
@endpush