@extends('backend.layouts.master')
@section('content')
<div class="content-wrapper">
    <section class="content-header">
        @include('backend.common-views.messages')
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                        <li class="breadcrumb-item active">WhatsApp Updates</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title"><b>WhatsApp Updates</b>(Send Message through Interakt Platform)</h3>
                        </div>
                        <form id="quickForm" class="whatsApp-form" method="POST" action="{{route('admin.send.whatsappMessage')}}">
                            <div class="card-body">
                                <p class="text-center"><b>Send Mesaage via WhatsApp</b></p>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <label for="template">Select Template</label>
                                            <select class="form-control select2bs4" name="template" id="whatsappTemplate">
                                                <option value="">SELECT ONE</option>
                                                @foreach ($templates as $template)
                                                    <option value="{{$template->templateValue}}" id="{{ $template->BodyValue }}" header-id="{{$template->headerValue}}">{{ $template->templateDisplayValue }} </option>
                                                @endforeach
                                            </select>
                                            <span class="error template-error"></span>
                                            @error('template')
                                                <span class="error">{{ $message }}</span>
                                            @enderror
                                        </div>
                                        <div id="hideenValues" class="hidden">
                                            <div id="templateInputs"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <button type="button" class="btn btn-success btn-flat report-whatsapp" data-demo-user="0"  name="submit">Send Message</button>
                                <button type="button" class="btn btn-outline-warning btn-flat report-whatsapp" data-demo-user="1" name="submit">Send Demo Message</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection
@push('js')

<script>

    $('#whatsappTemplate').change(function(){
        var selectedOption = $('#whatsappTemplate option:selected');
        var optionId = selectedOption.attr('id');
        var headerId = selectedOption.attr('header-id');
        var numInputsToShow = parseInt(optionId);
        var numHeaderToShow = parseInt(headerId);
        $('#templateInputs').html('');
        let appendHtml = '';
        if(numHeaderToShow !== 0){
            for(var i=1;i<=numHeaderToShow;i++){
                appendHtml += `
                <div class="form-group">
                <label for="headerValue${i}">Header Value${i}</label>
                <input type="text" name="headerValue${i}" class="form-control" id="headerValue${i}" placeholder="Enter Header Value${i}">
                @error('headerValue${i}')
                    <span class="error">{{$message}}</span>
                @enderror
                <span class="error header-value${i}-error"></span>
            </div>
                `;
            }
        }
        appendHtml += `
        <input type="hidden" id="inputHeaderValue" name="inputHeader" value="${numHeaderToShow}">


        <input type="hidden" id="inputCountValue" name="inputCount" value="${numInputsToShow}">
       `;
        for(var i=1;i<=numInputsToShow;i++){
            appendHtml += `
            <div class="form-group">
                <label for="bodyValue${i}">Body Value${i}</label>
                ${i === 1 ? `
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="clientNameChecked" value="1" onchange="handleCheckboxChange()" name="isValueClientNameChecked">
                    <label class="form-check-label" for="clientNameChecked">
                        Is Bodyvalue1 is client name?
                    </label>
                </div>` : ''}
            <input type="text" name="bodyValue${i}" class="form-control" id="bodyValue${i}" placeholder="Enter BodyValue${i}">
                @error('bodyValue${i}')
                    <span class="error">{{$message}}</span>
                @enderror
                <span class="error body-value${i}-error"></span>
            </div>`;
        }
        $("#templateInputs").html(appendHtml);
    });

    function handleCheckboxChange(){
        var checkbox = document.getElementById("clientNameChecked");
        var bodyValue1Input = document.getElementById('bodyValue1');
        $("#bodyValue1").val('');
        bodyValue1Input.disabled = checkbox.checked ? true : false;
    }

    $('.report-whatsapp').click(function(){
        $('.report-whatsapp').addClass('disabled');
        $('.loading-block').show();
        $('.template-error').html('');
        var isDemoUser = $(this).data('demo-user');
        var countInput = $('#inputCountValue').val();
        var countHeader = $('#inputHeaderValue').val();
        for(i=0;i<parseInt(countHeader);i++){
            $('.header-value'+i+'-error').html('');
        }
        for(i=0;i<parseInt(countInput);i++){
            $('.body-value'+i+'-error').html('');
        }
        var data = new FormData( $( '.whatsApp-form' )[ 0 ] );
        data.append('isDemoUser',isDemoUser);
        $.ajax({
            data: data,
            method: "POST",
            cache: false,
            processData: false,
            contentType: false,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            url: "{{route('admin.send.whatsappMessage')}}",
            beforeSend: function(){ $('.loading-block').show();},
            success: function(data) {
                $('.report-whatsapp').removeClass('disabled');
                $('.loading-block').hide();
                if(data.success === 0){
                    if(data.message.template){
                        $('.template-error').html(data.message.template[0]);
                    }
                    for(i=0;i<parseInt(countInput);i++){
                        if(data.message['bodyValue'+(i+1)]){
                            $('.body-value'+(i+1)+'-error').html(data.message['bodyValue'+(i+1)][0])
                        }
                    }
                    for(i=0;i<parseInt(countHeader);i++){
                        if(data.message['headerValue'+(i+1)]){
                            $('.header-value'+(i+1)+'-error').html(data.message['headerValue'+(i+1)][0])
                        }
                    }
                }else if(data.success == 1){
                    window.location.href = "{{ route('admin.whatsapp') }}";
                }
            }
        });
    });
</script>
@endpush