@extends ('layouts.template')

@section('content')
    <div class="mt-3">
        <div class="container m-0 mt-4">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">
                            <strong>
                                <i class="fas fa-chart-bar"></i>
                                Key Numbers
                            </strong>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-condensed table-bordered m-0">
                                <tbody>
                                <tr>
                                    <th>0</th>
                                    <th>Total patients</th>
                                </tr>
                                <tr>
                                    <th>0</th>
                                    <th>Patients I have not seen yet</th>
                                </tr>
                                <tr>
                                    <th>0</th>
                                    <th>Pending bills to sign</th>
                                </tr>
                                <tr>
                                    <th>0</th>
                                    <th>Pending notes to sign</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="card mt-3">
                        <div class="card-header">
                            <strong>
                                Reimbursement
                            </strong>
                        </div>
                        <div class="card-body p-0">
                            <table class="table table-condensed table-bordered m-0">
                                <tbody>
                                <tr>
                                    <th>$1034.90</th>
                                    <th>Current balance</th>
                                </tr>
                                <tr>
                                    <th>30 June, 2020</th>
                                    <th>Next Payment Date</th>
                                </tr>
                                <tr>
                                    <th>$1023.00</th>
                                    <th>Last payment</th>
                                </tr>
                                <tr>
                                    <th>15 June, 2020</th>
                                    <th>Last payment date</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div id='calendar'></div>
                </div>
            </div>
        </div>
    </div>
    <script>

        document.addEventListener('DOMContentLoaded', function() {
          var calendarEl = document.getElementById('calendar');
          var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth'
          });
          calendar.render();
        });
  
      </script>
@endsection