@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;
            border-radius: 1em;
        }
    </style>
@endpush
@section('page_content')
    <div class="page-content container" style="margin-top: 5em">
        <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">
                <p align="middle" style="font-size: 1.5em;color: #212121">NEW USSD SERVICE<p/>

                <div class="col-md-10">
                    <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">Welcome Message</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-10">
                    <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-10">
                    <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-10">
                    <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>
            <br>
            <br>
            <br>
            <br>
            <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://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>--}}
    <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.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');
            }, 6000);
        }

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