@extends('layouts.index')
@section('contenido')
<div class="content">
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><span class="font-weight-semibold">Calendario</h4>
                <input type="hidden" id="activo" value="{{$apm_status}}">
            </div>
            <div class="header-elements">
                @if ($apm_status)
                <button id="empezarVisita" type="button" class="btn btn-success">TERMINAR</button>
                @else
                <button id="empezarVisita" type="button" class="btn btn-danger">EMPEZAR</button>
                @endif

            </div>
        </div>
    </div>
    <div class="content">
        <!-- Simple lists -->
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header header-elements-inline">
                        <h5 class="card-title">CALENDARIO</h5>
                        <div class="header-elements">
                            <div class="list-icons">
                                <a class="list-icons-item" data-action="collapse"></a>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="fullcalendar-basic"></div>
                    </div>
                </div>
            </div>
            <!-- /basic view -->
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header header-elements-inline">
                        <h5 class="card-title">AGENDA</h5>
                        <div class="header-elements">
                            <div class="list-icons">
                                <a class="list-icons-item" data-action="collapse"></a>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="fullcalendar-list"></div>
                    </div>
                </div>
            </div>

        </div>
        <!-- /simple lists -->
    </div>
</div>
@endsection

@section('javascript')
<script>

   var FullCalendarBasic = function() {

    // Basic calendar
    var _componentFullCalendarBasic = function() {
        if (typeof FullCalendar == 'undefined') {
            console.warn('Warning - Fullcalendar files are not loaded.');
            return;
        }

        // Default events
        var events = {!!$ficheros!!};


        // Initialization
        // ------------------------------
        var calendarBasicViewElement = document.querySelector('.fullcalendar-basic');

        // Initialize
        if(calendarBasicViewElement) {
            var calendarBasicViewInit = new FullCalendar.Calendar(calendarBasicViewElement, {

                plugins: [ 'dayGrid','list', 'interaction' ],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,dayGridWeek,dayGridDay'
                },
                defaultView: 'dayGridWeek',
                locale: 'es',
                editable: false,
                events: events,
                eventLimit: true
            }).render();
        }
        // Define element
        var calendarListViewElement = document.querySelector('.fullcalendar-list');

        // Initialize
        if(calendarListViewElement) {
            var calendarListViewInit = new FullCalendar.Calendar(calendarListViewElement, {
                plugins: [ 'list', 'interaction' ],
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'listDay,listWeek,listMonth'
                },
                views: {
                    listDay: { buttonText: 'Dia' },
                    listWeek: { buttonText: 'Semana' },
                    listMonth: { buttonText: 'Mes' }
                },
                locale: 'es',
                defaultView: 'listMonth',
                navLinks: true, // can click day/week names to navigate views
                editable: true,
                eventLimit: true, // allow "more" link when too many events
                events: events
            }).render();
        }

    };


    //
    // Return objects assigned to module
    //

    return {
        init: function() {
            _componentFullCalendarBasic();
        }
    }
    }();


    // Initialize module
    // ------------------------------

    document.addEventListener('DOMContentLoaded', function() {
        FullCalendarBasic.init();
    });
    jQuery( document ).ready(function() {
        var $latitud='';
        var $longitud='';
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(mostrarPosicion, mostrarErrores, opciones);

        } else {
            alert("Tu navegador no soporta la geolocalización, actualiza tu navegador.");
        }

        function mostrarPosicion(posicion) {
            console.log('entro',posicion);
            $latitud = posicion.coords.latitude;
            $longitud = posicion.coords.longitude;
            console.log($latitud);
            console.log($longitud);
        }

        function mostrarErrores(error) {
            console.log('entro',error);
            if(error.message=='User denied Geolocation'){
                console.log('Permiso denegado por el usuario');
            }
        }

        var opciones = {
            enableHighAccuracy: true,
            timeout: 5000,
            maximumAge: 0,
        };
        $('.fc-view-container a').on('click',function(){
            if($('#activo').val()=='1'){
                return true;
            }
            alert('Debes estar activo para empezar');
            return false;
        })
        $('#empezarVisita').on('click',function(){
            var id_apm='{{$id_apm}}';
            var token = '{{ csrf_token() }}';
            $.ajax({
                type:'POST',
                url:'{{ route('apm.status') }}',
                headers: {'X-CSRF-TOKEN': token},
                data:{
                    id_apm:id_apm,
                    latitud:$latitud,
                    longitud:$longitud,
                },
                success:function(data){
                    $('#activo').val(1);
                    Swal.fire({
                        position: 'top-end',
                        title: data.message,
                        showConfirmButton: false,
                        timer: 1500
                    })
                    $('#empezarVisita').text('TERMINAR').removeClass('btn-danger').addClass('btn-success');
                }
            });
        })
    })

</script>
@endsection