Anons79 Mini Shell

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/styles/choices.min.css">
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/public/assets/scripts/choices.min.js"></script>
    <script>
        const karyawan = document.getElementById('karyawan_id');
        const karyawanChoices = new Choices(karyawan);
    </script>
@endpush

<div class="row">
    <div class="col-md-4">
        <div class="form-group">
            <label for="nama_kunjungan">Nama Tempat</label>
            <input type="text" class="form-control" placeholder="Nama..." name="nama_kunjungan" id="nama_kunjungan" value="{{ old('nama_kunjungan',@$data->nama_kunjungan) }}" required>
            @error('nama_kunjungan')
                <div class="invalid-feedback show" role="alert">
                    {{ $message }}
                </div>
            @enderror
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="karyawan_id">Karyawan</label>
            <select name="karyawan_id" class="form-control" id="karyawan_id">
                @foreach ($karyawans as $karyawan)
                    <option value="{{ $karyawan->id }}" {{ old('karyawan_id',@$data->karyawan_id) == $karyawan->id ? 'selected' : '' }}>{{ $karyawan->nama }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="col-md-4">
        <div class="form-group">
            <label for="tanggal_kunjungan">Tanggal Kunjungan</label>
            <input type="date" class="form-control" placeholder="Tanggal Kunjungan..." name="tanggal_kunjungan" id="tanggal_kunjungan" value="{{ old('tanggal_kunjungan',date("Y-m-d",strtotime(@$data->visit_in))) }}" required>
            @error('tanggal_kunjungan')
                <div class="invalid-feedback show" role="alert">
                    {{ $message }}
                </div>
            @enderror
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="visit_in">Visit In</label>
            <input type="time" class="form-control"  name="visit_in" id="visit_in" value="{{ old('visit_in',date("H:i:s",strtotime(@$data->visit_in))) }}" required>
            @error('visit_in')
                <div class="invalid-feedback show" role="alert">
                    {{ $message }}
                </div>
            @enderror
        </div>
        <div class="form-group">
            <label for="visit_in_note">Keterangan (Visit In)</label>
            <textarea name="visit_in_note" id="visit_in_note" class="form-control" cols="30" rows="10" placeholder="Keterangan...">{{ old('visit_in_note',@$data->visit_in_note) }}</textarea>
            @error('visit_in_note')
                <div class="invalid-feedback show" role="alert">
                    {{ $message }}
                </div>
            @enderror
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="visit_out">Visit Out</label>
            <input type="time" class="form-control"  name="visit_out" id="visit_out" value="{{ old('visit_out',(@$data->visit_out?date("H:i:s",strtotime(@$data->visit_out)):"")) }}" >
            @error('visit_out')
                <div class="invalid-feedback show" role="alert">
                    {{ $message }}
                </div>
            @enderror
        </div>
        
        <div class="form-group">
            <label for="visit_out_note">Keterangan (Visit Out)</label>
            <textarea name="visit_out_note" id="visit_out_note" class="form-control" cols="30" rows="10" placeholder="Keterangan...">{{ old('visit_out_note',@$data->visit_out_note) }}</textarea>
            @error('visit_out_note')
                <div class="invalid-feedback show" role="alert">
                    {{ $message }}
                </div>
            @enderror
        </div>
    </div>
</div>











<div class="form-group">
    <input type="text" name="latitude" id="latitude" value="{{ @$data->latitude }}" class="form-control" placeholder="Latitude" required>
    @error('latitude')
        <div class="invalid-feedback show" role="alert">
            {{ $message }}
        </div>
    @enderror
    <input type="text" name="longitude" id="longitude" value="{{ @$data->longitude }}" class="form-control" placeholder="Longitude" required>
    @error('longitude')
        <div class="invalid-feedback show" role="alert">
            {{ $message }}
        </div>
    @enderror
    <label for="map">Koordinat Kunjungan</label>
    <div id="map"></div>
    
    
</div>

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Tanda Tangan (Visit In)</label>
            <canvas id="signaturePad1" style="display: block;border:1px solid black;border-radius:5px;"></canvas>
            <input type="file" id="visit_in_signature" style="display: none;" name="visit_in_signature">
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label for="">Tanda Tangan (Visit Out)</label>
            <canvas id="signaturePad2" style="display: block;border:1px solid black;border-radius:5px;"></canvas>
            <input type="file" id="visit_out_signature" style="display: none;" name="visit_out_signature">
        </div>
    </div>
</div>





@push('styles')
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
    <link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">
    <style>
        #map { 
            width: 100%; 
            height: 500px;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/signature_pad.umd.min.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
    <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
    <script>
        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], {type:mime});
        }


        const canvas1 = document.querySelector("#signaturePad1");
        const signaturePad1 = new SignaturePad(canvas1);

        signaturePad1.addEventListener("endStroke", () => {
            var data = dataURLtoBlob(signaturePad1.toDataURL())
            let file = new File([data], "visit_in_signature.jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
            let container = new DataTransfer();
            container.items.add(file);
            var ileInputElement = document.getElementById("visit_in_signature");
            ileInputElement.files = container.files;
        });

        const canvas2 = document.querySelector("#signaturePad2");
        const signaturePad2 = new SignaturePad(canvas2);

        signaturePad2.addEventListener("endStroke", () => {
            var data = dataURLtoBlob(signaturePad2.toDataURL())
            let file = new File([data], "visit_out_signature.jpg",{type:"image/jpeg", lastModified:new Date().getTime()});
            let container = new DataTransfer();
            container.items.add(file);
            var ileInputElement = document.getElementById("visit_out_signature");
            ileInputElement.files = container.files;
        });

        let coordinate = [117.13849920377697,-0.49960603702142237];
      
        mapboxgl.accessToken = 'pk.eyJ1IjoiYmFndXNpbmRyYXlhbmEiLCJhIjoiY2p0dHMxN2ZhMWV5bjRlbnNwdGY4MHFuNSJ9.0j5UAU7dprNjZrouWnoJyg';
            const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: coordinate,
            zoom: 13
        });

        

        // Add the control to the map.
        map.addControl(
            new MapboxGeocoder({
                accessToken: mapboxgl.accessToken,
                mapboxgl: mapboxgl
            })
        );

        let marker = null;
        map.on('click',(e) => {
            coordinate = [e.lngLat.lng, e.lngLat.lat];
            if(marker){
                marker.setLngLat(e.lngLat);
            } else {
                marker = new mapboxgl.Marker();
                marker.setLngLat(e.lngLat).addTo(map);
            }

            $("#latitude").val(e.lngLat.lat);
            $("#longitude").val(e.lngLat.lng);

            
            
        });

       

        $(document).ready(function(){
            cekWaktuAbsen();
            $(document).on('change','#waktu-absen',function(){
                cekWaktuAbsen();
            });

            function cekWaktuAbsen(){
                if($('#waktu-absen').is(':checked')){
                    $('.waktu-absen').removeAttr('disabled');
                }else{
                    $('.waktu-absen').attr('disabled',true);
                }
            }
        });
    </script>
    
    @php
        $latitude = old('latitude',@$data->latitude);
        $longitude = old('longitude',@$data->longitude);
    @endphp
    @if ($latitude && $longitude)
        <script>
            coordinate = [{{ $longitude }},{{ $latitude }}];
            map.on('load', function(){
                map.setZoom(15);
                map.setCenter(coordinate);
                marker = new mapboxgl.Marker();
                marker.setLngLat(coordinate).addTo(map);
            });
            
        </script>
    @endif
@endpush