@extends('app')
@section('page_title') USSD Payment subscription @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: 7em;">
        <form class="form-horizontal" id="ads"  action="{{ route('payments.update', $service->id) }}" method="post">
            @if(count($errors)>0)
                <div class="alert alert-danger">
                    <ul>@foreach($errors->all() as $error) <li>{{$error}}</li> @endforeach</ul>
                </div>
            @endif
                @if (\Session::has('success'))
                    <div class="alert alert-success">
                        <ul>
                            <li>{!! \Session::get('success') !!}</li>
                        </ul>
                    </div>
                @endif

                @if (\Session::has('error'))
                    <div class="alert alert-danger">
                        <ul>
                            <li>{!! \Session::get('error') !!}</li>
                        </ul>
                    </div>
                @endif
            {{csrf_field()}}
                @method('PATCH')

            <div class="row">
                <h4 style="margin-left: 7em">USSD Payment subscription</h4>
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="amount" class="col-sm-4 control-label form-label req">Amount (Ghc)</label>
                        <div class="col-sm-7">
{{--                            <input type="text" class="form-control" readonly name="amount" id="amount"  value="{{ \App\UssdPayment::MONTHLY_AMOUNT }}"  required>--}}
                            <select class="form-control" name="price_id">
                                <option></option>
                                @foreach($prices as $price)
                                    <option value="{{$price->id}}">{{"GHC $price->cost / $price->sessions sessions"  }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="number" class="col-sm-4 control-label form-label req">Number</label>
                        <div class="col-sm-7">
                            <input type="tel" class="form-control"  name="number" id="number" value="{{ old('number') }}" autofocus required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-8">
                    <div class="form-group">
                        <label for="service_type" class="col-sm-4 control-label form-label">Service Type</label>
                        <div class="col-sm-7">
                            <select name="channel" id="service_type" class="form-control " required>
                                <option value="mtn" {{ old('channel') == 'mtn' ? 'selected' : '' }}>MTN Mobile
                                    Money
                                </option>
                                <option value="tigo" {{ old('channel') == 'tigo' ? 'selected' : '' }}>Tigo
                                    Cash
                                </option>
                                <option value="airtel" {{ old('channel') == 'airtel' ? 'selected' : '' }}>Airtel
                                    Cash
                                </option>
                                <option value="vodafone" {{ old('channel') == 'vodafone' ? 'selected' : '' }}>
                                    Vodafone Cash
                                </option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label for="number" class="col-sm-4 control-label form-label req">Voucher Code (only Vodafone users)</label>
                            <div class="col-sm-7">
                                <input type="tel" class="form-control"  name="voucher" id="number" value="{{ old('voucher') }}">
                            </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.ussd.payment.subscription', $service->id) }}"  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>Make Payment</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 payment subscription is for 30 days. You will be required to renew after expiry
                    </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>

@endpush