@extends('contents.form-default')
@include('plugins.tagsinput')
@include('plugins.jquery-mask')
@include('plugins.datatables.default')

@section('inputs')
    <div class="row">
        <div class="col-12">
            @component("contents.components.form-engine", [ 'data' => $dataForm ]) @endcomponent
        </div>
        <div class="col-12">
            <div class="form-group " >
                <label class=" col-form-label">Disponibilidade da Semana</label>
                <div style="">
                    <div id="accordion" role="tablist" aria-multiselectable="true" class="m-b-20">
                        @php
                            $first = true;
                            $week = ["dom","seg","ter","qua","qui","sex","sab"];
                        @endphp
                        @foreach( $units as $u )
                            <div class="card">
                                <div class="card-header" role="tab" id="">
                                    <h5 class="mb-0 mt-0 font-16">
                                        <a data-toggle="collapse" data-parent="#accordion" href="#unit_{{$u->id}}" aria-expanded="false" aria-controls="unit_{{$u->id}}">
                                            Unidade: {{$u->name}}
                                        </a>
                                    </h5>
                                </div>

                                <div id="unit_{{$u->id}}" class="collapse @if($first) show @endif" role="tabpanel" aria-labelledby="headingOne">
                                    <div class="card-body">
                                        @for( $i = 0; $i < 7; $i++ )
                                            <div class="form-group row dw ">
                                                <div class="col-md-2">
                                                    <div class="input-group mb-2 ">
                                                        <div class="input-group-prepend">
                                                            <div class="input-group-text" style="text-transform:uppercase">{{$week[$i]}}</div>
                                                        </div>
                                                        <input type="text" class="form-control hour text-center" placeholder="Horários">
                                                    </div>
                                                </div>
                                                <div class="col data">
                                                    @php
                                                        $hours = '';
                                                    @endphp

                                                    @if( isset($daysweek) )
                                                        @if( $daysweek->has($u->id) )
                                                            @foreach( $daysweek[$u->id] as $wk => $unit  )
                                                                @if( $wk == $week[$i] )
                                                                    @php
                                                                        $hours = $unit->implode('|');
                                                                    @endphp
                                                                    @foreach( $unit as $key => $hour )
                                                                        <span class='time'>{{$hour}} <i class="fa fa-close delete" index='{{$key}}'></i></span>
                                                                    @endforeach
                                                                @endif
                                                            @endforeach
                                                        @endif
                                                    @endif
                                                </div>
                                                <input type='hidden' name='dw_{{$u->id}}_{{$week[$i]}}' class='data-hour' value="{{$hours}}">
                                            </div>
                                        @endfor

                                    </div>
                                </div>
                            </div>
                            @php
                                $first = false;
                            @endphp
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        @if( isset($edit) )
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4><i class=" fa fa-calendar-times-o"></i> Datas Indisponíveis</h4>
                </div>
                <div class="card-body">
                    <div class="row form-inactive-date">
                        <div class="col-3">
                            <div class="form-group row" >
                                <label class="col-4 col-form-label"> Data De:</label>
                                <input class="form-control col-8 datetime" name="date_from" id="date_from">
                            </div>
                        </div>
                        <div class="col-3">
                            <div class="form-group row" >
                                <label class="col-4 col-form-label text-center"> Até:</label>
                                <input class="form-control col-8 datetime"  name="date_to" id="date_to">
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group row" >
                                <label class="col-4 col-form-label text-right "> Motivo:</label>
                                <input class="form-control col-8 "  name="reason" id="reason">
                            </div>
                        </div>
                        <div class="col-2">
                            <button type="button" class="btn btn-dark add-inactive-date" > Adicionar </button>
                        </div>
                    </div>
                    <table id="inactive_dates" class="table table-bordered"  >
                        <thead>
                        <tr>
                            <th width="20%">Data de</th>
                            <th width="20%">Até</th>
                            <th width="40%">Motivo</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        @endif
    </div>
@endsection

@push("plugin-css")
    <style>
        #inactive_dates td,
        #inactive_dates th{
            padding: .45rem !important;

        }
    </style>
@endpush

@push("include-js")
    <script>

        $(function(){

            $('#professional__price').maskMoney({allowNegative: false, thousands:'', decimal:'.', affixesStay: false});
            $('#days_week').hide().after( "<div id='daysweek' ></div>" );

            $(".hour").mask("99:99");
            $(".hour").keypress(function( e ){
                if (e.keyCode == 13) {
                    $(".hour").blur()
                    return false;
                }
            })

            $(".hour").blur( function(){
                const re = new RegExp(/(0[0-9]|1[0-9]|2[0-3]):(0[0-9]|[1-5][0-9])/gm);
                if (re.test( $(this).val() )) {
                    addHour( $(this) )
                } else {
                    $(this).val('')
                }

            })

            $('.form-check-input').click(function(){
                if( !$(this).is(':checked') ){
                    let row = $(this).parents('.row:eq(0)');
                    row.find('.hour.from').val( "" )
                    row.find('.hour.to').val( "" )
                }
            })

            $('.hour').mask('99:99');

            $('.hour.from').unbind('blur').blur(function(){
                if( !ValidateHour($(this).val()) ){
                    $(this).val('')
                } else {
                    var min1 = HourToMinute( $(this).val() )
                    var min2 = HourToMinute( $(this).parents('.input-group:eq(0)').find('.hour.to').val() )

                    if( min1 > min2 ){
                        $(this).parents('.input-group:eq(0)').find('.hour.to').val( MinuteToHour(min1 + 60) )
                    }
                }

                checkWeekDay( $(this) )
            })

            $('.hour.to').unbind('blur').blur(function(){
                if( !ValidateHour($(this).val()) ){
                    $(this).val('')
                } else {
                    var min1 = HourToMinute( $(this).parents('.input-group:eq(0)').find('.hour.from').val() )
                    var min2 = HourToMinute( $(this).val() )
                    if( min2 < min1 ){
                        $(this).parents('.input-group:eq(0)').find('.hour.from').val( MinuteToHour(min2 - 60) )
                    }
                }

                checkWeekDay( $(this) )

            })

            @if( isset($edit) )
            initEvents()
            $('.datetime').mask('99/99/9999 99:99')

            $('.form-inactive-date').keypress(function( e ) {
                    if (e.which == '13') {
                        addInactiveDate( )
                        e.preventDefault();
                    }
                })

            $('.add-inactive-date')
                .click(function( e ){
                    addInactiveDate( )
                })
            @endif

        })

        var inactive_dates = $('#inactive_dates').DataTable({
            paging: false,
            searching: false,
            ordering:  false,
            "processing": true,
            "serverSide": true,
            lengthChange: false,
            columns : [
                { data : 'date_from'},
                { data : 'date_to'},
                { data : 'reason'},
                { data : 'id', render : function(data){
                        return `<button type="button" class="btn btn-danger btn-sm delete-di" id="${data}" >Excluir</button>`;
                    }}

            ],
            "language": {
                "url": "/plugins/datatables/i18n/Portuguese-Brasil.json"
            },
            ajax: `/inactive_date_professional/datatable/${$('#professional__id').val()}`,
            "initComplete": function (settings, json) {
                initDeleteDi()
            }
        });

        function addInactiveDate( ){
            let date_from = $('#date_from')
            let date_to = $('#date_to')
            let reason = $('#reason')

            if(!date_from.val()){
                date_from.focus()
                return false;
            }

            if(!date_to.val()){
                date_to.focus()
                return false
            }

            $.ajax({
                url : '/inactive_date_professional/save',
                type:'POST',
                dataType : "JSON",
                data: {
                    inactive_date_professional__date_from: date_from.val(),
                    inactive_date_professional__date_to: date_to.val(),
                    inactive_date_professional__reason: reason.val(),
                    inactive_date_professional__professional_id: $('#professional__id').val()
                },
                success : function( response ){
                    if( response.message){
                        $.Notification.notify('success','top right','Sucesso', response.message)
                    }
                    date_from.val('')
                    date_to.val('')
                    reason.val('')
                    inactive_dates.ajax.reload(function(){
                        initDeleteDi()
                    });
                }
            })
        }

        function initDeleteDi(){
            $(".delete-di")
                .unbind('click')
                .click(function(){
                    let id = $(this).attr("id")
                    $.ajax({
                        url: `/inactive_date_professional/delete/${id}`,
                        dataType: 'JSON',
                        success : function( response ){
                            if( response.message){
                                $.Notification.notify('success','top right','Sucesso', response.message)
                            }
                            inactive_dates.ajax.reload(function(){
                                initDeleteDi()
                            });
                        }
                    })
                })
        }

        function checkWeekDay( elem ){
            let row = elem.parents('.row:eq(0)');
            let checkbox = row.find('.form-check-input')

            let from = row.find('.hour.from').val()
            let to = row.find('.hour.to').val()

            if( from || to ){
                checkbox.prop('checked', true)
            } else {
                checkbox.prop('checked', false)
            }

        }

        function addHour( elem ){
            let parent = elem.parents(".form-group:eq(0)")
            let dataElem = parent.find('.data-hour');
            let data = [];
            if( dataElem.val() ){
                data = dataElem.val().split('|');
                data.push( elem.val() )
                dataElem.val( data.join('|') )
            } else {
                dataElem.val( elem.val() )
                data.push(elem.val())
            }
            drawHour( elem, data )
            elem.val('').focus()
        }

        function deleteHour( elem ){
            let index = elem.attr('index')
            let parent = elem.parents(".form-group:eq(0)")
            let dataElem = parent.find('.data-hour');

            let data = dataElem.val().split('|');
            data.splice( index ,1)
            console.log(data)

            if( data.length > 1 ){
                dataElem.val( data.join('|') )
            } else {
                dataElem.val( '' )
            }

            drawHour( elem, data )
        }

        function drawHour( elem, data ){


            let parent = elem.parents(".form-group:eq(0)")
            parent.find('.col.data').html(
                `${data.sort().map(function( item, key ){
                    return `<span class='time'>${item} <i class="fa fa-close delete" index='${key}'></i></span>`;
                }).join('')}`
            )

            initEvents()
        }

        function initEvents(){
            $('.delete')
                .unbind('click')
                .click(function(){
                deleteHour( $(this) )
            })
        }

    </script>


@endpush