@php
    use App\Helpers\General\AMP;
@endphp
<div class="modal fade w-100" id="fl-subscribe-modal" tabindex="-1" role="dialog" aria-labelledby="title-fl-subscribe-modal" aria-hidden="true" style="@if(AMP::check()) z-index: 9999; position:fixed; max-width: 100%; @endif background-color: rgba(0, 0, 0, 0.1);">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div id="modalCLoseIcon" style="position: absolute;right: 0px;top: -30px!important;background-color: #FFFFFF;padding: 2px 6px;-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" onClick="CloseModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div style="width: 800px; max-width: 100%; max-height:max-content;" class="position-relative">
            <img class="promo-img" src="static/assets/images/popup/discount.jpg" alt="Grab the discount" loading="lazy">
                <div class=" d-none" style="margin-left:2rem; padding-top: 33px; z-index: 1; position: relative; @if(!AMP::check()) width: 500px; @endif padding-right: 100px;" class="position-relative" id="msg_popup" role="alert">
                    <h3 id="subscription_heading">Thank You!</h3>
                    <div class="pb-2 pt-1" id="subscription_message"></div>
                    <div>
                        <button type="button" data-dismiss="modal" class="close_btn_for_modal" onClick="CloseModal()">Close</button>
                    </div>
                </div>
                <div id="div_popup_subscribe" style="margin-top: 30px; overflow:auto; height: 450px; width: 405px; max-width:90%; padding-left: 1.5%; z-index: 1;" class="position-relative">
                    {!! Form::open(array('method' => 'POST', 'name' => 'frm_newsletter', 'id' => 'frm_newsletter', 'onsubmit' => 'return subscribe(this);')) !!}
                        <div class="col-md-12 col-12">
                            {!! Form::text('name', null,['id' => 'newsletter-name', 'class'=>'form-control text_input', 'required' => 'required', 'placeholder'=>'Your name ...']) !!}
                        </div>
                        <div class="col-md-12 col-12">
                            {{-- {!! Form::text('email', null, ['id' => 'newsletter-email', 'type' => 'email', 'required' => 'required', 'class' => 'form-control text_input' , 'placeholder' => 'Your email address ...']) !!} --}}
                            <input type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" id="newsletter-email" required name="email" class="form-control text_input" placeholder="Your email address ...">
                        </div>
                        <div class="col-md-12 col-12">
                            {!! Form::text('phone', null,['id' => 'newsletter-phone', 'maxlength' => '12','minlength' => '10','class'=>'form-control text_input', 'required' => 'required', 'placeholder'=>'Your phone number ...']) !!}
                        </div>
                        <div class="col-md-12 col-12">
                            {!! Form::select('speciality',
                            ['Cardiothoracic Surgery' => 'Cardiothoracic Surgery', 'General Surgery' => 'General Surgery',
                            'Neurosurgery' => 'Neurosurgery',
                            'Otolaryngology (ENT)' => 'Otolaryngology (ENT)',
                            'Paedatric Surgery' => 'Paedatric Surgery',
                            'Plastic Surgery' => 'Plastic Surgery',
                            'Trauma and Orthopaedic Surgery' => 'Trauma and Orthopaedic Surgery',
                            'Urology' => 'Urology',
                            'Vascular Surgery' => 'Vascular Surgery',
                            'Academic Surgery' => 'Academic Surgery',
                            'Hand and Wrist' => 'Hand and Wrist',
                            'Shoulder and Elbow' => 'Shoulder and Elbow',
                            'Foot and Ankle' => 'Foot and Ankle',
                            'Spine Surgery' => 'Spine Surgery',
                            'Other' => 'Other',
                            ]
                            ,null
                            ,['id' => 'newsletter-speciality' , 'onclick' => 'set_speciality(this);' , 'class'=>'form-control', 'required' => 'required', 'placeholder' => 'Your speciality ...','style' => 'font-weight: inherit;']) !!}
                        </div>
                        <div id="div_speciality_other" class="col-md-12 col-12 d-none">
                            {!! Form::text('speciality_other', null,['id' => 'newsletter-speciality-other', 'class'=>'form-control', 'placeholder'=>'Other speciality details ...' ,'style' => 'font-weight: inherit;']) !!}
                        </div>
                        <div class="col-md-12 col-12">
                            {!! Form::select('role',
                            ['Surgeon' => 'Surgeon', 'Technician' => 'Technician', 'Office Manager' => 'Office Manager', 'Clinic Owner' => 'Clinic Owner', 'Associated with Hospital' => 'Associated with Hospital', 'Other' => 'Other']
                            ,null
                            ,['id' => 'newsletter-role', 'class'=>'form-control', 'required' => 'required', 'placeholder'=>'Your role ...' ,'style' => 'font-weight: inherit;']) !!}
                        </div>
                        <div class="col-md-12 col-12">
                            {!! Form::text('company', null,['id' => 'newsletter-company', 'class'=>'form-control text_input', 'placeholder'=>'Your institute / company ...', 'required' => 'required']) !!}
                        </div>
                        <div class="col-md-12 col-12 subscribe_check mt-3">
                            <label>{!! Form::checkbox('product_updates', 'Y', true) !!} Subscribe me for new products and updates.</label>
                        </div>
                        <div class="col-md-12 col-12 subscribe_check">
                            <label>{!! Form::checkbox('newsletter', 'Y', true) !!} Send me promotions and discount offers.</label>
                        </div>
                        <div class="subscription-message d-none"></div>
                        <div class="form-group mt-4">
                            <div class="text-center" @if(AMP::check())style="margin-right: 120px;" @endif><input @if(AMP::check()) class=" border-1 button rounded shadow" @endif style="font-weight: 500;text-transform: uppercase;" type="submit" class="button" value="Grab the Discount"></div>
                        </div><!-- End .from-group -->
                        <div class="clearfix"></div>
                        <input type="hidden" name="subs_type" id="subs_type" value="popup">
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
</div>
<!-- alert Messages Modal -->
<div id="overlay"></div>
<!-- Alert Messages Modal -->
<div class="modal fade" id="modal_alert" tabindex="-1" role="dialog" aria-labelledby="modal_alertTitle" aria-hidden="true">
    <div class="modal-dialog modal-md modal-dialog-centered" role="document">
        <div class="modal-content">
            <div>
                <button style="font-size: 30px;
                right: -92%;
                position: relative;
                background-color: white;
                color: black;"  type="button" class="button ms-1 px-2" data-dismiss="modal" onClick="CloseConfirmModal()">
                    <span aria-hidden="true">&times;</span>
                </button>
                <div class="modal-body text-center" id="modal_alert_message" style="">
                </div>
                <div class="text-center pb-4 cart-popup-btn-wrapper d-flex flex-column flex-sm-row justify-content-center align-items-center">
                    <a href="cart" class="button">View Shopping Cart</a>
                    <button type="button" class="button ms-1" data-dismiss="modal" onClick="CloseConfirmModal()">Continue Shopping</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="justify-content-center modal-backdrop-mbl d-none" id="modal_alert_mbl">
    <div class="modal-alert modal-mbl card">
        <div class="card-body">
            <div class=" align-items-center d-flex justify-content-between ">
                <div class="card-title text-center m-0 h6" id="modal_alert_message_mbl" style=""></div>
                <button style="font-size: 30px; background-color: white; color: black;"  type="button" class="button ms-1 px-2" onclick="CloseConfirmModalMbl()">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="text-center pb-4 pt-4 cart-popup-btn-wrapper d-flex justify-content-center align-items-center">
                <a href="cart" class="button">View Cart</a>
                <button type="button" class="button ms-1" onclick="CloseConfirmModalMbl()">Continue Shopping</button>
            </div>
        </div>
    </div>
</div>
<!-- GerMedChat -->
@push('after-scripts')

    <script>var LHC_API = LHC_API||{};
        LHC_API.args = {mode:'widget',lhc_base_url:'//chat.germedusa.com/index.php/',wheight:450,wwidth:350,pheight:520,pwidth:500,domain:'germedusa.com',leaveamessage:true,theme:1,check_messages:true};
        (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.setAttribute('crossorigin','anonymous'); po.async = true;
            var date = new Date();po.src = '//chat.germedusa.com/design/defaulttheme/js/widgetv2/index.js?'+(""+date.getFullYear() + date.getMonth() + date.getDate());
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
    </script>
    <!-- End GerMedChat -->
    <!-- alert Messages Modal -->
    {{--<!--Start of Tawk.to Script-->
    <script type="text/javascript">
        var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
        (function(){
            var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
            s1.async=true;
            s1.src='https://embed.tawk.to/5ab3af1b4b401e45400df59e/default';
            s1.charset='UTF-8';
            s1.setAttribute('crossorigin','*');
            s0.parentNode.insertBefore(s1,s0);
        })();
    </script>
    <!--End of Tawk.to Script-->--}}
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <link rel="preconnect dns-prefetch" href="https://www.googletagmanager.com/gtag/js?id=UA-170607014-1" crossorigin>
    <script defer src="https://www.googletagmanager.com/gtag/js?id=UA-170607014-1"></script>
    <script defer>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'UA-170607014-1');

        document.querySelector(".promo-close-btn").addEventListener('click', function() {
            document.querySelector('.promo-btn-wrapper').classList.add('d-none')
        })
    </script>

    <script defer src="/js/custom.js?version=002"></script>
@endpush