@extends('layout')
@section('content')
@php
$dashboardImageUrl = dashboardImageUrl();
$dashboardBgColor = dashboardImageBgColor();
@endphp
<style>
body.vn-dashboard-page {
    overflow-x: hidden;
    overflow-y: auto;
    background: {{ $dashboardBgColor }};
}
body.vn-dashboard-page .layout-footer {
    display: none !important;
}
body.vn-dashboard-page .layout-content {
    overflow: visible;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}
body.vn-dashboard-page .layout-container,
body.vn-dashboard-page .layout-inner {
    max-width: 100% !important;
    width: 100% !important;
}
body.vn-dashboard-page .vn-dashboard-hero.container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.vn-dashboard-hero {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: calc(100vh - 52px);
    max-height: calc(100vh - 52px);
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: {{ $dashboardBgColor }};
    box-sizing: border-box;
    overflow: hidden;
}
.vn-dashboard-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
</style>
@php
$UserType = Session::get('UserType');
@endphp
<input type="hidden" id="UserType" value="{{$UserType}}">
@if(!isOpticalUserType($UserType))
<div class="container-fluid flex-grow-1 p-0 vn-dashboard-hero">
    <img src="{{ $dashboardImageUrl }}" alt="Sanjeevan Hospital Dashboard" class="vn-dashboard-image">

    <div class="modal fade" id="modal-report" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" style="max-width: 70rem; ">
            <div class="modal-content">


                <div class="modal-header">
                    <h5 class="modal-title">Today Appointment</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                <div class="table-responsive" id="custresult">

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

</div>
@else
<div class="container-fluid flex-grow-1 container-p-y p-0">
@include('optical.optical-dashboard', [
    'opticalStats' => $opticalStats,
    'showFullDashboard' => $showFullDashboard ?? false,
])
</div>
@endif

@endsection

@section('scriptcontent')
<script src="{{url('assets/js/jquery-3.6.0.min.js')}}"></script>
<script type="text/javascript">
@if(!isOpticalUserType($UserType))
document.body.classList.add('vn-dashboard-page');
@endif
function checkAppointment() {
    $.ajax({
        url: "{{ url('checkAppointment') }}",
        method: "POST",
        data: {
            _token: '{{csrf_token()}}'
        },
        success: function(data) {
           // console.log(data);
           if(data == 0){
            $('#modal-report').modal("hide"); 
           }
           else{
            $('#custresult').html(data);
            
            
           }
           
        }
    });
}
$(document).ready(function() {
    var UserType = $('#UserType').val();
    if(UserType == 'Consultant' || UserType == 'Admin' || UserType == 'Adreceptionmin'){
        // Performance: defer appointment AJAX so dashboard paints first
        setTimeout(function() {
            $('#modal-report').modal("show");
            checkAppointment();
        }, 400);
    }
    
});
</script>
@endsection