@extends('layouts.participant')
@section('title')
    Absensi Harian
@endsection

@section('customStyle')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/user_home.css') }}" />
    <style type="text/css">
        /* #loader 
        {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,0.75);
            z-index: 10000;
        } */

        #loader{
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
                    50% 50% no-repeat rgb(249,249,249);
        }
       

    </style>
    

     
@endsection

@section('content')
<div id="loader">
    
</div>
<div class="row h-100 mx-auto">
    <div class="col my-auto h-100">
        <div class="registration-form my-auto">
        <form id="form_absen" method="POST" action="{{ url('/participant/absent') }}">
        @csrf
        @method('post')
            <div class="text-center">
                <img src="{{ asset('assets/images/logo-pkkp.png') }}" width="180">
            </div>
            <h3 class="text-center font-weight-bold my-4">ABSENSI PKKP {{date('Y')}}</h3>
            {{-- <div class="form-group">
                <input type="text" class="form-control item @error('nik') is-invalid @enderror" id="nik" placeholder="NIK" name="nik" value="{{ old('nik') }}" autofocus required>
                @error('nik')
                    <div class="invalid-feedback" role="alert">{{ $message }}</div>
                @enderror
            </div> --}}
            <input id="longitude" type="text" class="form-control" name="longitude" value="{{ Session::get('longitude') }}" hidden>
            <input id="latitude" type="text" class="form-control" name="latitude" value="{{ Session::get('latitude') }}" hidden>

            <div class="form-group">
                <div class="row">
                    <div class="col text-center mt-3">
                        <button type="button" class="btn hadir" name="action" value="absent">Hadir</button>
                    </div>
                    <div class="col text-center mt-3">
                        <button type="submit" class="btn izin" name="action" value="izin">Izin</button>
                    </div>
                </div>
            </div>
            <div class="text-center mt-3">
                <a class="" href="{{ url('/participant/absent/detail') }}">lihat detail absensi bulan ini?</a>
            </div>
        </form>
        </div>
    </div>
</div>
@endsection

@section('script')
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js" integrity="sha384-qlmct0AOBiA2VPZkMY3+2WqkHtIQ9lSdAsAn5RUJD/3vA5MKDgSGcdmIv4ycVxyn" crossorigin="anonymous"></script>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        navigator.geolocation.getCurrentPosition(function (position) {
            console.log(position);
            var lat = position.coords.latitude;
            var lng = position.coords.longitude;
            console.log(lat);
            console.log(lng);
            document.getElementById('longitude').setAttribute('value', lng);
            document.getElementById('latitude').setAttribute('value', lat);
            // // alert('ok');
            // Swal.fire({
            //     icon: 'info',
            //     title: 'Berhasil!',
            //     text: 'Lokasi Anda Sudah Terdeteksi, Mohon Untuk Klik Tombol Absen',
            //     showConfirmButton: false,
            //     timer: 5000
            // })
            $('#loader').hide();
            $('.hadir').removeAttr("type").attr("type", "submit");
            
        });

        if ($('#longitude').val() && $('#latitude').val()) {
            $('.hadir').removeAttr("type").attr("type", "submit");
        }

        // $("#theForm").ajaxForm({url: 'server.php', type: 'post'})

        // $('.hadir').on('click', function() {

        //     var long = $('#longitude').val();
        //     var lat = $('#latitude').val();

        //     if (!long && !lat) {
        //         Swal.fire({
        //             icon: 'info',
        //             title: 'Maaf!',
        //             text: 'Lokasi Anda Belum Terdeteksi, Mohon Tunggu Sebentar',
        //             showConfirmButton: false,
        //             timer: 5000
        //         })
        //     }
            

        // })

        
    });

</script>
@endsection