@extends('layouts.app')

@section('pageTitle', 'Home')

@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:;">Roles</a></li>
    </ol>
   </div>
<div class="page-heading page-heading-md">
    <h2>Roles & Permissions for {{ $username }}</h2>
</div>

<div class="container-fluid-md">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#tab1-1">Roles</a></li>
        <li><a data-toggle="tab" href="#tab1-2">Permissions</a></li> 
        <li id="countryTab" style="display: none;"><a data-toggle="tab" href="#tab1-3">Country Assignment</a></li>
        <li id="cityTab" style="display: none;"><a data-toggle="tab" href="#tab1-4">City Assignment</a></li>
        <li id="airportTab" style="display: none;"><a data-toggle="tab" href="#tab1-5">Airport Assignment</a></li>
        <li id="airlineTab" style="display: none;"><a data-toggle="tab" href="#tab1-6">Airline Assignment</a></li>                
    </ul>
    <div class="tab-content">
        <div id="tab1-1" class="tab-pane active">
            <form id="userRoleForm" action="{{ route('user_role_permission.update', $user->id) }}" method="POST">
                @csrf
                @method('PUT')

                <div class="form-group">
                    <label>Roles</label>
                    @foreach($roles as $role)
                        <div class="form-check">
                            <input type="checkbox" name="roles[]" value="{{ $role->id }}"
                                class="form-check-input role-checkbox"
                                id="role_{{ $role->id }}"
                                @if($user->roles->contains($role->id)) checked @endif>
                            <label for="role_{{ $role->id }}" class="form-check-label">{{ $role->name }}</label>
                        </div>
                    @endforeach
                </div>
                <button type="submit" class="btn btn-primary">Update Role</button>
            </form>
        </div>

        <div id="tab1-2" class="tab-pane">
            <form action="{{ route('user_role_permission.update-permissions', $user->id) }}" method="POST">
                @csrf
                @method('PUT')      

                <div class="form-group">
                    <label>Permissions</label>
                    @foreach($permissions as $permission)
                        <div class="form-check permission-checkbox" data-role-ids="{{ implode(',', $permission->roles->pluck('id')->toArray()) }}">
                            <input type="checkbox" name="permissions[]" value="{{ $permission->id }}"
                                class="form-check-input permission-checkbox-input"
                                id="permission_{{ $permission->id }}"
                                @if($user->permissions->contains($permission->id)) checked @endif>
                            <label for="permission_{{ $permission->id }}" class="form-check-label">{{ $permission->name }}</label>
                        </div>
                    @endforeach
                </div>

                <button type="submit" class="btn btn-primary">Update Permission</button>
            </form>
        </div>

        <div id="tab1-3" class="tab-pane">
           
             <!-- Dynamic Country List -->
    <form id="assignCountryForm" action="{{ route('user_role_permission.assign-country', $user->id) }}" method="POST">
    @csrf
    <input type="hidden" id="userId" value="{{ $user->id }}">

    <div class="form-group">
        <label>Search and Assign Country:</label>
        <input type="text" id="countrySearch" class="form-control" placeholder="Enter country name..." autocomplete="off">
        <div id="countrySuggestions" class="list-group"></div>
    </div>

    <input type="hidden" name="country_id" id="selectedCountryId">

    <div class="form-group">
        <label>Allow All Sub Entity Access:</label>
        <input type="radio" name="sub_entity_access" value="1">Yes
        <input type="radio" name="sub_entity_access" value="0" checked>No
    </div>

    <div class="form-group">
        <label>Content Creator Access:</label>
        <input type="radio" name="content_creator_access" value="1" checked>Yes
        <input type="radio" name="content_creator_access" value="0">No
    </div>

    <div class="form-group">
        <label>Content Approval Access:</label>
        <input type="radio" name="content_approval_access" value="1" checked>Yes
        <input type="radio" name="content_approval_access" value="0">No
    </div>

    <div class="form-group">
        <label>Advertisement Management Access:</label>
        <input type="radio" name="advertisement_access" value="1" checked>Yes
        <input type="radio" name="advertisement_access" value="0">No
    </div>

    <button type="submit" class="btn btn-success">Update Country Permissions</button>
</form>

<h3>Assigned Countries</h3>
<table class="table">
    <thead>
        <tr>
            <th>Country Name</th>
            <th>Sub Entity Access</th>
            <th>Is Content Creator</th>
            <th>Is Content Approval</th>
            <th>Is Advertisement Manager</th>
        </tr>
    </thead>
    <tbody id="assignedCountriesTableBody">
        <!-- Data will be inserted here by JavaScript -->
    </tbody>
</table>

        </div>
        <div id="tab1-4" class="tab-pane">
           
             <!-- Dynamic Country List -->
             <form id="assignCityForm" action="{{ route('user_role_permission.assign-city', $user->id) }}" method="POST">
                @csrf              

                <input type="hidden" id="userId" value="{{ $user->id }}">

                <div class="form-group">
                    <label>Search and Assign City:</label>
                    <input type="text" id="citySearch" class="form-control" placeholder="Enter city name..." autocomplete="off">
                    <div id="citySuggestions" class="list-group"></div>
                </div>

                <input type="hidden" name="city_id" id="selectedCityId">

                <div class="form-group">
        <label>Content Creator Access:</label>
        <input type="radio" name="content_creator_access" value="1" checked>Yes
        <input type="radio" name="content_creator_access" value="0">No
    </div>

    <div class="form-group">
        <label>Content Approval Access:</label>
        <input type="radio" name="content_approval_access" value="1" checked>Yes
        <input type="radio" name="content_approval_access" value="0">No
    </div>

    <div class="form-group">
        <label>Advertisement Management Access:</label>
        <input type="radio" name="advertisement_access" value="1" checked>Yes
        <input type="radio" name="advertisement_access" value="0">No
    </div>

            <button type="submit" class="btn btn-success">Update City Permissions</button>

            </form>

            <h3>Assigned Cities</h3>
<table class="table">
    <thead>
        <tr>
            <th>City Name</th>           
            <th>Is Content Creator</th>
            <th>Is Content Approval</th>
            <th>Is Advertisement Manager</th>
        </tr>
    </thead>
    <tbody id="assignedCitiesTableBody">
        <!-- Data will be inserted here by JavaScript -->
    </tbody>
</table>
        </div>

        <div id="tab1-5" class="tab-pane">
           
             <!-- Dynamic Country List -->
             <form id="assignAirportForm" action="{{ route('user_role_permission.assign-airport', $user->id) }}" method="POST">
                @csrf              

                <input type="hidden" id="userId" value="{{ $user->id }}">

                <div class="form-group">
                    <label>Search and Assign Airport:</label>
                    <input type="text" id="airportSearch" class="form-control" placeholder="Enter airport name..." autocomplete="off">
                    <div id="airportSuggestions" class="list-group"></div>
                </div>

                <input type="hidden" name="airport_id" id="selectedAirportId">

                <div class="form-group">
        <label>Content Creator Access:</label>
        <input type="radio" name="content_creator_access" value="1" checked>Yes
        <input type="radio" name="content_creator_access" value="0">No
    </div>

    <div class="form-group">
        <label>Content Approval Access:</label>
        <input type="radio" name="content_approval_access" value="1" checked>Yes
        <input type="radio" name="content_approval_access" value="0">No
    </div>

    <div class="form-group">
        <label>Advertisement Management Access:</label>
        <input type="radio" name="advertisement_access" value="1" checked>Yes
        <input type="radio" name="advertisement_access" value="0">No
    </div>

            <button type="submit" class="btn btn-success">Update Airport Permissions</button>

            </form>

            <h3>Assigned Airports</h3>
<table class="table">
    <thead>
        <tr>
            <th>Airport Name</th>           
            <th>Is Content Creator</th>
            <th>Is Content Approval</th>
            <th>Is Advertisement Manager</th>
        </tr>
    </thead>
    <tbody id="assignedAirportsTableBody">
        <!-- Data will be inserted here by JavaScript -->
    </tbody>
</table>
        </div>
        <div id="tab1-6" class="tab-pane">
           
             <!-- Dynamic Country List -->
             <form id="assignAirlineForm" action="{{ route('user_role_permission.assign-airline', $user->id) }}" method="POST">
                @csrf              

                <input type="hidden" id="userId" value="{{ $user->id }}">

                <div class="form-group">
                    <label>Search and Assign Airline:</label>
                    <input type="text" id="airlineSearch" class="form-control" placeholder="Enter airline name..." autocomplete="off">
                    <div id="airlineSuggestions" class="list-group"></div>
                </div>

                <input type="hidden" name="airline_id" id="selectedAirlineId">

                <div class="form-group">
        <label>Content Creator Access:</label>
        <input type="radio" name="content_creator_access" value="1" checked>Yes
        <input type="radio" name="content_creator_access" value="0">No
    </div>

    <div class="form-group">
        <label>Content Approval Access:</label>
        <input type="radio" name="content_approval_access" value="1" checked>Yes
        <input type="radio" name="content_approval_access" value="0">No
    </div>

    <div class="form-group">
        <label>Advertisement Management Access:</label>
        <input type="radio" name="advertisement_access" value="1" checked>Yes
        <input type="radio" name="advertisement_access" value="0">No
    </div>

            <button type="submit" class="btn btn-success">Update Airline Permissions</button>

            </form>

            <h3>Assigned Airlines</h3>
<table class="table">
    <thead>
        <tr>
            <th>Airline Name</th>           
            <th>Is Content Creator</th>
            <th>Is Content Approval</th>
            <th>Is Advertisement Manager</th>
        </tr>
    </thead>
    <tbody id="assignedAirlinesTableBody">
        <!-- Data will be inserted here by JavaScript -->
    </tbody>
</table>
        </div>
    </div>
</div>

<script>
   document.addEventListener('DOMContentLoaded', function () {
    function updatePermissions() {
        let selectedRoles = [];
        document.querySelectorAll('.role-checkbox:checked').forEach(function (checkbox) {
            selectedRoles.push(checkbox.value);
        });

        document.querySelectorAll('.permission-checkbox').forEach(function (permissionDiv) {
            let roleIds = permissionDiv.getAttribute('data-role-ids').split(',');

            let hasPermission = roleIds.some(roleId => selectedRoles.includes(roleId));
            permissionDiv.style.display = hasPermission ? 'block' : 'none';
        });

        updateContentCreatorTab();
    }

    function updateContentCreatorTab() {
        let backendAdminSelected = false;
        let contentCreatorSelected = false;

        document.querySelectorAll('.role-checkbox:checked').forEach(function (checkbox) {
            if (checkbox.nextElementSibling.innerText.trim() === 'backend_user') {
                backendAdminSelected = true;
            }
        });

        document.querySelectorAll('.permission-checkbox-input:checked').forEach(function (checkbox) {
            if (checkbox.nextElementSibling.innerText.trim() === 'content creator') {
                contentCreatorSelected = true;
            }
        });

        document.getElementById('countryTab').style.display = (backendAdminSelected && contentCreatorSelected) ? 'block' : 'none';
        document.getElementById('cityTab').style.display = (backendAdminSelected && contentCreatorSelected) ? 'block' : 'none';
        document.getElementById('airportTab').style.display = (backendAdminSelected && contentCreatorSelected) ? 'block' : 'none';
        document.getElementById('airlineTab').style.display = (backendAdminSelected && contentCreatorSelected) ? 'block' : 'none';
    }

    document.querySelectorAll('.role-checkbox, .permission-checkbox-input').forEach(function (checkbox) {
        checkbox.addEventListener('change', function () {
            updatePermissions();
            updateContentCreatorTab();
        });
    });

    updatePermissions();

    // Country Search and Assign
    let searchInput = document.getElementById('countrySearch');
    let suggestionsDiv = document.getElementById('countrySuggestions');
    let selectedCountryId = document.getElementById('selectedCountryId');
    let assignCountryForm = document.getElementById('assignCountryForm');
    let assignedCountriesList = document.getElementById('assignedCountriesList');
    let userId = document.getElementById('userId').value;
    let citySearchInput = document.getElementById('citySearch');
    let citySuggestionsDiv = document.getElementById('citySuggestions');
    let selectedCityId = document.getElementById('selectedCityId');
    let airportSearchInput = document.getElementById('airportSearch');
    let airportSuggestionsDiv = document.getElementById('airportSuggestions');
    let selectedAirportId = document.getElementById('selectedAirportId');
    let airlineSearchInput = document.getElementById('airlineSearch');
    let airlineSuggestionsDiv = document.getElementById('airlineSuggestions');
    let selectedAirlineId = document.getElementById('selectedAirlineId');

    searchInput.addEventListener('input', function () {
        let query = searchInput.value.trim();

        if (query.length < 2) {
            suggestionsDiv.innerHTML = '';
            return;
        }

        fetch(`/onlineairports/public/user_role_permission/search-countries?query=${query}`)
            .then(response => response.json())
            .then(countries => {
                suggestionsDiv.innerHTML = '';

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

                    countryItem.addEventListener('click', function () {
                        searchInput.value = country.name;
                        selectedCountryId.value = country.id;
                        suggestionsDiv.innerHTML = '';
                    });

                    suggestionsDiv.appendChild(countryItem);
                });
            });
    });

    assignCountryForm.addEventListener('submit', function (e) {
        e.preventDefault();

        let formData = new FormData(assignCountryForm);
        fetch(`/onlineairports/public/user_role_permission/assign-country/${userId}`, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            searchInput.value = '';
            selectedCountryId.value = '';
            fetchAssignedCountries(); // Refresh the assigned countries list
        })
        .catch(error => console.error('Error:', error));
    });

    // Fetch and display assigned countries
    function fetchAssignedCountries() {
       
        fetch(`/onlineairports/public/user_role_permission/get-assigned-countries/${userId}`)
        
        .then(response => response.json())
        .then(data => {
            let tableBody = document.getElementById('assignedCountriesTableBody');
            tableBody.innerHTML = ''; // Clear previous data

                data.forEach(country => {
                let row = document.createElement('tr');

                row.innerHTML = `
                    <td>${country.name}</td>
                    <td>${country.sub_entity_access ? 'Yes' : 'No'}</td>
                    <td>${country.is_content_creator ? 'Yes' : 'No'}</td>
                    <td>${country.is_content_approval ? 'Yes' : 'No'}</td>
                    <td>${country.is_advertisement_manager ? 'Yes' : 'No'}</td>
                    <td>
                        <button onclick="deleteCountry(${country.id})" class="delete-btn">Delete</button>
                    </td>
                `;

                tableBody.appendChild(row);
            });
            })
            .catch(error => console.error('Error fetching assigned countries:', error));
    }

    citySearchInput.addEventListener('input', function () {
        let cityQuery = citySearchInput.value.trim();
       
        if (cityQuery.length < 2) {
            citySuggestionsDiv.innerHTML = '';
            return;
        }

        fetch(`/onlineairports/public/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;
                        citySuggestionsDiv.innerHTML = '';
                    });

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

    assignCityForm.addEventListener('submit', function (e) {
        e.preventDefault();

        let cityFormData = new FormData(assignCityForm);
        fetch(`/onlineairports/public/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 = '';
            fetchAssignedCities(); // Refresh the assigned countries list
        })
        .catch(error => console.error('Error:', error));
    });

    function fetchAssignedCities() {
     
       fetch(`/onlineairports/public/user_role_permission/get-assigned-cities/${userId}`)
       
       .then(response => response.json())
       .then(data => {
           let cityTableBody = document.getElementById('assignedCitiesTableBody');
           cityTableBody.innerHTML = ''; // Clear previous data

               data.forEach(city => {
               let row = document.createElement('tr');

               row.innerHTML = `
                   <td>${city.name}</td>                   
                   <td>${city.is_content_creator ? 'Yes' : 'No'}</td>
                   <td>${city.is_content_approval ? 'Yes' : 'No'}</td>
                   <td>${city.is_advertisement_manager ? 'Yes' : 'No'}</td>
                   <td>
                        <button onclick="deleteCity(${city.id})" class="delete-btn">Delete</button>
                    </td>
               `;

               cityTableBody.appendChild(row);
           });
           })
           .catch(error => console.error('Error fetching assigned cities:', error));
   }

/////Airport code
airportSearchInput.addEventListener('input', function () {
        let airportQuery = airportSearchInput.value.trim();
       
        if (airportQuery.length < 2) {
            airportSuggestionsDiv.innerHTML = '';
            return;
        }

        fetch(`/onlineairports/public/user_role_permission/search-airports?query=${airportQuery}`)
            .then(response => response.json())
            .then(cities => {
                airportSuggestionsDiv.innerHTML = '';

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

                    airportItem.addEventListener('click', function () {
                        airportSearchInput.value = airport.name;
                        selectedAirportId.value = airport.id;
                        airportSuggestionsDiv.innerHTML = '';
                    });

                    airportSuggestionsDiv.appendChild(airportItem);
                });
            });
    });

    assignAirportForm.addEventListener('submit', function (e) {
        e.preventDefault();

        let airportFormData = new FormData(assignAirportForm);
        fetch(`/onlineairports/public/user_role_permission/assign-airport/${userId}`, {
            method: 'POST',
            body: airportFormData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            airportSearchInput.value = '';
            selectedAirportId.value = '';
            fetchAssignedAirports(); // Refresh the assigned countries list
        })
        .catch(error => console.error('Error:', error));
    });

    function fetchAssignedAirports() {
     
       fetch(`/onlineairports/public/user_role_permission/get-assigned-airports/${userId}`)
       
       .then(response => response.json())
       .then(data => {
           let airportTableBody = document.getElementById('assignedAirportsTableBody');
           airportTableBody.innerHTML = ''; // Clear previous data

               data.forEach(airport => {
               let row = document.createElement('tr');

               row.innerHTML = `
                   <td>${airport.name}</td>                   
                   <td>${airport.is_content_creator ? 'Yes' : 'No'}</td>
                   <td>${airport.is_content_approval ? 'Yes' : 'No'}</td>
                   <td>${airport.is_advertisement_manager ? 'Yes' : 'No'}</td>
                   <td>
                        <button onclick="deleteAirport(${airport.id})" class="delete-btn">Delete</button>
                    </td>
               `;

               airportTableBody.appendChild(row);
           });
           })
           .catch(error => console.error('Error fetching assigned airports:', error));
   }

////end of airport code

/////Airline code
airlineSearchInput.addEventListener('input', function () {
        let airlineQuery = airlineSearchInput.value.trim();
       
        if (airlineQuery.length < 2) {
            airlineSuggestionsDiv.innerHTML = '';
            return;
        }

        fetch(`/onlineairports/public/user_role_permission/search-airlines?query=${airlineQuery}`)
            .then(response => response.json())
            .then(cities => {
                airlineSuggestionsDiv.innerHTML = '';

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

                    airlineItem.addEventListener('click', function () {
                        airlineSearchInput.value = airline.name;
                        selectedAirlineId.value = airline.id;
                        airlineSuggestionsDiv.innerHTML = '';
                    });

                    airlineSuggestionsDiv.appendChild(airlineItem);
                });
            });
    });

    assignAirlineForm.addEventListener('submit', function (e) {
        e.preventDefault();

        let airlineFormData = new FormData(assignAirlineForm);
        fetch(`/onlineairports/public/user_role_permission/assign-airline/${userId}`, {
            method: 'POST',
            body: airlineFormData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('input[name=_token]').value
            }
        })
        .then(response => response.json())
        .then(data => {
            alert(data.message);
            airlineSearchInput.value = '';
            selectedAirlineId.value = '';
            fetchAssignedAirlines(); // Refresh the assigned countries list
        })
        .catch(error => console.error('Error:', error));
    });

    function fetchAssignedAirlines() {
     
       fetch(`/onlineairports/public/user_role_permission/get-assigned-airlines/${userId}`)
       
       .then(response => response.json())
       .then(data => {
           let airlineTableBody = document.getElementById('assignedAirlinesTableBody');
           airlineTableBody.innerHTML = ''; // Clear previous data

               data.forEach(airline => {
               let row = document.createElement('tr');

               row.innerHTML = `
                   <td>${airline.name}</td>                   
                   <td>${airline.is_content_creator ? 'Yes' : 'No'}</td>
                   <td>${airline.is_content_approval ? 'Yes' : 'No'}</td>
                   <td>${airline.is_advertisement_manager ? 'Yes' : 'No'}</td>
                   <td>
                        <button onclick="deleteAirline(${airline.id})" class="delete-btn">Delete</button>
                    </td>
               `;

               airlineTableBody.appendChild(row);
           });
           })
           .catch(error => console.error('Error fetching assigned airlines:', error));
   }

////end of airline code
// function deleteAirline(airlineId) {
//     if (confirm('Are you sure you want to delete this airline?')) {
//         fetch(`/onlineairports/public/user_role_permission/delete-airline/${airlineId}/${userId}`, {
//             method: 'DELETE',
//             headers: { 'Content-Type': 'application/json' }
//         })
//         .then(response => {
//             if (response.ok) {
//                 fetchAssignedAirlines(); // Refresh the table
//             } else {
//                 console.error('Failed to delete airline');
//             }
//         })
//         .catch(error => console.error('Error deleting airline:', error));
//     }


    // Fetch assigned countries on page load
    fetchAssignedCountries();
    fetchAssignedCities();
    fetchAssignedAirports();
    fetchAssignedAirlines();
});


</script>

@endsection