@extends('layouts.index')
@section('contenido')
<style>
    .fc-button{
        padding: 4px;
    }
</style>
<div class="content">
    <div class="content">
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title">PLANIFICADOR</h5>
                <div class="header-elements">
                    <div class="list-icons">
                        <a class="list-icons-item" data-action="collapse"></a>
                        <a class="list-icons-item" data-action="reload"></a>
                        <a class="list-icons-item" data-action="remove"></a>
                    </div>
                </div>
            </div>

            <div class="card-body">
                <div class="row">
                    <div class="col-md-5 col-sm-5">
                        <div class="mb-3" id="external-events">
                                <!-- Tabs -->
                            <ul class="nav nav-tabs nav-tabs-highlight">
								<li class="nav-item"><a href="#highlighted-tab1" class="nav-link active" data-toggle="tab">Doctores {{count($medicos)}}</a></li>
								<li class="nav-item"><a href="#highlighted-tab2" class="nav-link" data-toggle="tab">Farmacias {{count($farmacias)}}</a></li>
							</ul>
                            <div class="tab-content">
									<div class="tab-pane fade show active" id="highlighted-tab1">
                                        <input type="text" id="buscador">
                                        <div class="bg-light border rounded p-2 mb-3">
                                            @if(!empty($medicos))

                                                @foreach ($medicos as $kj=>$fichero)
                                                        <div data-id="{{$fichero->id}}" class="fc-event" data-color="#546E7A" >{{$fichero->primer_nombre_socio}} {{$fichero->segundo_nombre_socio}} {{$fichero->primer_apellido_socio}} {{$fichero->segundo_apellido_socio}}</div>
                                                        @if ($fichero->planificador)

                                                                                                                    @endif
                                                @endforeach
                                                                                        @else
                                            {{$itemsCalendario ?? ''}}
                                            @endif

                                        </div>
									</div>

									<div class="tab-pane fade" id="highlighted-tab2">
                                        <input type="text" id="buscador">
                                        <div class="bg-light border rounded p-2 mb-3">
                                            @if(!empty($farmacias))
                                                @foreach ($farmacias as $kj=>$fichero)
                                                        <div data-id="{{$fichero->id}}" class="fc-event" data-color="#546E7A" >{{$fichero->primer_nombre_socio}} {{$fichero->segundo_nombre_socio}} {{$fichero->primer_apellido_socio}} {{$fichero->segundo_apellido_socio}}</div>
                                                        @if ($fichero->planificador)
                                                                                                                    @endif
                                                @endforeach
                                                                                        @else
                                            {{$itemsCalendario2 ?? ''}}
                                            @endif

                                        </div>
									</div>
							</div>

                        </div>
                    </div>

                    <div class="col-md-7 col-sm-7">
                        <div class="fullcalendar-external"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('javascript')
<script>
var FullCalendarAdvanced = function() {


//
// Setup module components
//

// External events
var _componentFullCalendarEvents = function() {
    if (typeof FullCalendar == 'undefined') {
        console.warn('Warning - Fullcalendar or Switchery files are not loaded.');
        return;
    }

    // Define components
    var Calendar = FullCalendar.Calendar;
    var Draggable = FullCalendarInteraction.Draggable;

    // Define elements
    var calendarEventsContainerElement = document.getElementById('external-events');
    var calendarEventsElement = document.querySelector('.fullcalendar-external');
    //Elementos del calendario
    var elementosCalendario1={!!$itemsCalendario!!};
    var elementosCalendario2={!!$itemsCalendario2!!};
    if(elementosCalendario2){
        var elementosCalendario=elementosCalendario1.concat(elementosCalendario2);
    }else{
        var elementosCalendario=elementosCalendario1;
    }
    console.log(elementosCalendario);
    // Use custom colors for external events
    var two = calendarEventsContainerElement.querySelectorAll('.fc-event');
    two.forEach(function(element) {
        element.style.borderColor = element.getAttribute('data-color');
        element.style.backgroundColor = element.getAttribute('data-color');
    });

    // Initialize
    if(calendarEventsElement) {

        // Initialize the external events
        new Draggable(calendarEventsContainerElement, {
            itemSelector: '.fc-event',
            eventData: function(eventEl) {
                return {
                    id : eventEl.getAttribute('data-id'),
                    title: eventEl.innerText,
                    color: eventEl.getAttribute('data-color'),
                };
            },
            eventDidMount: function(info) {
                console.log(info.event.extendedProps);
                // {description: "Lecture", department: "BioChemistry"}
            }
        });


        // Initialize the calendar
        var calendarEventsInit = new Calendar(calendarEventsElement, {
            plugins: [ 'interaction', 'dayGrid', 'timeGrid' ],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            locale: 'es',
            defaultView: 'timeGridDay',
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            defaultDate: '{{date('Y-m-d')}}',
            events: elementosCalendario,
            drop: function(info) {
                //Fecha elegida=info.dateStrl
                //Obtener el ID info.draggedEl.getAttribute('data-id')
                //info.draggedEl.parentNode.removeChild(info.draggedEl);
                //id evento
                var idSocio=info.draggedEl.getAttribute('data-id');
                console.log('fecha',info.date);
                var mm = ("0" + (info.date.getMonth() + 1)).slice(-2);
                var dd =("0" + (info.date.getDate())).slice(-2);
                var yy = info.date.getFullYear();
                var hora = info.date.getHours();
                var minuto = info.date.getMinutes();
                var fechaSeleccionada = yy + '-' + mm + '-' + dd+' '+hora+':'+minuto;
                var token = '{{ csrf_token() }}';
                $.ajax({
                    type:'POST',
                    url:'{{ route('apm.planificador_guardar') }}',
                    headers: {'X-CSRF-TOKEN': token},
                    data:{
                        idSocio:idSocio,
                        fecha:fechaSeleccionada,
                    },
                    success:function(data){
                        Swal.fire({
                            position: 'top-end',
                            title: data.message,
                            showConfirmButton: false,
                            timer: 2500
                        })
                    }
                });
            },
            eventDrop: function(info) {

                var idSocio=info.event.id;
                var fechaSeleccionada=info.event.start.getFullYear()+'-'+(parseInt(info.event.start.getMonth())+1)+'-'+info.event.start.getDate()+' '+info.event.start.getHours()+':'+info.event.start.getMinutes();
                console.log(fechaSeleccionada);
                var token = '{{ csrf_token() }}';
                $.ajax({
                    type:'POST',
                    url:'{{ route('apm.planificador_actualizar') }}',
                    headers: {'X-CSRF-TOKEN': token},
                    data:{
                        idSocio:idSocio,
                        fecha:fechaSeleccionada,
                    },
                    success:function(data){
                        Swal.fire({
                            position: 'top-end',
                            title: data.message,
                            showConfirmButton: false,
                            timer: 2500
                        })
                    }
                });

            }
        }).render();
    }
};


//
// Return objects assigned to module
//

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


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

document.addEventListener('DOMContentLoaded', function() {
    FullCalendarAdvanced.init();
});
$('#buscador').on('keyup',function(){
    var text_buscar=($(this).val()).toUpperCase();
    if(text_buscar.length>0){
        $('#external-events .fc-event').each(function(){
            var contenido=($(this).text()).toUpperCase();
            if(contenido.search(text_buscar)>=0){
                $(this).show();
            }else{
                $(this).hide();
            }
        })
    }else{
        $('#external-events .fc-event').each(function(){
            $(this).show();
        })
    }

})
</script>
@endsection