@extends('layouts.dashboard')

@section('content')
    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Edit Engine Setting</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="content mt-3">

        @if (Session::has('message'))
            <div class="col-sm-12">
                <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
                    role="alert">
                    {{ Session::get('message') }}
                </div>
            </div>
        @endif

        <div class="animated fadeIn">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header"><strong>{{ isset($setting->user)?$setting->user->name:'' }}{{ isset($setting)?' - '.(App\Models\GlobalParameterSetting::types($setting->type)):'' }}</strong>
                            <button type="button" class="btn btn-outline-info btn-sm float-right">
                                <a href="{{ route('global-parameter.index') }}"  class="text-dark"> <i class="fa fa-backward"></i>&nbsp; Back </a></button>
                        </div>
                        <div class="card-body card-block">
                            @php $route = route('global-parameter.edit-engine-settings',['id'=>$setting->id]); @endphp
                            @include('admin.global-parameters._setting-form',['merchants'=>$merchants,'ports'=>$ports,'engines'=>$engines])

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('scripts')

<script>
    $(document).ready(function () {
        const apiType = document.getElementById('api_type').value;
       getHost(apiType);

    });

    document.getElementById('api_type').addEventListener('change', function () {
        const apiType = this.value;
        getHost(apiType);
    });

    function getHost(apiType){
        // Clear the IP address dropdown
         const ipDropdown = document.getElementById('ip_address');
        ipDropdown.innerHTML = '<option>Select</option>';
        const ip_address = "{{ $setting->ip_address}}";


        if (apiType) {
            fetch("{{ route('get.host') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ api_type: apiType })
            })
            .then(response => response.json())
            .then(data => {
                for (const [id, ip] of Object.entries(data)) {
                    const option = document.createElement('option');
                    option.value = id;
                    option.textContent = ip;

                    if ((id) === ip_address) {
                     option.selected = true;
                    }

                    ipDropdown.appendChild(option);
                }
            })
            .catch(error => console.error('Error:', error));
        }
    }
</script>
@endpush