@extends('layouts.user.presensi')
@section('header')
    <!-- App Header -->
    <div class="appHeader bg-primary text-light">
        <div class="left">
            <a href="javascript:;" class="headerButton goBack">
                <ion-icon name="chevron-back-outline"></ion-icon>
            </a>
        </div>
        <div class="pageTitle">Presence Point</div>
        <div class="right"></div>
    </div>
    <!-- * App Header -->
    <style>
        .webcam-capture,
        .webcam-capture video {
            display: inline-block;
            width: 100% !important;
            margin: auto;
            height: auto !important;
            border-radius: 15px;
        }

        #map {
            height: 200px;
        }
    </style>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <!-- Make sure you put this AFTER Leaflet's CSS -->
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
@endsection
@section('content')
    <style>
        .webcam-capture,
        .webcam-capture video {
            display: inline-block;
            width: 100% !important;
            margin: auto;
            height: auto !important;
            border-radius: 15px;
        }

        #map {
            height: 200px;
        }

        .jam-digital-malasngoding {
            background-color: #27272783;
            position: absolute;
            top: 70px;
            right: 8px;
            z-index: 9999;
            width: 200px;
            border-radius: 10px;
            padding: 5px;
        }

        .jam-digital-malasngoding p {
            color: #fff;
            font-size: 16px;
            text-align: right;
            margin-top: 0;
            margin-bottom: 0;
        }

        .circle-icon {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            overflow: hidden;
        }

        .circle-icon img {
            width: 100%;
            height: auto;
        }
    </style>

    <div class="row" style="margin-top: 70px">
        <div class="col">
            <input type="hidden" id="lokasi">
            <div class="webcam-capture"></div>
        </div>
    </div>

    <div class="jam-digital-malasngoding">
        <p>{{ $karyawan->grup }}</p>
        <p>Dept. {{ $karyawan->nama_dept }}</p>
        <p>{{ date('d M Y') }}</p>
        <p id="jam">{{ date('h:i:s') }}</p>
        @if ($jamkerja === 'OFF')
            <p>{{ $jamkerja->nama_jam }}</p>
            <p> Start : {{ date('H:i', strtotime($jamkerja->awal_jammasuk)) }}</p>
            <p> Entry : {{ date('H:i', strtotime($jamkerja->jam_masuk)) }}</p>
            <p> End : {{ date('H:i', strtotime($jamkerja->akhir_jammasuk)) }}</p>
            <p> Exit : {{ date('H:i', strtotime($jamkerja->jam_pulang)) }}</p>
        @else
            <p>No Schedule</p>
        @endif
    </div>

    <div class="row">
        <div class="col" style="margin-top: 10px">
            @if ($cek == 1)
                <button id="takeabsenpulang" class="btn btn-danger btn-block">
                    <ion-icon name="camera-outline"></ion-icon>
                    Absen Pulang
                </button>
            @else
                <button id="takeabsen" class="btn btn-primary btn-block">
                    <ion-icon name="camera-outline"></ion-icon>
                    Absen Masuk
                </button>
            @endif
        </div>
    </div>
    <div class="row mt-2">
        <div class="col">
            <div id="map"></div>
        </div>
    </div>

    <audio id="sound_in">
        <source src="{{ asset('assets-user/sound/sound_in.mp3') }}" type="audio/mpeg">
    </audio>

    <audio id="sound_out">
        <source src="{{ asset('assets-user/sound/sound_out.mp3') }}" type="audio/mpeg">
    </audio>

    <audio id="radius_out">
        <source src="{{ asset('assets-user/sound/radius_out.mp3') }}" type="audio/mpeg">
    </audio>
@endsection

@push('myscript')
    <script type="text/javascript">
        window.onload = function() {
            jam();
        }

        function jam() {
            var e = document.getElementById('jam')
                , d = new Date()
                , h, m, s;
            h = d.getHours();
            m = set(d.getMinutes());
            s = set(d.getSeconds());

            e.innerHTML = h + ':' + m + ':' + s;

            setTimeout('jam()', 1000);
        }

        function set(e) {
            e = e < 10 ? '0' + e : e;
            return e;
        }

    </script>
    <script>
        Webcam.set({
            height: 320,
            width: 240,
            image_format: 'jpeg',
            jpeg_quality: 30,
            flip_horiz: true
        });

        Webcam.attach('.webcam-capture');

        var lokasi = document.getElementById('lokasi');
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
        }

        function successCallback(position) {
            lokasi.value = position.coords.latitude + ',' + position.coords.longitude;
            var map = L.map('map').setView([position.coords.latitude, position.coords.longitude], 17);

            L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
                maxZoom: 19,
                attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
            }).addTo(map);

            var marker = L.marker([position.coords.latitude, position.coords.longitude]).addTo(map);

            var circle = L.circle([position.coords.latitude, position.coords.longitude], {
                color: 'red',
                fillColor: '#f03',
                fillOpacity: 0.5,
                radius: 20
            }).addTo(map);
        }

        function errorCallback() {

        }

        $("#takeabsen").click(function(e) {
            Webcam.snap(function(uri) {
                image = uri;
            });

            // alert(jam);

            var lokasi = $('#lokasi').val();
            var jam = $('#jam').val();

            $.ajax({
                type: 'POST',
                url: '/user/presensi/store',
                data: {
                    _token: "{{ csrf_token() }}",
                    image: image,
                    jam: jam,
                    lokasi: lokasi
                },
                cache: false,
                success: function(respons) {
                    var status = respons.split("|");
                    if (status[0] == "success") {

                        // if (status[2]=="in") {
                        //     notifikasi_in.play();
                        // }else{
                        //     notifikasi_out.play();
                        // }

                        Swal.fire({
                            title: 'Berhasil',
                            text: status[1],
                            icon: 'success'
                        })
                        setTimeout("location.href='/user'", 2000);
                    } else {
                        // if (status[2]=="radius") {
                        //     radius_out.play();
                        // }

                        Swal.fire({
                            title: 'Terjadi kesalahan',
                            text: status[1],
                            icon: 'error'
                        });
                    }
                }
            });
        });

        $("#takeabsenpulang").click(function(e) {
            Webcam.snap(function(uri) {
                image = uri;
            });

            // alert(image);

            var lokasi = $('#lokasi').val();

            $.ajax({
                type: 'POST',
                url: '/user/presensi/store',
                data: {
                    _token: "{{ csrf_token() }}",
                    image: image,
                    lokasi: lokasi
                },
                cache: false,
                success: function(respons) {
                    var status = respons.split("|");
                    if (status[0] == "success") {

                        // if (status[2]=="in") {
                        //     notifikasi_in.play();
                        // }else{
                        //     notifikasi_out.play();
                        // }

                        Swal.fire({
                            title: 'Berhasil',
                            text: status[1],
                            icon: 'success'
                        })
                        setTimeout("location.href='/user'", 2000);
                    } else {
                        // if (status[2]=="radius") {
                        //     radius_out.play();
                        // }

                        Swal.fire({
                            title: 'Terjadi kesalahan',
                            text: status[1],
                            icon: 'error'
                        });
                    }
                }
            });
        });
    </script>
@endpush