@extends('layouts/gnr_layout')
@section('title', '| Configure SMS Service')

@section('content')

{{-- template --}}
<div class="row add-data-form">
    <div class="col-md-12">
        <div class="col-md-2"></div>

        {{-- fullbody start  --}}
        <div class="col-md-8 fullbody">

            {{-- title  --}}
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{url('smsConfig/provider')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-th-list viewIcon">
                    </i>Provider Config</a>
            </div>
            {{-- title end  --}}

            {{-- panel start  --}}
            <div class="panel panel-default panel-border">

                <div class="panel-heading">
                    <div class="panel-title">SMS Service Configuration</div>
                </div>

                

                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-12">
                            
                            {{-- form start  --}}
                            <div class="col-md-12">
                                {!! Form::open(array('url' => '', 'id' => 'dataForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}


                                <div class="form-group col-sm-12">

                                    {{-- Provider  --}}
                                    <div class="form-group col-sm-4" style="padding-right: 2em;">
                                        {!! Form::label('selectedProvider', 'SMS Provider:', ['class' => 'control-label']) !!}
                                        <div>                                        
                                            {!! Form::select( 'selectedProvider', array('' => 'Select') + ($providers), $config['providerId'], array( 'class'=>'form-control', 'id' => 'selectedProvider', 'required' => 'required' )) !!}                                        
                                        </div>
                                    </div>
                                

                                    {{-- Language Options  --}}
                                    <div class="form-group col-sm-4" style="padding-left: 1em; padding-right: 1em;">
                                        {!! Form::label('languageOptions', 'Text Language:', ['class' => 'control-label']) !!}
                                        <div>                                        
                                            {!! Form::select('languageOptions', ($languageOptions), $config['language'], array('class'=>'form-control', 'id' => 'languageOptions')) !!}                                        
                                        </div>
                                    </div>

                                    {{-- Back Date SMS Send  --}}
                                    <div class="form-group col-sm-4" style="padding-left: 2em;">
                                        {!! Form::label('backDateSmsOptions', 'Send Back Date SMS:', ['class' => 'control-label']) !!}
                                        <div>                                        
                                            {!! Form::select('sendBackDateSms', ($backDateSmsOptions), $config['sendBackDateSms'], array('class'=>'form-control', 'id' => 'sendBackDateSms')) !!}                                        
                                        </div>
                                    </div>

                                </div>

                                {{-- SMS Events --}}
                                <div class="form-group">
                                    {!! Form::label('selectedEvents', 'Send SMS For:', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9" id="selectedEventsDiv">

                                        @foreach($events as $eventKey => $event)
                                            @php $isInConfig = in_array( $eventKey, json_decode($config['events']) ); @endphp
                                            <div class="col-sm-4">
                                                <input type="checkbox" id="event_{{$eventKey}}" name="selectedEvents[]" value="{{$eventKey}}" {{ $isInConfig ? 'checked="checked"' : '' }} />
                                                <label for="event_{{$eventKey}}">{{$event}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                               

                                {{-- SMS Contents --}}
                                <div class="form-group" id="smsContentDiv">
                                    {!! Form::label('smsContent', 'SMS Content:', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        @foreach(array_keys($events) as $e)
                                            @foreach($languageOptions as $l)
                                                <div class="form-group" id="smsContentDiv_{{$e}}_{{$l}}">
                                                    <label class='col-sm-3 control-label'>{{$events[$e]}}</label>
                                                    <div class="col-sm-9">
                                                        <textarea class='form-control' rows='4' readonly>{{$smsContents[$e][$l]}}</textarea>
                                                    </div>
                                                </div>
                                            @endforeach
                                        @endforeach
                                    </div>
                                </div>


                                {{-- Eligible Savings Products --}}
                                <div class="form-group" id="savingsProductsDiv">
                                    {!! Form::label('selectedSavingsProducts', 'Eligible Savings Products:', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        <!-- <div class="col-sm-2">
                                            <input type="checkbox" id="selectedSavingsProducts_0" name="selectedSavingsProducts[]" value="0">
                                            <label for="0">All</label>
                                        </div> -->
                                        @foreach($savingsProducts as $id => $product)
                                            <div class="col-sm-2">
                                                <input type="checkbox" id="selectedSavingsProducts_{{$id}}" name="selectedSavingsProducts[]" value="{{$id}}">
                                                <label for="selectedSavingsProducts_{{$id}}">{{$product}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                
                                {{-- Savings Products For Grouping --}}
                                <div class="form-group" id="savingsProductsForGroupingDiv">
                                    {!! Form::label('selectedSavingsProductsForGrouping', 'Group Savings Products:', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        @foreach($savingsProducts as $id => $product)
                                            <div class="col-sm-2">
                                                <input type="checkbox" id="selectedSavingsProductsForGrouping_{{$id}}" name="selectedSavingsProductsForGrouping[]" value="{{$id}}">
                                                <label for="selectedSavingsProductsForGrouping_{{$id}}">{{$product}}</label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>

                                {{-- No. of SMS from Auto Process --}}
                                <div class="form-group" id="noOfSMSfromAutoProcessDiv">
                                    <label class='col-sm-3 control-label' for="noOfSMSfromAutoProcess">No. of SMS from Auto Process</label>
                                    <div class="col-sm-9">
                                        <input class='form-control' type="text" id="noOfSMSfromAutoProcess" name="noOfSMSfromAutoProcess" value="">
                                    </div>
                                </div>


                                {{-- Schedule Reminder Days --}}
                                <div class="form-group" id="upcomingScheduleReminderDiv">
                                    {!! Form::label('upcomingScheduleReminder', 'Loan Schedule Reminder (in Days):', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        @foreach($loanRepayFrequency as $name)
                                            <div class="form-group">
                                                <label class='col-sm-3 control-label' for="frequency_{{$name}}">{{ implode( ' ', explode( '_', $name) ) }}</label>
                                                <div class="col-sm-9">
                                                    <input class='form-control' type="text" id="frequency_{{$name}}" name="upcomingScheduleReminder[{{$name}}]" value="">
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                
                                
                                {{-- SMS Sending Time --}}
                                <div class="form-group" id="smsSendingTimeDiv">
                                    <label class='col-sm-3 control-label' for="smsSendingTime">SMS Sending Time</label>
                                    <div class="col-sm-9">
                                        <input class='form-control' type="time" id="smsSendingTime" name="smsSendingTime" value="06:00:00">
                                    </div>
                                </div>
                                

                                <div class="form-group">
                                    {!! Form::label('submit', ' ', ['class' => 'col-sm-3 control-label']) !!}
                                    <div class="col-sm-9">
                                        {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']); !!}
                                        <a href="{{url('mfn/home/')}}" class="btn btn-danger closeBtn">Close</a>
                                        <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                                    </div>
                                </div>

                                {!! Form::close() !!}
                            </div>
                            {{-- form end  --}}

                            <!-- <div class="col-md-4 emptySpace vert-offset-top-9"><img src="images/image15.png" width="90%" height="" style="float:right"></div> -->

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

            </div>
            {{-- panel end  --}}


            <div class="footerTitle" style="border-top:1px solid white"></div>

        </div>
        {{-- fullbody end  --}}

        <div class="col-md-2"></div>
    </div>
</div>
{{-- template end  --}}

@endsection




{{-- scripts --}}

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>

<script type="text/javascript">   

    const eventKeys              = "{{$eventKeys}}".split(',') 
    const languageOptionsKeys    = "{{$languageOptionsKeys}}".split(',') 
    const loanRepayFrequencyKeys = "{{$loanRepayFrequencyKeys}}".split(',') 
    const savingsProductsKeys    = "{{$savingsProductsKeys}}".split(',') 
    
    function toggleSavingsProductInputs() {      
        let isAnySavingsChecked = false
        savingsProductsKeys.forEach( f => {            
            if( $(`#selectedSavingsProducts_${f}`).is(':checked') ) {
                isAnySavingsChecked = true
            } 
        })
        isAnySavingsChecked ? $(`#selectedSavingsProducts_0`).prop( 'checked', false ) : $(`#selectedSavingsProducts_0`).prop( 'checked', true )
    }

    function toggleLoanRepayFrequencyInputs(isRequired) {
        loanRepayFrequencyKeys.forEach( f => {
            $(`#frequency_${f}`).attr("required", isRequired).attr("required", isRequired)
        })
    }
    
    function hideAllSmsText() {
        eventKeys.forEach( e => {
            languageOptionsKeys.forEach( l => {
                $(`#smsContentDiv_${e}_${l}`).hide()
            })
        })
    }

    function isAnyEventSelected() {
        let isAnyEventChecked = false
        eventKeys.forEach( e => {          
            if( $(`#event_${e}`).is(':checked') ) {                
                isAnyEventChecked = true
            }            
        })
        return isAnyEventChecked
    }
    
    function displaySmsText(event, isChecked) {    
        let language = $("#languageOptions").find(":selected").text()

        let isAnyEventChecked = false
        eventKeys.forEach( e => {       
            if( $(`#event_${e}`).is(':checked') ) {
                $(`#smsContentDiv_${e}_${language}`).show()
                isAnyEventChecked = true
            }            
        })
        
        if( isAnyEventChecked ) { 
            $("#smsContentDiv").show()
            $('.errormsg').hide()
        } else {
            $("#smsContentDiv").hide()
        }
    }

    function toggle_sms_sending_time_events(isChecked) {
        if(isChecked) {
            $("#smsSendingTimeDiv").show()
            $('#smsSendingTime').attr("required", true).attr("required", true)
        } else { 
            $("#smsSendingTimeDiv").hide()
            $('#smsSendingTime').attr("required", false).prop("required", false)
        }
    }
    
    function toggle_savings_events(isChecked) {
        toggle_sms_sending_time_events(isChecked)

        if(isChecked) { 
            $("#savingsProductsDiv").show() 
        } else {
            $("#savingsProductsDiv").hide()  
        }      
    }

    function toggle_loan_events(isChecked) {
        toggle_sms_sending_time_events(isChecked)

        if(isChecked) { 
            $("#noOfSMSfromAutoProcessDiv").show() 
            $("#noOfSMSfromAutoProcess").show().attr("required", true).attr("required", true) 
        } else {
            $("#noOfSMSfromAutoProcessDiv").hide()
            $("#noOfSMSfromAutoProcess").hide().attr("required", false).prop("required", false)
        }
    }

    function toggle_schedule_reminder_events(isChecked) {
        toggle_sms_sending_time_events(isChecked)
        toggleLoanRepayFrequencyInputs(isChecked)

        if(isChecked) { 
            $("#upcomingScheduleReminderDiv").show() 
        } else {
            $("#upcomingScheduleReminderDiv").hide()
        }
    }


    function toggleCheckedEvents( event, isChecked ) {
        if( event === 'savings_deposit' )   toggle_savings_events(isChecked)
        if( event === 'savings_withdraw' )  toggle_savings_events(isChecked)
        if( event === 'loan_collection' )   toggle_loan_events(isChecked)
        if( event === 'schedule_reminder' ) toggle_schedule_reminder_events(isChecked)
    }   

    $(document).ready(function() {     
        
        console.log( 'loaded ... ' )
                
        hideAllSmsText()       
        toggleLoanRepayFrequencyInputs(false)
        toggleSavingsProductInputs()

        $("#smsContentDiv").hide()
        $("#smsSendingTimeDiv").hide()
        $("#savingsProductsDiv").hide()
        $("#noOfSMSfromAutoProcessDiv").hide()
        $("#upcomingScheduleReminderDiv").hide()

        displaySmsText()

        // toggle event
        eventKeys.forEach( e => {
            $(`#event_${e}`).change(function() {
                hideAllSmsText()
                displaySmsText()
                toggleCheckedEvents( this.value , this.checked )                
            })
        })

        // savings product toggle
        savingsProductsKeys.forEach( f => {
            $(`#selectedSavingsProducts_${f}`).change(function() {                
                toggleSavingsProductInputs()                
            })
        })

        $(`#languageOptions`).change( function () {
            hideAllSmsText()
            displaySmsText()
        })


        $('form').submit(function(event) {
            event.preventDefault()
            let csrf = "{{csrf_token()}}"
            let data = $('#dataForm').serialize()           

            console.log( data )

            if(!isAnyEventSelected()) {
                toastr.warning('Please select at least one sms sending event', 'Warning', {timeOut: 5000})
                $("#selectedEventsDiv").append(`<span class="errormsg" style="color:red;">Please select at least one</span>`)
                return
            }
            
            $.ajax({
                url: '{{route('sms.config.store')}}',                
                type: 'post',                
                dataType: 'json',
                data: {csrf:csrf, data:data},
                async: false,
                cache: false,               
                success: function( _response ){                    
                    toastr.success(_response.responseText, _response.responseTitle, {timeOut: 5000})
                    window.location.href = '{{url('smsConfig/ ')}}'
                },
                error: function( _response ){
                    toastr.error(_response.responseText, _response.responseTitle, {timeOut: 5000})
                }
            });
        });

        

    });


</script>