@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('speaker.update')}}" method="post" autocomplete="off"
                                  enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <input type="hidden" name="event_id" value="{{$event->id}}">
                                <input type="hidden" name="speaker_id" value="{{$speaker->id}}">
                                <div class="m-2">
                                    <div class="card main_card">
                                        <div class="card-body card_body">
                                            <div class="border p-3 rounded">
                                                <div class="row">
                                                    <div class="mb-3 col-6">
                                                        <label for="name_en" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'speaker_name_en')}}</label>
                                                        <input type="text" id="speaker_name_en" name="speaker_name_en" class="form-control  @error('speaker_name_en') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{$speaker->getTranslation('speaker_name', 'en')}}" required>
                                                        @error('speaker_name_en')
                                                        <div class="alert alert-danger">{{$message}}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-3 col-6">
                                                        <label for="speaker_name_ar" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'speaker_name_ar')}}</label>
                                                        <input type="text" id="speaker_name_ar" name="speaker_name_ar" class="form-control  @error('speaker_name_ar') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{$speaker->getTranslation('speaker_name', 'ar')}}" required>
                                                        @error('speaker_name_ar')
                                                        <div class="alert alert-danger">{{$message}}</div>
                                                        @enderror
                                                    </div>

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

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



                                                    <div class="mb-3 col-6">
                                                        <label for="position_en" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'position_en')}}</label>
                                                        <input type="text" id="position_en" name="position_en" class="form-control  @error('position_en') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{$speaker->getTranslation('position', 'en')}}" required>
                                                        @error('position_en')
                                                        <div class="alert alert-danger">{{$message}}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-3 col-6">
                                                        <label for="position_ar" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'position_ar')}}</label>
                                                        <input type="text" id="position_ar" name="position_ar" class="form-control  @error('position_ar') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{$speaker->getTranslation('position', 'ar')}}" required>
                                                        @error('position_ar')
                                                        <div class="alert alert-danger">{{$message}}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="mb-3 col-6">
                                                        <label for="linked_in_url" class="mb-3">{{trans($namespaceName.'/'.$modelName.'.'.'linked_in_url')}}</label>
                                                        <input type="url" id="linked_in_url" name="linked_in_url" class="form-control  @error('linked_in_url') is-invalid @enderror" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" value="{{$speaker->linked_in_url}}" required>
                                                        @error('linked_in_url')
                                                        <div class="alert alert-danger">{{$message}}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-3 col-6">
                                                        <label class="mb-3 col-6">{{trans($namespaceName.'/'.$modelName.'.'.'speak_days')}}</label>
                                                        {{-- <input type="text" id="user" class="form-control" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="user" value="{{ old('user')}}" /> --}}
                                                        <select class="form-control" oninvalid="InvalidMsg(this);" oninput="InvalidMsg(this);" name="days" id="days">
                                                            <option selected hidden value="{{$speaker->days}}">{{ $speaker->days }}</option>
                                                            <option value="all">{{trans($namespaceName.'/'.$modelName.'.'.'all')}}</option>
                                                            @foreach ($days as $key => $value)
                                                                <option value="{{ $key }}">{{ $value }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>

                                                    {{--discreption--}}
                                                    <div class="mb-3 col-6">
                                                        <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="{{$speaker->getTranslation('description', 'en')}}" required>
                                                        @error('description_en')
                                                        <div class="alert alert-danger">{{$message}}</div>
                                                        @enderror
                                                    </div>
                                                    <div class="mb-3 col-6">
                                                        <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="{{$speaker->getTranslation('description', 'ar')}}" required>
                                                        @error('description_ar')
                                                        <div class="alert alert-danger">{{$message}}</div>
                                                        @enderror
                                                    </div>

                                                    <div class="mb-3">
                                                        <div class="mb-4">
                                                            <label class="mb-2">{{trans($namespaceName.'/'.$modelName.'.'.'speaker_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="speaker_photo" style="visibility:hidden;" type="file" accept="image/*">
                                                            </div>

                                                            <div class="upload_image_content">
                                                                <div class="form-group">
                                                                    <img src="{{ asset($speaker->photo)}}" 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>

                                        </div>
                                    </div>
                                        <div class="buttons mt-4">
                                            <button class="btn primary">{{trans($namespaceName.'/app.update')}}</button>
                                            <button class="btn cancel mx-3">{{trans('labels.cancel')}}</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </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) {
                }
            });
        }

    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>

    <script>
        // JavaScript to trigger the file input when the button is clicked
        document.getElementById('uploadButton').addEventListener('click', function() {
            document.getElementById('fileInput').click();
        });
    </script>

@endpush