@include('purchase::partials.styles')

<div style="padding: 20px;">
    <div class="page-header">
        <h1>
            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" width="28" height="28"><path d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path></svg>
            Add Vendor
        </h1>
        <a href="{{ route('admin.purchase.vendors.index') }}" class="btn btn-outline">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
            Back
        </a>
    </div>

    @if($errors->any())
    <div class="alert alert-danger">
        <ul>@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
    </div>
    @endif

    <form action="{{ route('admin.purchase.vendors.store') }}" method="POST" id="vendorForm">
        @csrf

        <div class="card">
            <div class="card-header"><h5>Basic Information</h5></div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Vendor Code <span class="required">*</span></label>
                        <input type="text" name="vendor_code" class="form-control" value="{{ $vendorCode }}" readonly>
                    </div>
                    <div class="form-group col-2">
                        <label class="form-label">Vendor Name <span class="required">*</span></label>
                        <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" required minlength="2" maxlength="191">
                        @error('name')<div class="invalid-feedback" style="display:block;color:var(--danger)">{{ $message }}</div>@enderror
                    </div>
                    <div class="form-group">
                        <label class="form-label">Display Name</label>
                        <input type="text" name="display_name" class="form-control" value="{{ old('display_name') }}" maxlength="191">
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Contact Person</label>
                        <input type="text" name="contact_person" class="form-control" value="{{ old('contact_person') }}" maxlength="191">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Email</label>
                        <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" maxlength="191">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Phone</label>
                        <input type="tel" name="phone" class="form-control" value="{{ old('phone') }}" maxlength="20">
                        <div class="form-text">Format: +91 9876543210</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Mobile</label>
                        <input type="tel" name="mobile" class="form-control" value="{{ old('mobile') }}" maxlength="20">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h5>Tax Information</h5></div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">GST Type <span class="required">*</span></label>
                        <select name="gst_type" id="gstType" class="form-control" required onchange="toggleGstFields()">
                            <option value="REGISTERED" {{ old('gst_type', 'REGISTERED') == 'REGISTERED' ? 'selected' : '' }}>Registered</option>
                            <option value="UNREGISTERED" {{ old('gst_type') == 'UNREGISTERED' ? 'selected' : '' }}>Unregistered</option>
                            <option value="COMPOSITION" {{ old('gst_type') == 'COMPOSITION' ? 'selected' : '' }}>Composition</option>
                            <option value="SEZ" {{ old('gst_type') == 'SEZ' ? 'selected' : '' }}>SEZ</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">GST Number <span class="required gst-required">*</span></label>
                        <input type="text" name="gst_number" id="gstNumber" class="form-control" value="{{ old('gst_number') }}" maxlength="15" placeholder="22AAAAA0000A1Z5" style="text-transform: uppercase;">
                        <div class="form-text">Format: 22AAAAA0000A1Z5</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">PAN Number <span class="required gst-required">*</span></label>
<input type="text" name="pan_number" id="panNumber" class="form-control @error('pan_number') is-invalid @enderror" value="{{ old('pan_number') }}" maxlength="10" placeholder="AAAAA0000A" style="text-transform: uppercase;" required pattern="[A-Z]{5}[0-9]{4}[A-Z]{1}" title="Enter valid PAN (e.g. AAAAA0000A)">
@error('pan_number')<div class="invalid-feedback" style="display:block;color:var(--danger)">{{ $message }}</div>@enderror                        <div class="form-text">Format: AAAAA0000A</div>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Status <span class="required">*</span></label>
                        <select name="status" class="form-control" required>
                            <option value="ACTIVE" {{ old('status', 'ACTIVE') == 'ACTIVE' ? 'selected' : '' }}>Active</option>
                            <option value="INACTIVE" {{ old('status') == 'INACTIVE' ? 'selected' : '' }}>Inactive</option>
                            <option value="BLOCKED" {{ old('status') == 'BLOCKED' ? 'selected' : '' }}>Blocked</option>
                        </select>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h5>Billing Address</h5></div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group col-full">
                        <label class="form-label">Address</label>
                        <textarea name="billing_address" class="form-control" rows="2">{{ old('billing_address') }}</textarea>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">City</label>
                        <input type="text" name="billing_city" class="form-control" value="{{ old('billing_city') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">State</label>
                        <input type="text" name="billing_state" class="form-control" value="{{ old('billing_state') }}">
                    </div>
                    <div class="form-group">
                        <label class="form-label">PIN Code</label>
                        <input type="text" name="billing_pincode" class="form-control" value="{{ old('billing_pincode') }}" maxlength="10">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Country</label>
                        <input type="text" name="billing_country" class="form-control" value="{{ old('billing_country', 'India') }}">
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h5>Payment Terms</h5></div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Payment Terms</label>
                        <select name="payment_terms" class="form-control">
                            <option value="Immediate" {{ old('payment_terms') == 'Immediate' ? 'selected' : '' }}>Immediate</option>
                            <option value="Net 15" {{ old('payment_terms') == 'Net 15' ? 'selected' : '' }}>Net 15</option>
                            <option value="Net 30" {{ old('payment_terms', 'Net 30') == 'Net 30' ? 'selected' : '' }}>Net 30</option>
                            <option value="Net 45" {{ old('payment_terms') == 'Net 45' ? 'selected' : '' }}>Net 45</option>
                            <option value="Net 60" {{ old('payment_terms') == 'Net 60' ? 'selected' : '' }}>Net 60</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Credit Days</label>
                        <input type="number" name="credit_days" class="form-control" value="{{ old('credit_days', 30) }}" min="0" max="365">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Credit Limit (₹)</label>
                        <input type="number" name="credit_limit" class="form-control" value="{{ old('credit_limit', 0) }}" step="0.01" min="0">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Opening Balance (₹)</label>
                        <input type="number" name="opening_balance" class="form-control" value="{{ old('opening_balance', 0) }}" step="0.01">
                        <div class="form-text">Positive = payable, Negative = advance</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h5>🏦 Bank Details</h5></div>
            <div class="card-body">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Account Holder Name</label>
                        <input type="text" name="bank_account_holder" class="form-control" value="{{ old('bank_account_holder') }}" placeholder="Account holder name">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Bank Name</label>
                        <input type="text" name="bank_name" class="form-control" value="{{ old('bank_name') }}" placeholder="e.g., State Bank of India">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Account Number</label>
                        <input type="text" name="bank_account_number" class="form-control" value="{{ old('bank_account_number') }}" placeholder="Account number">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Account Type</label>
                        <select name="bank_account_type" class="form-control">
                            <option value="CURRENT" {{ old('bank_account_type') == 'CURRENT' ? 'selected' : '' }}>Current</option>
                            <option value="SAVINGS" {{ old('bank_account_type') == 'SAVINGS' ? 'selected' : '' }}>Savings</option>
                            <option value="OTHER" {{ old('bank_account_type') == 'OTHER' ? 'selected' : '' }}>Other</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">IFSC Code</label>
                        <input type="text" name="bank_ifsc" class="form-control" value="{{ old('bank_ifsc') }}" placeholder="e.g., SBIN0001234" style="text-transform: uppercase;">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Branch Name</label>
                        <input type="text" name="bank_branch" class="form-control" value="{{ old('bank_branch') }}" placeholder="Branch name">
                    </div>
                    <div class="form-group col-2">
                        <label class="form-label">UPI ID</label>
                        <input type="text" name="bank_upi_id" class="form-control" value="{{ old('bank_upi_id') }}" placeholder="e.g., vendor@upi">
                    </div>
                </div>
            </div>
        </div>

        <!-- ========== VENDOR ITEMS SECTION ========== -->
        <div class="card">
            <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
                <h5>📦 Vendor Items</h5>
                <button type="button" class="btn btn-primary" id="addVendorItemBtn" style="padding: 6px 16px; font-size: 13px;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    Add Item
                </button>
            </div>
            <div class="card-body" style="padding: 0;">
                <div id="vendorItemsEmpty" style="text-align:center;padding:40px 20px;color:var(--text-secondary);">
                    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:0.4;margin-bottom:12px;">
                        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
                    </svg>
                    <p style="margin:0;">No items added yet. Click <strong>"Add Item"</strong> to add products this vendor supplies.</p>
                </div>
                <div style="overflow-x: auto;">
                    <table class="items-table" id="vendorItemsTable" style="display:none;width:100%;border-collapse:collapse;">
                        <thead>
                            <tr style="background:var(--bg-secondary);border-bottom:2px solid var(--border);">
                                <th style="padding:10px 12px;text-align:left;min-width:250px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);">Product</th>
                                <th style="padding:10px 12px;text-align:left;min-width:100px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);">Vendor SKU</th>
                                <th style="padding:10px 12px;text-align:left;min-width:100px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);">Unit</th>
                                <th style="padding:10px 12px;text-align:right;min-width:120px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);">Purchase Price</th>
                                <th style="padding:10px 12px;text-align:right;min-width:80px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);">MOQ</th>
                                <th style="padding:10px 12px;text-align:right;min-width:80px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);">Lead Days</th>
                                <th style="padding:10px 12px;text-align:center;min-width:70px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);">Preferred</th>
                                <th style="padding:10px 12px;text-align:center;min-width:60px;font-size:12px;font-weight:600;text-transform:uppercase;color:var(--text-secondary);">Action</th>
                            </tr>
                        </thead>
                        <tbody id="vendorItemsBody"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>
                Save Vendor
            </button>
            <a href="{{ route('admin.purchase.vendors.index') }}" class="btn btn-outline">Cancel</a>
        </div>
    </form>
</div>

<!-- Product Search Modal -->
<div id="productSearchModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:9999;justify-content:center;align-items:flex-start;padding-top:80px;">
    <div style="background:var(--bg-primary, #fff);border-radius:12px;width:600px;max-width:90vw;max-height:70vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,0.3);">
        <div style="padding:16px 20px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;">
            <h5 style="margin:0;font-size:16px;">Search Product</h5>
            <button type="button" onclick="closeProductSearch()" style="background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-secondary);">&times;</button>
        </div>
        <div style="padding:12px 20px;border-bottom:1px solid var(--border);">
            <input type="text" id="productSearchInput" class="form-control" placeholder="Search by name, SKU, or barcode..." style="width:100%;" autocomplete="off">
        </div>
        <div id="productSearchResults" style="flex:1;overflow-y:auto;padding:8px;min-height:200px;max-height:400px;">
            <div style="text-align:center;padding:40px;color:var(--text-secondary);">Loading products...</div>
        </div>
    </div>
</div>

<script>
let vendorItemIndex = 0;
let searchTimeout = null;

function toggleGstFields() {
    const gstType = document.getElementById('gstType').value;
    const gstNumber = document.getElementById('gstNumber');
    const gstRequired = document.querySelector('.gst-required');
    
    if (gstType === 'UNREGISTERED') {
        gstNumber.disabled = true;
        gstNumber.value = '';
        gstNumber.removeAttribute('required');
        if(gstRequired) gstRequired.style.display = 'none';
    } else {
        gstNumber.disabled = false;
        gstNumber.setAttribute('required', 'required');
        if(gstRequired) gstRequired.style.display = 'inline';
    }
}

document.getElementById('gstNumber')?.addEventListener('input', function() { this.value = this.value.toUpperCase(); });
document.getElementById('panNumber')?.addEventListener('input', function() { this.value = this.value.toUpperCase(); });
document.addEventListener('DOMContentLoaded', toggleGstFields);

// ========== VENDOR ITEMS MANAGEMENT ==========

document.getElementById('addVendorItemBtn').addEventListener('click', function() {
    openProductSearch();
});

function openProductSearch() {
    const modal = document.getElementById('productSearchModal');
    modal.style.display = 'flex';
    setTimeout(() => document.getElementById('productSearchInput').focus(), 100);
    // Auto-load all products on open
    searchProducts('');
}

function closeProductSearch() {
    document.getElementById('productSearchModal').style.display = 'none';
    document.getElementById('productSearchInput').value = '';
    document.getElementById('productSearchResults').innerHTML = '';
}

// Close modal on backdrop click
document.getElementById('productSearchModal').addEventListener('click', function(e) {
    if (e.target === this) closeProductSearch();
});

// Product search with debounce
document.getElementById('productSearchInput').addEventListener('input', function() {
    clearTimeout(searchTimeout);
    const term = this.value.trim();
    document.getElementById('productSearchResults').innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-secondary);">Searching...</div>';
    searchTimeout = setTimeout(() => searchProducts(term), 300);
});

function searchProducts(term) {
    fetch(`{{ route('admin.purchase.vendors.search-products') }}?q=${encodeURIComponent(term)}`)
        .then(r => r.json())
        .then(results => {
            const container = document.getElementById('productSearchResults');
            if (results.length === 0) {
                container.innerHTML = '<div style="text-align:center;padding:40px;color:var(--text-secondary);">No products found.</div>';
                return;
            }
            container.innerHTML = results.map(item => `
                <div onclick='addVendorItem(${JSON.stringify(item)})' style="padding:10px 12px;cursor:pointer;border-radius:8px;margin:2px 0;display:flex;justify-content:space-between;align-items:center;transition:background 0.15s;" onmouseover="this.style.background='var(--bg-secondary, #f5f5f5)'" onmouseout="this.style.background='none'">
                    <div>
                        <div style="font-weight:500;font-size:14px;">${item.text}</div>
                        <div style="font-size:12px;color:var(--text-secondary);">SKU: ${item.sku || '-'} | Unit: ${item.unit_name || '-'}</div>
                    </div>
                    <div style="font-weight:600;color:var(--primary, #6366f1);">₹${parseFloat(item.price || 0).toFixed(2)}</div>
                </div>
            `).join('');
        })
        .catch(err => {
            document.getElementById('productSearchResults').innerHTML = '<div style="text-align:center;padding:20px;color:var(--danger);">Error searching products.</div>';
        });
}

function addVendorItem(product) {
    // Check for duplicates
    const existing = document.querySelectorAll('input[name^="vendor_items"][name$="[product_id]"]');
    for (let inp of existing) {
        const row = inp.closest('tr');
        const varInput = row.querySelector('input[name$="[variation_id]"]');
        if (inp.value == product.product_id && (varInput.value || '') == (product.variation_id || '')) {
            alert('This product is already added.');
            return;
        }
    }

    const idx = vendorItemIndex++;
    const tbody = document.getElementById('vendorItemsBody');
    const variationLabel = product.variation_name ? `<span style="background:#8b5cf6;color:#fff;padding:1px 6px;border-radius:4px;font-size:11px;margin-left:6px;">${product.variation_name}</span>` : '';

    const row = document.createElement('tr');
    row.style.borderBottom = '1px solid var(--border)';
    row.innerHTML = `
        <td style="padding:10px 12px;">
            <div style="font-weight:500;font-size:13px;">${product.text}</div>
            <div style="font-size:11px;color:var(--text-secondary);margin-top:2px;">SKU: ${product.sku || '-'}</div>
            <input type="hidden" name="vendor_items[${idx}][product_id]" value="${product.product_id}">
            <input type="hidden" name="vendor_items[${idx}][variation_id]" value="${product.variation_id || ''}">
        </td>
        <td style="padding:10px 12px;">
            <input type="text" name="vendor_items[${idx}][vendor_sku]" class="form-control" placeholder="Vendor SKU" style="min-width:90px;">
        </td>
        <td style="padding:10px 12px;">
            <span style="font-size:13px;">${product.unit_name || '-'}</span>
            <input type="hidden" name="vendor_items[${idx}][unit_id]" value="${product.unit_id || ''}">
        </td>
        <td style="padding:10px 12px;">
            <input type="number" name="vendor_items[${idx}][purchase_price]" class="form-control" value="${parseFloat(product.price || 0).toFixed(2)}" step="0.01" min="0" style="text-align:right;min-width:100px;">
        </td>
        <td style="padding:10px 12px;">
            <input type="number" name="vendor_items[${idx}][moq]" class="form-control" value="1" step="0.001" min="0" style="text-align:right;min-width:70px;">
        </td>
        <td style="padding:10px 12px;">
            <input type="number" name="vendor_items[${idx}][lead_days]" class="form-control" value="0" min="0" style="text-align:right;min-width:70px;">
        </td>
        <td style="padding:10px 12px;text-align:center;">
            <input type="checkbox" name="vendor_items[${idx}][is_preferred]" value="1" style="width:18px;height:18px;cursor:pointer;">
        </td>
        <td style="padding:10px 12px;text-align:center;">
            <button type="button" onclick="removeVendorItem(this)" style="background:none;border:none;color:var(--danger, #ef4444);cursor:pointer;padding:4px;" title="Remove">
                <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
            </button>
        </td>
    `;
    tbody.appendChild(row);
    updateVendorItemsVisibility();
    closeProductSearch();
}

function removeVendorItem(btn) {
    btn.closest('tr').remove();
    updateVendorItemsVisibility();
}

function updateVendorItemsVisibility() {
    const rows = document.querySelectorAll('#vendorItemsBody tr');
    const table = document.getElementById('vendorItemsTable');
    const empty = document.getElementById('vendorItemsEmpty');
    if (rows.length > 0) {
        table.style.display = 'table';
        empty.style.display = 'none';
    } else {
        table.style.display = 'none';
        empty.style.display = 'block';
    }
}
</script>