{{>adminheader}}
<link rel="stylesheet" href="/superAdmin/css/summernote-bs4.min.css">
<title>{{title}}</title>

<!-- Toast Container -->


<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> {{title}}</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: #FFEAF3; 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 {{title}}
                                </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">UserName</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Email</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Phone</th>
                                        {{!-- <th class="sorting" tabindex="0" aria-controls="example1">Duration</th> --}}
                                        <th class="sorting" tabindex="0" aria-controls="example1">Purchesed at</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Valid till</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Status</th>
                                        <th class="sorting" tabindex="0" aria-controls="example1">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{#each suscribedusers}}
                                    <tr class="odd">
                                        <td>{{inc @index}}</td>
                                        <td>{{this.userid.username}}</td>
                                        <td>{{this.userid.email}}</td>
                                        <td>{{this.userid.phone}}</td>
                                        {{!-- <td>{{this.subscription.duration}}</td> --}}
                                        <td>{{formatDate1 this.subscription.createdAt}}</td>
                                        <td>{{formatDate1 this.validaty}}</td>
                                        <td>{{this.status}}</td>
                                        <td>
                                            <div class="eye d-flex justify-content-center">
                                                <a href="/admin/users/{{this.userid._id}}" class="btn btn-primary">
                                                    <i class="fa-solid fa-eye"></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/clients/delete/{{this._id}}" type="button" class="btn btn-danger"> yes </a>
            </div>
        </div>
    </div>
</div>

<!-- Add City Modal -->
<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 {{title}}</b></h3>
            </div>
            <form action="/admin/clients" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="email" class="form-label">Image</label>
                        <input type="file" class="form-control" id="image" name="image" required
                            accept=".jpg, .jpeg, .png, .gif">
                        <small class="form-text text-muted">Recommended size: 327X144 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 {{title}}</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 {{title}}</b></h3>
            </div>
            <form id="updateCityForm" action="" method="post" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="editCityImage" class="form-label">{{title}} Image</label>
                        <input type="file" class="form-control" id="image1" name="image"
                            accept=".jpg, .jpeg, .png, .gif">
                        <small class="form-text text-muted">Recommended size: 327X144 pixels</small>
                        <!-- Image Preview -->
                        {{!-- <img id="editCityImagePreview" src="" alt="Image Preview" class="img-thumbnail mt-2"
                            style="max-width: 60px;"> --}}
                    </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 {{title}}</button>
                </div>
            </form>
        </div>
    </div>
</div>


{{>adminfooter}}
</body>

<script>
    // Image validation for Add Partner form
    document.getElementById('image').addEventListener('change', function () {
        validateImage(this);
    });

    // Image validation for Edit Partner form
    document.getElementById('image1').addEventListener('change', function () {
        validateImage(this);
    });

    function validateImage(input) {
        const file = input.files[0];

        if (file) {
            const allowedTypes = ['image/gif', 'image/jpeg', 'image/png'];
            const maxFileSize = 4 * 1024 * 1024; // 4MB

            if (!allowedTypes.includes(file.type)) {
                alert('Only JPG, JPEG, PNG, and GIF files are allowed.');
                input.value = ''; // Clear the file input
                return false;
            }

            if (file.size > maxFileSize) {
                alert('Image size should not exceed 4MB.');
                input.value = ''; // Clear the file input
                return false;
            }

            // Check image dimensions (optional)
            const img = new Image();
            img.src = URL.createObjectURL(file);
            img.onload = function () {
                const width = this.width;
                const height = this.height;

                if (width == 1024 || height == 512) {
                    alert('Image dimensions should be 1024X512 pixels.');
                    input.value = ''; // Clear the file input
                    return false;
                }
            };
        }
    }
</script>

<script>
    $(document).ready(function () {
        if (!$.fn.DataTable.isDataTable('#example2')) {
            $('#example2').addClass('table table-bordered table-striped').DataTable({
                "paging": true,
            });
        }
    });
</script>
<script>
    $(document).ready(function () {
        // Trigger the modal when the edit button is clicked
        $('#editModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // The button that triggered the modal
            var projectId = button.data('id'); // Extract data-id from the button
            var image = button.data('image'); // Extract data-image
            var modal = $(this);

            // Set the form action dynamically for form submission
            modal.find('form').attr('action', '/admin/clients/edit/' + projectId);

            // If you want to handle the image preview (optional)
            if (image) {
                // Update image preview inside the modal
                modal.find('#editCityImagePreview').attr('src', '/path/to/images/' + image);
            } else {
                modal.find('#editCityImagePreview').attr('src', ''); // Clear image preview if no image is present
            }
        });

        // Initialize the DataTable if not already initialized
        if (!$.fn.DataTable.isDataTable('#example2')) {
            $('#example2').addClass('table table-bordered table-striped').DataTable({
                "paging": true,
            });
        }
    });


</script>
<script>
    $(document).ready(function () {
        $('#deleteModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget);
            var projectId = button.data('id');
            var modal = $(this);
            modal.find('a.btn-danger').attr('href', '/admin/clients/delete/' + projectId);
        });
        if (!$.fn.DataTable.isDataTable('#example2')) {
            $('#example2').addClass('table table-bordered table-striped').DataTable({
                "paging": true,
            });
        }
    });
</script>
<script src="/superAdmin/js/summernote-bs4.min.js"></script>

</html>