{% extends 'assistant/base.html' %}
{% load static %}
{% load i18n %}

{% block sidebar.dashboard %} {% endblock %}
{% block sidebar.patients %} {% endblock %}
{% block sidebar.appointments %} {% endblock %}
{% block sidebar.diets %} {% endblock %}
{% block sidebar.manage_card_tags %} class="active" {% endblock %}

{% block content %}
    <div class="content container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 class="titles">مدیریت تگ‌های کارت‌ها</h1>
                <hr>
            </div>
        </div>
        <form method="post" action="">
            {% csrf_token %}
            <!-- Alert Container -->
            <div id="alertContainer" class="mt-3"></div>

            <!-- Cards Table -->
            <div class="row">
                <div class="col-12">
                    <div class="cards-list">
                        <h3 class="titles" dir="rtl">انتخاب کارت‌ها:</h3>
                        <div class="table-responsive">
                            <table id="cardsTable" class="table table-striped table-bordered diet-template-table" role="table" aria-label="لیست کارت‌ها">
                                <thead class="table-dark">
                                    <tr>
                                        <th>
                                            <div class="form-check">
                                                <input type="checkbox" id="selectAllCards" class="form-check-input" aria-label="انتخاب همه کارت‌ها">
                                                <label class="form-check-label" for="selectAllCards">
                                                    <i class="bi bi-square"></i>
                                                </label>
                                            </div>
                                        </th>
                                        <th>نام کارت</th>
                                        <th>کالری</th>
                                        <th>تگ ها</th>
                                        <th>عملیات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for item in card_data %}
                                        <tr>
                                            <td>
                                                <input type="checkbox" name="card_ids" value="{{ item.card.id }}" class="cardCheckbox" aria-label="انتخاب کارت {{ item.card.FA_Name }}">
                                            </td>
                                            <td dir="rtl">{{ item.card.FA_Name }}</td>
                                            <td>{{ item.card.Calories }}</td>
                                            <td>
                                                {% for tag, active in item.tags.items %}
                                                    {% if active %}
                                                        <span class="tag-card">{{ tag }}</span>
                                                    {% endif %}
                                                {% endfor %}
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-danger btn-sm" onclick="deleteCard(event, '{{ item.card.id }}')">حذف</button>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <hr>

            <!-- Tags Selection -->
            <div class="row">
                <div class="col-12">
                    <div class="tags-selection">
                        <h3 class="titles">انتخاب تگ‌ها:</h3>
                        <div class="tag-container">
                            <div class="tag-wrap">
                                {% for tag_info in tag_info_list %}
                                    <button type="button" class="btn tag-btn" data-tag="{{ tag_info.name }}" data-bs-toggle="tooltip" data-bs-placement="top" title="{{ tag_info.display_name }}">
                                        {{ tag_info.display_name }}
                                    </button>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <!-- Submit Button -->
            <div class="row">
                <div class="col-12 text-center">
                    <button type="button" class="btn btn-success action-btn" onclick="submitTags()">
                        <i class="bi bi-tag"></i> اعمال تگ‌ها به کارت‌های انتخاب شده
                    </button>
                    <button type="button" class="btn btn-danger delete-btn" onclick="deleteSelectedCards()">
                        <i class="bi bi-trash"></i> حذف کارت‌های انتخاب شده
                    </button>
                </div>
            </div>
        </form>
        <div class="m-5"></div>
    </div>

    <style>
        /* General content styling */
        .content {
            background-color: #FAFAFA;
            font-family: 'IranSansWeb', sans-serif;
            margin: 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .titles {
            text-align: center;
            font-size: 24px;
            margin-bottom: 20px;
            color: #009A6E;
        }

        /* Table styles */
        .diet-template-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        .diet-template-table th, .diet-template-table td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            vertical-align: middle;
        }

        .diet-template-table th {
            background-color: #009A6E;
            color: #fff;
            font-weight: bold;
        }

        .diet-template-table tr:hover {
            background-color: #f1f1f1;
        }

        .delete-btn {
            background-color: #dc3545;
            color: white;
            padding: 10px 20px;
            border-radius: 15px;
            border: none;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-left: 10px;
        }

        .delete-btn:hover {
            background-color: #c82333;
        }

        /* Button styles */
        .action-btn {
            background-color: #28a745;
            color: white;
            padding: 10px 20px;
            border-radius: 15px;
            border: none;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .action-btn:hover {
            background-color: #218838;
            color: #fff;
        }

        .tag-card {
            background-color: #FF9900;
            color: white;
            padding: 5px 10px;
            border: none;
            border-radius: 20px;
            font-size: 12px;
            margin: 2px;
            display: inline-block;
        }

        /* Tag button styles */
        .tag-btn {
            background-color: #FF9900;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            margin: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s;
            display: inline-flex;
            align-items: center;
        }

        .tag-btn.active {
            background-color: #007bff;
            color: #fff;
            transform: scale(1.05);
        }

        /* Tag container */
        .tag-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: center;
            margin-bottom: 20px;
        }

        .tag-scrollable {
            max-width: 100%;
            overflow-x: auto;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fff;
            display: flex;
            flex-wrap: nowrap;
        }
        
        /* Tag wrap container */
        .tag-wrap {
            display: flex;
            flex-wrap: wrap; /* Allow wrapping to multiple lines */
            gap: 10px; /* Space between tag buttons */
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #fff;
            max-height: 200px; /* Optional: Set a max height */
            overflow-y: auto; /* Optional: Add vertical scrollbar if content exceeds max height */
        }
        
        /* Tag button styles */
        .tag-btn {
            background-color: #FF9900;
            color: white;
            padding: 8px 16px;
            border: none;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.2s;
            display: inline-flex;
            align-items: center;
        }
        
        .tag-btn.active {
            background-color: #007bff;
            color: #fff;
            transform: scale(1.05);
        }
        
        /* Responsive adjustments */
        @media (max-width: 768px) {
            .tag-btn {
                font-size: 12px;
                padding: 6px 12px;
            }
        
            .tag-wrap {
                max-height: none; /* Remove max height on smaller screens */
                overflow-y: visible;
            }
        }


        /* Responsive adjustments */
        @media (max-width: 768px) {
            .diet-template-table th, .diet-template-table td {
                padding: 8px;
                font-size: 14px;
            }

            .tag-btn {
                font-size: 12px;
                padding: 6px 12px;
            }

            .action-btn, .delete-btn {
                width: 100%;
                padding: 12px;
                margin-bottom: 10px;
            }

            .tag-scrollable {
                max-width: 100%;
            }
        }

        /* Spinner for loading */
        .spinner-border {
            margin-right: 5px;
        }

        /* Tooltip styles */
        .tooltip-inner {
            max-width: 200px;
            /* Set max width for tooltips */
            white-space: pre-wrap;
            /* Allow line breaks */
        }
    </style>

{% endblock %}

{% block script %}
    <!-- jQuery -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <!-- jQuery -->
    <script src="{% static 'panel/assistant/js/jquery-3.2.1.min.js' %}"></script>
    <!-- Popper.js -->
    <script src="{% static 'panel/assistant/js/popper.min.js' %}"></script>
    <!-- Bootstrap JS -->
    <script src="{% static 'panel/assistant/js/bootstrap.min.js' %}"></script>
    <!-- SlimScroll -->
    <script src="{% static 'panel/assistant/js/jquery.slimscroll.js' %}"></script>
    <!-- Select2 -->
    <script src="{% static 'panel/assistant/js/select2.min.js' %}"></script>
    <!-- DataTables JS -->
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/dataTables.bootstrap4.min.js"></script>
    <!-- Moment.js -->
    <script src="{% static 'panel/assistant/js/moment.min.js' %}"></script>
    <!-- Bootstrap Datetimepicker -->
    <script src="{% static 'panel/assistant/js/bootstrap-datetimepicker.min.js' %}"></script>
    <!-- App JS -->
    <script src="{% static 'panel/assistant/js/app.js' %}"></script>
    <script>
        window.CSRF_TOKEN = '{{ csrf_token }}';

        // Initialize Bootstrap tooltips
        $(function () {
            $('[data-bs-toggle="tooltip"]').tooltip()
        });
        
        // Initialize DataTables with server-side processing
        $(document).ready(function() {
        var table = $('#cardsTable').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "{% url 'panel-assistant-manage-card-tags-data' %}",
                "type": "GET",
                "data": function ( d ) {
                    // Collect active tags for filtering (optional)
                    var activeTags = [];
                    $('.tag-btn.active').each(function() {
                        activeTags.push($(this).data('tag'));
                    });
                    // Add tags to the request data
                    d.tags = activeTags;
                    return d;
                }
            },
            "columns": [
                { 
                    "data": "checkbox", 
                    "orderable": false,
                    "searchable": false,
                    "render": function(data, type, row, meta){
                        return data;
                    }
                },
                { "data": "name" },
                { "data": "calories" },
                { 
                    "data": "tags", 
                    "orderable": false, 
                    "searchable": false,
                    "render": function(data, type, row, meta){
                        return data;
                    }
                },
                { 
                    "data": "operations", 
                    "orderable": false, 
                    "searchable": false,
                    "render": function(data, type, row, meta){
                        return data;
                    }
                }
            ],
            "pageLength": 10,
            "lengthChange": false,
            "searching": true,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "language": {
                "processing": "در حال پردازش...",
                "search": "جستجو:",
                "lengthMenu": "نمایش _MENU_ رکورد",
                "info": "نمایش _START_ تا _END_ از _TOTAL_ رکورد",
                "infoEmpty": "نمایش 0 تا 0 از 0 رکورد",
                "infoFiltered": "(فیلتر شده از _MAX_ رکورد)",
                "loadingRecords": "در حال بارگذاری...",
                "zeroRecords": "رکوردی یافت نشد",
                "emptyTable": "جدول خالی است",
                "paginate": {
                    "first": "اولین",
                    "previous": "قبلی",
                    "next": "بعدی",
                    "last": "آخرین"
                },
                "aria": {
                    "sortAscending": ": فعال‌سازی نمایش به صورت صعودی",
                    "sortDescending": ": فعال‌سازی نمایش به صورت نزولی"
                }
            }
        });

        // Toggle select all checkboxes for the current page
        $('#selectAllCards').on('click', function() {
            var rows = table.rows({ 'page': 'current' }).nodes();  // Get rows of the current page
            $('input[type="checkbox"]', rows).prop('checked', this.checked);
        });

        // Handle individual checkbox click to maintain correct "Select All" state
        $('#cardsTable tbody').on('change', 'input[type="checkbox"]', function() {
            if (!this.checked) {
                $('#selectAllCards').prop('checked', false);
            } else {
                var allChecked = table.rows({ 'page': 'current' }).nodes().to$().find('input[type="checkbox"]:not(:checked)').length === 0;
                $('#selectAllCards').prop('checked', allChecked);
            }
        });

        // Initialize tag button toggle and reload DataTables on tag selection
        $('.tag-btn').on('click', function() {
            $(this).toggleClass('active');
            table.ajax.reload();
        });
    });

        // Function to display Bootstrap alerts
        function showAlert(message, type='success') {
            const alertContainer = document.getElementById('alertContainer');
            alertContainer.innerHTML = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="بستن"></button>
                </div>
            `;
        }

        // Function to delete a single card
        function deleteCard(event, cardId) {
            event.stopPropagation(); // Prevent the click event from affecting the rest

            if (confirm('آیا از حذف این کارت مطمئن هستید؟')) {
                // Send AJAX request to delete the card
                $.ajax({
                    url: '/panel/assistant/delete/card/',
                    type: 'POST',
                    data: {
                        'card_id': cardId,
                        'csrfmiddlewaretoken': window.CSRF_TOKEN
                    },
                    success: function(response) {
                        if (response.success) {
                            // Reload DataTables to reflect changes
                            $('#cardsTable').DataTable().ajax.reload(null, false);
                            showAlert('کارت با موفقیت حذف شد.', 'success');
                        } else {
                            showAlert('خطا در حذف کارت: ' + response.message, 'danger');
                        }
                    },
                    error: function(xhr, status, error) {
                        showAlert('خطا در حذف کارت. لطفاً دوباره تلاش کنید.', 'danger');
                    }
                });
            }
        }

        // Function to delete multiple selected cards
        function deleteSelectedCards() {
            const selectedCards = document.querySelectorAll('input[name="card_ids"]:checked');

            if (selectedCards.length === 0) {
                alert('لطفاً کارت‌ها را انتخاب کنید.');
                return;
            }

            if (confirm('آیا از حذف کارت‌های انتخاب شده مطمئن هستید؟')) {
                const cardIds = Array.from(selectedCards).map(card => card.value);

                // Send AJAX request to delete multiple cards
                $.ajax({
                    url: '/panel/assistant/delete/multiple/cards/',
                    type: 'POST',
                    data: {
                        'card_ids': cardIds,
                        'csrfmiddlewaretoken': window.CSRF_TOKEN
                    },
                    traditional: true,  // Ensure correct serialization of the array
                    success: function(response) {
                        if (response.success) {
                            // Reload DataTables to reflect changes
                            $('#cardsTable').DataTable().ajax.reload(null, false);
                            showAlert('کارت‌های انتخاب شده با موفقیت حذف شدند.', 'success');
                        } else {
                            showAlert('خطا در حذف کارت‌ها: ' + response.message, 'danger');
                        }
                    },
                    error: function(xhr, status, error) {
                        showAlert('خطا در حذف کارت‌ها. لطفاً دوباره تلاش کنید.', 'danger');
                    }
                });
            }
        }


        // Function to submit tags
        function submitTags() {
            const selectedCards = document.querySelectorAll('input[name="card_ids"]:checked');
            const selectedTags = document.querySelectorAll('.tag-btn.active');

            if (selectedCards.length === 0 || selectedTags.length === 0) {
                showAlert("لطفا کارت‌ها و تگ‌ها را انتخاب کنید.", 'warning');
                return;
            }

            const formData = new FormData();
            selectedCards.forEach(card => formData.append('card_ids', card.value));
            selectedTags.forEach(tag => formData.append('tags', tag.getAttribute('data-tag')));

            // Show a loading indicator
            const submitButton = document.querySelector('.action-btn');
            submitButton.disabled = true;
            submitButton.innerHTML = `
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                در حال ارسال...
            `;

            fetch('', {  // Empty URL implies the current URL
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(data => {
                showAlert(data.message, data.success ? 'success' : 'danger');
                selectedCards.forEach(card => card.checked = false);
                selectedTags.forEach(tag => tag.classList.remove('active'));
                // Reset submit button
                submitButton.disabled = false;
                submitButton.innerHTML = 'اعمال تگ‌ها به کارت‌های انتخاب شده';
                if (data.success) {
                    // Reload DataTables to reflect changes
                    $('#cardsTable').DataTable().ajax.reload(null, false);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                showAlert('خطا در ارسال اطلاعات.', 'danger');
                // Reset submit button
                submitButton.disabled = false;
                submitButton.textContent = 'اعمال تگ‌ها به کارت‌های انتخاب شده';
            });
        }
    </script>
{% endblock %}