@extends('voucher.index')
@section('content')
<div class="card">
    <div class="card-body pb-0" style="background-color: #CAB8FF; border-radius: 6px;">
        <div class="card-px text-center pt-5 pb-5">
            <form method="POST" action="{{ route('voucher.verify') }}" id="form-verify-otp">
                @csrf
                <div class="row" style="margin-top: 30px;" id="myDIV">
                    <div class="col-md-2"></div>
                    <div class="col-md-1"><h1 id="timer" style="font-size:40px; color: purple;"></h1></div>
                    <div class="col-md-5">
                        <input type="number" name="otp_code" class="form-control" placeholder="Masukkan Kode OTP"/ required id="input-otp">
                    </div>
                    
                    <div class="col-md-1">
                        <button type="submit" class="btn btn-warning btn-media" id="btn-check">Verify</button>
                    </div>
                    <div class="row" style="margin-top:20px">
                        <div class="col-md-5"></div>
                        <div class="col-md-3">
                             <button type="button" class="btn btn-primary btn-req" id="btn_{{$data->id}}" style="display: none;" onclick="callForm(this);">Kirim Ulang Kode OTP</button>
                        </div>
                    </div>
                    <style type="text/css">
                        @media screen and (max-width: 600px) {
                          .btn-media{
                            margin-top: 20px;
                          }
                        }
                    </style>
                    <!-- <br> -->
                    <div class="form-group" style="margin-top:20px;">
                        <div class="controls col-sm-12">
                            <div id="map-container"></div>
                            <input id="c_in_longlat" name="get_long_lat" readonly type="text" class="form-control c-input"/>
                        </div>
                        <div class="row">
                             <div class="col-md-4">
                                <input id="c_in_long" name="get_latitude" readonly type="hidden" class="form-control"/>
                            </div>
                            <div class="col-md-4">
                                <input id="c_in_lat" name="get_longitude" readonly type="hidden" class="form-control"/>
                            </div>
                            <div class="col-md-4">
                                <input id="get_id_voucher" name="id_voucher" readonly type="hidden" class="form-control" value="{{$data->id}}" />
                            </div>
                        </div>
                    </div>
                </div>
            </form>        
        </div>
        <div class="text-center px-5">
            <img src="assets/media/illustrations/sigma-1/8.png" alt="" class="mw-100 h-200px h-sm-225px" />
        </div>
    </div>
</div>
<div class="modal fade" tabindex="-1" id="modal-send-otp">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">REQUEST OTP : </h4>

                <!--begin::Close-->
                <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
                    <span class="svg-icon svg-icon-2x"></span>
                </div>
                <!--end::Close-->
            </div>

            <div class="modal-body">
                
            </div>    
        </div>
    </div>
</div>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> -->
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBrGPbILcsgQ7G4SEy5mxX3p8G-rCjHpDo" async defer></script>
<script>
    "use strict";

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

        // check if browser supports the geolocation api
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(success); // if geolocation supported, call function
        } else {
            $("#c_in_longlat").val('Your browser doesn\'t support the geolocation api.');
        }

        function success(position) {
            var latitude = position.coords.latitude; // set latitude variable
            var longitude = position.coords.longitude; // set longitude variable

            var mapcanvas = document.createElement('div'); // create div to hold map
            mapcanvas.id = 'map'; // give this div an id of 'map'
            mapcanvas.style.height = '200px'; // set map height
            mapcanvas.style.width = '100%'; // set map width

            document.querySelector('#map-container').appendChild(mapcanvas); // place new div within the 'map-container' div

            var coords = new google.maps.LatLng(latitude, longitude); // set lat/long object for new map

            var options = { // set options for map
                zoom: 15,
                center: coords,
                mapTypeControl: false,
                navigationControlOptions: {
                    style: google.maps.NavigationControlStyle.SMALL
                },
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map"), options); // create new map using settings above
            var marker = new google.maps.Marker({ // place a marker at our lat/long
                position: coords,
                map: map
            });

            var response = '' + latitude + ',' + longitude; // build string containing lat/long
            var lat = latitude;
            var long = longitude;

            $("#c_in_longlat").val(response); // write string to input field c_in_long
            $("#c_in_long").val(long); // write string to input field c_in_long
            $("#c_in_lat").val(lat); // write string to input field c_in_long
            document.getElementById('btn-check').disabled = false;
        }
    // });
</script>
<script type="text/javascript">
 

    window.onload = function() {
        var timeleft = 300;
        var downloadTimer = setInterval(function () {
            document.getElementById("timer").innerHTML = timeleft;
            timeleft -= 1;
            if (timeleft <= 0) {
                clearInterval(downloadTimer);
                var d = document.getElementById("timer");
                var btn = document.getElementsByClassName("btn-req");
                d.style.display = "none";
                btn[0].style.display = "block";
            }
        }, 1000);
    }

    function callForm(p)
    {
        var tmp = p.id.split('_');
        var post = '/'+ tmp[1];
        console.log(post);
        $.ajax({
            url:"{{ url('voucher/form_req_otp')}}" + post,
            type:'GET',
            data:post,
            success: function(row) 
            {
                $('.modal-title').html('Request OTP');
                $('#modal-send-otp').modal('show', {backdrop: 'static', keyboard: false});
                $('#modal-send-otp .modal-body').html(row);
            }
        });
    }


    
    
 </script>
@endsection