@extends('app')
@section('page_title') Create USSD Service @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">
            @if(count($errors)>0)
                <div class="alert alert-danger">
                    <ul>@foreach($errors->all() as $error) <li>{{$error}}</li> @endforeach</ul>
                </div>
            @endif
            {{csrf_field()}}

            <div class="row">
                <h4>NEW USSD SERVICE</h4>
                <div class="col-md-8">
                    <div class="form-group">
                        <button class="btn nameC" id="nameC" data-clipboard-text="1"><i class="fas fa-info-circle" style="color:green"></i></button>
                        <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="{{ old('name') }}" autofocus required>
                        </div>
                    </div>
                </div>
            </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <button class="btn codeC" id="codeC" data-clipboard-text="1"><i class="fas fa-info-circle" style="color:green"></i></button>
                            <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" readonly name="code" id="code" value="{{ $code }}" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <button class="btn serviceTypeC" id="serviceTypeC" data-clipboard-text="1"><i class="fas fa-info-circle" style="color:green"></i></button>
                            <label for="service_type" class="col-sm-4 control-label form-label">Service Type</label>
                            <div class="col-sm-7">
                                <select name="ussd_service_type_id" id="service_type" class="form-control " required>
                                    @foreach($serviceTypes as $serviceType)
                                        <option value="{{ $serviceType->id }}" {{ old('ussd_service_type_id') == $serviceType->id ? 'selected' : '' }}>{{ $serviceType->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <button class="btn descriptionC" id="descriptionC" data-clipboard-text="1"><i class="fas fa-info-circle" style="color:green"></i></button>
                            <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" required>{{ old('description') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
                {{--<div class="row">--}}
                    {{--<div class="col-md-8">--}}
                        {{--<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="{{ old('keyword') }}" >--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
                <div class="row mb-5">
                    <div class="col-md-3 col-md-offset-4" style="text-align: right">
                        <a id="cancelBtn" href="{{ route('service.index') }}" class="btn btn-danger mr-5"><i class="fa fa-times-circle"></i> <b>Cancel</b></a>
                        <button type="submit" id="saveBtn" class="btn btn-success"><i class="fa fa-arrow-circle-right"></i> <b>Proceed</b></button>
                    </div>
                </div>
                <hr style="margin: 5px auto 15px auto;" />
            <div class="row">
                <div class="col-md-8 col-md-offset-2 mb-5">
                    <h5>NOTICE</h5>
                    <small>
                        Kindly note that services are allowed trial period of 1 week after which they will
                        be de-activated. To reactivate your service kindly contact Npontu Technologies for payment.
                    </small>
                </div>
            </div>
        </form>
    </div>
@stop
@push('scripts')

    <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 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>

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

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

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

        // Clipboard

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

        clipboard.on('success', function(e) {
            setTooltip('What would you like to call your service?');
            hideTooltip();
        });

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

        $('.codeC').tooltip({
            trigger: 'click',
            placement: 'right'
        });

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

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

        // Clipboard

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

        clipboard.on('success', function(e) {
            setTooltip('This will be your assigned USSD code for the service?');
            hideTooltip();
        });

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

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

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

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

        // Clipboard

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

        clipboard.on('success', function(e) {
            setTooltip('How would you categorise your service?');
            hideTooltip();
        });

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

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

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

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

        // Clipboard

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

        clipboard.on('success', function(e) {
            setTooltip('Briefly describe your USSD service');
            hideTooltip();
        });

        clipboard.on('error', function(e) {
            setTooltip('Failed!');
            hideTooltip();
        });
    </script>
    <script>
        document.getElementById("nameC").addEventListener("click", function(event){
            event.preventDefault()
        });
    </script>
    <script>
        document.getElementById("codeC").addEventListener("click", function(event){
            event.preventDefault()
        });
    </script>
    <script>
        document.getElementById("serviceTypeC").addEventListener("click", function(event){
            event.preventDefault()
        });
    </script>
    <script>
        document.getElementById("descriptionC").addEventListener("click", function(event){
            event.preventDefault()
        });
    </script>
@endpush