@extends('layouts.app')
@section('title', 'Home')
@section('head')
@parent
<style type="text/css">
  .btn-dark,
input[type="submit"]{
    border:solid 2px #1f1f1f;
    background: #1f1f1f;
    color: #1f1f1f;
}
.btn-dark:hover,
input[type="submit"]:hover,
.btn-dark.active{
    border:solid 2px #1f1f1f;
    background: #1f1f1f;
    color: #1f1f1f;
}
</style>
@endsection

@section('content')

<br>
@if ($message = Session::get('Status'))
<div class="alert alert-success alert-block">
<button type="button" class="close" data-dismiss="alert">×</button>


&nbsp;     <strong>{{ $message }}</strong>

 

</div>
@endif




<div class="wrapper bgded overlay" style="background-image:url('images/demo/12345.png');background-position: center;background-size: cover;width: height :200px; ">
  <div id="pageintro" class="hoc clear"> 
    <!-- ################################################################################################ -->
    <article class="introtxt">
      <h2 class="heading"><strong>NFC Wireless Smart Solutions</strong></h2>
      <p>Tags allow anyone to contact owners data with SMART PHONE using NFC Or QR code</p>
      <footer>
        <ul class="nospace inline pushright">
          <li><a class="btn" href="#myModal_companies" data-toggle="modal">Activate Now</a></li>
         <!-- <li><a class="btn inverse" href="#">Eget maximus</a></li>->
        </ul>
      </footer>
    </article>
    <!-- ################################################################################################ -->
  </div>
</div>

<div class="wrapper row3">
  <main class="hoc container clear"> 
    <!-- main body -->
    <!-- ################################################################################################ -->
    <h2 class="font-x3 uppercase btmspace-80 underlined">How it works</h2>
    <div class="group center btmspace-80">
      <article class=" first"><span class="icon"><i class="fa fa-unlock-alt"></i></span>
        <h4 class="heading"> REGISTER YOUR TAG </h4>
        <p style="float: left;padding-left: 80px;font-size: 18px;text-transform: ;">-Enter <strong>nfc tag code </strong>: located in the tag(1000-3000).</p>
        <p style="float: left;padding-left: 80px;font-size: 18px;text-transform: ;">-Enter  <strong>activation code</strong>: located in the front cover below the tag (nfc-xxx)..</p>
          
           
        <p style="float: left;padding-left: 80px;font-size: 18px;text-transform: ;">-Complete Tag profile.</p>
         
      </article>
    <br><br><br><br><br><br><br><br> <br><br><br> 
     
     
        <article class="first"><span class="icon"><i class="fa fa-tag"></i></span>
        <h4 class="heading"> SCANING YOUR TAG </h4>
        <p style="float: left;padding-left: 20px;font-size: 18px">-When someone scans your tag, he will automatically see  your data and location so he can communicate with you.
        </p>
        <p style="float: left;padding-left: 20px;font-size: 18px">-You will receive an email telling you that someone has scanned your tag and has its  location.</p>
          
           
            
      </article>
    </div>
   <!-- <ul class="nospace group">
      <li class="one_quarter first">
        <div class="inspace-30 borderedbox">
          <h6 class="heading">Luctus nullam dapibus tellus eget</h6>
          <p>Convallis eros lobortis sollicitudin finibus nullam eu tincidunt orci aliquam lobortis id ipsum vehicula pulvinar aenean vulputate tempus ligula ut scelerisque.</p>
        </div>
      </li>
      <li class="one_quarter">
        <article><a href="#"><img class="btmspace-30" src="images/demo/320x220.png" alt=""></a>
          <h6 class="heading">Dignissim rutrum mauris augue</h6>
          <p>Dui porttitor a suspendisse pharetra urna in elit malesuada porta proin massa metus&hellip;</p>
          <p class="nospace"><a href="#">Read More &raquo;</a></p>
        </article>
      </li>
      <li class="one_quarter">
        <article><a href="#"><img class="btmspace-30" src="images/demo/320x220.png" alt=""></a>
          <h6 class="heading">Nisi at molestie sapien mollis</h6>
          <p>Quis efficitur malesuada massa nunc tristique sit amet enim et morbi sodales purus in&hellip;</p>
          <p class="nospace"><a href="#">Read More &raquo;</a></p>
        </article>
      </li>
      <li class="one_quarter">
        <article><a href="#"><img class="btmspace-30" src="images/demo/320x220.png" alt=""></a>
          <h6 class="heading">Vulputate quis lectus hendrerit nam</h6>
          <p>Dui convallis in ullamcorper convallis in sollicitudin dictum tellus eu fermentum lectus&hellip;</p>
          <p class="nospace"><a href="#">Read More &raquo;</a></p>
        </article>
      </li>
    </ul>-->
    <!-- ################################################################################################ -->
    <!-- / main body -->
    <div class="clear"></div>
  </main>
</div>








        <!--<div class="column3">
            <div class="title">
                <h2>Mauris vulputate</h2>
            </div>
            <img src="images/tags.jpg" width="282" height="150" alt="" />
            <p>Phasellus tempor vehicula justo. Aliquam lacinia metus ut elit.</p>
            <a href="#" class="button">Etiam posuere</a>
        </div>-->
        

<div aria-hidden="true"   role="dialog" tabindex="-1" id="myModal_companies"  class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content " style="width: ; margin-right: : 10px; ">
<div class="modal-header  btn-dark">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<font color="white"><big>Activate  Your Tag </big></font>

</div>
<div class="modal-body"   >


<div class="panel-body" >
 
 

<br> 
<div class="item form-group row">
 
<div class="col-xs-12 col-sm-6 col-md-12">
<div class="form-group {{ $errors->first('tag_no', 'has-error') }}">
<input     type="text" value="" name="tag_no" id="tag_no" class="form-control input-md" placeholder="NFC TAG CODE" required>

</div>
</div>
</div>
<div class="item form-group row">
 
<div class="col-xs-12 col-sm-6 col-md-12">
<div class="form-group {{ $errors->first('activation_code', 'has-error') }}">
<input     type="text" value="" name="activation_code" id="activation_code" class="form-control input-md" placeholder="ACTIVATION CODE" required>
 
</div>
</div>
</div> 


 
 
  <center> <img id="loading" src="images/loading.gif" style="height: 100px; width: 100px; display:none "></center>

  <center> <img id="success" src="images/success.png" style="height: 100px; width: 100px; display:none ">
    
 <span id="span_success" style="color:green; display:none ">Successfully activated</span> 
 </center>


 <center>  
    <br>
 <span id="span_warning" style="color:orange; display:none ">This card has already been activated !</span> 
 </center>


 <center> <img id="error" src="images/error.png" style="height: 100px; width: 100px; display:none ">
<br>
<span id="span_error" style="color:red; display:none ">Error activating</span>
 </center>


 
<div class="modal-footer">
<button type="button" id="active_btn" onclick="check_active();" class="btn btn-primary" >Activate</button>
 


 

</div>

</div>

</div>
</div>
</div>
</div>
 
<!--
 @for ($i = 3001; $i < 5058; $i++)
<br>
Redirect 301 /tag-1000-{{ $i }}/ http://tags.nfc.ae/Page?UID=1000-{{ $i }}
@endfor
 -->

@endsection



@section('footer')
@parent




 <script type="text/javascript">
           

 $(document).ready(function(e) { 


 

 window.check_active=function(){
 
var tag_no=$('#tag_no').val();
var activation_code=$('#activation_code').val();
var loading=document.getElementById("loading"); 
var success=document.getElementById("success");
var span_success=document.getElementById("span_success");
var span_warning=document.getElementById("span_warning");
var error=document.getElementById("error");
var span_error=document.getElementById("span_error");
var active_btn=document.getElementById("active_btn");
  
 
 
var url      = window.location.href + 'Active?UID='+tag_no;
 

$.ajaxSetup({
            headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
             }
            });

 

 $.ajax({
 type: 'get',
 url: '/check_active',
        
data:{

tag_no : tag_no, 
activation_code : activation_code,
 
 
},
 


contentType:'application/json; charset=utf-8',
 dataType: "json",

 success: function(data) {
console.log(data);
   if(data=='warning')
   {
     span_warning.style.display='block';
    success.style.display='none';
    span_success.style.display='none';
     error.style.display='none';
      span_error.style.display='none';
      active_btn.style.display='none';
setTimeout(function(){  window.location.replace(url); }, 2000);
     
   }
  
   if(data=='true')
   {
    success.style.display='block';
    span_success.style.display='block';
     error.style.display='none';
      span_error.style.display='none';
      active_btn.style.display='none';
       span_warning.style.display='none';
setTimeout(function(){  window.location.replace(url); }, 2000);
     
   }
    if(data=='false')
   {
     error.style.display='block';
     span_error.style.display='block';
      success.style.display='none';
      span_success.style.display='none';
       span_warning.style.display='none'
   }



},


beforeSend: function(){
                     $('#loading').show()
                  },
                  complete: function(){
                     $('#loading').hide();
                  },
});

 

 
}

 


 



});

 </script>
@endsection