{% extends 'base.html' %}

{% block title %}Receipt - Politory{% endblock %}

{% block content %}
<style>
    :root {
        --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --primary-color: #667eea;
        --success-color: #28a745;
        --danger-color: #dc3545;
    }

    .btn-gradient {
        background: var(--primary-gradient);
        color: #fff;
        border: none;
        transition: all 0.3s ease;
    }
    .btn-gradient:hover {
        background: linear-gradient(135deg, #5a6fd6 0%, #6a4292 100%);
        color: #fff;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    }
    
    .btn-outline-sales {
        border: 2px solid var(--primary-color);
        color: var(--primary-color);
        background: transparent;
        transition: all 0.3s ease;
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 0.85rem;
    }
    .btn-outline-sales:hover {
        background: var(--primary-gradient);
        color: #fff;
        border-color: transparent;
    }

    .card {
        border-radius: 1rem !important;
        border: none;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    
    .form-control-sm, .form-select-sm {
        font-size: 0.85rem;
        padding: 0.4rem 0.7rem;
        border-radius: 8px;
    }
    
    .form-label-sm {
        font-size: 0.78rem;
        font-weight: 600;
        margin-bottom: 4px;
        color: #495057;
    }

    /* Modal Styles */
    .modal-content { border-radius: 1rem; border: none; }
    .modal-header { background: var(--primary-gradient); color: #fff; border-radius: 1rem 1rem 0 0; }
    
    .search-box { position: relative; }
    .search-box .search-input {
        padding-left: 42px;
        border-radius: 25px;
        border: 2px solid #e9ecef;
        height: 42px;
    }
    .search-box i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #adb5bd;
    }
</style>

<!-- ================= TOAST CONTAINER ================= -->
<div id="toastContainer" style="position:fixed;top:20px;right:20px;z-index:9999;max-width:400px;width:100%;pointer-events:none;"></div>

<!-- ================= MAIN FORM ================= -->
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body p-3 p-md-4">
        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
            <h5 class="fw-bold mb-0"><i class="bi bi-plus-circle text-primary"></i> New Payment Receipt</h5>
            <button type="button" class="btn-outline-sales" data-bs-toggle="modal" data-bs-target="#salesModal">
                <i class="bi bi-search"></i> Select From Pending Sales
            </button>
        </div>
        
        <form id="receiptForm">
            {% csrf_token %}
            <!-- Hidden field for Sell Number -->
            <input type="hidden" id="selectedSellNo" name="sell_no">

            <div class="row g-3">
                <!-- Date -->
                <div class="col-6 col-md-2">
                    <label class="form-label-sm">Date</label>
                    <input type="date" name="date" id="receiptDate" class="form-control form-control-sm" required>
                </div>

                <!-- Party -->
                <div class="col-12 col-md-3">
                    <label class="form-label-sm">Party Name</label>
                    <select class="form-select form-select-sm" name="party" id="partySelect" required>
                        <option value="">-- Choose Party --</option>
                        {% for party in parties %}
                            <option value="{{ party.company_name|default:party.owner_name }}">
                                {{ party.company_name|default:party.owner_name }}
                            </option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Amount -->
                <div class="col-6 col-md-2">
                    <label class="form-label-sm">Amount to Pay</label>
                    <input type="number" step="0.01" name="amount" id="receiptAmount" class="form-control form-control-sm" placeholder="0.00" required>
                </div>
                <!-- Description -->
                <div class="col-12 col-md-3">
                    <label class="form-label-sm">Description / Remarks</label>
                    <input type="text" name="description" id="receiptDesc" class="form-control form-control-sm" placeholder="e.g. Partial payment">
                </div>

                

                <!-- Payment Mode -->
                <div class="col-6 col-md-2">
                    <label class="form-label-sm">Payment Mode</label>
                    <select class="form-select form-select-sm" name="payment_mode" id="paymentMode" required>
                        <option value="Cash">Cash</option>
                        <option value="Bank Transfer">Bank Transfer</option>
                        <option value="Cheque">Cheque</option>
                        <option value="Online">Online</option>
                    </select>
                </div>

                <div class="col-12 mt-3">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-gradient btn-sm px-4">
                            <i class="bi bi-save me-1"></i> Save Payment
                        </button>
                        <button type="reset" class="btn btn-light btn-sm px-4 border" onclick="resetForm()">
                            <i class="bi bi-arrow-clockwise"></i> Clear
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- ================= SALES MODAL ================= -->
<div class="modal fade" id="salesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-table me-2"></i> Pending Sales Invoices</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="search-box mb-3">
                    <i class="bi bi-search"></i>
                    <input type="text" class="form-control search-input" id="salesSearch" placeholder="Search by name, invoice #, or vehicle...">
                </div>
                
                <div id="salesList">
                    <!-- Table dynamic yahan ayegi -->
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
// ================= TOAST SYSTEM =================
function showToast(message, type = 'success') {
    const container = document.getElementById('toastContainer');
    const toast = document.createElement('div');
    toast.style.cssText = `
        background: white; border-radius: 8px; padding: 12px 20px; margin-bottom: 10px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1); border-left: 5px solid ${type==='success'?'#28a745':'#dc3545'};
        pointer-events: auto; transition: 0.3s; opacity: 0; transform: translateX(20px);
    `;
    toast.innerHTML = `<div class="d-flex align-items-center gap-2">
        <strong>${type==='success'?'✅':'⚠️'}</strong>
        <span>${message}</span>
    </div>`;
    container.appendChild(toast);
    setTimeout(() => { toast.style.opacity = '1'; toast.style.transform = 'translateX(0)'; }, 10);
    setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, 3000);
}

// ================= DATE HANDLER =================
document.addEventListener('DOMContentLoaded', () => {
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('receiptDate').value = today;
});

// ================= FETCH SALES DATA =================
document.getElementById('salesModal').addEventListener('show.bs.modal', function() {
    const salesList = document.getElementById('salesList');
    salesList.innerHTML = '<div class="text-center py-5"><div class="spinner-border text-primary"></div></div>';
    
    fetch(`?action=get_sales`)
        .then(res => res.json())
        .then(data => {
            if (data.success) renderSalesTable(data.data);
            else salesList.innerHTML = '<p class="text-danger text-center">Failed to load data.</p>';
        });
});

// ================= RENDER TABLE =================
function renderSalesTable(list) {
    const salesList = document.getElementById('salesList');
    const searchInput = document.getElementById('salesSearch');

    const draw = (filter = '') => {
        const filtered = list.filter(s => 
            s.customer_name.toLowerCase().includes(filter.toLowerCase()) || 
            s.sells_no.toLowerCase().includes(filter.toLowerCase()) ||
            s.vehicle_no.toLowerCase().includes(filter.toLowerCase())
        );

        let html = `
            <div class="table-responsive">
                <table class="table table-hover border">
                    <thead class="table-light">
                        <tr>
                            <th>Inv #</th>
                            <th>Customer</th>
                            <th>Vehicle</th>
                            <th>Remaining Balance</th>
                            <th>Date</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${filtered.map(s => `
                            <tr>
                                <td class="fw-bold">${s.sells_no}</td>
                                <td>${s.customer_name}</td>
                                <td>${s.vehicle_no}</td>
                                <td class="text-danger fw-bold">Rs ${s.remaining_amount.toLocaleString()}</td>
                                <td>${s.date}</td>
                                <td>
                                    <button class="btn btn-sm btn-primary" onclick="selectSale('${s.customer_name}', ${s.remaining_amount}, '${s.sells_no}')">
                                        Select
                                    </button>
                                </td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>`;
        salesList.innerHTML = filtered.length ? html : '<p class="text-center py-4">No matching records found.</p>';
    };

    draw();
    searchInput.oninput = (e) => draw(e.target.value);
}

// ================= SELECT SALE LOGIC =================
function selectSale(name, balance, sellNo) {
    document.getElementById('selectedSellNo').value = sellNo;
    document.getElementById('partySelect').value = name;
    document.getElementById('receiptAmount').value = balance;
    document.getElementById('receiptDesc').value = ` `;
    
    bootstrap.Modal.getInstance(document.getElementById('salesModal')).hide();
    showToast(`Invoice ${sellNo} Selected`, 'success');
}

// ================= FORM SUBMISSION (AJAX) =================
document.getElementById('receiptForm').onsubmit = function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch("{% url 'receipt' %}", {
        method: 'POST',
        body: formData,
        headers: { 'X-CSRFToken': '{{ csrf_token }}' }
    })
    .then(res => res.json())
    .then(data => {
        if(data.success) {
            showToast('Payment Saved Successfully!', 'success');
            setTimeout(() => location.reload(), 1500);
        } else {
            showToast('Error: ' + data.message, 'error');
        }
    })
    .catch(err => showToast('Server Error', 'error'));
};

function resetForm() {
    document.getElementById('selectedSellNo').value = '';
    const today = new Date().toISOString().split('T')[0];
    setTimeout(() => document.getElementById('receiptDate').value = today, 10);
}
</script>
{% endblock %}