@extends('app')
@section('page_title') Service Subscription  Answer @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" style="margin-top: 5em;">
        <form class="form-horizontal" id="ads" method="POST" action="{{ route('service.ussd.subscription.answer.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="{{ $question->id }}" name="ussd_question_id">

            <div class="row">
                <h4>Create Answers for {{ $question->ussd_service->name }} <small>NB: Add questions one after the other. Click Proceed when done</small></h4>
            </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-2">
                        <span class="badge bg-primary">Question</span>
                        <p>
                            {{ $question->question }}
                        </p>
                    </div>
                </div>
                <br>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <button class="btn answerC" id="answerC" data-clipboard-text="1"><i class="fas fa-info-circle" style="color:green"></i></button>
                        <label for="answer" class="col-sm-4 control-label form-label req">Option Select</label>
                        <div class="col-sm-7">
                            <textarea  class="form-control" name="answer" id="answer" required>{{ old('answer') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
                <!-- display amount if question's service accepts sms amount and message -->
                @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">
                                    <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-plus-circle"></i> <b>Add</b></button>
                </div>
            </div>

                <!-- Display answers if they are available-->
                @if($question->ussd_answer()->count())
                    <div class="row">
                        <h4>Added Answers ({{ $question->ussd_answer()->count() }})</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() }}
                                    <br>
                                    <p>
                                        <!-- display amount if service accepts sms amount -->
                                        @if($question->ussd_service->ussd_service_type->acceptsSmsAmount())
                                            <span class="badge bg-info">Ghc {{ $answer->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.ussd.subscription.question', $question->ussd_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>

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

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

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

        // Clipboard

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

        clipboard.on('success', function(e) {
            setTooltip('Options from which response will be selected');
            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("answerC").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>
@endpush