@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;
            border-radius: 1em;
        }

        .mobile__screen {
            border: 0;
            outline: none;
            overflow: hidden;
            width: 320px;
            height: 568px;
            margin: 0 auto;
            background: url({{asset("NewUI/dashboard/assets/images/ussdback.jpg")}});
            background-size: contain;
        }

    </style>
@endpush
@section('page_content')
    <div class="page-content container" style="margin-top: 5em;">
        <div class="row">
            <div class="col-lg-8">
                <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 style="color:#8e0d0e">Create Questions for {{ $service->name }}</h4>
                        <small>
                            <!-- if the ussd service is collection, display different information -->
                            @if($service->isCollection())
                                <p style="color:#212121">NB: Provide the message to display to users. Finally click Submit to complete the process</p>
                            @else
                                <p style="color:#212121"> NB: Use Proceed to add multiple questions. Finally
                                click done to complete the process.</p>
                            @endif

                        </small>
                    </div>

                            <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-2 control-label form-label req">
                                    <!-- if the ussd service is collection, show message instead of Question -->
                                    @if($service->isCollection())
                                        Message
                                    @else
                                        Question
                                    @endif
                                </label>
                                <div class="col-sm-12">
                            <textarea class="form-control" name="question" id="question"
                                      required>{{ old('description') }}</textarea>
                                </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="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-2 control-label form-label">Question
                                        Type*</label>
                                    <div class="col-sm-12">
                                        <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>

                                            <option value="{{ \App\UssdQuestion::NO_RESPONSE }}" {{ old('is_multiple_choice') == \App\UssdQuestion::NO_RESPONSE ? 'selected' : '' }} >
                                                No Response
                                            </option>
                                        </select>
                                    </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="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 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>
                    @endif
<br>
                    <div class="row mb-5">
                        <div class="col-md-12" style="text-align: right">
                            <button type="submit" id="saveBtn" class="btn btn-block btn-success"><i class="fa fa-arrow-circle-right"></i>
                                <!-- if the ussd service is collection, display Submit -->
                                @if($service->isCollection())
                                    <b>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>

            <div class="col-lg-4">

                <div class="mobile__wrapper">
                    <div class="mobile__outline--top"></div>
                    <div class="mobile__outline--body">
                        <div class="mobile__screen">
                            @foreach($service->ussd_question as $question)
                                @if($loop->last)
                            <div style="margin-top: 3em;margin-bottom: -8em">
                                <p align="center" style="font-size: 2em;color:rgba(0, 0, 0, 0.77)">{{ $question->ussd_service->code}}</p>
                            </div>
                                @endif
                            @endforeach

                            <div class="from-me loud" style="width: 100%;height:auto;border-radius: 0.2em !important;background-color: rgba(0, 0, 0, 0.72) !important;">
                                @forelse($service->ussd_question as $question)
                                    @if($loop->last)
                                <p align="middle" style="text-transform: uppercase">{{ $question->question}}</p>
                                    @endif
                                @empty
                                    <p align="middle" style="text-transform: uppercase">USSD QUESTION</p>
                                @endforelse

                                @foreach($service->ussd_question as $question)
                                        @if($loop->last)
                                    @forelse($question->ussd_answer as $ans)
                                    <p>{{ $ans->getAnswerWithNumber()}}</p>

                                        @empty
                                            <p><small>1. </small> Your Answer</p>
                                                @endif
                                    @endforelse
                                @endforeach
                                <br>
                                <input type="text" class="form-control"/>
                                <br>
                            </div>

                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="mobile__outline--bottom"></div>
                </div>

            </div>
        </div>

    </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>
@endpush