@extends('backend.layouts.admin.admin')

@section('title', 'Appointments')

@section('content')
    <section>
        <div class="section-body">
            <div class="card">
                <div class="card-head">
                    <header class="text-capitalize">Appointments</header>
                </div>
                <div class="card-body">
                    <table id="example" class="table table-hover display">
                        <thead>
                        <tr>
                            <th width="5%">#</th>
                            <th width="20%">Doctor Name</th>
                            <th width="20%">Patient Name</th>
                            <th width="20%">Preferred Date / Time</th>
                            <th width="15%" class="text-right">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                            @foreach ($appointments as $key => $appointment)
                                <tr>
                                    <td>{{++$key}}</td>
                                    <td>{{$appointment->doctor_id ? $appointment->doctor->name : ''}}</td>
                                    <td>{{$appointment->fullname}}</td>
                                    <td>{{$appointment->preferred_date->format('d M,Y')}}/{{$appointment->preferred_time}}</td>
                                    <td class="text-right">
                                        <a href="{{route('appointment.show',$appointment->id)}}" class="btn btn-flat btn-primary btn-xs" title="view">
                                            <i class="glyphicon glyphicon-eye-open"></i>
                                        </a>
                                        <a href="" data-toggle="modal" data-target="#myModal{{$appointment->id}}"><i class="glyphicon glyphicon-trash text-danger"></i></a>

                                    </td>
                                </tr>
                                                                <!-- Modal -->
                            <div id="myModal{{$appointment->id}}" class="modal fade" role="dialog">
                                <div class="modal-dialog">
                                <!-- Modal content-->
                                <div class="modal-content">
                                    <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>
                                    <div class="modal-body">
                                    <p>Are you sure you want to delete this item?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <a href="{{route('appointment.destroy',$appointment->id)}}" class="btn btn-danger">Yes</a>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                                    </div>
                                </div>

                                </div>
                            </div>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
@stop

@push('styles')
    <style type="text/css">
        #accordion .card-head {
            cursor: n-resize;
        }
    </style>
@endpush