@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-12 mx-auto">
                <h6 class="mb-3 text-uppercase main_title_page">{{$title}}</h6>
                <div class="card main_card">
                    <div class="card-body card_body">
                        <div class="p-3 rounded">
                            <h6 class="mb-4 text-uppercase sub_title">{{$title}}</h6>
                            <form action="{{route($modelName.'.store')}}" method="post" autocomplete="off"
                                  enctype="multipart/form-data">
                                @csrf
                                <div class="m-2">
                                    <div class="card main_card">
                                        <div class="card-body card_body">
                                            <div class="border p-3 rounded">
                                                <h4 class="card-title">{{trans($namespaceName.'/'.$modelName.'.'.'basic_info')}}</h4>
                                                <div class="mb-3">
                                                    <label for="name_en" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'name_en')}}</label>
                                                    <input type="text" id="name_en" name="name_en" class="form-control  @error('name_en') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{old('name_en')}}" required>
                                                    @error('name_en')
                                                    <div class="alert alert-danger">{{$message}}</div>
                                                    @enderror
                                                </div>
                                                <div class="mb-3">
                                                    <label for="name_ar" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'name_ar')}}</label>
                                                    <input type="text" id="name_ar" name="name_ar" class="form-control  @error('name_ar') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{old('name_ar')}}" required>
                                                    @error('name_ar')
                                                    <div class="alert alert-danger">{{$message}}</div>
                                                    @enderror
                                                </div>

                                                <div class="mb-3">
                                                    <label for="description_en" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'description_en')}}</label>
                                                    <input type="text" id="description_en" name="description_en" class="form-control  @error('description_en') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{old('description_en')}}" required>
                                                    @error('description_en')
                                                    <div class="alert alert-danger">{{$message}}</div>
                                                    @enderror
                                                </div>
                                                <div class="mb-3">
                                                    <label for="description_ar" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'description_ar')}}</label>
                                                    <input type="text" id="description_ar" name="description_ar" class="form-control  @error('description_ar') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{old('description_ar')}}" required>
                                                    @error('description_ar')
                                                    <div class="alert alert-danger">{{$message}}</div>
                                                    @enderror
                                                </div>


                                                <div class="mb-3">
                                                        <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'photo')}}</label>
                                                        <div>
                                                            <label for="image" class="btn btn-dark upload_image w-100" >
                                                                <div class="w-100">
                                                                    <img src="{{ asset('admin/assets/images/main_img/upload_image.svg') }}" >
                                                                    <h5 class="mt-2">{{ __('labels.Select Image') }}</h5>
                                                                </div>
                                                            </label>
                                                            <input id="image" name="image" style="visibility:hidden;" type="file" accept="image/*">
                                                        </div>

                                                        <div class="upload_image_content">
                                                            <div class="form-group">
                                                                <img src="{{ asset('default/no-icon.png' )}}" width="auto" height= "60px" id="image-view">
                                                                <div class="mx-2">
                                                                    <h3>{{ trans('labels.image_name')}}</h3>
                                                                    <p>{{ trans('labels.file_type')}}</p>
                                                                </div>
                                                            </div>

                                                            <div class="form-group">
                                                                <a class="bg-transparent border-0" style="padding: 0;"  id="remove-image"  onclick="changeImage()">
                                                                    <img src="{{ asset('admin/assets/images/main_img/delete.svg') }}" width="30px" height="30px" alt="Delete Image" />
                                                                </a>
                                                            </div>
                                                        </div>
                                                    {{-- </div> --}}
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label">{{trans($namespaceName.'/'.$modelName.'.visitor_types')}}</label>
                                                    <div class="input-group">
                                                        <select class="form-control multiple-select" multiple="multiple" name="visitor_type_keys[]" data-placeholder="{{trans($namespaceName.'/'.$modelName.'.select_visitors_types')}}" required>
                                                            @foreach(getLookupData('visitorType', ['key','display_value']) as $visitorType)
                                                                <option value="{{ $visitorType->key }}" >{{$visitorType->display_value}}</option>
                                                            @endforeach
                                                        </select>
                                                        <button class="btn btn-outline-secondary" type="button"><i class='bx bx-search'></i>
                                                        </button>
                                                    </div>
                                                    @error('host_id')
                                                    <div class="alert alert-danger">{{$message}}</div>
                                                    @enderror
                                                </div>

                                                <div class="mb-3">
                                                    <label class="form-label">{{trans($namespaceName.'/'.$modelName.'.event_type')}}</label>
                                                    <div class="input-group">
                                                        <select name="event_type" class="form-control" data-placeholder="{{trans($namespaceName.'/'.$modelName.'.select_event_types')}}" required>
                                                            @foreach(\App\Models\Event::$event_types as $key=>$value)
                                                                <option value="{{ $key }}" >{{trans($namespaceName.'/'.$modelName.'.'.$value)}}</option>
                                                            @endforeach
                                                        </select>
                                                        <button class="btn btn-outline-secondary" type="button"><i class='bx bx-search'></i>
                                                        </button>
                                                    </div>
                                                    @error('host_id')
                                                    <div class="alert alert-danger">{{$message}}</div>
                                                    @enderror
                                                </div>
                                                           <!-- Remember Me -->
                                                <div class="block mt-4">
                                                    <label for="is_featured" class="inline-flex items-center">
                                                        <input id="is_featured" type="checkbox"  name="is_featured">
                                                        <span class="ml-2 text-sm text-gray-600">{{ __('labels.is_featured') }}</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                              </div>
                              <div class="m-2">
                                <div class="card main_card">
                                    <div class="card-body main_card">
                                        <div class="border p-3 rounded">
                                        <h4 class="card-title">{{trans($namespaceName.'/'.$modelName.'.'.'event_gallery')}}</h4>
                                            <div class="mb-3">
                                                <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'event_gallery')}}</label>
                                                    <div>
                                                        <label for="gallery" class="btn btn-dark upload_image w-100">
                                                            <div class="w-100">
                                                                <img src="{{ asset('admin/assets/images/main_img/upload_image.svg') }}">
                                                                <h5 class="mt-2">{{ __('labels.Select Images') }}</h5>
                                                            </div>
                                                        </label>
                                                        <input id="gallery" name="gallery[]" style="visibility:hidden;" type="file" accept="image/*" multiple>
                                                    </div>
                                                     <div class="row wrap-content" id="previews"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                              </div>
                                <div class="m-2">
                                    <div class="card main_card">
                                        <div class="card-body main_card">
                                            <div class="border p-3 rounded">
                                            <h4 class="card-title">{{trans($namespaceName.'/'.$modelName.'.'.'host_info')}}</h4>
                                                <div class="mb-3">
                                                    <label for="host_id" class="form-label">{{trans($namespaceName.'/'.$modelName.'.host')}}</label>
                                                    <div class="input-group">
                                                        <select class="single-select form-select form-control" id="host_id" name="host_id" onchange="getHostSubscriptions('valid-subscriptions', 'host_id', this.value, 'subscription_drop_id')" data-placeholder="{{trans($namespaceName.'/'.$modelName.'.select_host')}}">
                                                            <option disabled selected>{{trans($namespaceName.'/'.$modelName.'.select_host')}}</option>
                                                            @foreach($hosts as $host)
                                                                <option value="{{ $host->id }}" {{old('host_id')==$host->id?'selected':''}}>{{$host->name}}</option>
                                                            @endforeach
                                                        </select>
                                                        <button class="btn btn-outline-secondary" type="button"><i class='bx bx-search'></i>
                                                        </button>
                                                    </div>
                                                    @error('host_id')
                                                    <div class="alert alert-danger">{{$message}}</div>
                                                    @enderror
                                                </div>
                                                <div class="mb-3">
                                                    <label class="form-label">{{trans($namespaceName.'/'.$modelName.'.subscription')}}</label>
                                                    <div class="input-group">
                                                        <select class="single-select form-select" name="subscription_code" id="subscription_drop_id" onchange="getSubscription('getsubscription', 'subscription_code', this.value, 'subscription_drop_id')" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);">
                                                        </select>
                                                        <button class="btn btn-outline-secondary" type="button"><i class='bx bx-search'></i>
                                                        </button>
                                                    </div>
                                                    @error('subscription_id')
                                                    <div class="alert alert-danger">{{$message}}</div>
                                                    @enderror
                                                </div>
                                                <div id="subscription_div" class="m-2 main_card"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                                <div class="m-2">
                                    <div class="card main_card">
                                        <div class="card-body card_body">
                                            <div class="border p-3 rounded">
                                                <h4 class="card-title">{{trans($namespaceName.'/'.$modelName.'.'.'event_limits')}}</h4>
                                                @foreach($eventTransactionTypes as $eventTransactionType)
                                                <div class="mb-3">
                                                        <label class="form-label">{{$eventTransactionType->display_value}}</label>
                                                        <input class="form-control" type="number" min="0" oninput="validity.valid||(value=``);"  name="event_limits[{{$eventTransactionType->key}}]">
                                                </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="m-2">
                                    <div class="card main_card">
                                        <div class="card-body ">
                                            <div class="border p-3 rounded">
                                            <h4 class="card-title">{{trans($namespaceName.'/'.$modelName.'.'.'BS_server_info')}}</h4>
                                            <div class="mb-3">
                                                <label class="form-label">{{trans($namespaceName.'/'.$modelName.'.server')}}</label>
                                                <div class="input-group">
                                                    <select id="BS_server" class="single-select form-select" name="server_id" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);">
                                                        <option disabled selected>{{trans($namespaceName.'/'.$modelName.'.select_server')}}</option>
                                                        @foreach($servers as $server)
                                                            <option value="{{ $server->id }}">{{$server->name}}</option>
                                                        @endforeach
                                                    </select>
                                                    <button class="btn btn-outline-secondary" type="button"><i class='bx bx-search'></i>
                                                    </button>
                                                </div>
                                                @error('server_id')
                                                <div class="alert alert-danger">{{$message}}</div>
                                                @enderror
                                            </div>
                                            <div class="mb-3 {{ $errors->has('accLevelIds') ? 'has-error' : '' }}">
                                                <label class="form-label" for="accLevelIds">{{trans($namespaceName.'/'.$modelName.'.'.'default_access_level')}}</label>
                                                <select name="accLevelIds" id="accLevelIds" class="form-control">
                                                    <option value="" disabled selected></option>
                                                </select>
                                                @if($errors->has('accLevelIds'))
                                                    <p class="help-block">
                                                        {{ $errors->first('accLevelIds') }}
                                                    </p>
                                                @endif
                                            </div>

                                            <div class="mb-3 {{ $errors->has('department_code') ? 'has-error' : '' }}">
                                                <label class="form-label" for="accLevelIds">{{trans($namespaceName.'/'.$modelName.'.'.'default_Department_code')}}</label>
                                                <input type="text" name="department_code" class="form-control  @error('department_code') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{old('department_code')}}">

                                            @if($errors->has('department_code'))
                                                    <p class="help-block">
                                                        {{ $errors->first('department_code') }}
                                                    </p>
                                                @endif
                                            </div>

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

                                <div class="m-2">
                                    <div class="card main_card">
                                        <div class="card-body">
                                            <div class="border p-3 rounded">
                                            <h4 class="card-title">{{trans($namespaceName.'/'.$modelName.'.'.'event_dates')}}</h4>
                                            <div class="mb-3">
                                                <label class="form-label">{{trans($namespaceName.'/'.$modelName.'.'.'start_date')}}</label>
                                                <input type="text" id="start_date" class="form-control datetime-input" name="start_date"  required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);"/>
                                            </div>
                                            <div class="mb-3">
                                                <label class="form-label">{{trans($namespaceName.'/'.$modelName.'.'.'end_date')}}</label>
                                                <input type="text" id="end_date" class="form-control datetime-input" name="end_date" required oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);"/>
                                            </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="m-2">
                                    <div class="card main_card">
                                        <div class="card-body"><div class="border p-3 rounded">

                                            <h4 class="card-title">{{trans($namespaceName.'/'.$modelName.'.'.'event_address')}}</h4>
                                            <div class="form-group mb-2">
                                                <label class="mb-2" for="address_address">{{trans($namespaceName.'/'.$modelName.'.'.'location')}}</label>
                                                <input type="text" id="address-input" name="location" class="form-control map-input">
                                                <input type="hidden" name="lat" id="address-latitude" value="0" />
                                                <input type="hidden" name="lng" id="address-longitude" value="0" />
                                            </div>
                                            <div class="row">
                                                <div class="col-4 mb-3">
                                                    <label class="mb-2" for="country">{{trans($namespaceName.'/'.$modelName.'.'.'country')}}</label>
                                                    <select required data-placeholder="Select Country" name="country" id="country" class="form-control">
                                                        <option  value="" disabled selected></option>
                                                        @foreach(getLookupData('country', ['key','display_value']) as $country)
                                                            <option value="{{ $country->key }}">
                                                                {{ $country->display_value }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                                <div class=" col-4 mb-3 {{ $errors->has('city') ? 'has-error' : '' }}">
                                                    <label class="mb-2" for="city">{{trans($namespaceName.'/'.$modelName.'.'.'city')}}</label>
                                                    <select required data-placeholder="Select Country" name="city" id="city" class="form-control">
                                                        <option value="" disabled selected></option>
                                                    </select>
                                                    @if($errors->has('city'))
                                                        <p class="help-block">
                                                            {{ $errors->first('city') }}
                                                        </p>
                                                    @endif
                                                </div>
                                                <div class="col-4 mb-3">
                                                    <label class="mb-2" for="timezone">{{trans($namespaceName.'/'.$modelName.'.'.'timezone')}}</label>
                                                    {{-- <input class="form-control" name="timezone" id="timezone" value="Cairo" /> --}}
                                                    <select class="form-control" name="timezone" id="timezone">
                                                        <option></option>
                                                        @foreach (getLookupData('timezone', ['label','value']) as $timezone )
                                                            <option value="{{ $timezone->value }}">{{ $timezone->label }}</option>
                                                        @endforeach
                                                     </select>
                                                </div>
                                                </div>
                                                <div id="address-map-container" class="my-3 text-center" style="width:100%;height:400px; ">
                                                    @if(configuration_hlp('map','activate_map'))
                                                        <div style="width: 100%; height: 100%" id="address-map"></div>
                                                    @else
                                                        <img src="{{asset('default/disabled_map3.jpg')}}" class="img-responsive" style="height: 100%;width: 100%">
                                                    @endif
                                                </div>

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

                                <div class="row">
                                    <div class="col m-2">
                                        <button class="btn primary"> {{trans($namespaceName.'/app.save')}}</button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
@endsection

@push('js')
{{-- <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAel-uW7LScqsmwp7OOw3Pu0UyDILRcNz4&region=EG&callback=initMap"></script> --}}

<script>
    function InvalidMsg(textbox) {
            if (textbox.value == '') {
                textbox.setCustomValidity("{{ trans('messages.this field is required') }}");
            }
            else {
            textbox.setCustomValidity('');
            }
            return true;
}
    {{--let map_key='{{config("customapp.map_key")}}';--}}
    let map_key='{{configuration_hlp('map','geo_map_key')}}';

    function load_js()
        {
           // console.log(lang);
            var lang="{{ app()->getLocale() }}";
            var head= document.getElementsByTagName('head')[0];
            var script= document.createElement('script');
            script.defer=true;
            script.src= "https://maps.googleapis.com/maps/api/js?key="+map_key+"&language="+lang+"&callback=initMap&libraries=places&v=weekly";
            head.appendChild(script);
        }
        load_js();
        let map;

            function initMap() {

                $('form').on('keyup keypress', function(e) {
                    var keyCode = e.keyCode || e.which;
                    if (keyCode === 13) {
                        e.preventDefault();
                        return false;
                    }
                });
                const locationInputs = document.getElementsByClassName("map-input");

                const autocompletes = [];
                const geocoder = new google.maps.Geocoder;
                for (let i = 0; i < locationInputs.length; i++) {

                    const input = locationInputs[i];
                    const fieldKey = input.id.replace("-input", "");
                    const isEdit = document.getElementById(fieldKey + "-latitude").value != '' && document.getElementById(fieldKey + "-longitude").value != '';

                    const latitude = parseFloat(document.getElementById(fieldKey + "-latitude").value) || 30.064742;
                    const longitude = parseFloat(document.getElementById(fieldKey + "-longitude").value) || 31.249509;

                    const map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {
                        center: {lat: latitude, lng: longitude},
                        zoom: 13
                    });
                    const marker = new google.maps.Marker({
                        map: map,
                        position: {lat: latitude, lng: longitude},
                        draggable:true
                    });

                    marker.setVisible(isEdit);

                    const autocomplete = new google.maps.places.Autocomplete(input);
                    autocomplete.key = fieldKey;
                    autocompletes.push({input: input, map: map, marker: marker, autocomplete: autocomplete});
                }

                for (let i = 0; i < autocompletes.length; i++) {
                    const input = autocompletes[i].input;
                    const autocomplete = autocompletes[i].autocomplete;
                    const map = autocompletes[i].map;
                    const marker = autocompletes[i].marker;

                    google.maps.event.addListener(autocomplete, 'place_changed', function () {
                        marker.setVisible(false);
                        const place = autocomplete.getPlace();

                        geocoder.geocode({'placeId': place.place_id}, function (results, status) {
                            if (status === google.maps.GeocoderStatus.OK) {
                                const lat = results[0].geometry.location.lat();
                                const lng = results[0].geometry.location.lng();
                                setLocationCoordinates(autocomplete.key, lat, lng);
                            }
                        });

                        if (!place.geometry) {
                            window.alert("No details available for input: '" + place.name + "'");
                            input.value = "";
                            return;
                        }

                        if (place.geometry.viewport) {
                            map.fitBounds(place.geometry.viewport);
                        } else {
                            map.setCenter(place.geometry.location);
                            map.setZoom(17);
                        }
                        marker.setPosition(place.geometry.location);
                        marker.setVisible(true);

                    });

                    google.maps.event.addListener(marker,"position_changed",
                    function(){
                    let lat=marker.position.lat();
                    let lng=marker.position.lng();
                    // let address=marker.position.reigon();
                    $('#address-latitude').val(lat);
                    $('#address-longitude').val(lng);

                    var latlng = new google.maps.LatLng(lat, lng);
                    // This is making the Geocode request
                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({ 'latLng': latlng },  (results, status) =>{
                        // This is checking to see if the Geoeode Status is OK before proceeding
                        if (status == google.maps.GeocoderStatus.OK) {
                            console.log(results[0]);
                            var city=results[0].address_components[3]['long_name'];
                            var country=results[0].address_components[4]['long_name'];
                            var address = (results[0].formatted_address);
                            console.log("addreess" + address);
                            console.log("Cityy" + city);
                            console.log("Countryy" + country);
                            $('#address-input').val(address);
                        }
                    });

                    });
                }

            }

            async function getCity(lang,lat,lng) {
                let url="https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&language="+lang+"&sensor=true&key=AIzaSyAel-uW7LScqsmwp7OOw3Pu0UyDILRcNz4";
                let response = await fetch(url);
                let data=await response.json();

                let arry=data['results'];
                for(var i=0 ; i<arry.length; i++)
                {
                    if(arry[i].types[0]=="administrative_area_level_1"||arry[i].types[0]=="country")
                    {
                        let city=arry[i].address_components[0];
                        if(!city)
                        {
                            city=arry[i].formatted_address;
                            console.log(city);
                        break;
                        }
                        console.log(city['long_name']);
                        break;
                    }
                }
                //console.log(data['results'])

            }

            getCity("ar",43.238949,76.889709);

            async function getCountry(lang,lat,lng) {
                let url="https://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lng+"&language="+lang+"&sensor=true&key=AIzaSyAel-uW7LScqsmwp7OOw3Pu0UyDILRcNz4";
                let response = await fetch(url);
                let data=await response.json();

                let arry=data['results'];
                for(var i=0 ; i<arry.length; i++)
                {
                    if(arry[i].types[0]=="administrative_area_level_1"||arry[i].types[0]=="country")
                    {
                        let country=arry[i].address_components[1];
                        if(!country)
                        {
                            country=arry[i].formatted_address;
                            console.log(country);
                        break;
                        }
                        console.log(country['long_name']);
                        break;
                    }
                }
                //console.log(data['results'])
            }
            getCountry("ar",1.924992,73.399658);

            function setLocationCoordinates(key, lat, lng) {
                const latitudeField = document.getElementById(key + "-" + "latitude");
                const longitudeField = document.getElementById(key + "-" + "longitude");
                latitudeField.value = lat;
                longitudeField.value = lng;
            }

        function appearSubscription(id){
            var x = document.querySelectorAll(".subscription_details");
            x.forEach(value => {
                value.style.display="none";
            })
            list = document.getElementById("sub_"+id);
            inputContent = document.getElementById('inputs_limits_content');
            list.style.display="block"
            inputContent.style.display="block"
        }

        function getHostSubscriptions(url, relation_id, value, dropown_id) {
            var language ="{{ app()->getLocale() }}"
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: app_url + "/"+language+"/dropdown-" + url,
                type: 'POST',
                data: { _token: $('meta[name="csrf-token"]').attr('content'), relation_id: relation_id, value: value },
                async: true,
                success: function(data) {
                    var obj = JSON.parse(data);
                    $('select[id="' + dropown_id + '"]').empty();
                    $('select[id="' + dropown_id + '"]').append(`<option value="" selected disabled>{{ trans('messages.select') }}</option>`);
                    for (var i = 0; i < obj.length; i++) {
                        $('select[id="' + dropown_id + '"]').append('<option  value="' + obj[i]['subscription_code'] + '">' + obj[i]['subscription_name'] + '</option>');

                    };
                },
                error: function(error) {
                }
            });
        }
        function getSubscription(url, subscription_code, value, dropown_id) {
            var langu ="{{ app()->getLocale() }}"
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: app_url + "/"+langu+"/dropdown-getSubscription",
                type: 'POST',
                data: { _token: $('meta[name="csrf-token"]').attr('content'), subscription_code: subscription_code, value: value },
                async: true,
                success: function(data) {
                    var obj = JSON.parse(data);
                    let balance = obj.balance
                    let start_date = new Date(obj.start_date);
                    let end_date = new Date(obj.end_date);
                    $('#subscription_div').empty();

                    let limits = ''
                    // let limitsInput = ''
                    for (var i = 0; i < balance.length; i++) {
                        limits += '<li class="list-group-item">' +
                            '<strong class="text-capitalize">'+ balance[i].display_value +' : </strong>' +
                            '<strong>{{trans($namespaceName.'/'.$modelName.'.'.'reserved')}} : </strong><span class="badge bg-primary">'+balance[i].reserved+'</span>' +
                            ' -  ' +
                            '<strong>{{trans($namespaceName.'/'.$modelName.'.'.'available')}} : </strong> <span class="badge bg-success">'+balance[i].available+'</span>  -  <strong>{{trans($namespaceName.'/'.$modelName.'.'.'used')}} : </strong> <span class="badge bg-warning text-dark">'+balance[i].used+'</span></li>';
                    }

                    console.log(obj)

                    $('#subscription_div').append(
                        '<div class="main_card">' +
                            '<ul class="list-group list-group-flush">'+
                                '<li class="list-group-item"><strong>{{trans($namespaceName.'/'.$modelName.'.'.'subscription_code')}} : </strong><span class="badge bg-light text-dark">'+obj.subscription_code+'</span></li>'+
                                '<li class="list-group-item"><strong>{{trans($namespaceName.'/'.$modelName.'.'.'interval')}} : </strong><span class="badge bg-light text-dark">'+obj.regular_package.interval+'</span> -  <strong>{{trans($namespaceName.'/'.$modelName.'.'.'interval_type')}} : </strong> <span class="badge bg-light text-dark">'+obj.regular_package.interval_type+'</span></li>'+
                                '<li class="list-group-item"><strong>{{trans($namespaceName.'/'.$modelName.'.'.'start_date')}} : </strong><span class="badge bg-light text-dark">'+start_date.toLocaleDateString()+'</span></li>'+
                                '<li class="list-group-item"><strong>{{trans($namespaceName.'/'.$modelName.'.'.'end_date')}} : </strong><span class="badge bg-light text-dark">'+end_date.toLocaleDateString()+'</span></li>' +
                                limits+
                            '</ul>'+
                        '</div>');
                },
                error: function(error) {
                }
            });
        }
    //     let eventImage = document.getElementById("image");
    //     let imageName = document.getElementById("imageName")
    //    // let removeLogo=document.getElementById('remove-logo');
    //     eventImage.addEventListener("change", ()=>{
    //     let inputImage = document.querySelector("#image").files[0];
    //     let photo =document.getElementById("imageView")
    //    // removeLogo.disabled = false;
    //     var reader = new FileReader();

    //     reader.onload = function (e) {
    //         $('#imageView').attr('src', e.target.result);
    //     }
    //     reader.readAsDataURL(inputImage);
    //     console.log(inputImage.name);

    // });

    function changeImage(){
            document.getElementById("image-view").focus({focusVisible: true});
    let defaultPhoto=window.location.origin+'/default/no-icon.png';
    let image = document.getElementById("image-view");
    image.src=defaultPhoto;

    }
        let image = document.getElementById("image");
        let removeImage=document.getElementById('remove-image');
        image.addEventListener("change", ()=>{
        let inputImage = document.querySelector("#image").files[0];
        removeImage.disabled = false;
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#image-view').attr('src', e.target.result);
        }
        reader.readAsDataURL(inputImage);
        console.log(inputImage.name);
    });
    let defaultPhoto=window.location.origin+'/default/no-icon.png';

    if(document.getElementById('image-view').src !== defaultPhoto)
        {
            removeLogo.disabled = false;
        }


        function deleteImage(element) {
         element.closest('.image-preview').remove();
        }

let galleryInput = document.getElementById("gallery");
let galleryPreviews = document.getElementById("previews");

galleryInput.addEventListener("change", () => {
    let files = galleryInput.files;
    for (let i = 0; i < files.length; i++) {
        let file = files[i];
        let reader = new FileReader();

        reader.onload = function(e) {
            let imagePreview = document.createElement('div');
            imagePreview.classList.add('form-group', 'image-preview', 'upload_image_content', 'my-3', 'col-6');
            imagePreview.innerHTML = `
                <img src="${e.target.result}" width="auto" height="60px" class="gallery-view">
                <div class="mx-2">
                    <p>${file.name}</p>
                    <p>${file.type}</p>
                </div>
                <div class="form-group">
                    <a class="bg-transparent border-0" style="padding: 0;" onclick="deleteImage(this)">
                        <img src="{{ asset('admin/assets/images/main_img/delete.svg') }}" width="30px" height="30px" alt="Delete Image">
                    </a>
                </div>
            `;
            galleryPreviews.appendChild(imagePreview);
        }
        reader.readAsDataURL(file);
    }
});



    </script>

     <script type="text/javascript">

         var host_id = $("#host_id").val();
         $("#host_id").on('change', function(){
             if (host_id != $(this).val()) {
                 host_id = $(this).val();
                 // function code here
             }
         });


        $("#country").change(function(){
            console.log($(this).val())
            $.ajax({
                url: "{{ route('get_city_by_country') }}?country_key="+ $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#city').html(data.html);
                }
            });
        });


        $("#BS_server").change(function(){
            console.log($(this).val())
            $.ajax({
                url: "{{ route('get_accLevelIds_by_server_id') }}?BS_server_id="+ $(this).val(),
                method: 'GET',
                success: function(data) {
                    $('#accLevelIds').html(data.html);
                }
            });
        });

    </script>



@endpush