@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;">

        @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

        <form class="form-horizontal" id="ads" method="POST"
              action="{{ route('service.ussd.subscription.question.update', $question->id) }}">

            {{csrf_field()}}

            <div class="row">
                <h4>Update Question for {{ $question->ussd_service->name }}
                    <small>
                        <!-- if the ussd service is collection, display different information -->
                        @if($question->ussd_service->isCollection())
                            NB: Update the message to display to users. Finally click Update to complete the process
                        @else
                            NB: You can update questions and
                            answers in this section. Finally
                            click done to complete the process.
                        @endif
                    </small>
                </h4>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="question" class="col-sm-4 control-label form-label req">
                            <!-- if the ussd service is collection, show message instead of Question -->
                            @if($question->ussd_service->isCollection())
                                Message
                            @else
                                Question
                            @endif
                        </label>
                        <div class="col-sm-7">
                            <textarea class="form-control" name="question" id="question"
                                      required>{{ $question->question }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

            <!-- if the ussd service is collection, do not display this form field but automatically submit open ended -->
            @if($question->ussd_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">
                            <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 }}" {{ $question->is_multiple_choice == \App\UssdQuestion::OPEN_ENDED ? 'selected' : '' }} >
                                        Open Ended
                                    </option>
                                    <option value="{{ \App\UssdQuestion::MULTIPLE_CHOICE }}" {{ $question->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($question->ussd_service->ussd_service_type->acceptsSmsAmount())
                <div id="pricing-form-inputs">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="amount" class="col-sm-4 control-label form-label req">Amount*</label>
                                <div class="col-sm-7">
                                    <input type="number" step="0.01" class="form-control" name="amount" id="amount"
                                           value="{{ $question->amount }}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <div class="form-group">
                                <label for="sms-message" class="col-sm-4 control-label form-label req">SMS
                                    Message*</label>
                                <div class="col-sm-7">
                            <textarea class="form-control" name="sms_message" id="sms-message"
                                      required>{{ $question->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-check-circle-o"></i>
                        <b>Update</b></button>
                </div>
            </div>

        </form>

        <!-- Display questions if they are available-->
        @if($question->isMultipleChoice())
            <div class="row">
                <h4>Added Answers ({{ $question->ussd_answer()->count() }})
                    <small>
                        <a href="{{ route('service.ussd.subscription.answer', $question->id) }}"><i
                                    class="fa fa-plus"></i> Add New Answer </a>
                    </small>
                </h4>
            </div>
            <div class="row">
                <div class="col-md-6 col-md-offset-2">
                    @foreach($question->ussd_answer as $answer)
                        <div class="panel panel-default">
                            <div class="panel-body">
                            {{ $answer->getAnswerWithNumber() }}
                            <!-- display amount if service accepts sms amount -->
                                <small>
                                    @if($question->ussd_service->ussd_service_type->acceptsSmsAmount())
                                        <span class="badge bg-info">Ghc {{ $answer->amount  }}</span>
                                        SMS Message: <code>{{ $answer->sms_message }}</code>
                                    @endif
                                </small>
                                <br>
                                <p>
                                    <small>
                                        <a href="{{ route('service.ussd.subscription.answer.edit', $answer->id) }}"><i
                                                    class="fa fa-pencil"></i> Edit </a>
                                    </small>
                                    <small style="margin-left: 8px;">
                                        <a style="color: grey; cursor: pointer" data-toggle="modal"
                                           data-target="#delete-answer-modal-{{ $answer->id }}"><i
                                                    class="fa fa-trash-o "></i> Delete </a>
                                    </small>

                                    <!-- include modal to confirm answer delete -->
                                    @include('ussd.subscription._delete_ussd_answer_modal')
                                </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.show', $question->ussd_service->id) }}" class="btn btn-info"><i
                                class="fa fa-check-circle-o"></i>
                        <b>Done</b></a>
                </div>
            </div>
        @endif
    </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>
        $(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