@extends('layouts.default')
@include('plugins.moment')
@include('plugins.parsley')
@include('plugins.notifyjs')

@push("plugin-css")
    <link href="{{ asset('plugins/fullcalendar/css/fullcalendar.min.css')  }}" rel="stylesheet" />
@endpush

@push("page-js")
    <script src="{{ asset('js/mask.js')}}"></script>
    <script src="{{ asset('plugins/jquery-ui/jquery-ui.min.js') }}"></script>
    {{--<script src='{{ asset('plugins/fullcalendar/locale/pt-br.js?1')}}'></script>--}}
    <script src='{{ asset('plugins/fullcalendar/js/fullcalendar.min.js')}}'></script>


    <script>

        /*var date = new Date();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();
        var day = date.getDate();

        let dateActive = { year: year, month: month, day: day, refreshing: false};*/
        console.log(day)
        $(function(){
            // init()

            $('#callendar__unit_id')
                .unbind('change')
                .change(function(){
                    if( $(this).val() ){
                        initCallendar()
                    } else {
                        $('#calendar').fullCalendar('destroy');
                    }
                })

            $('#callendar__professional_id')
                .unbind('change')
                .change(function() {
                    if( $(this).val() ){
                        initCallendar()
                    } else {
                        $('#calendar').fullCalendar('destroy');
                    }
                })

            loadProfessional()
            $('#specialty_id')
                .unbind('change')
                .change(function(){
                    loadProfessional( $(this).val() )
                })
            //$('#callendar__account_id').select2()

            $("#find-account").autocomplete({
                source: "/callendar/findAccount",
                minLength: 2,
                search: function( event, ui ) {
                    $('#callendar__account_pet_id').val('').find('option').remove()
                    $('.row.account-data:visible').hide(); 
                },
                select: function( event, ui ) {
                    showDataAccount( ui.item )
                    //log( "Selected: " + ui.item.value + " aka " + ui.item.id );
                }
            })

            $('.btn.cancel').click(function(){
                $("#form-agenda:visible").slideToggle();
                clearDataAgenda()
            })

            $('#account__cpf').mask('999.999.999-99')
            $('#account__born_date').mask('99/99/9999')
        })

        function viewCallendar(){
            $('#calendar').fullCalendar('destroy');
            $('#calendar').fullCalendar({
                timeFormat: "H:mm",
                defaultDate: `${dateActive.year}-${dateActive.month}-${dateActive.day}`,
                slotDuration: '00:15:00', /* If we want to split day time each 15minutes */
                minTime: '08:00:00',
                maxTime: '19:00:00',
                defaultView: 'month',
                handleWindowResize: false,
                windowResizeDelay: 100,
                //height: $(window).height() - 200,
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: [],
                editable: true,
                droppable: false, // this allows things to be dropped onto the calendar !!!
                //eventLimit: true, // allow "more" link when too many events
                selectable: false,
                drop: function(date) {  },
                select: function (start, end, allDay) {

                },
                eventClick: function(calEvent, jsEvent, view) {

                    if( calEvent.id ){
                        verAgendamento( calEvent.id, function(){
                            reloadCallendar()
                        }, function(){
                            reloadCallendar()
                        } )
                    } else {
                        addAgenda( calEvent )
                    }

                },
                /*eventDragStop:function( event, jsEvent, view ){

                },*/
                viewRender: function( view, element  ){

                    var moment = $('#calendar').fullCalendar('getDate');
                    var month = moment.month() + 1

                    console.log( month )
                    console.log( dateActive )
                    //console.log( refreshing )

                    if( dateActive.month != month ){

                        dateActive.month = month
                        dateActive.year = moment.year();
                        getDates( function(data){
                            SetEvents(data)
                        })

                        //initCallendar( true )
                    }

                    //
                },
                language: 'pt-br',
                lang: 'pt-br',
                locale: 'pt-br'
            });
        }

        function initCallendar( refreshing = false ){

            let unit = $('#callendar__unit_id').val();
            let prof = $('#callendar__professional_id').val()

            if( unit && prof ){
                /*  Initialize the calendar  */
                //$('#calendar').fullCalendar('destroy');
                viewCallendar()
                //let monthToday = date.getMonth() + 1;
                /*var form = '';
                var today = new Date($.now());*/

                getDates( function(data){
                    SetEvents(data)
                })

            }


        }

        function SetEvents( data ){
            let EVENTS = data;
            // calendar object
            let CAL = $('#calendar').fullCalendar('getCalendar');
            // extend object (could be its own function, etc.)
            CAL.refresh = function() {
                CAL.removeEvents();
                CAL.addEventSource(EVENTS);
            }
            // finish setting up calendar
            CAL.refresh();
            hideLoading()
        }

        function reloadCallendar(){
            getDates( function(data){
                SetEvents(data)
            })
        }

        function addAgenda( calEvent ){

            $("#form-agenda:not(:visible)").slideToggle();
            $('#form-agenda').find('[name=callendar__professional_id]').val(
                $('.form.filter #callendar__professional_id').val()
            )
            $('#form-agenda').find('[name=callendar__unit_id]').val(
                $('.form.filter #callendar__unit_id').val()
            )
            $('#form-agenda').find('[name=callendar__date_from]').val(calEvent.start._i)

            let option_doctor_selected = $('.form.filter #callendar__professional_id').find("option:selected");
            let doctor_name = option_doctor_selected.text()
            let doctor_price = option_doctor_selected.attr('price')
            let doctor_observation = option_doctor_selected.attr('observation')

            let unit_name = $('.form.filter #callendar__unit_id').find("option:selected").text()
            let date = calEvent.dateView;

            $('#agenda-data-info span.doctor-name').html(doctor_name)
            $('#agenda-data-info span.unit-name').html(unit_name)
            $('#agenda-data-info span.date').html(date)
            $('#agenda-data-info span.price').html(doctor_price)
            $('#agenda-data-info span.observation').html(doctor_observation)

            $(window).scrollTop(0)

        
        }

        function afterOpenModal( me ){
            $('.select2').select2();
            $(".row-button").remove()
            //$('.input-date_from').hide();
            $('#avaliable').remove();
            me.find('.form-row').after(`<div class='dates form-row' id='avaliable'></div>`)

            @if( $isPro )
                $('.input-professional_id').remove();
                $.get('/professional/avaliable', function(response){
                    Suggestions( response )
                })
            @else

                $('#callendar__account_id,#callendar__professional_id').change(function(  ){

                    if( $('#callendar__account_id').val() && $('#callendar__professional_id').val() ){

                        $.get(`/avaliable/${$('#callendar__professional_id').val()}`, function(response){
                            Suggestions( response )
                        })
                    } else {
                        $('#avaliable').html('')
                    }

                })

            @endif
        }

        function afterSubmit( response ){
            let message = response.message;
            if( response.success ){
                $("#form-agenda:visible").slideToggle();
                //$(`#modal-default`).modal('toggle')
                clearDataAgenda()
                reloadCallendar()
            } else {
                if (message) {
                    swal(
                        {
                            title: 'Algo deu errado',
                            text: message,
                            type: 'warning',
                            confirmButtonClass: 'btn btn-confirm mt-2'
                        }
                    )
                }
            }
        }

        function ModalReagendarConsulta( id, date ){
            $('#see-event').modal('hide')
            $('#reagendar').modal().off('show.bs.modal').on('shown.bs.modal', function (e) {
                $('#new-date')
                    .val('')
                    .unbind('change')
                    .change(function(){
                        Avaliable(id)
                    })

                basic( $('#reagendar') )
            })
        }

        function AlterarTempoConsulta( id ){
            $('#see-event').modal('hide')
            $('#change-time').modal().off('show.bs.modal').on('shown.bs.modal', function (e) {
                $('#altertime_callendar_id').val(id)
                basic( $('#change-time') )
            })
        }

        function Avaliable( id ){
            let date = $('#new-date').val()
            $('#hours').html('')
            $.get(`/avaliable/${$('#callendar__professional_id').val()}/${$('#callendar__unit_id').val()}/${date}`, function(response){
                if( response.length ){
                    $('#hours').html( response.map((item) =>{
                        return `<a href='#'  data-date='${date} ${item}:00' ><span class="badge badge-success">${item}</span></a>`
                    }).join(' '))
                    $('#hours a')
                        .unbind('click')
                        .click(function(){
                            let newdate = $(this).data('date')
                            ReagendarConsulta( id, newdate )
                            return false;
                        })
                } else {
                    $('#hours').html('Nenhum horário disponível para essa data')
                }

            })
        }

        function ReagendarConsulta( id, newdate ){
            $.post('/callendar/reagendar',
                {
                    id : id, date: newdate
                }, function( response ){
                    if( response.success ){
                        $('#reagendar').modal('hide')
                        reloadCallendar()
                    }

                    if( response.message ){
                        $.Notification.autoHideNotify( response.success ? 'success' : 'error' , 'top rigth', response.success ? 'Deu certo!' : 'Algo errado', response.message);
                    }
                }
            )
        }

        function showDataAccount( data ){
            $('#callendar__account_pet_id').val('').find('option').remove()
            $('.row.account-data:not(:visible)').slideToggle();
            for( let i in data ){
                $(".show-data-account").find(`.${i}`).text( data[i] )    
            }
            loadPets( data.id )
        }

        function clearDataAgenda(){
            $('.row.account-data').hide()
            $('#callendar__account_pet_id').val('').find('option').remove()
            $('#find-account').val('');
            
            $("form#form-new").find('input[name=text],select').val('')
            $("form#form-exists").find('input[name=text],select').val('')

            $('.agenda .nav-item:eq(0) a').click()
        }


    </script>


@endpush

{{--@push('page-bar-right')

    <div class="btn btn-primary waves-effect waves-light linkdyn"
         href="/callendar/form"
         target="modal"
         data-modalsize="lg"
         callback="afterOpenModal"  >
        <i class=" fa fa-plus "></i> Adicionar&nbsp;
    </div>

@endpush--}}

@section('content')
<div class="row">
    <div class="col-lg-12">
        @include("contents.custom.forms.form-agenda-callendar")
        <div class="row">
            <div class="col-lg-12">
                <form class="form filter" >
                    <div class="card m-b-10">
                        <div class="card-body row" >
                            <div class="form-group col-3">
                                <h4><i class="fa fa-calendar"></i> Calendário</h4>
                            </div>
                            <div class="form-group col-3">
                                <select class="form-control" name="callendar__unit_id" id="callendar__unit_id">
                                    <option value="">Escolher Unidade</option>
                                    @foreach( $units as $unit )
                                        <option value="{{$unit->id}}"> {{$unit->name}} </option>
                                    @endforeach
                                </select>
                            </div>

                            @if( $proId )
                                <input type="hidden" name="callendar__professional_id" id="callendar__professional_id" value="{{$proId}}" />
                                <input type="hidden" name="specialty_id" id="specialty_id" value="{{$proId}}" />
                            @else

                                <div class="form-group col-3">
                                    <select class="form-control" name="specialty_id" id="specialty_id">
                                        <option value="">Escolher Especialidade</option>
                                        @foreach( $specialties as $specialty )
                                            <option value="{{$specialty->id}}"> {{$specialty->description}} </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="form-group professional col-3" >
                                    <select class="form-control" name="callendar__professional_id" id="callendar__professional_id">
                                        <option value="">Escolher Profissional</option>
                                        @foreach( $profs as $prof )
                                            <option value="{{$prof->id}}" speciality_id="{{$prof->speciality_id}}" price="{{number_format($prof->price,2,',','.')}}" observation="{{$prof->observation}}" > {{$prof->name}} </option>
                                        @endforeach
                                    </select>
                                </div>

                            @endif

                        </div>
                    </div>
                    <div class="form-group dates" style="display: none">
                        <div class="card">
                            <div class="card-header"><h5>Datas</h5></div>
                            <div class="card-body" style="overflow: scroll; max-height: 150px">

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

        <div class="row">
            <div class="col-lg-12">
                <div class="card-box">
                    <div id="calendar"></div>
                </div>
            </div> <!-- end col -->
        </div>  <!-- end row -->


        <!-- END MODAL -->
    </div>
    <!-- end col-12 -->
</div> <!-- end row -->

@endsection