@extends('app')
@section('page_title') Service Subscription  Questions @stop
@push('styles')
    <link rel="stylesheet" href="{{ asset('lib/jstree/dist/themes/default/style.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('lib/bs-multiselect/dist/css/bootstrap-multiselect.css') }}"/>
    <link rel="stylesheet" href="{{ asset('lib/tagsinput/dist/bootstrap-tagsinput.css') }}"/>
    <style>
        .form-group {
            margin-bottom: 10px;
        }

        .page-content {
            background: #fff;
        }
    </style>
@endpush
@section('page_content')
    <div class="page-content container-fluid" style="padding-bottom: 5px;">
        <form class="form-horizontal" id="ads" method="POST"
              action="{{ route('service.ussd.subscription.question.store') }}">
            @if(count($errors)>0)
                <div class="alert alert-danger">
                    <ul>@foreach($errors->all() as $error)
                            <li>{{$error}}</li> @endforeach</ul>
                </div>
            @endif

            @if(session('success'))
                <div class="alert alert-success">
                    <ul>
                        <li>{{ session('success') }}</li>
                    </ul>
                </div>
            @endif


            {{csrf_field()}}

        <!-- hidden field holds ussd service id -->
            <input type="hidden" value="{{ $service->id }}" name="ussd_service_id">

            <div class="row">
                <h4>Create Questions for {{ $service->name }}
                    <small>
                        <!-- if the ussd service is collection, display different information -->
                        @if($service->isCollection())
                            NB: Provide the message to display to users. Finally click Submit to complete the process
                        @else
                            NB: Use Proceed to add multiple questions. Finally
                            click done to complete the process.
                        @endif

                    </small></h4>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <button class="btn questionC" id="questionC" data-clipboard-text="1"><i
                                    class="fas fa-info-circle" style="color:green"></i></button>
                        <label for="question" class="col-sm-4 control-label form-label req">
                            <!-- if the ussd service is collection, show message instead of Question -->
                            @if($service->isCollection())
                                Welcome Message
                            @else
                                Question
                            @endif
                        </label>
                        <div class="col-sm-7">
                            <textarea class="form-control" name="question" id="question"
                                      required>{{ old('description') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- if the ussd service is collection, do not display this form field but automatically submit open ended -->
            @if($service->isCollection())
                <input type="hidden" value="{{ \App\UssdQuestion::OPEN_ENDED }}" name="is_multiple_choice">
            @else
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <button class="btn questionTypeC" id="questionTypeC" data-clipboard-text="1"><i
                                        class="fas fa-info-circle" style="color:green"></i></button>
                            <label for="is_multiple_choice" class="col-sm-4 control-label form-label">Question
                                Type*</label>
                            <div class="col-sm-7">
                                <select name="is_multiple_choice" id="is_multiple_choice" class="form-control "
                                        required>
                                    <option value="{{ \App\UssdQuestion::OPEN_ENDED }}" {{ old('is_multiple_choice') == \App\UssdQuestion::OPEN_ENDED ? 'selected' : '' }} >
                                        Open Ended
                                    </option>
                                    <option value="{{ \App\UssdQuestion::MULTIPLE_CHOICE }}" {{ old('is_multiple_choice') == \App\UssdQuestion::MULTIPLE_CHOICE ? 'selected' : '' }} >
                                        Multiple
                                        Choice
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
            @endif


        <!-- display amount if service accepts sms amount and message and the question type is open ended -->
            @if($service->ussd_service_type->acceptsSmsAmount())
                <div id="pricing-form-inputs">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <button class="btn amountC" id="amountC" data-clipboard-text="1"><i
                                            class="fas fa-info-circle" style="color:green"></i></button>
                                <label for="amount" class="col-sm-4 control-label form-label">Amount</label>
                                <div class="col-sm-7">
                                    <input type="number" step="0.01" class="form-control" name="amount" id="amount"
                                           value="{{ old('amount') }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <button class="btn messageC" id="messageC" data-clipboard-text="1"><i
                                            class="fas fa-info-circle" style="color:green"></i></button>
                                <label for="sms-message" class="col-sm-4 control-label form-label">SMS
                                    Message</label>
                                <div class="col-sm-7">
                                    <textarea class="form-control" name="sms_message"
                                              id="sms-message">{{ old('sms_message') }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="row mb-5">
                <div class="col-md-3 col-md-offset-4" style="text-align: right">
                    <button type="submit" id="saveBtn" class="btn btn-success"><i class="fa fa-arrow-circle-right"></i>
                        <!-- if the ussd service is collection, display Submit -->
                        @if($service->isCollection())
                            <b class="collectionSubmit">Submit</b>
                        @else
                            <b>Proceed</b>
                        @endif
                    </button>
                </div>
            </div>

            <!-- Display questions if they are available-->
            @if($service->ussd_question()->count())
                <div class="row">
                    <h4>Added Questions ({{ $service->ussd_question()->count() }})</h4>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-2">
                        @foreach($service->ussd_question as $question)
                            <div class="panel panel-default">
                                <div class="panel-body">
                                    {{ $question->getQuestionWithNumber() }}
                                    <br>
                                    <p>
                                        <span class="badge bg-primary">{{ $question->getQuestionType() }}</span>
                                        @if($question->isMultipleChoice())
                                            <span class="badge bg-primary">{{ $question->ussd_answer()->count() }} answer(s)</span>
                                        @endif
                                    <!-- display amount if service accepts sms amount and the question is open ended -->
                                        @if($question->ussd_service->ussd_service_type->acceptsSmsAmount() && !$question->isMultipleChoice())
                                            <span class="badge bg-info">Ghc {{ $question->amount  }}</span>
                                        @endif
                                    </p>
                                </div>
                            </div>
                        @endforeach
                    </div>

                </div>
                <div class="row mb-5">
                    <div class="col-md-3 col-md-offset-4" style="text-align: right">
                        <a href="{{ route('service.done', $service->id) }}" class="btn btn-info"><i
                                    class="fa fa-check-circle-o"></i>
                            <b>Done</b></a>
                    </div>
                </div>
            @endif
        </form>
    </div>
@stop
@push('scripts')
    <script src="{{ asset('lib/jstree/dist/jstree.min.js') }}"></script>
    <script src="{{ asset('lib/justgage/raphael-2.1.4.min.js') }}"></script>
    <script src="{{ asset('lib/justgage/justgage.js') }}"></script>
    <script src="{{ asset('lib/bs-multiselect/dist/js/bootstrap-multiselect.js') }}"></script>
    <script src="{{ asset('lib/tagsinput/dist/bootstrap-tagsinput.min.js') }}"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script>

        $('.questionC').tooltip({
            trigger: 'click',
            placement: 'bottom'
        });

        function setTooltip(message) {
            $('.questionC').tooltip('hide')
                .attr('data-original-title', message)
                .tooltip('show');
        }

        function hideTooltip() {
            setTimeout(function () {
                $('.questionC').tooltip('hide');
            }, 3000);
        }

        // Clipboard

        var clipboard = new Clipboard('.questionC');

        clipboard.on('success', function (e) {
            setTooltip('Message to be submitted to the users handset');
            hideTooltip();
        });

        clipboard.on('error', function (e) {
            setTooltip('Failed!');
            hideTooltip();
        });
    </script>
    <script>

        $('.questionTypeC').tooltip({
            trigger: 'click',
            placement: 'bottom'
        });

        function setTooltip(message) {
            $('.questionTypeC').tooltip('hide')
                .attr('data-original-title', message)
                .tooltip('show');
        }

        function hideTooltip() {
            setTimeout(function () {
                $('.questionTypeC').tooltip('hide');
            }, 3000);
        }

        // Clipboard

        var clipboard = new Clipboard('.questionTypeC');

        clipboard.on('success', function (e) {
            setTooltip('What format will the response be expected in ?');
            hideTooltip();
        });

        clipboard.on('error', function (e) {
            setTooltip('Failed!');
            hideTooltip();
        });
    </script>
    <script>

        $('.amountC').tooltip({
            trigger: 'click',
            placement: 'bottom'
        });

        function setTooltip(message) {
            $('.amountC').tooltip('hide')
                .attr('data-original-title', message)
                .tooltip('show');
        }

        function hideTooltip() {
            setTimeout(function () {
                $('.amountC').tooltip('hide');
            }, 3000);
        }

        // Clipboard

        var clipboard = new Clipboard('.amountC');

        clipboard.on('success', function (e) {
            setTooltip('Input a value here only if you intend to have users make a payment of the inputed amount');
            hideTooltip();
        });

        clipboard.on('error', function (e) {
            setTooltip('Failed!');
            hideTooltip();
        });
    </script>
    <script>

        $('.messageC').tooltip({
            trigger: 'click',
            placement: 'bottom'
        });

        function setTooltip(message) {
            $('.messageC').tooltip('hide')
                .attr('data-original-title', message)
                .tooltip('show');
        }

        function hideTooltip() {
            setTimeout(function () {
                $('.messageC').tooltip('hide');
            }, 3000);
        }

        // Clipboard

        var clipboard = new Clipboard('.messageC');

        clipboard.on('success', function (e) {
            setTooltip('SMS message to be sent to the user after successfully completing this level of the service');
            hideTooltip();
        });

        clipboard.on('error', function (e) {
            setTooltip('Failed!');
            hideTooltip();
        });
    </script>

    <script>
        document.getElementById("questionC").addEventListener("click", function (event) {
            event.preventDefault()
        });
    </script>
    <script>
        document.getElementById("questionTypeC").addEventListener("click", function (event) {
            event.preventDefault()
        });
    </script>
    <script>
        document.getElementById("amountC").addEventListener("click", function (event) {
            event.preventDefault()
        });
    </script>
    <script>
        document.getElementById("messageC").addEventListener("click", function (event) {
            event.preventDefault()
        });
    </script>

    <script>
        $(document).ready(function () {

            //Hides the pricing input forms - amount and sms
            function hidePricingInputs() {
                $('#pricing-form-inputs').hide();
            }

            //shows the pricing input forms - amount and sms
            function showPricingInputs() {
                $('#pricing-form-inputs').show();
            }

            //Hide or display pricing input forms based on the question type selected
            function mapQuestionTypeSelectOptionChanges(value) {
                switch (value) {
                    case '{{ \App\UssdQuestion::OPEN_ENDED  }}':
                        showPricingInputs();
                        break;
                    case '{{  \App\UssdQuestion::MULTIPLE_CHOICE }}':
                        hidePricingInputs();
                        break;
                    default:
                        hidePricingInputs();
                }
            }

            //listen to events on the Question type select
            //if it is open ended selected, display the form input forms for pricing else hide it.
            $('#is_multiple_choice').on('change', function (event) {
                mapQuestionTypeSelectOptionChanges(event.target.value);
            });

            //automatically hide or show pricing details for question type
            let value = $('#is_multiple_choice').val();
            mapQuestionTypeSelectOptionChanges(value);
        });
    </script>
    <script>
        $('.collectionSubmit').click(function(){
            alert('Your collection USSD has been setup. No further inputs are required, kindly try out by inputting the code on your mobile device');
        })
    </script>
@endpush