<form method="post" onsubmit="saveForm(this)" action="{{ $action }}" enctype="multipart/form-data">
    @if($company ?? ''  && $company->id)
        @method('PUT')
    @endif
    @csrf
    <div class="modal-header">
        <h1 class="modal-title fs-6" id="exampleModalLabel"> <i class="fal fa-user me-1"></i> {{$head ?? ''}} </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
        <div class="modal-form">
            <div class="row">
                <div class="col-lg-12">
                    <div class="form-group mb-3">
                        <div class="avatar-upload">
                            <div class="avatar-preview">
                                <div id="imagePreview" style="background-image: url({{asset($company->image ?? 'assets/admin/images/avatar.png')}});">
                                </div>
                            </div>
                            <div class="avatar-edit">
                                <input type='file' name="image" id="imageUpload" accept=".png, .svg" />
                                <label for="imageUpload">
                                    <i class="fal fa-upload me-2"></i> {{ __('companies.image') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('companies.domain') }} </label>
                    <input type="url" name="domain" class="form-control" value="{{$company->domain ?? ''}}" placeholder="{{ __('companies.domain') }}">
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('companies.sector_id') }} </label>
                    <select name="sector_id" id="" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($sectors as $row)
                            <option {{ ($company->sector_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->title }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('companies.country_id') }} </label>
                    <select name="country_id" onchange="fetchRegions(this)" id="" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($countries as $row)
                            <option {{ ($company->country_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->title }} </option>
                        @endforeach
                    </select>
                </div>
                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{ __('companies.region_id') }} </label>
                    <select name="region_id" id="region_id" class="form-control form-select">
                        <option value=""> {{ __('dashboard.select') }} </option>
                        @foreach($regions as $row)
                            <option {{ ($company->region_id ?? '' ) == $row->id ? 'selected' : '' }} value="{{ $row->id }}"> {{ $row->title }} </option>
                        @endforeach
                    </select>
                </div>
                @foreach($languages as $language)
                    <div class="col-lg-6">
                        <div class="form-group mb-3">
                            <label for="" class="d-block mb-2"> {{ __('companies.title') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                            <input type="text" name="title_{{ $language->local }}" class="form-control" value="{{  $company[$language->local]->title ?? "" }}" placeholder=" {{ __('companies.title') }}">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group mb-3">
                            <label for="" class="d-block mb-2"> {{ __('companies.address') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                            <input type="text" name="address_{{ $language->local }}" class="form-control" value="{{  $company[$language->local]->address ?? "" }}" placeholder=" {{ __('companies.address') }}">
                        </div>
                    </div>
                    <div class="col-lg-12">
                        <div class="form-group mb-3">
                            <label for="" class="d-block mb-2"> {{ __('companies.description') }} {{ count($languages) > 1 ? "({$language->name})" : '' }} </label>
                            <textarea name="description_{{ $language->local }}" class="form-control" placeholder=" {{ __('companies.description') }}">{{  $company[$language->local]->description ?? "" }}</textarea>
                        </div>
                    </div>
                @endforeach

                <div class="form-group mb-3">
                    <label for="" class="d-block mb-2"> {{__('companies.map')}} </label>
                    <input type="hidden" name="latitude" id="latitude" value="{{$company->latitude ?? ''}}">
                    <input type="hidden" name="longitude" id="longitude" value="{{$company->longitude ?? ''}}">
                    <div  id="map" class="map">
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button type="button" class="line-butn butn-st2 butn-md" data-bs-dismiss="modal" aria-label="Close"><span> {{ __('dashboard.cancel') }} </span></button>
        <button type="submit" class="blue-butn butn-st2 butn-md"><span> {{ __('dashboard.save') }} </span></button>
    </div>
</form>

<script src="{{url('')}}/assets/admin/js/custom/imageUpload.js"></script>

<script>
    function fetchRegions(elem)
    {
        let country_id = $(elem).val()
        $.ajax({
            url : "{{route('employee.fetch.regions')}}",
            type : 'GET',
            data : 'country_id='+country_id,
            success:function(data)
            {
                $('#region_id').html(data);
            }
        })
    }
</script>
<script type="text/javascript">

    var latlng = new google.maps.LatLng({!! isset($company) ? ($company->latitude ?? '21.4989').', '.($company->longitude ?? '39.2509') : '21.4989, 39.2509' !!});
    var map = new google.maps.Map(document.getElementById('map'), {
        center: latlng,
        zoom: 11,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        title: 'Set lat/lon values for this property',
        draggable: true
    });
    google.maps.event.addListener(marker, 'dragend', function(a) {
        var div = document.createElement('div');
        document.getElementsByTagName('body')[0].appendChild(div);
        $("#latitude").val(function() {
            return  a.latLng.lat().toFixed(4);
        });
        $("#longitude").val(function() {
            return  a.latLng.lng().toFixed(4);
        });
    });

</script>
