{% extends 'base.html' %}

{% block title %}Manage Parties - Jambo Management Cloud{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">
            <i class="fas fa-users text-primary"></i>
            Manage Parties
        </h2>
        <div>
            <button class="btn btn-success" onclick="showAddPartyModal()">
                <i class="fas fa-plus"></i> Add New Party
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
                        <div class="card-body">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Filter by Type</label>
                        <select class="form-select" id="typeFilter">
                            <option value="">All Types</option>
                            <option value="supplier">Suppliers</option>
                            <option value="customer">Customers</option>
                            <option value="other">Others</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Search</label>
                        <input type="text" class="form-control" id="searchInput" placeholder="Search by name...">
                    </div>
                </div>
            </div>
                </div>
            </div>

    <!-- Parties Table -->
            <div class="card">
        <div class="card-body">
                    <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                                <tr>
                            <th>Name</th>
                                    <th>Type</th>
                            <th>Phone</th>
                            <th>Email</th>
                                    <th>City</th>
                            <th>Status</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for party in parties %}
                        <tr data-party-id="{{ party.id }}">
                            <td>{{ party.name }}</td>
                            <td>
                                <select class="form-select form-select-sm party-type-select" 
                                        data-party-id="{{ party.id }}"
                                        onchange="updatePartyType(this)">
                                    <option value="supplier" {% if party.party_type == 'supplier' %}selected{% endif %}>Supplier</option>
                                    <option value="customer" {% if party.party_type == 'customer' %}selected{% endif %}>Customer</option>
                                    <option value="other" {% if party.party_type == 'other' %}selected{% endif %}>Other</option>
                                </select>
                                    </td>
                            <td>{{ party.phone or '-' }}</td>
                            <td>{{ party.email or '-' }}</td>
                                    <td>{{ party.city or '-' }}</td>
                                    <td>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" 
                                           {% if party.is_active %}checked{% endif %}
                                           onchange="updatePartyStatus(this, {{ party.id }})">
                                </div>
                                    </td>
                                    <td>
                                <button class="btn btn-sm btn-primary" onclick="editParty({{ party.id }})">
                                                <i class="fas fa-edit"></i>
                                </button>
                                <button class="btn btn-sm btn-danger" onclick="deleteParty({{ party.id }})">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
        </div>
    </div>
</div>

<!-- Add/Edit Party Modal -->
<div class="modal fade" id="partyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalTitle">Add New Party</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="partyForm">
                    <input type="hidden" id="partyId">
                    <div class="mb-3">
                        <label class="form-label">Party Name *</label>
                        <input type="text" class="form-control" id="partyName" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Type *</label>
                        <select class="form-select" id="partyType" required>
                            <option value="supplier">Supplier</option>
                            <option value="customer">Customer</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Phone</label>
                        <input type="text" class="form-control" id="partyPhone">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" id="partyEmail">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Address</label>
                        <textarea class="form-control" id="partyAddress"></textarea>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">City</label>
                        <input type="text" class="form-control" id="partyCity">
                    </div>
                </form>
                </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" onclick="saveParty()">Save Party</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
// Filter parties
$('#typeFilter').on('change', function() {
    filterParties();
});

$('#searchInput').on('keyup', function() {
    filterParties();
});

function filterParties() {
    const typeFilter = $('#typeFilter').val().toLowerCase();
    const searchFilter = $('#searchInput').val().toLowerCase();
    
    $('tbody tr').each(function() {
        const type = $(this).find('.party-type-select').val().toLowerCase();
        const name = $(this).find('td:first').text().toLowerCase();
        
        const matchesType = !typeFilter || type === typeFilter;
        const matchesSearch = !searchFilter || name.includes(searchFilter);
        
        $(this).toggle(matchesType && matchesSearch);
    });
}

// Update party type
function updatePartyType(select) {
    const partyId = $(select).data('party-id');
    const newType = $(select).val();
    
    $.ajax({
        url: '/parties/api/update-type',  // Update URL
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            party_id: partyId,
            party_type: newType
        }),
        success: function(response) {
            if (response.success) {
                showToast('success', 'Party type updated successfully');
            } else {
                showToast('error', response.message);
                // Revert selection
                $(select).val($(select).data('original-type'));
            }
        },
        error: function() {
            showToast('error', 'Error updating party type');
            // Revert selection
            $(select).val($(select).data('original-type'));
        }
    });
}

// Update party status
function updatePartyStatus(checkbox, partyId) {
    const isActive = $(checkbox).prop('checked');
    
    $.ajax({
        url: '/parties/api/update-status',  // Update URL
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({
            party_id: partyId,
            is_active: isActive
        }),
        success: function(response) {
            if (response.success) {
                showToast('success', `Party ${isActive ? 'activated' : 'deactivated'} successfully`);
            } else {
                showToast('error', response.message);
                // Revert checkbox
                $(checkbox).prop('checked', !isActive);
            }
        },
        error: function() {
            showToast('error', 'Error updating party status');
            // Revert checkbox
            $(checkbox).prop('checked', !isActive);
        }
    });
}

// Edit party
function editParty(partyId) {
    $.ajax({
        url: `/parties/api/edit/${partyId}`,  // Update URL
        method: 'GET',
        success: function(response) {
            if (response.success) {
                const party = response.party;
                $('#partyId').val(party.id);
                $('#partyName').val(party.name);
                $('#partyType').val(party.party_type);
                $('#partyPhone').val(party.phone);
                $('#partyEmail').val(party.email);
                $('#partyAddress').val(party.address);
                $('#partyCity').val(party.city);
                
                $('#modalTitle').text('Edit Party');
                $('#partyModal').modal('show');
            } else {
                showToast('error', response.message);
            }
        },
        error: function() {
            showToast('error', 'Error loading party details');
        }
    });
}

// Save party
function saveParty() {
    const partyData = {
        id: $('#partyId').val(),
        name: $('#partyName').val().trim(),
        party_type: $('#partyType').val(),
        phone: $('#partyPhone').val().trim(),
        email: $('#partyEmail').val().trim(),
        address: $('#partyAddress').val().trim(),
        city: $('#partyCity').val().trim()
    };
    
    $.ajax({
        url: '/parties/api/save',  // Update URL
        method: 'POST',
        contentType: 'application/json',
        data: JSON.stringify(partyData),
        success: function(response) {
            if (response.success) {
                showToast('success', response.message);
                $('#partyModal').modal('hide');
                // Reload page to show updated data
                location.reload();
            } else {
                showToast('error', response.message);
            }
        },
        error: function() {
            showToast('error', 'Error saving party');
        }
    });
}

// Delete party
function deleteParty(partyId) {
    if (confirm('Are you sure you want to delete this party?')) {
        $.ajax({
            url: `/parties/api/delete/${partyId}`,  // Update URL
            method: 'POST',
            success: function(response) {
                if (response.success) {
                    showToast('success', response.message);
                    // Remove row from table
                    $(`tr[data-party-id="${partyId}"]`).remove();
                } else {
                    showToast('error', response.message);
                }
            },
            error: function() {
                showToast('error', 'Error deleting party');
            }
        });
    }
}

// Show Add Party Modal
function showAddPartyModal() {
    // Clear form fields
    $('#partyId').val('');
    $('#partyName').val('');
    $('#partyType').val('supplier');
    $('#partyPhone').val('');
    $('#partyEmail').val('');
    $('#partyAddress').val('');
    $('#partyCity').val('');
    
    // Set modal title for Add mode
    $('#modalTitle').text('Add New Party');
    
    // Show modal
    $('#partyModal').modal('show');
}

// Show toast message
function showToast(type, message) {
    // Implement your toast notification here
    alert(message);
}
</script>
{% endblock %}