<!DOCTYPE html>
<html lang="en">
<head>
    <!--<meta charset="UTF-8">-->
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <title>@yield('title')</title>
    <link rel="icon" href="{{env('AUTH_SERVER_URL')}}/public/images/fevicon.png" type="image/png">
    <!-- Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-BL22687NVB"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());
        gtag('config', 'G-BL22687NVB');
    </script>
    <!-- End Google Analytics -->
    @include('partials.styles')
    @stack('styles')
</head>
<body>
    <div class="loading d-none">
        <div class='uil-ring-css' style='transform:scale(0.5);'>
            <div></div>
        </div>
    </div>
    @include('partials.header')

    <div class="content">
        @yield('content')
        <div id="chatbot-screen" class="chatbot-screen d-none">
            <div class="chatbot-header">
                <h5 class="mb-0">We're Here to Help - Start a Chat!</h5>
                <i id="close-chatbot" class="material-icons close-chatbot-icon">close</i>
            </div>
            <div class="chatbot-body">
                <div class="messages">
                    <div class="message bot-message">Hi! How can I help you today?</div>
                </div>
                <div class="chat-input">
                    <!--<input type="text" id="chat-input" class="form-control" placeholder="Type a message...">-->
                    <textarea id="chat-input" class="form-control" placeholder="Type a message..."></textarea>
                    <i id="send-btn" class="material-icons">send</i>
                </div>
            </div>
        </div>
        <!-- Add Patient Modal -->
        <div class="modal" id="addPatient" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
            <div class="modal-dialog-xl modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add New Patient</h5>
                    </div>
                    <form id="patientForm">
                        <input type="hidden" id="next" value="save" />
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="prefix" class="col-form-label">Prefix</label>
                                        <select id="prefix" class="form-control" required>
                                            <option value="">Please Select</option>
                                            <option value="Mr.">Mr.</option>
                                            <option value="Mrs.">Mrs.</option>
                                            <option value="Ms.">Ms.</option>
                                            <option value="Miss">Miss</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="name" class="col-form-label">First Name</label>
                                        <input type="text" class="form-control" id="name" required>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="form-group">
                                        <label for="surname" class="col-form-label">Last Name</label>
                                        <input type="text" class="form-control" id="surname" required>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="mobile" class="col-form-label">Mobile Number</label>
                                        <div class="input-group">
                                            <input type="tel" class="form-control" id="mobile" min="8" max="15" required>
                                        </div>
                                    </div>
                                </div>
                                @if(session()->has('currentEHR') && session()->get('currentEHR') == 'epic')
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            <label for="mobile" class="col-form-label">Email</label>
                                            <div class="input-group">
                                                <input type="email" class="form-control" id="email" required>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                                <div class="col-sm-{{session()->has('currentEHR') && session()->get('currentEHR') == 'epic' ? '4' : '6'}}">
                                    <div class="form-group">
                                        <label for="gender" class="col-form-label">Gender</label>
                                        <select id="gender" class="form-control" required>
                                            <option value="">Please Select</option>
                                            <option value="male">Male</option>
                                            <option value="female">Female</option>
                                            <option value="other">Other</option>
                                            <option value="unknown">Unknown</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-{{session()->has('currentEHR') && session()->get('currentEHR') == 'epic' ? '4' : '6'}}">
                                    <div class="form-group">
                                        <label for="birthDate" class="col-form-label">Date of Birth</label>
                                        <input type="date" class="form-control" id="birthDate" required>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group">
                                        <label for="addressType" class="col-form-label">Address Type</label>
                                        <select id="addressType" class="form-control" required>
                                            <option value="">Please Select</option>
                                            <option value="work">Work</option>
                                            <option value="home" selected>Home</option>
                                            <option value="temp">Temporary</option>
                                            <option value="old">Old</option>
                                            <option value="billing">Billing</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12">
                                    <div class="form-group">
                                        <label for="address" class="col-form-label">Address</label>
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="address" required>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer justify-content-center patient-footer">
                            <button type="button" class="btn btn-outline-primary save">Save</button>
                            <button type="button" class="btn btn-outline-danger patient-add-modal-close" data-dismiss="modal">Close</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    @include('partials.scripts')
    @stack('scripts')
</body>
</html>
