{% extends "base.html" %}

{% block title %}Search - QuantumQuickSales{% endblock %}

{% block page_title %}Search Invoices{% endblock %}

{% block content %}
<div class="card shadow">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">Search Invoices</h6>
    </div>
    <div class="card-body">
        <form method="GET" class="mb-4">
            <div class="row">
                <div class="col-md-8">
                    <input type="text" class="form-control" name="q" placeholder="Search by customer name, phone number, or invoice ID..." value="{{ query or '' }}">
                </div>
                <div class="col-md-4">
                    <button type="submit" class="btn btn-primary w-100">
                        <i class="fas fa-search me-2"></i>Search
                    </button>
                </div>
            </div>
        </form>

        {% if query %}
            {% if results %}
                <div class="table-responsive">
                    <table class="table table-bordered" id="searchTable" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th>Invoice ID</th>
                                <th>Customer Name</th>
                                <th>Phone Number</th>
                                <th>Total Amount</th>
                                <th>Date</th>
                                <th>Created By</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for result in results %}
                            <tr>
                                <td>{{ result[0] }}</td>
                                <td>{{ result[1] }}</td>
                                <td>{{ result[2] }}</td>
                                <td>₹{{ "%.2f"|format(result[3]) }}</td>
                                <td>{{ result[4].strftime('%d/%m/%Y %H:%M') if result[4] else 'N/A' }}</td>
                                <td>{{ result[5] }}</td>
                                <td>
                                    <a href="{{ url_for('view_invoice', invoice_id=result[0]) }}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-eye"></i> View
                                    </a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% else %}
                <div class="text-center py-4">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">No results found</h5>
                    <p class="text-muted">Try searching with different keywords</p>
                </div>
            {% endif %}
        {% else %}
            <div class="text-center py-4">
                <i class="fas fa-search fa-3x text-primary mb-3"></i>
                <h5 class="text-primary">Search Invoices</h5>
                <p class="text-muted">Enter a customer name, phone number, or invoice ID to search</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    if ($('#searchTable').length) {
        $('#searchTable').DataTable({
            "order": [[ 4, "desc" ]],
            "pageLength": 25
        });
    }
});
</script>
{% endblock %}