@extends('layouts.dashboard')

@section('content')
    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Add 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></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.add-engine-settings'); @endphp
                            @include('admin.global-parameters._setting-form',['merchants'=>$merchants,'ports'=>$ports,'engines'=>$engines])

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

@push('scripts')

<script>
    document.getElementById('api_type').addEventListener('change', function () {
        const apiType = this.value;

        // Clear the IP address dropdown
        const ipDropdown = document.getElementById('ip_address');
        ipDropdown.innerHTML = '<option>Select</option>';

        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;
                    ipDropdown.appendChild(option);
                }
            })
            .catch(error => console.error('Error:', error));
        }
    });
</script>
@endpush