@extends('layouts.'.$namespaceName.'.master')
@section('title')
{{$title}}
@endsection
@section('content')
<div class="page-wrapper">
    <div class="page-content m-2">
        @include('message')
        @include('breadcrumb')
        <div class="row">
            <div class="col-xl-10 mx-auto">
                <h6 class="mb-0 text-uppercase">{{$title}}</h6>
                <hr/>
                <div class="card">
                    <div class="card-body">
                        <div class="border p-3 rounded">
                            <form action="{{route('subscriptions.newSubscription')}}" method="post" autocomplete="off"
                                  enctype="multipart/form-data">
                                @csrf
                                <input type="hidden" value="{{$consumer->id}}" name="consumer_id">
                                <div class="mb-3">
                                    <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'subscription_name')}}</label>
                                    <input type="text" name="subscription_name" class="form-control  @error('subscription_name') is-invalid @enderror" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{old('subscription_name')}}">
                                    @error('subscription_name')
                                    <div class="alert alert-danger">{{$message}}</div>
                                    @enderror
                                </div>
                                <div>
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label class="form-label">{{trans($namespaceName.'/'.$modelName.'.select_package')}}</label>
                                                <select class="single-select form-select" name="package_id" onchange="appearPackage(this.value)">
                                                    @foreach($packages as $package)
                                                        <option value="{{ $package->id }}">{{$package->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            @foreach($packages as $package)
                                            <ul class="list-group package_details" id="package_{{$package->id}}"
                                                {{$loop->iteration==1?'style=display:block':'style=display:none'}}>
                                                <li class="list-group-item active" aria-current="true">
                                                    {{trans($namespaceName.'/'.$modelName.'.package_name')}} : {{$package->name}} </li>
                                                <li class="list-group-item">{{trans($namespaceName.'/'.$modelName.'.package_price')}} : {{$package->price}}</li>
                                                <li class="list-group-item">{{trans($namespaceName.'/'.$modelName.'.package_interval')}} : {{$package->interval}}</li>
                                                <li class="list-group-item">{{trans($namespaceName.'/'.$modelName.'.package_interval_type')}} : {{$package->interType->display_value}}</li>
                                                    @foreach($package->packageLimits as $limit)
                                                        <li class="list-group-item">{{$limit->limit->display_value .' : '. $limit->max_value}}</li>
                                                    @endforeach
                                            </ul>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>

                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">{{trans($namespaceName.'/'.$modelName.'.start_date')}}</label>
                                        <input id="start_date" type="date" name="start_date"  class="form-control datepicker @error('start_date') is-invalid @enderror" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);"/>
                                        @error('start_date')
                                        <div class="alert alert-danger">{{$message}}</div>
                                        @enderror
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col">
                                        <button class="btn btn-success"> {{trans($namespaceName.'/apps.save')}}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@push('js')


    <script>

    function InvalidMsg(textbox) {
        if (textbox.value == '') {
            textbox.setCustomValidity("{{ trans('messages.this field is required') }}");
        }
        else {
        textbox.setCustomValidity('');
        }
        return true;
        }
            function appearPackage(id){
                var x = document.querySelectorAll(".package_details");
                x.forEach(value => {
                    value.style.display="none";
                })

                list = document.getElementById("package_"+id);
                list.style.display="block"
            }


    </script>
@endpush