@extends('layouts.admin-layout')
@section('title', 'All Appointment Listing')
@section('content')
<div class="content-wrapper">
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <!-- left column -->
                <div class="col-md-12 mt-5">

                    <div class="card card-primary card-box-shadow">

                        <div class="card-body">
                    <h3>All Appointments for {{ $email }}</h3>

                    <a href="{{ route('admin.appointment.listing') }}" class="btn btn-secondary mb-3">Back to Appointment List</a>

                    <table class="table table-bordered appointment-table">
                        <thead>
                            <tr>
                                <th>S.N.</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th>Call Type</th>
                                <th>Date</th>
                                <th>Time</th>
                                {{-- <th>Hash Code</th> --}}
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($appointments as $appoint)
                            <tr>
                                <td>{{ $appoint->hash_code ?? ''}}</td>
                                <td>{{ $appoint->name }}</td>
                                <td>{{ $appoint->email }}</td>
                                <td>{{ $appoint->phone }}</td>
                                <td>{{ ucfirst($appoint->call_type) }}</td>
                                <td>{{ $appoint->date }}</td>
                                <td>{{ $appoint->time }}</td>
                                {{-- <td>{{ $appoint->hash_code }}</td> --}}
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>


                <!-- /.card -->
            </div>
        </div>

    </div>
</div>
</section>
</div>
@endsection

@section('script')
<script>
    $(document).ready(function () {
        $('.appointment-table').DataTable();
    });
</script>
@endsection