@extends('admin.layout.master')
@section('content')
<style>
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f4f4f9;
        margin: 0;
        padding: 20px;
        text-align: center;
    }

    .container {
        max-width: 800px;
        margin: auto;
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
    }

    th,
    td {
        padding: 12px;
        text-align: center;
        border: 1px solid #ddd;
    }

    th {
        background-color: #007bff;
        color: white;
    }

    tr:hover {
        background-color: #f1f1f1;
    }

    .alert {
        display: none;
        padding: 10px;
        color: white;
        background-color: #28a745;
        margin-top: 15px;
        border-radius: 5px;
    }

    .city-checkbox {
        transform: scale(1.3);
        cursor: pointer;
    }
</style>
<div class="content-wrapper">
    <div class="content">
        <div class="card card-default">
            <div class="card-header">
                <h2> Cities Update</h2>
            </div>
        </div>
        <div class="card card-default">
            <div class="card-body">
                <div class="container">
                    <h2>City List</h2>
                    <div id="alert-message" class="alert"></div>
                    <meta name="csrf-token" content="{{ csrf_token() }}">
                    <table>
                        <tr>
                            <th>District Name</th>
                            <th>City Name</th>
                            <th>Service Available</th>
                        </tr>
                        @foreach ($cities as $city)
                        <tr>
                            <td>{{ $city->dist ? $city->dist->dist_name : 'N/A' }}</td>
                            <td>{{ $city->city_name }}</td>
                            <td>
                                <input type="checkbox" class="city-checkbox" data-city-id="{{ $city->id }}" {{ $city->is_active ? 'checked' : '' }}>
                            </td>
                        </tr>
                        @endforeach
                    </table>

                    <button id="update-btn" class="btn btn-success mt-3" onclick="updateCityStatus()">Update Selected</button>

                    <div id="alert-box" class="alert"></div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
    function updateCityStatus() {
        let selectedCities = [];

        document.querySelectorAll(".city-checkbox").forEach(function(checkbox) {
            selectedCities.push({
                city_id: checkbox.getAttribute("data-city-id"),
                is_active: checkbox.checked ? 1 : 0
            });
        });

        console.log("Sending Data:", selectedCities);

        fetch("{{ route('cities.updateCityStatus') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').getAttribute("content")
                },
                body: JSON.stringify({
                    selected_cities: selectedCities
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    document.getElementById("alert-box").textContent = data.message;
                    document.getElementById("alert-box").style.display = "block";
                    setTimeout(() => {
                        document.getElementById("alert-box").style.display = "none";
                        window.location.href = "{{ route('cities.index') }}";
                    }, 1000);
                } else {
                    alert("Failed to update city status.");
                }
            })
            .catch(error => {
                console.error("Error:", error);
                alert("An error occurred. Please try again.");
            });
    }
</script>