@extends('layouts.nifty')

@section('content')

        <section id="content" class="content">
            <div class="content__header content__boxed overlapping">
                <div class="content__wrap">

                    <!-- Page title and information -->
                    <h1 class="page-title mb-2">Patient Medication Profile Dashboard</h1>
                    <h2 class="h5">Welcome back {{ auth()->user()->name }}. </h2>
                    <p>"Stay Well! Get Well!" </p>
                    <!-- END : Page title and information -->

                </div>

            </div>

            <div class="content__boxed">
                <div class="content__wrap">
                    <div class="row">

                       <div id="tloans" class="col-md-3">

                            <!-- Stat widget -->
                            <div class="card mb-3 mb-xl-3">
                                <a href="#" style="text-decoration: none; color: black">
                                    <div class="card-body py-3">
                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <div class="img-md ratio ratio-1x1 bg-info text-white rounded-circle">
                                                    <i class="d-flex align-items-center justify-content-center fa fa-shopping-cart fs-2"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h5 class="h2 mb-0">{{ $purchases->count() }}</h5>
                                                <p class="mb-0">Total Transactions as of {{ date('m/d/Y') }}</p>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </div>

                        </div>
                       <div id="tvale" class="col-md-3">

                            <!-- Stat widget -->
                            <div class="card mb-3 mb-xl-3">
                                <a href="#" style="text-decoration: none; color: black">
                                    <div class="card-body py-3">

                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <div class="img-md ratio ratio-1x1 bg-warning text-white rounded-circle">
                                                    <i class="d-flex align-items-center justify-content-center fas fa-shopping-bag fs-2"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h5 class="h2 mb-0">{{ $branchpurchases->count() }}</h5>
                                                <p class="mb-0">Total No of Branch Transactions</p>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </div>


                        </div>                        
                       <div id="tleaves" class="col-md-3">

                            <!-- Stat widget -->
                            <div class="card mb-3 mb-xl-3">
                                <a href="#" style="text-decoration: none; color: black">
                                    <div class="card-body py-3">

                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <div class="img-md ratio ratio-1x1 bg-danger text-white rounded-circle">
                                                    <i class="d-flex align-items-center justify-content-center fa fa-address-book fs-2"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h5 class="h2 mb-0">{{ $patients->count() }}</h5>
                                                <p class="mb-0">Total No of Patients</p>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </div>


                        </div>
                       <div id="tundertimes" class="col-md-3">

                            <!-- Stat widget -->
                            <div class="card mb-3 mb-xl-3">
                                <a href="#" style="text-decoration: none; color: black">
                                    <div class="card-body py-3">

                                        <div class="d-flex align-items-center">
                                            <div class="flex-shrink-0">
                                                <div class="img-md ratio ratio-1x1 bg-secondary text-white rounded-circle">
                                                    <i class="d-flex align-items-center justify-content-center fas fa-prescription fs-2"></i>
                                                </div>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h5 class="h2 mb-0">{{ $prescriptions->count() }}</h5>
                                                <p class="mb-0">Total No of Prescriptions</p>
                                            </div>
                                        </div>

                                    </div>
                                </a>
                            </div>


                        </div>



                    </div>
                    <div class="row">

                        <div class="col-xl-7 mb-3 mb-xl-0">

                            <div class="card h-100">
                                <div class="card-header d-flex align-items-center border-0" >
                                    <div class="me-auto">
                                        <h3 class="h4 m-0">Calendar</h3>
                                    </div>
                                    <div class="toolbar-end" > 
                                         <!--
                                        <button type="button" class="btn btn-icon btn-sm btn-hover btn-light" aria-label="Refresh Network Chart">
                                            <i class="demo-pli-repeat-2 fs-5"></i>
                                        </button>
                                        <div class="dropdown">
                                           
                                            <button class="btn btn-icon btn-sm btn-hover btn-light" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Network dropdown">
                                                <i class="demo-pli-dot-horizontal fs-4"></i>
                                                <span class="visually-hidden">Toggle Dropdown</span>
                                            </button>
                                            <ul class="dropdown-menu dropdown-menu-end">
                                                <li>
                                                    <a href="#" class="dropdown-item">
                                                        <i class="demo-pli-pen-5 fs-5 me-2"></i> Edit Date
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="dropdown-item">
                                                        <i class="demo-pli-refresh fs-5 me-2"></i> Refresh
                                                    </a>
                                                </li>
                                                <li>
                                                    <hr class="dropdown-divider">
                                                </li>
                                                <li>
                                                    <a href="#" class="dropdown-item">
                                                        <i class="demo-pli-file-csv fs-5 me-2"></i> Save as CSV
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="#" class="dropdown-item">
                                                        <i class="demo-pli-calendar-4 fs-5 me-2"></i> View Details
                                                    </a>
                                                </li>
                                            </ul>
                                        
                                        </div>
                                        -->
                                    </div>
                                </div>

                                <div class="card-body" >
                                    <div class="row">
                                        <div id="treminders" class="col-md-4" >
                                            <div class="list-group list-group-borderless">
                                                @foreach($reminders as $reminders)

                                                        <a class="bg-primary list-group-item list-group-item-action mb-2" href="{{ route('profiling.reminders.show', $reminders->id) }}">
                                                            <h6 class="mb-2 text-white">{{ $reminders->title }}</h6>
                                                            <div class="d-flex justify-content-between text-white-50">
                                                                <small>{{ date('h:i:s A', strtotime($reminders->start)) }}-{{ date('h:i:s A', strtotime($reminders->end)) }}</small>
                                                                <small>{{ date('M d, Y', strtotime($reminders->start)) }}</small>
                                                            </div>
                                                        </a>


                                                @endforeach


                                            </div> 
                                        </div>     

                                        <div id="tcalendar" class="col-md-8">
                                            <div class="response"></div>
                                            <div id='calendar' ></div>
                                        </div>
                                     </div>
                                </div>


                            </div>
                        </div>

                        <div class="col-xl-5">

                        </div>
                    </div>                    

                </div>
            </div>



            <!-- FOOTER -->
            @include('partials.footer')
            <!-- END - FOOTER -->

        </section>

<script src="{{ asset('mylib/calendar/js/jquery.min.js') }}"></script>
<link rel="stylesheet" href="{{ asset('mylib/calendar/css/fullcalendar.css') }}" />
<script src="{{ asset('mylib/calendar/js/moment.min.js') }}"></script>
<script src="{{ asset('mylib/calendar/js/fullcalendar.js') }}"></script>

<script>
$(document).ready(function(){

    fill_calendar();

    //$("#modal-adddata").modal('show');
//########################## CALENDAR
    function fill_calendar()
    {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        var calendar = $('#calendar').fullCalendar({

            header:{
                left:'prev,next today',
                center:'title',
                right:'month,agendaWeek,agendaDay, list'
            },




            selectable:false,
            selectHelper: true,

            editable: false,

            events: "{{ route('viewreminderscal') }}",
            displayEventTime: true,
            eventColor: 'black',
            eventRender: function (event, element, view) {
                if (event.allDay === 'true') {
                    event.allDay = true;
                } else {
                    event.allDay = false;
                }

            },

            

            eventAfterRender: function (event, element, view) {

 

                    element.css('background-color', '#158413');
                    element.css('color', 'white');


            },


        });
    }
//########################## END CALENDAR


    

});


function displayMessage(message) {
    $(".response").html("<div class='success'>"+message+"</div>");
    setInterval(function() { $(".success").fadeOut(); }, 1000);
}


</script>

@endsection