@extends('admin.framework')

@section('title')
    New Subscription
@endsection

@section('head')
    <link href="{{asset('backaz/libs/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
    <link href="{{asset('backaz/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}" rel="stylesheet">

@endsection

@section('back_content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-flex align-items-center justify-content-between">
                <h4 class="mb-0">Subscriptions</h4>

                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">Subscriptions</a></li>
                        <li class="breadcrumb-item active">Add Subscription</li>
                    </ol>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">New Subscription</h4>
                    <p class="card-title-desc">Creating new subscription</p>
                    {!! Form::open(array('route' => 'subscriptions.store', 'method' => 'POST', 'role' => 'form', 'class' => 'needs-validation', 'enctype'=>'multipart/form-data')) !!}
                    {!! csrf_field() !!}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('type', 'Subscription Type *', array('class' => '')); !!}
                                <div class="input-group">
                                    <select class="form-control select2" name="type" id="type" style="width: 100%;" required="required">
                                        <option value="">Select subscription type</option>
                                        <option value="Hosting">Hosting</option>
                                        <option value="Domains">Domains</option>
                                        <option value="Shop">Shop</option>
                                    </select>
                                </div>
                                @if ($errors->has('type'))
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('type') }}</strong>
                                        </span>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('plan_fee', 'Plan Fee *', array('class' => '')); !!}
                                <div class="input-group">
                                    {!! Form::text('plan_fee', NULL, array('id' => 'plan_fee', 'class' => 'form-control','pattern'=>'^\d{1,3}*(\.\d+)?$', 'data-type'=>'currency', 'placeholder' => 'e.g. 20.00', 'required')) !!}
                                </div>
                                @if ($errors->has('plan_fee'))
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('plan_fee') }}</strong>
                                        </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('client_id', 'Client *', array('class' => '')); !!}
                                <div class="input-group">
                                    <select class="form-control select2" name="client_id" id="client_id" style="width: 100%;" required="required">
                                        <option value="">Select client</option>
                                        @if ($clients)
                                            @foreach($clients as $client)
                                                <option value="{{ $client->id }}">{{ $client->first_name.' '.$client->last_name }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                @if ($errors->has('client_id'))
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('client_id') }}</strong>
                                        </span>
                                @endif
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('month', 'Month *', array('class' => '')); !!}
                                <div class="input-group">
                                    {!! Form::text('month', NULL, array('id' => 'month', 'class' => 'form-control','data-provide'=>"datepicker", 'data-date-format'=>"MM yyyy", 'data-date-min-view-mode'=>"1", 'placeholder' => 'e.g. Jan 2021', 'required')) !!}
                                </div>
                                @if ($errors->has('month'))
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('month') }}</strong>
                                        </span>
                                @endif
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('expiry', 'Expiry *', array('class' => '')); !!}
                                <div class="input-group">
                                    {!! Form::text('expiry', NULL, array('id' => 'expiry', 'class' => 'form-control','data-provide'=>"datepicker", 'data-date-format'=>"mm/dd/yyyy",  'placeholder' => 'e.g. Jan 2021', 'required')) !!}
                                </div>
                                @if ($errors->has('expiry'))
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('expiry') }}</strong>
                                        </span>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                {!! Form::label('plan_id', 'Plan Package', array('class' => '')); !!}
                                <div class="input-group">
                                    <select class="form-control select2" name="plan_id" id="plan_id" style="width: 100%;">
                                        <option value="">Select plan </option>
                                        @if ($plans)
                                            @foreach($plans as $plan)
                                                <option value="{{ $plan->id }}">{{ $plan->plan }}</option>
                                            @endforeach
                                        @endif
                                    </select>
                                </div>
                                @if ($errors->has('plan_id'))
                                    <span class="invalid-feedback">
                                            <strong>{{ $errors->first('plan_id') }}</strong>
                                        </span>
                                @endif
                            </div>
                        </div>
                    </div>
                    <br>

                    {!! Form::button('Add Subscription', array('class' => 'btn btn-primary','type' => 'submit' )) !!}
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>
@endsection

@section('back_footer')
    <script src="{{asset('backaz/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
    <script src="{{asset('backaz/libs/select2/js/select2.min.js')}}"></script>
    <script>
        $('.select2').select2({
            placeholder: 'Select an option'
        });

    </script>

    <script src="{{asset('backaz/libs/bs-custom-file-input/bs-custom-file-input.min.js')}}"></script>

    <script>
        bsCustomFileInput.init();
    </script>

    <script>
        $("input[data-type='currency']").on({
            keyup: function() {
                formatCurrency($(this));
            },
            blur: function() {
                formatCurrency($(this), "blur");
            }
        });

        function formatNumber(n) {
            return n.replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, "")
        }

        function formatCurrency(input, blur) {

            var input_val = input.val();

            if (input_val === "") { return; }

            var original_len = input_val.length;

            var caret_pos = input.prop("selectionStart");

            if (input_val.indexOf(".") >= 0) {

                var decimal_pos = input_val.indexOf(".");

                var left_side = input_val.substring(0, decimal_pos);
                var right_side = input_val.substring(decimal_pos);

                left_side = formatNumber(left_side);

                right_side = formatNumber(right_side);

                if (blur === "blur") {
                    right_side += "00";
                }

                right_side = right_side.substring(0, 2);

                input_val = left_side + "." + right_side;

            } else {
                input_val = formatNumber(input_val);

                if (blur === "blur") {
                    input_val += ".00";
                }
            }

            input.val(input_val);

            var updated_len = input_val.length;
            caret_pos = updated_len - original_len + caret_pos;
            input[0].setSelectionRange(caret_pos, caret_pos);
        }
    </script>


@endsection