@extends('layouts.app')
@section('title', 'New PC Build')

@section('breadcrumb')
<li class="breadcrumb-item"><a href="{{ route('pc-builder.index') }}">PC Builder</a></li>
<li class="breadcrumb-item active">New Build</li>
@endsection

@section('content')

<div class="page-header">
    <h1 class="page-title"><i class="bi bi-cpu me-2" style="color:#1d4ed8;"></i>New PC Build</h1>
</div>

<form method="POST" action="{{ route('pc-builder.store') }}" id="buildForm">
@csrf

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

<div class="row g-3">
    <div class="col-12 col-lg-4">
        <div class="card mb-3">
            <div class="card-header fw-600">Build Information</div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Build No.</label>
                    <input type="text" class="form-control" value="{{ $buildNo }}" readonly style="background:#f8fafc;">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Build Name</label>
                    <input type="text" name="build_name" class="form-control" placeholder="e.g. Gaming Build, Office Setup" value="{{ old('build_name') }}">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Customer</label>
                    <select name="customer_id" class="form-select" id="customerSelect">
                        <option value="">— Walk-in —</option>
                        @foreach($customers as $c)
                        <option value="{{ $c->id }}" {{ old('customer_id') == $c->id ? 'selected':'' }}>{{ $c->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Customer Name (if walk-in)</label>
                    <input type="text" name="customer_name" class="form-control" placeholder="Walk-in customer name" value="{{ old('customer_name') }}">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Customer Phone</label>
                    <input type="text" name="customer_phone" class="form-control" placeholder="01XXXXXXXXX" value="{{ old('customer_phone') }}">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Discount (৳)</label>
                    <input type="number" name="discount" id="discountInput" class="form-control" value="{{ old('discount', 0) }}" min="0" step="0.01" oninput="recalcTotals()">
                </div>
                <div class="mb-3">
                    <label class="form-label fw-semibold">Notes</label>
                    <textarea name="notes" class="form-control" rows="3" placeholder="Build notes, customer requirements...">{{ old('notes') }}</textarea>
                </div>
            </div>
        </div>

        <div class="card" style="position:sticky; top:80px;">
            <div class="card-header fw-600"><i class="bi bi-calculator me-2"></i>Build Summary</div>
            <div class="card-body">
                <table class="table table-sm mb-0">
                    <tr>
                        <td class="text-muted">Total Cost</td>
                        <td class="text-end fw-semibold" id="sumCost">৳0.00</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Selling Price</td>
                        <td class="text-end fw-semibold text-primary" id="sumSelling">৳0.00</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Discount</td>
                        <td class="text-end text-danger" id="sumDiscount">৳0.00</td>
                    </tr>
                    <tr class="border-top">
                        <td class="fw-bold">Final Price</td>
                        <td class="text-end fw-bold text-success fs-5" id="sumFinal">৳0.00</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Estimated Profit</td>
                        <td class="text-end fw-semibold" id="sumProfit">৳0.00</td>
                    </tr>
                    <tr>
                        <td class="text-muted">Profit Margin</td>
                        <td class="text-end" id="sumMargin">0%</td>
                    </tr>
                </table>
                <div class="mt-3 d-grid gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-circle me-1"></i> Save Build
                    </button>
                    <a href="{{ route('pc-builder.index') }}" class="btn btn-outline-secondary">Cancel</a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-12 col-lg-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center fw-600">
                <span><i class="bi bi-motherboard me-2"></i>Components</span>
                <button type="button" class="btn btn-sm btn-primary" onclick="addRow()">
                    <i class="bi bi-plus me-1"></i>Add Component
                </button>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table align-middle mb-0" id="componentsTable">
                        <thead class="table-light" style="font-size:.8rem;">
                            <tr>
                                <th style="min-width:130px;">Type</th>
                                <th style="min-width:200px;">Component / Product</th>
                                <th style="min-width:60px;">Qty</th>
                                <th style="min-width:110px;">Cost (৳)</th>
                                <th style="min-width:110px;">Selling (৳)</th>
                                <th style="min-width:100px;">Profit</th>
                                <th style="width:40px;"></th>
                            </tr>
                        </thead>
                        <tbody id="componentRows"></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</form>

@endsection

@push('scripts')
<script>
const componentTypes = @json($componentTypes);
const variants = @json($variantsJson);

let rowIndex = 0;

function addRow(data = {}) {
    const i = rowIndex++;
    const typeOptions = Object.entries(componentTypes).map(([k,v]) =>
        `<option value="${k}" ${data.component_type === k ? 'selected':''}>${v}</option>`
    ).join('');

    const variantOptions = `<option value="">— Type or pick product —</option>` +
        variants.map(v =>
            `<option value="${v.id}" data-cost="${v.cost_price}" data-selling="${v.selling_price}"
             ${data.product_variant_id == v.id ? 'selected':''}>${v.label} (Stock: ${v.current_stock})</option>`
        ).join('');

    const row = document.createElement('tr');
    row.id = `row-${i}`;
    row.innerHTML = `
        <td>
            <select name="items[${i}][component_type]" class="form-select form-select-sm" required>
                ${typeOptions}
            </select>
        </td>
        <td>
            <input type="text" name="items[${i}][component_name]" class="form-control form-control-sm mb-1"
                   placeholder="Component name" value="${data.component_name || ''}" required>
            <select name="items[${i}][product_variant_id]" class="form-select form-select-sm"
                    onchange="fillPricesFromVariant(this, ${i})">
                ${variantOptions}
            </select>
            <input type="text" name="items[${i}][serial_no]" class="form-control form-control-sm mt-1"
                   placeholder="Serial no (optional)" value="${data.serial_no || ''}">
        </td>
        <td>
            <input type="number" name="items[${i}][qty]" class="form-control form-control-sm"
                   value="${data.qty || 1}" min="1" oninput="recalcRow(${i}); recalcTotals();" style="width:70px;">
        </td>
        <td>
            <input type="number" name="items[${i}][unit_cost_price]" id="cost-${i}" class="form-control form-control-sm"
                   value="${data.unit_cost_price || ''}" min="0" step="0.01" placeholder="0.00"
                   oninput="recalcRow(${i}); recalcTotals();">
        </td>
        <td>
            <input type="number" name="items[${i}][unit_selling_price]" id="selling-${i}" class="form-control form-control-sm"
                   value="${data.unit_selling_price || ''}" min="0" step="0.01" placeholder="0.00"
                   oninput="recalcRow(${i}); recalcTotals();">
        </td>
        <td>
            <div class="text-success fw-semibold" id="profit-${i}" style="font-size:.85rem;">৳0.00</div>
            <div class="text-muted" id="margin-${i}" style="font-size:.75rem;">0%</div>
        </td>
        <td>
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeRow(${i})">
                <i class="bi bi-trash"></i>
            </button>
        </td>
    `;
    document.getElementById('componentRows').appendChild(row);

    if (data.unit_cost_price) recalcRow(i);
    recalcTotals();
}

function fillPricesFromVariant(sel, i) {
    const opt = sel.options[sel.selectedIndex];
    if (!opt.value) return;
    const cost    = parseFloat(opt.dataset.cost)    || 0;
    const selling = parseFloat(opt.dataset.selling) || 0;
    document.getElementById(`cost-${i}`).value    = cost.toFixed(2);
    document.getElementById(`selling-${i}`).value = selling.toFixed(2);
    const nameInput = sel.closest('td').querySelector('input[name$="[component_name]"]');
    if (nameInput && !nameInput.value) nameInput.value = opt.text.split(' (Stock:')[0];
    recalcRow(i);
    recalcTotals();
}

function recalcRow(i) {
    const costEl    = document.getElementById(`cost-${i}`);
    const sellingEl = document.getElementById(`selling-${i}`);
    const profitEl  = document.getElementById(`profit-${i}`);
    const marginEl  = document.getElementById(`margin-${i}`);
    if (!costEl || !sellingEl) return;

    const qtyEl = document.querySelector(`#row-${i} input[name$="[qty]"]`);
    const qty  = parseInt(qtyEl?.value) || 1;
    const cost = parseFloat(costEl.value) || 0;
    const sell = parseFloat(sellingEl.value) || 0;
    const profit = (sell - cost) * qty;
    const margin = sell > 0 ? ((sell - cost) / sell * 100).toFixed(1) : 0;

    if (profitEl) profitEl.textContent = '৳' + (profit).toLocaleString('en', {minimumFractionDigits:2});
    if (marginEl) marginEl.textContent = margin + '%';
    profitEl.className = `fw-semibold ${profit >= 0 ? 'text-success' : 'text-danger'}`;
}

function removeRow(i) {
    const row = document.getElementById(`row-${i}`);
    if (row) row.remove();
    recalcTotals();
}

function recalcTotals() {
    let totalCost = 0, totalSell = 0;
    document.querySelectorAll('#componentRows tr').forEach(row => {
        const qty  = parseInt(row.querySelector(`input[name$="[qty]"]`)?.value) || 1;
        const cost = parseFloat(row.querySelector(`input[name$="[unit_cost_price]"]`)?.value) || 0;
        const sell = parseFloat(row.querySelector(`input[name$="[unit_selling_price]"]`)?.value) || 0;
        totalCost += cost * qty;
        totalSell += sell * qty;
    });
    const discount  = parseFloat(document.getElementById('discountInput')?.value) || 0;
    const finalPrice = Math.max(0, totalSell - discount);
    const profit     = finalPrice - totalCost;
    const margin     = totalSell > 0 ? (profit / totalSell * 100).toFixed(1) : 0;

    const fmt = v => '৳' + v.toLocaleString('en', {minimumFractionDigits:2});
    document.getElementById('sumCost').textContent    = fmt(totalCost);
    document.getElementById('sumSelling').textContent = fmt(totalSell);
    document.getElementById('sumDiscount').textContent= '−' + fmt(discount);
    document.getElementById('sumFinal').textContent   = fmt(finalPrice);
    document.getElementById('sumProfit').textContent  = fmt(profit);
    document.getElementById('sumMargin').textContent  = margin + '%';
    document.getElementById('sumProfit').className = `text-end fw-semibold ${profit >= 0 ? 'text-success':'text-danger'}`;
}

const oldItems = @json(old('items', []));
if (oldItems.length > 0) {
    oldItems.forEach(item => addRow(item));
} else {
    ['processor','motherboard','ram','ssd','gpu','psu','casing'].forEach(type => {
        addRow({ component_type: type, component_name: '', qty: 1 });
    });
}
</script>
@endpush