{% extends 'base.html' %}
{% load static %}
{% load custom_filters %}

{% block page_title %}Yearly Sales Targets{% endblock %}

{% block header_actions %}
<div class="btn-group me-2">
    <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addTargetModal">
        <i class="fas fa-plus me-1"></i> Add Target
    </button>
    <a href="{% url 'dashboard' %}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i> Back to Dashboard
    </a>
</div>
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0"><i class="fas fa-bullseye me-2"></i>Yearly Sales Targets - {{ current_year }}</h5>
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-light dropdown-toggle" type="button" id="yearDropdown" data-bs-toggle="dropdown">
                        Year: {{ current_year }}
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="yearDropdown">
                        {% for year in year_range %}
                        <li>
                            <a class="dropdown-item" href="?year={{ year }}">
                                {{ year }}
                            </a>
                        </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <!-- Summary Stats -->
                <div class="row mb-4">
                    <div class="col-md-3">
                        <div class="card text-center border-0 shadow-sm">
                            <div class="card-body">
                                <h3 class="text-primary">{{ targets.count }}</h3>
                                <p class="text-muted mb-0">Total Targets</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center border-0 shadow-sm">
                            <div class="card-body">
                                <h3 class="text-success">{{ completed_targets|default:"0" }}</h3>
                                <p class="text-muted mb-0">Completed</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center border-0 shadow-sm">
                            <div class="card-body">
                                <h3 class="text-warning">{{ in_progress_targets|default:"0" }}</h3>
                                <p class="text-muted mb-0">In Progress</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card text-center border-0 shadow-sm">
                            <div class="card-body">
                                <h3 class="text-danger">{{ not_started_targets|default:"0" }}</h3>
                                <p class="text-muted mb-0">Not Started</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Targets Table -->
                <div class="table-responsive">
                    <table class="table table-hover data-table">
                        <thead class="table-light">
                            <tr>
                                <th>Product</th>
                                <th>Target Quantity</th>
                                <th>Target Revenue</th>
                                <th>Progress</th>
                                <th>Achieved</th>
                                <th>Remaining</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for target in targets %}
                            <tr>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="rounded bg-primary text-white d-flex align-items-center justify-content-center me-3" 
                                             style="width: 40px; height: 40px;">
                                            <i class="fas fa-bullseye"></i>
                                        </div>
                                        <div>
                                            <strong>{{ target.product.name }}</strong>
                                            <small class="text-muted d-block">SKU: {{ target.product.sku }}</small>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <strong>{{ target.target_quantity }}</strong> units
                                </td>
                                <td>
                                    <strong>KSh {{ target.target_revenue|floatformat:2 }}</strong>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="progress flex-grow-1 me-2" style="height: 20px;">
                                            <div class="progress-bar 
                                                {% if target.progress_percentage >= 100 %}bg-success
                                                {% elif target.progress_percentage >= 70 %}bg-warning
                                                {% else %}bg-danger{% endif %}" 
                                                role="progressbar" 
                                                style="width: {{ target.progress_percentage }}%">
                                            </div>
                                        </div>
                                        <span class="small">{{ target.progress_percentage|floatformat:1 }}%</span>
                                    </div>
                                </td>
                                <td>
                                    <div>
                                        <strong>KSh {{ target.revenue_achieved|floatformat:2 }}</strong> KSh
                                        <small class="text-muted d-block">{{ target.sales_count|default:"0" }} sales</small>
                                    </div>
                                </td>
                                <td>
                                    {% with remaining=target.target_quantity|add:"-"|subtract:target.sales_count|default:0 %}
                                    <span class="badge 
                                        {% if remaining <= 0 %}bg-success
                                        {% elif remaining <= target.target_quantity|multiply:0.3 %}bg-warning
                                        {% else %}bg-danger{% endif %}">
                                        {{ remaining }} units
                                    </span>
                                    {% endwith %}
                                </td>
                                <td>
                                    {% if target.progress_percentage >= 100 %}
                                    <span class="badge bg-success">Completed</span>
                                    {% elif target.progress_percentage >= 50 %}
                                    <span class="badge bg-warning">In Progress</span>
                                    {% else %}
                                    <span class="badge bg-danger">Needs Attention</span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button class="btn btn-outline-primary btn-action" 
                                                onclick="editTarget({{ target.id }})"
                                                title="Edit Target">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-outline-danger btn-action" 
                                                onclick="deleteTarget({{ target.id }}, '{{ target.product.name|escapejs }}')"
                                                title="Delete Target">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        <a href="{% url 'sales_report' %}?product_id={{ target.product.id }}&year={{ current_year }}" 
                                           class="btn btn-outline-info btn-action" 
                                           title="View Sales">
                                            <i class="fas fa-chart-bar"></i>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="8" class="text-center py-4">
                                    <i class="fas fa-bullseye fa-3x text-muted mb-3"></i>
                                    <h5>No targets set for {{ current_year }}</h5>
                                    <p class="text-muted">Set your first sales target to track progress throughout the year.</p>
                                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addTargetModal">
                                        <i class="fas fa-plus me-1"></i> Add First Target
                                    </button>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>



<!-- Add/Edit Target Modal -->
<div class="modal fade" id="addTargetModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title">
                    <i class="fas fa-bullseye me-2"></i><span id="modalTitle">Add New Target</span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <!-- Error Container -->
                <div id="targetFormErrors" class="alert alert-danger d-none" role="alert"></div>
                
                <div class="mb-3">
                    <label for="targetProduct" class="form-label">Product <span class="text-danger">*</span></label>
                    <select class="form-select" id="targetProduct" required>
                        <option value="">Select Product</option>
                        {% for product in products %}  <!-- FIXED: Changed from all_products to products -->
                        <option value="{{ product.id }}" data-price="{{ product.unit_price }}">
                            {{ product.name }} ({{ product.sku }})
                        </option>
                        {% empty %}
                        <option value="" disabled>No products available. Add products first.</option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="targetYear" class="form-label">Year <span class="text-danger">*</span></label>
                    <select class="form-select" id="targetYear">
                        {% for year in year_range %}
                        <option value="{{ year }}" {% if year == current_year %}selected{% endif %}>
                            {{ year }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                
                <div class="mb-3">
                    <label for="targetQuantity" class="form-label">Target Quantity <span class="text-danger">*</span></label>
                    <input type="number" min="1" class="form-control" id="targetQuantity" required>
                    <small class="text-muted">Number of units to sell</small>
                </div>
                
                <div class="mb-3">
                    <label for="targetRevenue" class="form-label">Target Revenue (KSh) <span class="text-danger">*</span></label>
                    <div class="input-group">
                        <span class="input-group-text">KSh</span>
                        <input type="number" step="0.01" min="0" class="form-control" id="targetRevenue" required>
                    </div>
                    <small class="text-muted">Expected revenue from sales</small>
                </div>
                
                <div class="alert alert-info">
                    <i class="fas fa-info-circle me-2"></i>
                    <small>Target will be automatically tracked based on sales recorded throughout the year.</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="saveTargetBtn" onclick="saveTarget()">
                    <i class="fas fa-save me-1"></i> Save Target
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteTargetModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle me-2"></i>Confirm Delete
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p id="deleteTargetMessage">Are you sure you want to delete this target?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    This will remove the target but preserve all sales data.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="confirmTargetDeleteBtn">
                    <i class="fas fa-trash me-1"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Notification Container -->
<div id="notificationContainer" style="position: fixed; top: 20px; right: 20px; z-index: 9999;"></div>

<style>
    .progress {
        border-radius: 10px;
    }
    .progress-bar {
        border-radius: 10px;
    }
    .btn-action {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        border-radius: 0.2rem;
    }
    .loading-spinner {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        border: 2px solid currentColor;
        border-radius: 50%;
        border-top-color: transparent;
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
</style>

<script>
    // CSRF Token setup
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    const csrftoken = getCookie('csrftoken');
    
    $.ajaxSetup({
        beforeSend: function(xhr, settings) {
            if (!this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });
    
    // Helper function to show notifications
    function showNotification(message, type = 'success', duration = 5000) {
        const alertClass = {
            'success': 'alert-success',
            'danger': 'alert-danger',
            'warning': 'alert-warning',
            'info': 'alert-info'
        }[type] || 'alert-info';
        
        const alertId = 'alert-' + Date.now();
        const alertHtml = `
            <div id="${alertId}" class="alert ${alertClass} alert-dismissible fade show" role="alert" 
                 style="min-width: 300px; margin-bottom: 10px;">
                ${message}
                <button type="button" class="btn-close" onclick="$('#${alertId}').alert('close')"></button>
            </div>
        `;
        
        $('#notificationContainer').append(alertHtml);
        
        // Auto remove after duration
        setTimeout(function() {
            $(`#${alertId}`).alert('close');
        }, duration);
    }
    
    // Set target for a specific product
    function setTargetForProduct(productId, productName) {
        $('#targetProduct').val(productId);
        $('#modalTitle').text('Set Target for ' + productName);
        $('#addTargetModal').modal('show');
        
        // Auto-fill quantity and revenue
        const selectedOption = $('#targetProduct option:selected');
        const unitPrice = parseFloat(selectedOption.data('price')) || 0;
        if (unitPrice > 0) {
            $('#targetQuantity').val(100); // Default quantity
            $('#targetRevenue').val((100 * unitPrice).toFixed(2));
        }
    }
    
    // Edit target
    function editTarget(targetId) {
        // Fetch target details
        $.ajax({
            url: `/api/target-details/${targetId}/`,
            method: 'GET',
            success: function(target) {
                $('#targetProduct').val(target.product_id);
                $('#targetYear').val(target.year);
                $('#targetQuantity').val(target.target_quantity);
                $('#targetRevenue').val(target.target_revenue);
                $('#modalTitle').text('Edit Target');
                $('#saveTargetBtn').attr('onclick', `updateTarget(${targetId})`);
                $('#addTargetModal').modal('show');
            },
            error: function() {
                showNotification('Error loading target details', 'danger');
            }
        });
    }
    
    // Save new target
    function saveTarget() {
        const productId = $('#targetProduct').val();
        const year = $('#targetYear').val();
        const quantity = $('#targetQuantity').val();
        const revenue = $('#targetRevenue').val();
        
        // Validate
        if (!productId || !quantity || !revenue) {
            showNotification('Please fill all required fields', 'warning');
            return;
        }
        
        if (parseInt(quantity) <= 0) {
            showNotification('Target quantity must be greater than 0', 'warning');
            return;
        }
        
        if (parseFloat(revenue) <= 0) {
            showNotification('Target revenue must be greater than 0', 'warning');
            return;
        }
        
        // Show loading state
        const saveBtn = $('#saveTargetBtn');
        const originalText = saveBtn.html();
        saveBtn.prop('disabled', true).html('<span class="loading-spinner"></span> Saving...');
        
        $.ajax({
            url: '/api/set-target/',
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                product_id: productId,
                year: year,
                target_quantity: quantity,
                target_revenue: revenue
            }),
            success: function(response) {
                if (response.success) {
                    showNotification('Target saved successfully!', 'success');
                    
                    // Reset form and close modal
                    $('#addTargetModal').modal('hide');
                    resetTargetForm();
                    
                    // Reload page after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                    
                } else {
                    showNotification('Error: ' + response.error, 'danger');
                    saveBtn.prop('disabled', false).html(originalText);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', xhr.responseText, error);
                showNotification('An error occurred while saving the target', 'danger');
                saveBtn.prop('disabled', false).html(originalText);
            }
        });
    }
    
    // Update existing target
    function updateTarget(targetId) {
        const productId = $('#targetProduct').val();
        const year = $('#targetYear').val();
        const quantity = $('#targetQuantity').val();
        const revenue = $('#targetRevenue').val();
        
        // Validate
        if (!productId || !quantity || !revenue) {
            showNotification('Please fill all required fields', 'warning');
            return;
        }
        
        if (parseInt(quantity) <= 0) {
            showNotification('Target quantity must be greater than 0', 'warning');
            return;
        }
        
        if (parseFloat(revenue) <= 0) {
            showNotification('Target revenue must be greater than 0', 'warning');
            return;
        }
        
        // Show loading state
        const saveBtn = $('#saveTargetBtn');
        const originalText = saveBtn.html();
        saveBtn.prop('disabled', true).html('<span class="loading-spinner"></span> Updating...');
        
        $.ajax({
            url: `/api/update-target/${targetId}/`,
            method: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({
                product_id: productId,
                year: year,
                target_quantity: quantity,
                target_revenue: revenue
            }),
            success: function(response) {
                if (response.success) {
                    showNotification('Target updated successfully!', 'success');
                    
                    // Reset form and close modal
                    $('#addTargetModal').modal('hide');
                    resetTargetForm();
                    
                    // Reload page after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                    
                } else {
                    showNotification('Error: ' + response.error, 'danger');
                    saveBtn.prop('disabled', false).html(originalText);
                }
            },
            error: function(xhr, status, error) {
                console.error('Error:', error);
                showNotification('An error occurred while updating the target', 'danger');
                saveBtn.prop('disabled', false).html(originalText);
            }
        });
    }
    
    // Reset target form
    function resetTargetForm() {
        $('#targetProduct').val('');
        $('#targetYear').val('{{ current_year }}');
        $('#targetQuantity').val('');
        $('#targetRevenue').val('');
        $('#modalTitle').text('Add New Target');
        $('#saveTargetBtn').attr('onclick', 'saveTarget()');
        $('#targetFormErrors').addClass('d-none').html('');
    }
    
    // Delete target
    let targetToDelete = null;
    
    function deleteTarget(targetId, productName) {
        targetToDelete = targetId;
        $('#deleteTargetMessage').html(`Are you sure you want to delete the target for "<strong>${productName}</strong>"?`);
        $('#deleteTargetModal').modal('show');
    }
    
    $('#confirmTargetDeleteBtn').click(function() {
        if (!targetToDelete) return;
        
        // Show loading state
        $(this).prop('disabled', true).html('<span class="loading-spinner"></span> Deleting...');
        
        $.ajax({
            url: `/api/delete-target/${targetToDelete}/`,
            method: 'POST',
            headers: {
                'X-CSRFToken': csrftoken
            },
            success: function(response) {
                if (response.success) {
                    showNotification(response.message, 'success');
                    
                    // Close modal and reload
                    $('#deleteTargetModal').modal('hide');
                    
                    // Reload page after a short delay
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                    
                } else {
                    showNotification(response.message, 'danger');
                    $('#deleteTargetModal').modal('hide');
                }
            },
            error: function(xhr, status, error) {
                showNotification('An error occurred: ' + error, 'danger');
                $('#deleteTargetModal').modal('hide');
            },
            complete: function() {
                // Reset delete button
                $('#confirmTargetDeleteBtn').prop('disabled', false).html('<i class="fas fa-trash me-1"></i> Delete');
            }
        });
    });
    
    // Auto-calculate revenue based on quantity and product price
    $('#targetQuantity').on('input', function() {
        const productId = $('#targetProduct').val();
        if (productId) {
            // Get product price from selected option
            const selectedOption = $('#targetProduct option:selected');
            const unitPrice = parseFloat(selectedOption.data('price')) || 0;
            const quantity = parseFloat($(this).val()) || 0;
            const revenue = unitPrice * quantity;
            
            if (revenue > 0) {
                $('#targetRevenue').val(revenue.toFixed(2));
            }
        }
    });
    
    // When product is selected, auto-fill revenue
    $('#targetProduct').change(function() {
        const productId = $(this).val();
        if (productId) {
            const selectedOption = $('#targetProduct option:selected');
            const unitPrice = parseFloat(selectedOption.data('price')) || 0;
            const quantity = parseFloat($('#targetQuantity').val()) || 100;
            const revenue = unitPrice * quantity;
            
            if (revenue > 0) {
                $('#targetRevenue').val(revenue.toFixed(2));
            }
        }
    });
    
    // Reset modal when closed
    $('#addTargetModal').on('hidden.bs.modal', function() {
        resetTargetForm();
    });
    
    // Initialize DataTables
    $(document).ready(function() {
        $('.data-table').DataTable({
            pageLength: 25,
            responsive: true,
            dom: '<"row"<"col-sm-12 col-md-6"l><"col-sm-12 col-md-6"f>>rt<"row"<"col-sm-12 col-md-6"i><"col-sm-12 col-md-6"p>>',
            language: {
                search: "_INPUT_",
                searchPlaceholder: "Search targets...",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                infoFiltered: "(filtered from _MAX_ total entries)",
                paginate: {
                    first: "First",
                    last: "Last",
                    next: "Next",
                    previous: "Previous"
                }
            },
            columnDefs: [
                { orderable: false, targets: -1 } // Make actions column not sortable
            ]
        });
    });
</script>
{% endblock %}