@extends('layouts.master')

    @section('title')
        Televisit Appointments
    @endsection

    @section('headContent')
        <meta name="format-detection" content="telephone=no"/>

    @endsection

    @section('content')
   
        <div class="content">
            <div>
                <div class="card">
                    <div class="card-header">
                        <h5 class="title">Televisit Appointments</h5>
                    </div>

                    {{-- Filter section --}}
                    <div class="container-fluid">
                        <div class="row">

                            {{-- Office group select box--}}
                            @if(count($officeGroupList) > 0)
                            <div class="col-sm">
                                <label>Office Group</label>
                                <select id="officegroup" name="officegroup[]" class="form-select">
                                    @if(count($officeGroupList) > 1)
                                        <option title="All" value="all">All</option>
                                    @endif
                                    @for($i = 0; $i < count($officeGroupList); $i++)
                                        <option title="{{$officeGroupList[$i]->office_group_name}}" value="{{$officeGroupList[$i]->srno}}">{{$officeGroupList[$i]->office_group_name}}</option>
                                    @endfor
                                </select>
                            </div>
                            @endif

                            {{-- Office select box--}}
                            @if(count($officeList) > 0)
                            <div class="col-sm">
                                <label>Office</label>

                                <select id="office" class="form-select">
                                    <option title="All" data-value='office-val' value="all">All</option>
                                    @for($i = 0; $i < count($officeList); $i++)
                                        @if($officeList[$i]->active == "Y")
                                            <option title="{{$officeList[$i]->office_code}}-{{$officeList[$i]->office_name}}" data-value='office-val' value="{{$officeList[$i]->srno}}">{{$officeList[$i]->office_code}}-{{$officeList[$i]->office_name}}</option>
                                        @else
                                            <option title="{{$officeList[$i]->office_code}}-{{$officeList[$i]->office_name}}" data-value='office-val' value="{{$officeList[$i]->srno}}" style="color:red;" disabled>{{$officeList[$i]->office_code}}-{{$officeList[$i]->office_name}}</option>
                                        @endif
                                    @endfor
                                </select>
                            </div>
                            @endif

                            {{-- Provider select box --}}
                            @if(count($providerList) > 0)
                            <div class="col-sm">
                                <label>Provider</label>
                                <select id="provider" name="provider[]" class="form-select">
                                    <option title="All" value="all">All</option>
                                    @for($i = 0; $i < count($providerList); $i++)
                                        @if($providerList[$i]->active == "Y")
                                            <option title="{{$providerList[$i]->provider_name}}" data-value='provider-val' data-active="{{$providerList[$i]->active}}" value="{{$providerList[$i]->emp_id}}">{{$providerList[$i]->provider_name}}</option>
                                        @else
                                            <option title="{{$providerList[$i]->provider_name}}" data-value='provider-val' data-active="{{$providerList[$i]->active}}" value="{{$providerList[$i]->emp_id}}" style="color:red;" disabled>{{$providerList[$i]->provider_name}}</option>
                                        @endif
                                    @endfor
                                </select>
                            </div>
                            @endif

                            {{-- Room select box --}}
                            @if(count($roomList) > 0)
                            <div class="col-sm">
                                <label>Room</label>
                                <select id="room" name="room[]" class="form-select">
                                    <option title="All" value="all">All</option>
                                    @for($i = 0; $i < count($roomList); $i++)
                                        <option title="{{$roomList[$i]->description}}" data-value='room-val' value="{{$roomList[$i]->resource_id}}">{{$roomList[$i]->description}}</option>
                                    @endfor
                                </select>
                            </div>
                            @endif

                            {{-- Televisit status select box --}}
                            <div class="col-sm">
                                <label>Televisit Status</label>
                                <select id="televisitStatus" name="televisitStatus[]" class="form-select">
                                    <option title="Both" value="both">Both</option>
                                    <option title="In-progress" value="Y">In-progress</option>
                                    <option title="Scheduled" value="N">Scheduled</option>
                                </select>
                            </div>

                            {{-- Search box --}}
                            <div class="col-sm form-outline">
                                <label>Search</label>
                                @if(count($appointmentList) > 0)
                                    <input id="searchAppointment" class="form-control form-control-lg" autocomplete="off"/>
                                @else
                                    <input class="form-control form-control-lg" autocomplete="off"/>
                                @endif
                            </div>

                        </div>
                    </div>

                    {{-- Appointment listing section --}}
                    <div class="card-header">
                   
                        @if(count($appointmentList) > 0)
                            <div id="tableBody"></div>
                            <div id="mobileview"></div>
                        @else
                            <div style="text-align: center; color: #717171; margin: 100px auto;">
                                <h2 style="word-wrap: normal">No appointments found for today.</h2>
                            </div>
                        @endif
                        <div style="text-align: center; color: #717171; margin: 100px auto;" class="empty-results">
                            <h2 style="word-wrap: normal">No matching appointments found for today.</h2>
                        </div>
                    </div>

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

    @endsection

    @section('customstyle')
        <style type="text/css">

            html {
                cursor: url('{{asset('assets/img/cursor_default.png')}}'), auto;
            }

            body {
                cursor: url('{{asset('assets/img/cursor_default.png')}}'), auto;
            }

            .empty-results{
                display:none;
            }

            button, a, .dropdown-item {
                cursor: url('{{asset('assets/img/cursor_pointer.png')}}'), auto;
            }

            label, select, option, span {
                cursor: url('{{asset('assets/img/cursor_default.png')}}'), auto;
            }


            td {
                font-size: 16px;
                color:#000000;
            }

            .results .app-row[visible='true']{
                display:table-row;
            }

            .results .card.app-row[visible='true']{
                display:block;
            }

            .results .app-row[visible='false']{
                display:none;
            }


            .table-striped > tbody > tr:nth-of-type(odd) {
                --bs-table-accent-bg:none;
            }

            @media (max-width: 768px) {
                select,input{
                    min-width: 250px;
                    max-width: 100%!important;
                }
                .col-sm{
                    padding-bottom: 10px;
                }
                .card .container-fluid{
                    width: 100%;
                    padding-right: 15px;
                    padding-left: 15px;
                    margin-right: auto;
                    margin-left: auto;
                }
            }

            #mobileview .card{
                min-height: auto;
            }

            .card{
                min-height: 600px;
            }

            .form-control-lg{
                padding:.5rem 1rem;
                border-radius :.3rem;
                min-height: calc(1.2rem + 1rem + 2px);
                font-size:1rem;
            }

            .form-control-lg:focus{
                border-color: #86b7fe;
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            }

            select,input{
                /*min-width: 150px;*/
                max-width: 250px;
            }

            span {
                color: inherit;
                text-decoration: inherit;
            }

            .header {
                position: sticky;
                top:0;
                background:white!important;
            }

            /* Firefox old*/
            @-moz-keyframes blink {
                0% {
                    opacity:1;
                }
                50% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            }

            @-webkit-keyframes blink {
                0% {
                    opacity:1;
                }
                50% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            }
            /* IE */
            @-ms-keyframes blink {
                0% {
                    opacity:1;
                }
                50% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            }
            /* Opera and prob css3 final iteration */
            @keyframes blink {
                0% {
                    opacity:1;
                }
                50% {
                    opacity:0;
                }
                100% {
                    opacity:1;
                }
            }
            .blink {
                -moz-animation: blink normal 2s infinite ease-in-out; /* Firefox */
                -webkit-animation: blink normal 2s infinite ease-in-out; /* Webkit */
                -ms-animation: blink normal 2s infinite ease-in-out; /* IE */
                animation: blink normal 2s infinite ease-in-out; /* Opera and prob css3 final iteration */
            }

            .toast-success {
                background-color: green;
                background-image:none!important;
                color:white;
            }

            .tooltip{
                z-index:2000;
            }

            .select2-selection{
                height:38px!important;
            }

            .select2-selection:focus{
                border-color: #86b7fe;
                outline: 0;
                box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
            }

            .select2-container--default .select2-selection--single .select2-selection__rendered{
                line-height:38px!important;
                color:#000000;
            }

            .select2-container--default .select2-selection--single .select2-selection__arrow{
                height:34px;
            }

            .no-search .select2-search{
                display:none;
            }

            .select2-selection__rendered,
            .select2-container .select2-results__option{
                font-size:1rem!important;
                color:#000000;
                cursor: url('{{asset('assets/img/cursor_default.png')}}'), auto;
            }

            .select2-search__field:focus-visible {
                outline: none;
            }
            footer{
                position:inherit!important;
            }
            .card .container-fluid{
                width: 100%;
                padding-right: 15px;
                padding-left: 15px;
                margin-right: auto;
                margin-left: auto;
            }
        </style>
    @endsection


    @section('customScript')

        <script src="{{asset('js/tableToCards.js')}}"></script>

        <script type="text/javascript">
            let appointmentList = {!! json_encode($appointmentList ?? '') !!};
            let asset = {!! "'".asset('assets/img/cursor_pointer.png')."'" !!};
            var isMobile = window.innerWidth < 768;
            let globalselectedOffice = localStorage.getItem('selectedOffice');
            let globalselectedOfficeGroup = localStorage.getItem('selectedOfficeGroup');
            let globalselectedProvider = localStorage.getItem('selectedProvider');
            let globalselectedRoom = localStorage.getItem('selectedRoom');
            let globalselectedTelevisitStatus = localStorage.getItem('selectedTelevisitStatus');
            let globasearchedText = "";
            let empId = {{Session::get('empId')}};
            let username = "{{Session::get('userName')}}";
            let searchList = appointmentList;
            let telivistGrant = "{{Session::get('userTelivisitGrant')}}";
            let designationDescription = "{{Session::get('designationDescription')}}";
            let textRights = "{{Session::get('showText')}}";
            let emailRights = "{{Session::get('showEmail')}}";
            let telivistAccess = "{{Session::get('televisitAccess')}}";
          
            {{-- This function is used to get office and provider values from notification ER :15187 Dhwanis --}}
            const urlParams = new URLSearchParams(window.location.search);
            var key= 'abc123XYZ';
            let officeId = urlParams.get('officeId');
            let providerId = urlParams.get('providerId');
            
            if(officeId !== null){     
                globalselectedOfficeGroup = "all";         
                officeId = officeId.replace(/ /g,'+');
                var decrypted = decrypt(officeId.toString());
                globalselectedOffice = decrypted.replace(/[^0-9]/g, '');
            }
            
            if(providerId !== null){
                if(providerId != 0){
                    providerId = providerId.replace(/ /g,'+');
                    var decryptedProviderId = decrypt(providerId.toString());
                    globalselectedProvider = decryptedProviderId.replace(/[^0-9]/g, '');
                }else{
                    globalselectedProvider = "all";
                }
               
            }

            {{-- This function is used to get Appointment listing UI
                ER :15187 Dhwanis --}}
            function renderTable(appointmentList) {               
                {{-- Grouping appointments based on providers. ER :15187 Dhwanis --}}
                const appointmentGroup = appointmentList.reduce((acc,val)=>{
                    const values = acc[val.provider] || [];
                        values.push(val);
                        return {...acc,[val.provider] : values}
                },{});

                {{-- Grouping appointments based on offices. ER :15187 Dhwanis --}}
                for(const key of Object.keys(appointmentGroup)){

                    const values = appointmentGroup[key]

                    appointmentGroup[key] = values.reduce((acc, val) => {
                        const values = acc[val.office_name] || [];
                        values.push(val);
                        return {...acc, [val.office_name]: values}
                    }, {});
                }

                {{-- Grouping appointments based on rooms. ER :15187 Dhwanis --}}
                for(const key of Object.keys(appointmentGroup)){
                    const values1 = appointmentGroup[key];
                    for(const key1 of Object.keys(values1)){
                        const values2 = values1[key1];
                        appointmentGroup[key][key1] = values2.reduce((acc, val) => {
                            const values3 = acc[val.room_name] || [];
                            values3.push(val);
                            return {...acc, [val.room_name]: values3}
                        }, {});
                    }

                }

                var body = '';
              
                if(appointmentGroup == null || Object.keys(appointmentGroup).length === 0){
                    body += `<div style="text-align: center; color: #717171; margin: 100px auto"><h2 style="word-wrap: normal">No appointments found</h2></div>`;
                }

                if(!isMobile && !(appointmentGroup == null || Object.keys(appointmentGroup).length === 0)){
                    body +=  `<table class="table table-striped results" id="myTable">
                                <thead>
                                <tr>
                                    <th class="header" style="z-index:1;font-weight: 600; font-size: x-large" scope="row">Patient Name</th>
                                    <th colspan="2" class="header" style="z-index:1;text-align: center;font-weight: 600; font-size: x-large" scope="row">Contact Information</th>
                                    <th class="header" style="z-index:1;text-align: center; font-weight: 600; font-size: x-large" scope="row">Time</th>
                                    <th class="header" style="z-index:1;text-align: center; font-weight: 600; font-size: x-large" scope="row">Televisit ID</th>
                                    <th class="header" style="z-index:1;text-align: center; font-weight: 600; font-size: x-large" scope="row"></th>
                                </tr>
                                </thead>`; 
                }else{
                    body +=  `<div class="results">`; 
                }


                for(const provider of Object.keys(appointmentGroup)){
                    for(const officeId of Object.keys(appointmentGroup[provider])){
                        for(const roomId of Object.keys(appointmentGroup[provider][officeId])){
                            const appointmentList = appointmentGroup[provider][officeId][roomId];
                            const roomName = appointmentList[0]['room_name'];
                            const empId = appointmentList[0]['empid'];
                            const room = appointmentList[0]['room'];
                            const ofcId = appointmentList[0]['office_id'];
                            let counter = 1;

                            if (isMobile){
                                body += `<div class="card mb-3 parent-${empId}-${room}-${ofcId}">
                                    <div class="card-body">
                                        <h5 class="card-title">`;
                                body += `<p style="color: #175082; text-shadow: 1px 1px 2px rgba(0,0,0,1);">${officeId} ${checkNull(provider) == true ? '' : provider} ${roomName == null ? '' : roomName}</p>
                                        </h5>
                                        <p class="card-text"></p>
                                    </div>
                                </div>`;
                            }
                            else{
                                body += `<tr style="background-color: #d0e2e0" class="parent-${empId}-${room}-${ofcId}">
                                            <td>
                                            <span style="margin-right: 50px;font-weight:600;"> ${officeId} </span>
                                            </td>`;
                                    if(checkNull(provider) == false && checkNull(roomName) == false){
                                        body += `<td><span style="font-weight:600;">Provider: ${provider} </span></td>
                                                <td><span style="font-weight:600;">Room: ${roomName} </span></td><td></td><td></td><td></td></tr>`;
                                    }else if(checkNull(provider) == true && checkNull(roomName) == false){
                                        body += `<td><span style="font-weight:600;">Room: ${roomName} </span></td><td></td><td></td><td></td><td></td></tr>`;
                                    }else if(checkNull(provider) == false && checkNull(roomName) == true){
                                        body += `<td><span style="font-weight:600;">Provider: ${provider} </span></td><td></td><td></td><td></td><td></td></tr>`;
                                    }else{
                                        body += `<td></td><td></td><td></td><td></td><td></td></tr>`;
                                    }
                            }

                            for(const appointment of appointmentList){
                                let styleValue = (counter % 2) ? "style='background-color:white'" : "style='background-color:#F5F5F5'";
                                if(isMobile){
                                    body += `<div id='raw${appointment['tran_id']}' class="card mb-3 app-row" data-value="${empId}-${room}-${ofcId}"><div class="card-body"><h5 class="card-title">${appointment['lastname']}, ${appointment['firstname']} (${appointment['chart_no']}) ${appointment['televisit_in_progress'] == "Y" ? '<span data-toggle="tooltip" title="Televisit is in-progress"><img src="{{asset('/images/inprogress.png')}}" style="width:16px;height:16px;vertical-align:middle;" class="blink"></span>' : ''}</h5>`;

                                    if(textRights == "Y"){
                                        
                                        if(checkNull(appointment.cell_phone) == true){
                                            body += `<span><b>Cell:</b> NA<br></span>`;
                                        }else{
                                            body += `<p onclick="sendEmail(${appointment['tran_id']},'S',${appointment['patient_id']})" data-toggle="tooltip" title="Send televisit details to patient via SMS" class="card-text" style="margin-bottom: 0;"><span><b>Cell: </b>${appointment['cell_phone'] ?? ''}<i class="fa fa-paper-plane" style="vertical-align:text-top;"></i><br></span></p>`;
                                        }
                                    }else{
                                        body +=  `<p class="card-text" style="margin-bottom: 0;"><span><b>Cell: </b>${appointment['cell_phone'] ?? ''}<i class="fa fa-paper-plane" style="vertical-align:text-top;"></i><br></span></p>`;
                                    }

                                    if(emailRights == "Y"){
                                        if(checkNull(appointment.email) == true){
                                            body +=  `<span><b>Email:</b> NA</span>`;
                                        }else{
                                            body +=  `<span onclick="sendEmail(${appointment['tran_id']},'E',${appointment['patient_id']})"  data-toggle="tooltip" title="Send televisit details to patient via email"><b>Email: </b>${appointment['email'] ?? ''}<i class="fa fa-envelope" style="padding-left:5px;vertical-align:text-top;"></i></span>`;
                                        }
                                    }else{
                                        body +=  `<span><b>Email: </b>${appointment['email'] ?? ''}<i class="fa fa-envelope" style="padding-left:5px;vertical-align:text-top;"></i></span>`;
                                    }

                                    body += `<p class="card-text"><span><b>Appointment Time: </b>${appointment['schedule_time']}<br></span>
                                            <span><b>Televisit ID: </b>${appointment['televisit_meeting_id']}<br></span></p></div><div class="card-footer text-muted"><span>`;
                                            
                                    if(telivistAccess == "N" && checkNull(appointment.checkin_time) == true && checkNull(appointment.empid) == true){
                                        body += `<button type="submit" style="cursor: url('${asset}'),auto; " class="btn btn-info" onclick="televisitAccessMessage()" >${appointment['televisit_text'] == null ? 'JOIN' : appointment['televisit_text']}</button>
                                                </form></span></div></div>`;
                                    }else{
                                        if(telivistGrant == "1"){
                                            body += `<form action="joinAppointment/${appointment['tran_id']}" method="post">
                                                ${$('meta[name="csrf-field"]').attr('content')}
                                                <input type="hidden" name="meetingId" value="${appointment['televisit_meeting_id']}">
                                                <input type="hidden" name="pId" value="${appointment['patient_id']}">
                                                <button  type="submit" style="cursor: url('${asset}'),auto; " class="btn btn-info" onclick="joinAppointmentEvent(${appointment['televisit_meeting_id']},${appointment['patient_id']})" >${appointment['televisit_text'] == null ? 'JOIN' : appointment['televisit_text']}</button>
                                                </form></span></div></div>`;
                                        }else{
                                            body += `<button type="submit" style="cursor: url('${asset}'),auto; " class="btn btn-info" onclick="securityMessage()" >${appointment['televisit_text'] == null ? 'JOIN' : appointment['televisit_text']}</button>
                                                </form></span></div></div>`;
                                        }
                                    }
                                }
                                else{
                                    body += `<tr id="raw${appointment['tran_id']}" class="app-row" data-value="${empId}-${room}-${ofcId}" data-counter="${counter}" ${styleValue}>
                                                <td>${appointment['lastname']}, ${appointment['firstname']} (${appointment['chart_no']}) ${appointment['televisit_in_progress'] == "Y" ? '<span data-toggle="tooltip" title="Televisit is in-progress"><img src="{{asset('/images/inprogress.png')}}" style="width:16px;height:16px;vertical-align:middle;" class="blink"></span>' : ''}</td>`;

                                                if(checkNull(appointment.cell_phone) == true){
                                                        body +=  `<td>Cell: NA</td>`;
                                                    }else{
                                                        if(textRights == "Y"){
                                                            body +=  `<td><a onclick="sendEmail(${appointment['tran_id']},'S',${appointment['patient_id']})" data-toggle="tooltip" title="Send televisit details to patient via SMS" style="color: #000000;">Cell: ${appointment['cell_phone'] == "" ? "" : appointment['cell_phone']}<i class="fa fa-paper-plane"></i></a></td>`;
                                                        }else{
                                                            body +=  `<td>Cell: ${appointment['cell_phone'] == "" ? "" : appointment['cell_phone']}<i class="fa fa-paper-plane"></i></td>`;
                                                        }
                                                    }

                                                    
                                                if(checkNull(appointment.email) == true){
                                                    body +=  `<td>Email: NA</td>`;
                                                }else{
                                                    if(emailRights == "Y"){
                                                        body +=  `<td><a onclick="sendEmail(${appointment['tran_id']},'E',${appointment['patient_id']})" data-toggle="tooltip" title="Send televisit details to patient via email" style="color: #000000;">Email: ${appointment['email'] ?? ''}<i class="fa fa-envelope" style="padding-left:5px;vertical-align:middle;"></i></a></td>`;
                                                    }else{
                                                        body +=  `<td>Email: ${appointment['email'] ?? ''}<i class="fa fa-envelope" style="padding-left:5px;vertical-align:middle;"></i></td>`;
                                                    }
                                                }


                                    body += `<td style="text-align: center">${appointment['schedule_time']}</td>
                                        <td style="text-align: center">${appointment['televisit_meeting_id']}</td>
                                        <td style="text-align: center" ${appointment.checkin_time} ${appointment.empid} >`;
                                        if(telivistAccess == "N" && checkNull(appointment.checkin_time) == true && checkNull(appointment.empid) == true){
                                            body += `<button  type="submit" style="cursor: url('${asset}'),auto; " class="btn btn-info" onclick="televisitAccessMessage()">${appointment['televisit_text'] == null ? 'JOIN' : appointment['televisit_text']}</button>
                                                    </td>
                                                    </tr>`
                                        }else{
                                            if(telivistGrant == "1"){                                            
                                            body += `<form action="joinAppointment/${appointment['tran_id']}" method="post">
                                                    ${$('meta[name="csrf-field"]').attr('content')}
                                                    <input type="hidden" name="meetingId"  value="${appointment['televisit_meeting_id']}"/>
                                                    <input type="hidden" name="pId"  value="${appointment['patient_id']}"/>
                                                    <button  type="submit" style="cursor: url('${asset}'),auto; " class="btn btn-info" onclick="joinAppointmentEvent(${appointment['televisit_meeting_id']},${appointment['patient_id']})">${appointment['televisit_text'] == null ? 'JOIN' : appointment['televisit_text']}</button>
                                                    </form>
                                                    </td>
                                                    </tr>`
                                            }else{
                                                body += `<button  type="submit" style="cursor: url('${asset}'),auto; " class="btn btn-info" onclick="securityMessage()">${appointment['televisit_text'] == null ? 'JOIN' : appointment['televisit_text']}</button>
                                                    </td>
                                                    </tr>`
                                            }
                                        }

                                }
                                counter++;
                            }
                        }
                    }

                }

                if (!isMobile){
                    body += `</table>`;
                }else{
                    body += `</div>`;
                }

                isMobile ? $('#mobileview').html(body) : $('#tableBody').html(body);
            }

            applyFilter();

            $(document).ready(function(){

                $('#office').select2({
                    // matcher:matchStart,
                    // maximumInputLength: 1,
                    // dropdownCssClass : 'no-search', 
                    // minimumResultsForSearch: 6
                });
                $('#officegroup').select2({
                    // dropdownCssClass : 'no-search',
                    // minimumResultsForSearch: 5
                });
                $('#provider').select2({
                    // dropdownCssClass : 'no-search',
                    // minimumResultsForSearch: 5 
                });
                $('#room').select2({
                    // dropdownCssClass : 'no-search' ,
                    // minimumResultsForSearch: 5
                });
                $('#televisitStatus').select2({
                    dropdownCssClass : 'no-search',
                    // minimumResultsForSearch: 5
                });

                {{-- This are the settings of toastr notication.
                ER :15187 Dhwanis --}}
                    toastr.options = {
                    "closeButton": true,
                    "debug": false,
                    "newestOnTop": true,
                    "progressBar": false,
                    "positionClass": "toast-bottom-right",
                    "preventDuplicates": true,
                    "onclick": null,
                    "showDuration": "300",
                    "hideDuration": "1000",
                    "timeOut": "5000",
                    "extendedTimeOut": "1000",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut"
                }

                {{-- This is used to set select box option values width
                ER :15187 Dhwanis --}}

                $("[data-toggle='tooltip']").tooltip();

                {{-- This function is used to get office group and office select box values.
                    ER :15187 Dhwanis --}}
           
                if(checkNull(globalselectedOfficeGroup) == false) {
                    $("#officegroup").val(globalselectedOfficeGroup);
                    $('#officegroup').val(globalselectedOfficeGroup).trigger('change');
                    let empId = "{{Session::get('empId')}}";
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        url: 'sendOfficeGroupResult',
                        data: { officegroup_id: globalselectedOfficeGroup, emp_id:empId },
                        success :function(data){
                            $("#office option[data-value='office-val']").remove();
                            len = data.length;

                            if(len > 1){
                                var option = "<option data-value='office-val' value='all'>All</option>";
                                $("#office").append(option);
                            }
                            for(var i=0; i<len; i++){
                                var id = data[i].srno;
                                var officeName = data[i].office_name;
                                var officeCode = data[i].office_code;
                                var officeStatus = data[i].active;

                                if(officeStatus == "N"){
                                    var style = "style='color:red;' disabled";
                                }else{
                                    var style = "";
                                }

                                var officeCodeName = officeCode+'-'+officeName;
                                var option = "<option title='"+officeCodeName+"' data-value='office-val' value='"+id+"' "+style +">"+officeCodeName+"</option>";
                                $("#office").append(option); 
                            }
                            if(len > 1){
                                $("#office").val(globalselectedOffice);
                            }

                        }
                    });
                }

                {{-- This function is used to get provider and room select box values.
                    ER :15187 Dhwanis --}}
                if(checkNull(globalselectedOffice) == false) {
                    $("#office").val(globalselectedOffice);
                    $('#office').val(globalselectedOffice).trigger('change');
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        url: 'sendOfficeResult',
                        data: { office_id: globalselectedOffice, username:username },
                        success :function(data){
                            $("#provider option[data-value='provider-val']").remove();
                            $("#room option[data-value='room-val']").remove();

                            var providerLen = data.providerList.length;
                            var roomLen = data.roomList.length;

                            for(var i=0; i<providerLen; i++){
                                var providerId = data.providerList[i].emp_id;
                                var providerValue = data.providerList[i].provider_name;
                                var providerStatus = data.providerList[i].active;

                                if(providerStatus == "N"){
                                    var style = "style='color:red;' disabled";
                                }else{
                                    var style = "";
                                }

                                var option = "<option title='"+providerValue+"' data-value='provider-val' value='"+providerId+"' "+style +">"+providerValue+"</option>";
                                $("#provider").append(option);
                            }

                            for(var j=0; j<roomLen; j++){
                                var roomId = data.roomList[j].resource_id;
                                var roomValue = data.roomList[j].description;
                                var roomStatus = data.roomList[j].active;

                                if(roomStatus == "N"){
                                    var style = "style='color:red;' disabled";
                                }else{
                                    var style = "";
                                }

                                var option = "<option title='"+roomValue+"' data-value='room-val' value='"+roomId+"' "+style +">"+roomValue+"</option>";
                                $("#room").append(option);
                            }

                            if($("#provider option[value='"+globalselectedProvider+"']").length > 0){
                                $("#provider").val(globalselectedProvider);
                                $('#provider').val(globalselectedProvider).trigger('change');
                            }else{
                                globalselectedProvider = "all";
                                $("#provider").val("all");
                                $('#provider').val("all").trigger('change');
                            }
                            $("#room").val(globalselectedRoom);
                            applyFilter();
                        }
                    });
                }

                {{-- This function is used to set provider select box value.
                    ER :15187 Dhwanis --}}
              
                if(checkNull(globalselectedProvider) == false) {
                    if($("#provider option[value='"+globalselectedProvider+"']").length > 0){
                        $("#provider").val(globalselectedProvider);
                    }else{
                        globalselectedProvider = "all";
                        $("#provider").val("all");
                    }
                }else {
                    if(designationDescription == "Provider"){
                        let empName =  empId.toString();
                        if($("#provider option[value='"+empName+"']").length > 0){
                            globalselectedProvider = empName;
                        }else{
                            globalselectedProvider = "all";
                        }
                    }else{
                        globalselectedProvider = "all";
                    }

                    $("#provider").val(globalselectedProvider);
                    // $('#provider').val(globalselectedProvider).trigger('change');
                    applyFilter();
                }

                {{-- This function is used to set room select box.
                    ER :15187 Dhwanis --}}
                    
                if(checkNull(globalselectedRoom) == false) {
                    $("#room").val(globalselectedRoom);
                    // $('#room').val(globalselectedRoom).trigger('change');
                }
               
                {{-- This function is used to set televisit status.
                    ER :15187 Dhwanis --}}
                    
                if(checkNull(globalselectedTelevisitStatus) == false) {
                    if(globalselectedTelevisitStatus == "both"){
                        var status = globalselectedTelevisitStatus;
                    }else{
                        var status = globalselectedTelevisitStatus.toUpperCase();
                    }
                    $("#televisitStatus").val(status);
                    // $('#televisitStatus').val(status).trigger('change');
                }

                {{-- This function is called on change of office select box
                    ER :15187 Dhwanis --}}
                $("#office").change(function () {
                    $("#searchAppointment").val("");
                    $("#searchAppointment").keyup();
                    let selectedOffice = $("#office").val();
                    globalselectedOffice = selectedOffice;                  
                    localStorage.setItem('selectedOffice',selectedOffice);

                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        url: 'sendOfficeResult',
                        data: { office_id: globalselectedOffice, username:username },
                        success :function(data){
                            $("#provider option[data-value='provider-val']").remove();
                            $("#room option[data-value='room-val']").remove();

                            var providerLen = data.providerList.length;
                            var roomLen = data.roomList.length;

                            for(var i=0; i<providerLen; i++){
                                var providerId = data.providerList[i].emp_id;
                                var providerValue = data.providerList[i].provider_name;
                                var providerStatus = data.providerList[i].active;

                                if(providerStatus == "N"){
                                    var style = "style='color:red;' disabled";
                                }else{
                                    var style = "";
                                }
                             
                                var option = "<option title='"+providerValue+"' data-value='provider-val' value='"+providerId+"' "+style +">"+providerValue+"</option>";
                                $("#provider").append(option);
                            }

                            for(var j=0; j<roomLen; j++){
                                var roomId = data.roomList[j].resource_id;
                                var roomValue = data.roomList[j].description;
                                var roomStatus = data.roomList[j].active;

                                if(roomStatus == "N"){
                                    var style = "style='color:red;' disabled";
                                }else{
                                    var style = "";
                                }

                                var option = "<option title='"+roomValue+"' data-value='room-val' value='"+roomId+"' "+style +">"+roomValue+"</option>";
                                $("#room").append(option);
                            }

                            $("#provider").val("all");
                            // $('#provider').val("all").trigger('change');
                            localStorage.setItem('selectedProvider',"all");
                            globalselectedProvider = "all";

                            $("#room").val("all");
                            // $('#room').val("all").trigger('change');
                            localStorage.setItem('selectedRoom',"all");
                            globalselectedRoom = "all";
                            applyFilter();
                        }
                    });

                });

                {{-- This function is called on change of office group select box
                ER :15187 Dhwanis --}}
                $("#officegroup").change(function () {
                    $("#searchAppointment").val("");
                    $("#searchAppointment").keyup();
                    let selectedOfficeGroup = $("#officegroup").val().toLowerCase();
                    globalselectedOfficeGroup = selectedOfficeGroup;
                    localStorage.setItem('selectedOfficeGroup',selectedOfficeGroup);
                    let empId = {{Session::get('empId')}};
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        url: 'sendOfficeGroupResult',
                        data: { officegroup_id: selectedOfficeGroup, emp_id:empId },
                        success :function(data){
                            $("#office option[data-value='office-val']").remove();
                            len = data.length;

                            if(len > 1){
                                var option = "<option data-value='office-val' value='all'>All</option>";
                                $("#office").append(option);
                                var optionId = "all";
                                globalselectedOffice = "all";
                                localStorage.setItem('selectedOffice',"all");
                            }else{
                                var optionId = data[0].srno;
                                globalselectedOffice = optionId;
                                localStorage.setItem('selectedOffice', optionId);
                            }
                            
                            for(var i=0; i<len; i++){
                                var id = data[i].srno;
                                var officeName = data[i].office_name;
                                var officeCode = data[i].office_code;
                                var officeStatus = data[i].active;

                                if(officeStatus == "N"){
                                    var style = "style='color:red;' disabled";
                                }else{
                                    var style = "";
                                }

                                var officeCodeName = officeCode+'-'+officeName;
                                var option = "<option title='"+officeCodeName+"' data-value='office-val' value='"+id+"' "+style +">"+officeCodeName+"</option>";
                                $("#office").append(option);
                            }

                            if(optionId != ""){
                                $.ajax({
                                    headers: {
                                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                    },
                                    type: "POST",
                                    url: 'sendOfficeResult',
                                    data: { office_id: optionId, username:username },
                                    success :function(data){
                                        $("#provider option[data-value='provider-val']").remove();
                                        $("#room option[data-value='room-val']").remove();

                                        var providerLen = data.providerList.length;
                                        var roomLen = data.roomList.length;

                                        for(var i=0; i<providerLen; i++){
                                            var providerId = data.providerList[i].emp_id;
                                            var providerValue = data.providerList[i].provider_name;
                                            var providerStatus = data.providerList[i].active;

                                            if(providerStatus == "N"){
                                                var style = "style='color:red;' disabled";
                                            }else{
                                                var style = "";
                                            }
                                        
                                            var option = "<option title='"+providerValue+"' data-value='provider-val' value='"+providerId+"' "+style +">"+providerValue+"</option>";
                                            $("#provider").append(option);
                                        }

                                        for(var j=0; j<roomLen; j++){
                                            var roomId = data.roomList[j].resource_id;
                                            var roomValue = data.roomList[j].description;
                                            var roomStatus = data.roomList[j].active;

                                            if(roomStatus == "N"){
                                                var style = "style='color:red;' disabled";
                                            }else{
                                                var style = "";
                                            }

                                            var option = "<option title='"+roomValue+"' data-value='room-val' value='"+roomId+"' "+style +">"+roomValue+"</option>";
                                            $("#room").append(option);
                                        }

                                        $("#provider").val("all");
                                        localStorage.setItem('selectedProvider',"all");
                                        globalselectedProvider = "all";

                                        $("#room").val("all");
                                        localStorage.setItem('selectedRoom',"all");
                                        globalselectedRoom = "all";

                                        applyFilter();
                                    }
                                });
                            }
                            
                        }
                    }); 
                    
                    $("#provider").val("all");
                    localStorage.setItem('selectedProvider',"all");
                    globalselectedProvider = "all";

                    $("#room").val("all");
                    localStorage.setItem('selectedRoom',"all");
                    globalselectedRoom = "all";

                    applyFilter();
                });

                {{-- This function is called on change of provider select box
                ER :15187 Dhwanis --}}
                $("#provider").change(function () {
                    $("#searchAppointment").val("");
                    $("#searchAppointment").keyup();
                    let selectedProvider = $("#provider").val().toLowerCase();
                    globalselectedProvider = selectedProvider;
                    localStorage.setItem('selectedProvider',selectedProvider);
                    applyFilter();
                });

                {{-- This function is called on change of roomselect box
                ER :15187 Dhwanis --}}
                $("#room").change(function () {
                    $("#searchAppointment").val("");
                    $("#searchAppointment").keyup();
                    let selectedRoom = $("#room").val().toLowerCase();
                    globalselectedRoom = selectedRoom;
                    localStorage.setItem('selectedRoom',selectedRoom);
                    applyFilter();
                });

                {{-- This function is called on change of televisit status select box
                ER :15187 Dhwanis --}}
                $("#televisitStatus").change(function () {
                    $("#searchAppointment").val("");
                    $("#searchAppointment").keyup();
                    let selectedTelevisitStatus = $("#televisitStatus").val().toLowerCase();
                    globalselectedTelevisitStatus = selectedTelevisitStatus;
                    localStorage.setItem('selectedTelevisitStatus',selectedTelevisitStatus);
                    applyFilter();
                });

                {{-- This function is used for search box results
                ER :15187 Dhwanis --}}
                $("#searchAppointment").keyup(function(){
                    let searchValue = $("#searchAppointment").val();
                    // localStorage.setItem('searchValue',searchValue);
                    let searchTerm = $("#searchAppointment").val().toLowerCase();
                    var listItem = $('.results tbody').children('tr');
                    var searchSplit = searchTerm.replace(/ /g, "'):containsi('")

                    $.extend($.expr[':'], {'containsi': function(elem, i, match, array){
                            return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
                        }
                    });

                    $(".results .app-row").not(":containsi('" + searchSplit + "')").each(function(e){
                        var rowVal = $(this).attr('data-value');
                        $('.parent-' + rowVal).css("display","none");
                        $(this).attr('visible','false');
                    });

                    $(".results .app-row:containsi('" + searchSplit + "')").each(function(e){
                        var rowVal = $(this).attr('data-value');
                        $('.parent-' + rowVal).css("display","table-row");
                        $(this).attr('visible','true');
                    });

                    var resCount = $('.results .app-row[visible="true"]').length;
                    var divValue = $('.results').is(":empty");
                    
                    if(resCount == '0' && divValue == false) {
                        $('.empty-results').css("display","block");
                        $('#tableBody .results').css("display","none");
                    }else {
                        $('.empty-results').css("display","none");
                        $(' #tableBody .results').css("display","table");
                    }

                });

                $("#searchAppointment").keyup();

            });

            {{-- This function is used when user send televisit details via email/SMS.
                ER :15187 Dhwanis --}}
            function sendEmail(appointmentId,type,patientId){
                if(type == "S"){
                    sendSMSEvent(appointmentId,patientId);
                }else{
                    sendEmailEvent(appointmentId,patientId)
                }
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    type: "POST",
                    url: "sendTelevisitDetails", // This is what I have updated
                    data: { appointment_id: appointmentId,type: type }
                }).done(function( msg ) {
                    toastr.success(msg["description"]);
                });
            }

            {{-- This function is used to filter all the appointments based on diff filters
                ER :15187 Dhwanis --}}
            function applyFilter(){
                let filterList = appointmentList;

                if(globalselectedOfficeGroup != null && globalselectedOfficeGroup!== 'all'){
                    filterList = filterList.filter(item => {
                        return item.office_group_id === globalselectedOfficeGroup;
                    });
                }

                if(globalselectedOffice != null && globalselectedOffice!== 'all'){
                    filterList = filterList.filter(item => {
                        return item.office_id === globalselectedOffice;
                    });
                }


                if(globalselectedProvider != null && globalselectedProvider!== 'all'){
                    filterList = filterList.filter(item => {
                        return item.empid === globalselectedProvider;
                    });
                }

                if(globalselectedRoom != null && globalselectedRoom!== 'all'){
                    filterList = filterList.filter(item => {
                        return item.room === globalselectedRoom;
                    });
                }

                if(globalselectedTelevisitStatus != null && globalselectedTelevisitStatus!== 'both'){
                    filterList = filterList.filter(item => {
                        return item.televisit_in_progress.toLowerCase() === globalselectedTelevisitStatus;
                    });
                }

                searchList = filterList;
                renderTable(filterList);
            }

            function applyFilter1(appointmentList){

                let filterList = appointmentList;

                if(globalselectedOfficeGroup != null && globalselectedOfficeGroup!== 'all'){
                    filterList = filterList.filter(item => {
                        return item.office_group_id === globalselectedOfficeGroup;
                    });
                }

                if(globalselectedOffice != null && globalselectedOffice!== 'all'){
                    filterList = filterList.filter(item => {
                        return item.office_id === globalselectedOffice;
                    });
                }


                if(globalselectedProvider != null && globalselectedProvider!== 'all'){
                    filterList = filterList.filter(item => {
                        return item.empid === globalselectedProvider;
                    });
                }

                if(globalselectedRoom != null && globalselectedRoom!== 'all'){
                    filterList = filterList.filter(item => {
                        return item.room === globalselectedRoom;
                    });
                }

                if(globalselectedTelevisitStatus != null && globalselectedTelevisitStatus!== 'both'){
                    filterList = filterList.filter(item => {
                        return item.televisit_in_progress.toLowerCase() === globalselectedTelevisitStatus;
                    });
                }

                searchList = filterList;
                renderTable(filterList);
            }

            {{-- This function is called when logged in user do not have security access for televisit
                ER :15187 Dhwanis --}}
            function securityMessage(){
                alert(allMessagesText.securityError)
            }

            {{-- This function is called when logged in user do not have security access for televisit
                ER :15187 Dhwanis --}}
            function televisitAccessMessage(){
                alert(allMessagesText.televisitAccessError);
            }

            setInterval(function () {
                if(window.isTabActive) {
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        type: "POST",
                        url: 'getUpdatedAppts',
                        data: { office_id: "globalselectedOffice"},
                        success :function(data){
                          applyFilter1(data);
                          $("#searchAppointment").keyup();
                        }
                    });
                }
            },5000);

            function matchStart(params, data) {
                if ($.trim(params.term) === '') {
                    return data;
                }
                return null;
            }
        </script>

        <script type="text/javascript">

            function nullLoad(){
                window.onbeforeunload = null;
            }

            let item = localStorage.getItem('showNote');
            history.pushState(null,null,location.href);
            history.back();
            history.forward();
            window.onpopstate = function() {
                history.go(1);
            }
            window.onbeforeunload = function(e){

            }
            history.pushState({},'');
        </script>
    @endsection