@extends('app')
@section('page_title') Create Audience @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;border-radius: 1em;padding-bottom: 5px;">
        @if(session('success'))
            <div class="alert alert-success">
                <ul>
                    <li>{{ session('success') }}</li>
                </ul>
            </div>
        @endif
        <form class="form-horizontal" id="ads" method="POST">
            <div class="row">
                <h4 style="margin-left: 13em">SERVICE DESCRIPTION
                    <small>
                        <a href="{{ route('service.edit', $service->id) }}"><i class="fa fa-pencil"></i> Edit </a>
                    </small>
                </h4>
                <div class="col-md-10">
                    <div class="form-group">
                        <label for="name" class="col-sm-4 control-label form-label req">Name</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="name" id="name" value="{{ $service->name }}"
                                   autofocus disabled>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <div class="form-group">
                        <label for="code" class="col-sm-4 control-label form-label req">Code</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="code" id="code" value="{{ $service->code }}"
                                   disabled>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Display keyword input if service is a survey -->
            @if($service->isSurvey())
                <div class="row">
                    <div class="col-md-10">
                        <div class="form-group">
                            <label for="keyword" class="col-sm-4 control-label form-label req">Keyword</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" name="keyword" id="keyword"
                                       value="{{ $service->keyword }}" disabled>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div class="row">
                <div class="col-md-10">
                    <div class="form-group">
                        <label for="service_type" class="col-sm-4 control-label form-label">Service Type</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control" name="code" id="code"
                                   value="{{ $service->ussd_service_type->name }}" disabled>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-10">
                    <div class="form-group">
                        <label for="description" class="col-sm-4 control-label form-label req">Description</label>
                        <div class="col-sm-7">
                            <textarea class="form-control" name="description" id="description"
                                      disabled>{{ $service->description }}</textarea>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <hr style="margin: 5px auto 15px auto;"/>
        <div class="row">
            <h4 style="margin-left: 13em">QUESTIONS ({{ $service->ussd_question()->count() }})
                <!-- if the ussd service is not collection, show add button to be able to add more questions  -->
                @if(!$service->isCollection())
                    <small>
                        <a href="{{ route('service.ussd.subscription.question', $service->id) }}"><i
                                    class="fa fa-plus"></i> Add </a>
                    </small>
                @endif

            </h4>
        </div>
        @if($service->ussd_question()->count())
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    @foreach($service->ussd_question as $question)
                        <div class="panel panel-default">
                            <div class="panel-body">
                                {{ $question->getQuestionWithNumber() }}
                                <small>
                                    <a href="{{ route('service.ussd.subscription.question.edit', $question->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-question-modal-{{ $question->id }}"><i
                                                class="fa fa-trash-o "></i> Delete </a>
                                </small>

                                <!-- include modal to confirm question delete -->
                                @include('ussd.subscription._delete_ussd_question_modal')
                                <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>
                                <br>
                                <ul style="list-style-type: none">
                                    @foreach($question->ussd_answer as $answer)
                                        <li>
                                        {{ $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>
                                        </li>
                                    @endforeach
                                </ul>
                                <!-- display amount if service accepts sms amount and the question is open ended -->
                                @if($question->ussd_service->ussd_service_type->acceptsSmsAmount() && !$question->isMultipleChoice())
                                    <p>
                                        SMS Message:
                                        <br>
                                        <code>{{ $question->sms_message }}</code>
                                    </p>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </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>
    </script>
@endpush