@extends('layouts.app')
 @section('content')

  <div class="page-content">
        <div class="page-subheading page-subheading-md">
                    <ol class="breadcrumb">
                        <li><a href="javascript:;">Dashboard</a></li>
                        <li class="active"><a href="javascript:;">City</a></li>
                        <li class="active"><a href="javascript:;">List</a></li>
                    </ol>
            </div>
            <div class="page-heading page-heading-md">
                <h2>City List</h2>
            </div>
           
            <div class="container-fluid-md">
             <div class="row">
            <div class="col-md-12">
                <form action="{{ route('city.list')}}" class="form-horizontal" method="POST">
                    @csrf

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h4 class="panel-title">City Search</h4>
                        </div>
                        <div class="panel-body">
                             <div class="form-group">
                                <label for="inputEmail3" class="col-sm-4 control-label">City</label>
                                <div class="col-sm-8">
                                    <input type="text" name="citySearch" class="form-control" id="inputEmail3"  placeholder="Enter city name...">
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <div class="form-group">
                                <div class="col-sm-offset-4 col-sm-8">
                                    <button type="submit" class="btn btn-primary" name="submit">Search</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
 <div class="panel panel-default">
     <div class="panel-heading">
                <h4 class="panel-title">City List</h4>
            </div>
        <div class="panel-body">
            
            <div class="table-responsive">
               <table class="table table-striped display">
                    <thead>
                    <tr>
                        <th>Name</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($entity as $val)
                    <tr class="odd gradeX">
                        <td>{{ $val->city_name}}</td>
                    </tr>
                     @endforeach 
                    </tbody>
                </table>
            </div>
             @if ($entity->lastPage() > 1)
                <div class="d-flex justify-content-center mt-3">
                    {{ $entity->withQueryString()->links() }}
                </div>
            @endif      
        </div>
    </div>
</div>
<script>
    let citySearchInput = document.getElementById('citySearch');
    citySearchInput.addEventListener('input', function () {     
        let cityQuery = citySearchInput.value.trim();
        if (cityQuery.length < 2) {
            citySuggestionsDiv.innerHTML = '';
            return;
        }
        var pathname = window.location.pathname.split('/');
        var baseFolder = pathname[1]; // "online-airline"
        var baseUrl = window.location.origin + '/' + baseFolder;
        fetch(`${baseUrl}/public/admin/user_role_permission/search-cities?query=${cityQuery}`)
            .then(response => response.json())
            .then(cities => {
                citySuggestionsDiv.innerHTML = '';

                cities.forEach(city => {
                    let cityItem = document.createElement('a');
                    cityItem.classList.add('list-group-item', 'list-group-item-action');
                    cityItem.textContent = city.name;
                    cityItem.dataset.id = city.id;

                    cityItem.addEventListener('click', function () {
                        citySearchInput.value = city.name;
                        selectedCityId.value = city.id;
                        selectedCityIataCode.value=city.iata_code;
                        citySuggestionsDiv.innerHTML = '';
                    });

                    citySuggestionsDiv.appendChild(cityItem);
                });
            });
    });

    assignCityForm.addEventListener('submit', function (e) {
        e.preventDefault();
        let cityFormData = new FormData(assignCityForm);

        var pathname = window.location.pathname.split('/');
        var baseFolder = pathname[1]; // "online-airline"
        var baseUrl = window.location.origin + '/' + baseFolder;
        fetch(`${baseUrl}/public/admin/user_role_permission/assign-city/${userId}`, {
            method: 'POST',
            body: cityFormData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            citySearchInput.value = '';
            selectedCityId.value = '';
            selectedCityIataCode ='';
            fetchAssignedCities(); // Refresh the assigned countries list
        })
        .catch(error => console.error('Error:', error));
    });


</script>

@endsection