{% extends "base.html" %}

{% block title %}Tune Delivery Data - Daily Mirror{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/daily_mirror_tune.css') }}">
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 mb-0">🚚 Tune Delivery Data</h1>
                    <p class="text-muted">Edit and update delivery records information</p>
                </div>
                <div>
                        <!-- Buttons removed; now present in top header -->
                </div>
            </div>
        </div>
    </div>

    <!-- Filters Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-filter"></i> Filters and Search
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-3">
                            <label for="searchInput" class="form-label">Search</label>
                            <input type="text" class="form-control" id="searchInput" 
                                   placeholder="Search by shipment, customer, or article...">
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="statusFilter" class="form-label">Delivery Status</label>
                            <select class="form-control" id="statusFilter">
                                <option value="">All Statuses</option>
                                <!-- Will be populated dynamically -->
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="customerFilter" class="form-label">Customer</label>
                            <select class="form-control" id="customerFilter">
                                <option value="">All Customers</option>
                                <!-- Will be populated dynamically -->
                            </select>
                        </div>
                        <div class="col-md-3 mb-3">
                            <label for="recordsPerPage" class="form-label">Records per page</label>
                            <select class="form-control" id="recordsPerPage">
                                <option value="25">25</option>
                                <option value="50" selected>50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <button class="btn btn-primary" onclick="loadDeliveryData()">
                                <i class="fas fa-search"></i> Apply Filters
                            </button>
                            <button class="btn btn-secondary" onclick="clearFilters()">
                                <i class="fas fa-times"></i> Clear
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Data Table Section -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="fas fa-table"></i> Delivery Records Data
                    </h5>
                    <div class="d-flex align-items-center">
                        <span id="recordsInfo" class="text-muted me-3"></span>
                        {% if session.get('role') == 'superadmin' %}
                        <button class="btn btn-danger btn-sm me-2" onclick="clearAllDelivery()" id="clearAllBtn">
                            <i class="fas fa-trash-alt"></i> Clear All Delivery
                        </button>
                        {% endif %}
                        <button class="btn btn-success btn-sm" onclick="saveAllChanges()">
                            <i class="fas fa-save"></i> Save All Changes
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover" id="deliveryTable">
                            <thead class="table-dark">
                                <tr>
                                    <th>Shipment ID</th>
                                    <th>Customer</th>
                                    <th>Order ID</th>
                                    <th>Article Code</th>
                                    <th>Description</th>
                                    <th>Quantity</th>
                                    <th>Shipment Date</th>
                                    <th>Delivery Date</th>
                                    <th>Status</th>
                                    <th>Total Value</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="deliveryTableBody">
                                <!-- Data will be loaded here -->
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- Loading indicator -->
                    <div id="loadingIndicator" class="text-center py-4" style="display: none;">
                        <i class="fas fa-spinner fa-spin fa-2x"></i>
                        <p class="mt-2">Loading data...</p>
                    </div>
                    
                    <!-- No data message -->
                    <div id="noDataMessage" class="text-center py-4" style="display: none;">
                        <i class="fas fa-info-circle fa-2x text-muted"></i>
                        <p class="mt-2 text-muted">No delivery records found</p>
                    </div>
                </div>
                
                <!-- Pagination -->
                <div class="card-footer">
                    <nav aria-label="Delivery data pagination">
                        <ul class="pagination pagination-sm justify-content-center mb-0" id="pagination">
                            <!-- Pagination will be generated here -->
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="editModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Delivery Record</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <input type="hidden" id="editRecordId">
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editShipmentId" class="form-label">Shipment ID</label>
                            <input type="text" class="form-control" id="editShipmentId" readonly>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editOrderId" class="form-label">Order ID</label>
                            <input type="text" class="form-control" id="editOrderId">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editCustomerCode" class="form-label">Customer Code</label>
                            <input type="text" class="form-control" id="editCustomerCode">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editCustomerName" class="form-label">Customer Name</label>
                            <input type="text" class="form-control" id="editCustomerName">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editArticleCode" class="form-label">Article Code</label>
                            <input type="text" class="form-control" id="editArticleCode">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editQuantity" class="form-label">Quantity Delivered</label>
                            <input type="number" class="form-control" id="editQuantity">
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="editDescription" class="form-label">Article Description</label>
                        <textarea class="form-control" id="editDescription" rows="2"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editShipmentDate" class="form-label">Shipment Date</label>
                            <input type="date" class="form-control" id="editShipmentDate">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editDeliveryDate" class="form-label">Delivery Date</label>
                            <input type="date" class="form-control" id="editDeliveryDate">
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="editDeliveryStatus" class="form-label">Delivery Status</label>
                            <select class="form-control" id="editDeliveryStatus">
                                <option value="Finalizat">Finalizat</option>
                                <option value="Proiect">Proiect</option>
                                <option value="SHIPPED">Shipped</option>
                                <option value="DELIVERED">Delivered</option>
                                <option value="RETURNED">Returned</option>
                                <option value="PARTIAL">Partial</option>
                                <option value="CANCELLED">Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="editTotalValue" class="form-label">Total Value (€)</label>
                            <input type="number" step="0.01" class="form-control" id="editTotalValue">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times"></i> Cancel
                </button>
                <button type="button" class="btn btn-primary" onclick="saveRecord()">
                    <i class="fas fa-save"></i> Save Changes
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let currentPage = 1;
let currentPerPage = 50;
let currentSearch = '';
let currentStatusFilter = '';
let currentCustomerFilter = '';

document.addEventListener('DOMContentLoaded', function() {
    // Initialize theme
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme === 'dark') {
        document.body.classList.add('dark-mode');
    }
    
    // Load initial data
    loadDeliveryData();
    
    // Setup search on enter key
    document.getElementById('searchInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            loadDeliveryData();
        }
    });
});

function loadDeliveryData(page = 1) {
    currentPage = page;
    currentPerPage = document.getElementById('recordsPerPage').value;
    currentSearch = document.getElementById('searchInput').value;
    currentStatusFilter = document.getElementById('statusFilter').value;
    currentCustomerFilter = document.getElementById('customerFilter').value;
    
    // Show loading indicator
    document.getElementById('loadingIndicator').style.display = 'block';
    document.getElementById('deliveryTableBody').style.display = 'none';
    document.getElementById('noDataMessage').style.display = 'none';
    
    const params = new URLSearchParams({
        page: currentPage,
        per_page: currentPerPage,
        search: currentSearch,
        status: currentStatusFilter,
        customer: currentCustomerFilter
    });
    
    fetch(`/daily_mirror/api/tune/delivery_data?${params}`)
        .then(response => response.json())
        .then(data => {
            document.getElementById('loadingIndicator').style.display = 'none';
            
            if (data.success) {
                if (data.data.length === 0) {
                    document.getElementById('noDataMessage').style.display = 'block';
                } else {
                    displayDeliveryData(data.data);
                    updatePagination(data);
                    updateRecordsInfo(data);
                    
                    // Populate filter dropdowns on first load
                    if (currentPage === 1) {
                        populateCustomerFilter(data.customers);
                        populateStatusFilter(data.statuses);
                    }
                }
            } else {
                console.error('Error loading data:', data.error);
                alert('Error loading delivery data: ' + data.error);
            }
        })
        .catch(error => {
            document.getElementById('loadingIndicator').style.display = 'none';
            console.error('Error:', error);
            alert('Error loading delivery data: ' + error.message);
        });
}

function displayDeliveryData(data) {
    const tbody = document.getElementById('deliveryTableBody');
    tbody.innerHTML = '';
    tbody.style.display = 'table-row-group';
    
    data.forEach(record => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td><strong>${record.shipment_id}</strong></td>
            <td>
                <small class="text-muted d-block">${record.customer_code}</small>
                ${record.customer_name}
            </td>
            <td>${record.order_id || '-'}</td>
            <td><code>${record.article_code}</code></td>
            <td><small>${record.article_description || '-'}</small></td>
            <td><span class="badge bg-info">${record.quantity_delivered}</span></td>
            <td>${record.shipment_date || '-'}</td>
            <td>${record.delivery_date || '-'}</td>
            <td><span class="badge bg-success">${record.delivery_status}</span></td>
            <td><strong>€${parseFloat(record.total_value || 0).toFixed(2)}</strong></td>
            <td>
                <button class="btn btn-sm btn-primary" onclick="editRecord(${record.id})" 
                        title="Edit Delivery">
                    <i class="fas fa-edit"></i>
                </button>
            </td>
        `;
        tbody.appendChild(row);
    });
}

function populateCustomerFilter(customers) {
    const filter = document.getElementById('customerFilter');
    const currentValue = filter.value;
    filter.innerHTML = '<option value="">All Customers</option>';
    
    customers.forEach(customer => {
        const option = document.createElement('option');
        option.value = customer.code;
        option.textContent = `${customer.code} - ${customer.name}`;
        filter.appendChild(option);
    });
    
    filter.value = currentValue;
}

function populateStatusFilter(statuses) {
    const filter = document.getElementById('statusFilter');
    const currentValue = filter.value;
    filter.innerHTML = '<option value="">All Statuses</option>';
    
    statuses.forEach(status => {
        const option = document.createElement('option');
        option.value = status;
        option.textContent = status;
        filter.appendChild(option);
    });
    
    filter.value = currentValue;
}

function updatePagination(data) {
    const pagination = document.getElementById('pagination');
    pagination.innerHTML = '';
    
    if (data.total_pages <= 1) return;
    
    // Previous button
    const prevLi = document.createElement('li');
    prevLi.className = `page-item ${data.page === 1 ? 'disabled' : ''}`;
    prevLi.innerHTML = `<a class="page-link" href="#" onclick="loadDeliveryData(${data.page - 1})">Previous</a>`;
    pagination.appendChild(prevLi);
    
    // Page numbers
    const startPage = Math.max(1, data.page - 2);
    const endPage = Math.min(data.total_pages, data.page + 2);
    
    for (let i = startPage; i <= endPage; i++) {
        const li = document.createElement('li');
        li.className = `page-item ${i === data.page ? 'active' : ''}`;
        li.innerHTML = `<a class="page-link" href="#" onclick="loadDeliveryData(${i})">${i}</a>`;
        pagination.appendChild(li);
    }
    
    // Next button
    const nextLi = document.createElement('li');
    nextLi.className = `page-item ${data.page === data.total_pages ? 'disabled' : ''}`;
    nextLi.innerHTML = `<a class="page-link" href="#" onclick="loadDeliveryData(${data.page + 1})">Next</a>`;
    pagination.appendChild(nextLi);
}

function updateRecordsInfo(data) {
    const start = (data.page - 1) * data.per_page + 1;
    const end = Math.min(data.page * data.per_page, data.total_records);
    document.getElementById('recordsInfo').textContent = 
        `Showing ${start}-${end} of ${data.total_records} deliveries`;
}

function clearFilters() {
    document.getElementById('searchInput').value = '';
    document.getElementById('statusFilter').value = '';
    document.getElementById('customerFilter').value = '';
    loadDeliveryData(1);
}

function editRecord(recordId) {
    // Get data via API for editing
    fetch(`/daily_mirror/api/tune/delivery_data?page=${currentPage}&per_page=${currentPerPage}&search=${currentSearch}&status=${currentStatusFilter}&customer=${currentCustomerFilter}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const recordData = data.data.find(record => record.id === recordId);
                if (recordData) {
                    populateEditModal(recordData);
                    const editModal = new bootstrap.Modal(document.getElementById('editModal'));
                    editModal.show();
                }
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error loading record data: ' + error.message);
        });
}

function populateEditModal(record) {
    document.getElementById('editRecordId').value = record.id;
    document.getElementById('editShipmentId').value = record.shipment_id;
    document.getElementById('editOrderId').value = record.order_id || '';
    document.getElementById('editCustomerCode').value = record.customer_code;
    document.getElementById('editCustomerName').value = record.customer_name;
    document.getElementById('editArticleCode').value = record.article_code;
    document.getElementById('editDescription').value = record.article_description || '';
    document.getElementById('editQuantity').value = record.quantity_delivered;
    document.getElementById('editShipmentDate').value = record.shipment_date;
    document.getElementById('editDeliveryDate').value = record.delivery_date;
    document.getElementById('editDeliveryStatus').value = record.delivery_status;
    document.getElementById('editTotalValue').value = record.total_value;
}

function saveRecord() {
    const recordId = document.getElementById('editRecordId').value;
    const data = {
        customer_code: document.getElementById('editCustomerCode').value,
        customer_name: document.getElementById('editCustomerName').value,
        order_id: document.getElementById('editOrderId').value,
        article_code: document.getElementById('editArticleCode').value,
        article_description: document.getElementById('editDescription').value,
        quantity_delivered: parseInt(document.getElementById('editQuantity').value) || 0,
        shipment_date: document.getElementById('editShipmentDate').value,
        delivery_date: document.getElementById('editDeliveryDate').value,
        delivery_status: document.getElementById('editDeliveryStatus').value,
        total_value: parseFloat(document.getElementById('editTotalValue').value) || 0
    };
    
    fetch(`/daily_mirror/api/tune/delivery_data/${recordId}`, {
        method: 'PUT',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            // Close modal
            const editModal = bootstrap.Modal.getInstance(document.getElementById('editModal'));
            editModal.hide();
            
            // Reload data
            loadDeliveryData(currentPage);
            
            // Show success message
            alert('Delivery record updated successfully!');
        } else {
            alert('Error updating delivery record: ' + result.error);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error updating delivery record: ' + error.message);
    });
}

function saveAllChanges() {
    alert('Save All Changes functionality will be implemented for bulk operations.');
}

function clearAllDelivery() {
    if (!confirm('⚠️ WARNING: This will permanently delete ALL delivery records from the database!\n\nAre you absolutely sure you want to continue?')) {
        return;
    }
    
    // Second confirmation for safety
    if (!confirm('This action CANNOT be undone! All delivery data will be lost.\n\nClick OK to proceed with deletion.')) {
        return;
    }
    
    const clearBtn = document.getElementById('clearAllBtn');
    const originalText = clearBtn.innerHTML;
    clearBtn.disabled = true;
    clearBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Deleting...';
    
    fetch('/daily_mirror/clear_delivery', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ ' + data.message);
            // Reload the page to show empty table
            loadDeliveryData(1);
        } else {
            alert('❌ Error: ' + (data.message || 'Failed to clear delivery records'));
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('❌ Error clearing delivery records: ' + error.message);
    })
    .finally(() => {
        clearBtn.disabled = false;
        clearBtn.innerHTML = originalText;
    });
}
</script>
{% endblock %}