@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-8 mx-auto">
                    <h6 class="mb-0 text-uppercase">{{$title}}</h6>
                    <hr/>
                    <form action="{{route($modelName.'.store')}}" method="post" autocomplete="off" id="packageForm"
                          enctype="multipart/form-data">
                        @csrf
                        <input type='hidden' name='package_type_key' value="regular" >
                        <div class="card">
                            <div class="card-body">
                                <div class="card-header">
                                    <strong>{{trans($namespaceName.'/'.$modelName.'.'.'service_info')}}</strong>
                                </div>
                                <div class="border p-3 rounded">
                                    <div class="col-6 mb-3">
                                        <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'service')}}</label>
                                        <select class="single-select" id="services" name="service_id" required>
                                            <option selected disabled>{{trans($namespaceName.'/'.$modelName.'.'.'select_service')}}</option>
                                            @foreach($services as $service)
                                                <option value="{{ $service->id}}">{{ $service->name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div id="limit_table_div">
                                    </div>
                                </div>
                            </div>

                            <div class="card-body">
                                <div class="card-header">
                                    <strong>{{trans($namespaceName.'/'.$modelName.'.'.'package_details')}}</strong>
                                </div>
                                <div class="border p-3 rounded">
                                    <div class="row">
                                        <div class="mb-3 col-4">
                                            <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'name_in_english')}}</label>
                                            <input type="text" name="name_in_en"  class="form-control  @error('name_in_en') is-invalid @enderror" required value="{{old('name_in_en')}}">
                                            @error('name_in_en')
                                            <div class="alert alert-danger">{{$message}}</div>
                                            @enderror
                                        </div>
                                        <div class="mb-3 col-4">
                                            <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'name_in_arabic')}}</label>
                                            <input type="text" name="name_in_ar"  class="form-control  @error('name_in_ar') is-invalid @enderror" required value="{{old('name_in_ar')}}">
                                            @error('name_in_ar')
                                            <div class="alert alert-danger">{{$message}}</div>
                                            @enderror
                                        </div>

                                        <div class="mb-3 col-4">
                                            <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'price')}}</label>
                                            <input type="number" min="0" oninput="getValue(this)" name="price" class="form-control  @error('price') is-invalid @enderror" required value="{{old('price')}}">
                                            @error('price')
                                            <div class="alert alert-danger">{{$message}}</div>
                                            @enderror
                                        </div>
                                        <div class="col-6 mb-3">
                                            <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'interval_type')}}</label>
                                            <select class="single-select" required name="interval_type">
                                                <option disabled>{{trans($namespaceName.'/'.$modelName.'.'.'select_interval_type')}}</option>
                                                @foreach($intervalTypes as $intervalType)
                                                    <option value="{{ $intervalType->key}}">{{ $intervalType->display_value }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-6 mb-3">
                                            <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'interval')}}</label>
                                            <input type="number" min="0" oninput="getValue(this)" name="interval" class="form-control  @error('interval') is-invalid @enderror" required value="{{old('interval')}}">
                                            @error('interval')
                                            <div class="alert alert-danger">{{$message}}</div>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 m-3">
                                <button class="btn btn-success"> {{trans($namespaceName.'/app.save')}}</button>
                            </div>
                        </div>

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


@endsection

@push('js')


    <script type="text/javascript">
        $eventSelect = $('#services')
        $eventSelect.on("change", function () {
            serviceId = this.value;
            packageTypeKey = $('#package_type').val();
            $.ajax({
                url: app_url + "/"+ lang +"/service-limits/" + this.value,
                method: 'GET',
                success: function(data) {
                    var obj = JSON.parse(data);

                    $('#table_service_limits').remove();
                    var limits = '';
                    for (var i = 0; i < obj['service_limits'].length; i++){
                        limits +=
                            '<tr>' +
                                '<td>'+
                                    '<label style="font-weight: bold"> '+obj['service_limits'][i]['limit'].display_value['{{\Illuminate\Support\Facades\App::getLocale()}}']+' :</label>'+
                                '</td>'+
                                '<td>'+
                                    '<input required type="number" min="0" pattern="^[1-9][0-9]*$" oninput="getValue(this)" placeholder="{{trans('labels.please enter valid number')}}" name="packageLimits['+obj['service_limits'][i]['limit'].key+']" class="form-control"/>' +
                                '</td>' +
                            '</tr>';
                    }

                    $('#limit_table_div').append('<table class="table table-bordered" id="table_service_limits"><tr>' +
                        '<th>{{trans($namespaceName.'/'.$modelName.'.'.'limit_name')}}</th>' +
                        '<th>{{trans($namespaceName.'/'.$modelName.'.'.'limit_value')}}</th>' +
                        '</tr>'+
                        limits+
                        '</table>'
                    );

                }
            });

        });
        function getValue(s){

            if(!s.value.match('^[1-9][0-9]*$'))s.value='';
        }
    </script>
@endpush