@isset($articulo)
  <div class="modal fade" id="article-form-download" tabindex="-1" role="dialog" style="margin-top: 10vh !important;">
    <div class="modal-dialog fs-5" role="document">
      <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="title-article"></h4>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body p-4">
          <div class="container form-download-article">
            <div class="pageTitle text-center"><img class="img-fluid w-75 pb-4" src="{{asset('images/capita-logo.svg')}}" alt="logo_svg" style="filter: brightness(0%);"></div>
            <form id="form-download-pdf" action="https://capitaworks.us21.list-manage.com/subscribe/post" method="post">
                <input type="hidden" name="u" value="028de99919d841b724189d50a">
                <input type="hidden" name="id" value="507c267665">
                <input type="hidden" id="pdfLink" value="{{asset('uploads/'.$articulo['pdf'])}}">
                <table cellpadding="5" cellspacing="0" border="0" align="center">
                    <tr>
                        <td align="right" class="formLabel">First Name:</td>
                        <td align="left">
                            <input type="text" class="form-control fs-6" name="MERGE1" id="MERGE1" size="25" value="" placeholder="First Name">
                            <div class="error"></div>
                        </td>
                    </tr>
                    
                    <tr>
                        <td align="right" class="formLabel">Last Name:</td>
                        <td align="left">
                            <input type="text" class="form-control fs-6" name="MERGE2" id="MERGE2" size="25" value="" placeholder="Last Name">
                            <div class="error"></div>
                        </td>
                    </tr>
                    
                    <tr>
                        <td align="right" class="formLabel">Email Address <span class="req asterisk">*</span>:</td>
                        <td align="left">
                            <input type="email" class="form-control fs-6" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" value="" placeholder="Email Address">
                            <div class="error"></div>
                        </td>
                    </tr>
                    
                    <tr>
                        <td align="right" class="formLabel">Company Name:</td>
                        <td align="left">
                            <input type="text" class="form-control fs-6" name="MERGE6" id="MERGE6" size="25" value="" placeholder="Company Name">
                            <div class="error"></div>
                        </td>
                    </tr>
                    
                        <tr>
                            <td align="right">&nbsp;</td>
                            <td align="left">
                                <!--IF you want this to work with our Facebook app, your submit button *must* start with this: <input type="submit"
                                and end with a >. You can have whatever else you'd like in the rest of the tag, and we'll maintain any custom "value" you set.-->
                                <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                                <div style="position: absolute; left: -5000px;" aria-hidden="true">
                                    <input type="text" name="b_028de99919d841b724189d50a_507c267665" tabindex="-1" value="">
                                </div>
                                <input type="submit" id="btn_download_article_pdf" class="border-0 btn-sm mx-auto mx-lg-1 btn-block btn-yellow-capita rounded-pill fw-600 fs-6 text-dark text-center text-decoration-none" name="submit" value="Download" />
                            </td>
                        </tr>
                </table>
                <div id="subscribe-result">
                </div>
            </form>
          </div>

          <script>
             $(document).ready(function(){
              $( "#form-download-pdf" ).submit(function( event ) {
                if($('#MERGE1').val() == ''){
                  var error =  "* A valid first name must be provided.";
                  $("#subscribe-result").html(error);
                  $("#subscribe-result").css("color", "red");
                  event.preventDefault();
                  return;
                }
                if($('#MERGE2').val() == ''){
                  var error =  "* A valid last name must be provided.";
                  $("#subscribe-result").html(error);
                  $("#subscribe-result").css("color", "red");
                  event.preventDefault();
                  return;
                }
                if (!isValidEmail(this)) {
                  var error =  "* A valid email address must be provided.";
                  $("#subscribe-result").html(error);
                  $("#subscribe-result").css("color", "red");
                  event.preventDefault();
                  return;
                } 
                if ($('#MERGE6').val() == '') {
                  var error =  "* A valid company name must be provided.";
                  $("#subscribe-result").html(error);
                  $("#subscribe-result").css("color", "red");
                  event.preventDefault();
                  return;
                }

                download_pdf();
              });

              function isValidEmail($form) {
                  // If email is empty, show error message.
                  // contains just one @
                  var email = $("#MERGE0").val();
                  if (!email || !email.length) {
                      return false;
                  } else if (email.indexOf("@") == -1) {
                      return false;
                  }

                  return true;
              }

                // ajaxMailChimpForm($("#form-download-pdf"), $("#subscribe-result"));

                // // Turn the given MailChimp form into an ajax version of it.
                // // If resultElement is given, the subscribe result is set as html to
                // // that element.
                // function ajaxMailChimpForm($form, $resultElement){
                //   debugger;
                //     // Hijack the submission. We'll submit the form manually.
                //     $form.submit(function(e) {
                //         e.preventDefault();

                //         if (!isValidEmail($form)) {
                //           var error =  "* A valid email address must be provided.";
                //           $resultElement.html(error);
                //           $resultElement.css("color", "red");
                //         } 
                //         else {
                //           $resultElement.css("color", "black");
                //           $resultElement.html("Subscribing...");
                //           submitSubscribeForm($form, $resultElement);
                //         }
                //     });
                // }

                // // Validate the email address in the form
                // function isValidEmail($form) {
                //     // If email is empty, show error message.
                //     // contains just one @
                //     var email = $form.find("input[type='email']").val();
                //     if (!email || !email.length) {
                //         return false;
                //     } else if (email.indexOf("@") == -1) {
                //         return false;
                //     }

                //     return true;
                // }

                // // Submit the form with an ajax/jsonp request.
                // // Based on http://stackoverflow.com/a/15120409/215821
                // function submitSubscribeForm($form, $resultElement) {
                //     $.ajax({
                //         type: "POST",
                //         url: $form.attr("action"),
                //         data: $form.serialize(),
                //         crossDomain: true,
                //         headers: {  'Access-Control-Allow-Origin': '*' },
                //         cache: false,
                //         dataType: "jsonp",
                //         jsonp: "c", // trigger MailChimp to return a JSONP response
                //         contentType: "application/json; charset=utf-8",

                //         error: function(error){
                //             // According to jquery docs, this is never called for cross-domain JSONP requests
                //         },

                //         success: function(data){
                //             if (data.result != "success") {
                //                 var message = data.msg || "Sorry. Unable to subscribe. Please try again later.";
                //                 $resultElement.css("color", "red");

                //                 if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
                //                     message = "You're already subscribed. Thank you.";
                //                     $resultElement.css("color", "black");
                //                 }

                //                 $resultElement.html(message);

                //             } else {
                //                 $resultElement.css("color", "black");
                //                 $resultElement.html("Thank you!<br>You must confirm the subscription in your inbox.");
                //                 download_pdf();
                //             }
                //         }
                //     });
                // }

                function download_pdf(){
                  if("{{$articulo->pdf_display}}" == "descarga"){
                    var a = document.createElement("a");
                      a.href = $("#pdfLink").val();
                      a.download = "{{ $articulo->titulo }}";
                      //a.target = "_blank";
                      a.click();
                  }
                  if("{{$articulo->pdf_display}}" == "visible"){
                    var a = document.createElement("a");
                      a.href = $("#pdfLink").val();
                      a.target = "_blank";
                      a.click();
                  }
                  if("{{$articulo->pdf_display}}" == "ambos"){
                    var a = document.createElement("a");
                    a.href = $("#pdfLink").val();
                    a.download = "{{ $articulo->titulo }}";
                    a.click();

                    setTimeout(function(){
                      window.location = $("#pdfLink").val();
                    },1000);
                  }
                }
            });

            function download_pdf(){
                if("{{$articulo->pdf_display}}" == "descarga"){
                  var a = document.createElement("a");
                    a.href = $("#pdfLink").val();
                    a.download = "{{ $articulo->titulo }}";
                    //a.target = "_blank";
                    a.click();
                }
                if("{{$articulo->pdf_display}}" == "visible"){
                  var a = document.createElement("a");
                    a.href = $("#pdfLink").val();
                    a.target = "_blank";
                    a.click();
                }
                if("{{$articulo->pdf_display}}" == "ambos"){
                  var a = document.createElement("a");
                  a.href = $("#pdfLink").val();
                  a.download = "{{ $articulo->titulo }}";
                  a.click();

                  setTimeout(function(){
                    window.location = $("#pdfLink").val();
                  },1000);
                }
              }
          </script>
        </div>
      </div>
    </div>
  </div>
@endisset