{{>adminheader}}
<link rel="stylesheet" href="/superAdmin/css/summernote-bs4.min.css">
<title>All Cities</title>
<div class="row p-2" style="margin: 0px !important;">
    <div class="col-md-12">
        <div class="card mt-2" style="border-left: 2px solid black;">
            <div class="card-header">
                <h4><b>Cities</b></h4>
            </div>
            <div class="card-body p-2">
                <div id="example1_wrapper">
                    <div class="row">
                        <div class="col-sm-12">
                            <ol class="float-sm-right">
                                <!-- Button trigger modal -->
                                <button
                                    style="background-color: #ffc107; color:rgb(0, 0, 0); border:none; border-radius:5px; width: 180px; height: 40px;"
                                    type="button" data-bs-toggle="modal" data-bs-target="#addUserModal">
                                    <i class="fa-solid fa-plus"></i> Add City
                                </button>
                            </ol>
                        </div>

                        <div class="col-sm-12 table-responsive">
                            <table id="example2" aria-describedby="example1_info">
                                <thead>
                                    <tr>
                                        <th class="sorting" tabindex="0" aria-controls="example1">S.No</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">City Name</th>
                                        {{!-- <th class="sorting" tabindex="0" aria-controls="example1">Image</th> --}}
                                        <th class="sorting" tabindex="0" aria-controls="example1">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each cities}}
                                    <tr class="odd">
                                        <td>{{inc @index}}</td>
                                        <td>{{this.name}}</td>
                                        {{!-- <td><img src="{{this.image}}" width="150px" height="100px" /></td> --}}
                                        <td>
                                            <div class="eye d-flex justify-content-center">
                                                <a href="javascript:void(0);" data-bs-toggle="modal"
                                                    data-id="{{this._id}}" data-name="{{this.name}}"
                                                    data-image="{{this.image}}" data-bs-target="#editModal"
                                                    class="btn btn-md btn-warning m-1">
                                                    <i class="fa-solid fa-edit"></i>
                                                </a>
                                                {{!-- <a href="javascript:void(0);" data-bs-toggle="modal"
                                                    data-id="{{this._id}}" data-bs-target="#deleteModal"
                                                    class="btn btn-md btn-danger m-1">
                                                    <i class="fa-solid fa-trash"></i>
                                                </a> --}}
                                            </div>
                                        </td>
                                    </tr>
                                    {{/each}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 style="color: black; font-weight: 500;">Are you sure you want to delete this?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
                <a href="/admin/city/{{this._id}}" type="button" class="btn btn-danger"> yes </a>
            </div>
        </div>
    </div>
</div>


{{!-- <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title fs-5" id="addUserModalLabel"><b>Add City</b></h3>
            </div>
            <form id="addCityForm" action="/admin/city" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="username" class="form-label">Name</label>
                        <input type="text" class="form-control" id="username" name="name" required maxlength="30" minlength="3" pattern="[A-Za-z\s]+" title="Only alphabets are allowed">
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Image</label>
                        <input type="file" class="form-control" id="image" name="image" required accept="image/*">
                        <small class="form-text text-muted" style="color: white !important;">Recommended size: 60X60 pixels</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add City</button>
                </div>
            </form>
        </div>
    </div>
</div> --}}
    <div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title fs-5" id="addUserModalLabel"><b>Add City</b></h3>
            </div>
            <form id="addCityForm" action="/admin/city" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="username" class="form-label">Name</label>
                        <input type="text" class="form-control" id="username" name="name" required maxlength="30" minlength="3" pattern="[A-Za-z\s]+" title="Only alphabets are allowed">
                    </div>
                    {{!-- <div class="mb-3">
                        <label for="image" class="form-label">Image</label>
                        <input type="file" class="form-control" id="image" name="image" required accept=".jpeg, .jpg, image/jpeg, image/jpg">
                        <small class="form-text text-muted" style="color: white !important;">Recommended size: 60X60 pixels</small>
                        <!-- Error message will be displayed here -->
                        <p id="error-message" style="color: red;"></p>
                    </div> --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Add City</button>
                </div>
            </form>
        </div>
    </div>
</div>


<!-- Edit City Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title fs-5" id="editModalLabel"><b>Edit City</b></h3>
            </div>
            <form id="updateCityForm" action="/admin/city" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editCityName" class="form-label">City Name</label>
                        <input type="text" class="form-control" id="editCityName" name="name" required maxlength="30" minlength="3" pattern="[A-Za-z\s]+" title="Only alphabets are allowed">
                    </div>
                    {{!-- <div class="mb-3">
                        <label for="editCityImage" class="form-label">City Image</label>
                        <input type="file" class="form-control" id="editCityImage" name="image" accept="image/*">
                        <small class="form-text text-muted" style="color: white !important;">Recommended size: 60X60 pixels</small>
                    </div> --}}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Update City</button>
                </div>
            </form>
        </div>
    </div>
</div>


{{>adminfooter}}
</body>
<script>
    // Ensure that modal reset happens after it's hidden
    var myModal = new bootstrap.Modal(document.getElementById('addUserModal'), {
        backdrop: 'static', 
        keyboard: false
    });

    // Reset form fields when modal is hidden
    document.getElementById('addUserModal').addEventListener('hidden.bs.modal', function () {
        // Reset the form fields
        document.getElementById('addCityForm').reset();
    });
</script>

<script>
    // Get the file input and error message elements
    var fileInput = document.getElementById('image');
    var errorMessage = document.getElementById('error-message');

    // Add an event listener to validate image type when the user selects a file
    fileInput.addEventListener('change', function () {
        var filePath = fileInput.value;

        // Validate file extension
        var allowedExtensions = /(\.jpg|\.jpeg)$/i;
        if (!allowedExtensions.exec(filePath)) {
            // Show the error message
            errorMessage.textContent = 'Only .jpg and .jpeg images are allowed.';
            fileInput.value = ''; // Reset file input to allow re-upload
        } else {
            // Clear the error message if file is valid
            errorMessage.textContent = '';
        }
    });
</script>

<script>
    $(document).ready(function () {
        $('#editModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var cityId = button.data('id'); // Get data-id
            var cityName = button.data('name'); // Get data-name
            var cityImage = button.data('image'); // Get data-image
            
            var modal = $(this);

            // Set form action dynamically
            modal.find('form').attr('action', '/admin/city/' + cityId);

            // Populate modal fields
            modal.find('#editCityName').val(cityName);
            // Note: For file input (editCityImage), you cannot set a value directly due to security reasons.
        });
    });
</script>

</html>