@extends('layouts.app')
@section('title', $quote->quote_number)
@section('breadcrumb')<a href="{{ route('quotes.index') }}" class="hover:text-white">Quotes</a> <i class="fas fa-chevron-right text-xs mx-1 text-slate-600"></i> <span class="text-white">{{ $quote->quote_number }}</span>@endsection

@section('content')
@php $editable = $quote->status !== 'converted'; @endphp

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6" x-data="quoteBuilder()">

    <div class="lg:col-span-2 space-y-5">

        {{-- Header --}}
        <div class="card p-5">
            <div class="flex items-start justify-between">
                <div>
                    <div class="flex items-center gap-3 mb-1">
                        <h1>{{ $quote->quote_number }}</h1>
                        <span class="badge badge-{{ $quote->statusColor() }} text-sm">{{ $quote->statusLabel() }}</span>
                    </div>
                    <p>{{ $quote->contact?->full_name }} — {{ $quote->job?->job_number }}</p>
                </div>
                <div class="flex gap-2">
                    <a href="{{ route('quotes.edit', $quote) }}" class="btn btn-secondary"><i class="fas fa-edit"></i> Edit</a>
                    <a href="{{ route('quotes.pdf', $quote) }}" target="_blank" class="btn" style="background:#7c3aed;color:#ede9fe;"><i class="fas fa-file-pdf mr-1"></i> Download PDF</a>
                    @if($quote->contact?->email && $editable)
                    <form method="POST" action="{{ route('quotes.send-to-client', $quote) }}" class="inline"
                        onsubmit="return confirm('Send quote email to {{ $quote->contact->email }}?')">@csrf
                        <button class="btn btn-success"><i class="fas fa-envelope mr-1"></i> Send to Client</button>
                    </form>
                    @endif
                </div>
            </div>
        </div>

        {{-- Progress Steps --}}
        <div class="card p-5">
            <h3 class="mb-4">Quote Progress</h3>
            <div class="flex items-center">
                @foreach([['Draft','draft'],['Sent','sent'],['Viewed','viewed'],['Accepted','accepted'],['Converted','converted']] as $i => [$label, $key])
                @php $step = $quote->stepNumber(); @endphp
                <div class="stepper-step">
                    <div class="stepper-circle {{ $i+1 < $step ? 'bg-green-700 text-green-300' : ($i+1 === $step ? 'bg-blue-600 text-white' : 'bg-slate-700 text-slate-500') }}">
                        @if($i+1 < $step)<i class="fas fa-check" style="font-size:10px;"></i>@else{{ $i+1 }}@endif
                    </div>
                    <div class="text-xs mt-1 {{ $i+1 === $step ? 'text-blue-400' : 'text-slate-500' }}">{{ $label }}</div>
                </div>
                @if($i < 4)<div class="flex-1 h-px bg-slate-700 mb-4"></div>@endif
                @endforeach
            </div>
        </div>

        {{-- Quote Line Items --}}
        <div class="card overflow-hidden">
            <div class="p-5 border-b border-slate-700 flex items-center justify-between">
                <h3>Quote Line Items</h3>
                @if($editable)
                <button onclick="toggleForm('add-section-form')" class="btn btn-secondary text-xs py-1.5 px-3">
                    <i class="fas fa-plus mr-1"></i> Add Section
                </button>
                @endif
            </div>

            @if($quote->sections->isEmpty() && $editable)
            <div class="px-5 py-8 text-center">
                <div class="text-slate-500 mb-3">No sections yet. Start by adding a material type section.</div>
                <button onclick="toggleForm('add-section-form')" class="btn btn-primary text-sm">
                    <i class="fas fa-plus mr-2"></i>Add First Section
                </button>
            </div>
            @elseif($quote->sections->isEmpty())
            <div class="px-5 py-8 text-center text-slate-500">No line items</div>
            @endif

            {{-- Each Section --}}
            @foreach($quote->sections as $section)
            <div class="border-b border-slate-700" id="section-{{ $section->id }}">
                {{-- Section Header --}}
                <div class="px-5 py-3 flex items-center justify-between" style="background:#0f172a;">
                    <div class="flex items-center gap-3 flex-1 min-w-0">
                        <span class="text-sm font-semibold text-slate-300">{{ $section->name }}</span>
                        @if($editable)
                        <button onclick="toggleForm('rename-section-{{ $section->id }}')" class="text-slate-500 hover:text-slate-300 text-xs" title="Rename section">
                            <i class="fas fa-pencil-alt"></i>
                        </button>
                        @endif
                    </div>
                    <div class="flex items-center gap-3 shrink-0">
                        <div class="text-xs text-slate-500 text-right">
                            <div>W/Sale: <span class="text-slate-300">${{ number_format($section->items->sum(fn($i)=>(float)($i->total_wsale??0)),2) }}</span></div>
                            <div>Retail: <span class="text-green-400">${{ number_format($section->items->sum(fn($i)=>(float)($i->total_retail??0)),2) }}</span></div>
                        </div>
                        @if($editable)
                        <form method="POST" action="{{ route('quotes.sections.destroy', [$quote, $section]) }}"
                              onsubmit="return confirm('Delete section and all its items?')">
                            @csrf @method('DELETE')
                            <button class="text-slate-600 hover:text-red-400 text-xs"><i class="fas fa-trash"></i></button>
                        </form>
                        @endif
                    </div>
                </div>

                {{-- Rename Section --}}
                @if($editable)
                <div id="rename-section-{{ $section->id }}" class="hidden px-5 py-3 bg-slate-800/60 border-b border-slate-700">
                    <form method="POST" action="{{ route('quotes.sections.update', [$quote, $section]) }}" class="flex items-center gap-3">
                        @csrf @method('PUT')
                        <input type="text" name="name" value="{{ $section->name }}" class="input flex-1 py-1.5 text-sm" required>
                        <button type="submit" class="btn btn-primary text-xs py-1.5 px-3">Save</button>
                        <button type="button" onclick="toggleForm('rename-section-{{ $section->id }}')" class="btn btn-secondary text-xs py-1.5 px-3">Cancel</button>
                    </form>
                </div>
                @endif

                {{-- Items Table --}}
                @if($section->items->isNotEmpty())
                <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-xs text-slate-500 border-b border-slate-800">
                            <th class="text-left px-4 py-2 font-medium">Description</th>
                            <th class="text-left px-2 py-2 font-medium">Item Code</th>
                            <th class="text-left px-2 py-2 font-medium">Unit</th>
                            <th class="text-right px-2 py-2 font-medium">Qty</th>
                            <th class="text-right px-2 py-2 font-medium">W/Sale</th>
                            <th class="text-right px-2 py-2 font-medium">Retail</th>
                            <th class="text-right px-2 py-2 font-medium">Total W/Sale</th>
                            <th class="text-right px-2 py-2 font-medium">Total Retail</th>
                            <th class="text-left px-2 py-2 font-medium">Comments</th>
                            @if($editable)<th class="px-2 py-2"></th>@endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($section->items as $item)
                        <tr class="border-b border-slate-800 hover:bg-slate-800/30">
                            <td class="px-4 py-2 text-white">{{ $item->description }}
                                @if($item->materialType)<span class="ml-1 text-xs text-slate-500">[{{ $item->materialType->name }}]</span>@endif
                            </td>
                            <td class="px-2 py-2 text-slate-400 font-mono text-xs">{{ $item->item_code }}</td>
                            <td class="px-2 py-2 text-slate-400">{{ $item->unit }}</td>
                            <td class="px-2 py-2 text-right text-slate-300">{{ number_format($item->qty,2) }}</td>
                            <td class="px-2 py-2 text-right text-slate-400">${{ number_format($item->wsale_price??0,2) }}</td>
                            <td class="px-2 py-2 text-right text-slate-300">${{ number_format($item->retail_price??$item->unit_price,2) }}</td>
                            <td class="px-2 py-2 text-right text-slate-400">${{ number_format($item->total_wsale??0,2) }}</td>
                            <td class="px-2 py-2 text-right text-green-400 font-medium">${{ number_format($item->total_retail??$item->total,2) }}</td>
                            <td class="px-2 py-2 text-slate-500 text-xs">{{ $item->comments }}</td>
                            @if($editable)
                            <td class="px-2 py-2 text-right whitespace-nowrap">
                                <button onclick="toggleForm('edit-item-{{ $item->id }}')" class="text-slate-500 hover:text-blue-400 text-xs mr-2"><i class="fas fa-pencil-alt"></i></button>
                                <form method="POST" action="{{ route('quotes.items.destroy', [$quote, $section, $item]) }}" class="inline" onsubmit="return confirm('Delete this item?')">
                                    @csrf @method('DELETE')
                                    <button class="text-slate-500 hover:text-red-400 text-xs"><i class="fas fa-times"></i></button>
                                </form>
                            </td>
                            @endif
                        </tr>
                        {{-- Edit Row --}}
                        @if($editable)
                        <tr id="edit-item-{{ $item->id }}" class="hidden bg-slate-800/60 border-b border-slate-700">
                            <td colspan="10" class="px-4 py-4">
                                <form method="POST" action="{{ route('quotes.items.update', [$quote, $section, $item]) }}">
                                    @csrf @method('PUT')
                                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-3">
                                        <div class="md:col-span-2">
                                            <label class="text-xs text-slate-400 mb-1 block">Description *</label>
                                            <input type="text" name="description" value="{{ $item->description }}" class="input text-sm py-1.5" required>
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-400 mb-1 block">Item Code</label>
                                            <input type="text" name="item_code" value="{{ $item->item_code }}" class="input text-sm py-1.5">
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-400 mb-1 block">Unit</label>
                                            <input type="text" name="unit" value="{{ $item->unit }}" class="input text-sm py-1.5">
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-400 mb-1 block">Qty *</label>
                                            <input type="number" name="qty" value="{{ $item->qty }}" class="input text-sm py-1.5" step="0.01" min="0" required>
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-400 mb-1 block">W/Sale Price $</label>
                                            <input type="number" name="wsale_price" value="{{ $item->wsale_price }}" class="input text-sm py-1.5" step="0.01" min="0">
                                        </div>
                                        <div>
                                            <label class="text-xs text-slate-400 mb-1 block">Retail Price $</label>
                                            <input type="number" name="retail_price" value="{{ $item->retail_price??$item->unit_price }}" class="input text-sm py-1.5" step="0.01" min="0">
                                        </div>
                                        <div class="md:col-span-2">
                                            <label class="text-xs text-slate-400 mb-1 block">Comments</label>
                                            <input type="text" name="comments" value="{{ $item->comments }}" class="input text-sm py-1.5">
                                        </div>
                                    </div>
                                    <div class="flex gap-2">
                                        <button type="submit" class="btn btn-primary text-xs py-1.5 px-3">Save</button>
                                        <button type="button" onclick="toggleForm('edit-item-{{ $item->id }}')" class="btn btn-secondary text-xs py-1.5 px-3">Cancel</button>
                                    </div>
                                </form>
                            </td>
                        </tr>
                        @endif
                        @endforeach
                    </tbody>
                </table>
                </div>
                @else
                <div class="px-5 py-3 text-xs text-slate-600 italic">No items yet. Add materials below.</div>
                @endif

                {{-- Add Material to Section --}}
                @if($editable)
                <div id="add-item-{{ $section->id }}" class="hidden border-t border-slate-700 bg-slate-800/40 px-5 py-4" x-data="materialPicker()">
                    <p class="text-xs text-slate-400 mb-3 font-medium uppercase tracking-wide">Add Material to "{{ $section->name }}"</p>
                    <form method="POST" action="{{ route('quotes.items.store', [$quote, $section]) }}">
                        @csrf
                        {{-- Step 1: Select Material Type --}}
                        <div class="grid grid-cols-2 gap-3 mb-3">
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Material Type</label>
                                <select x-model="selectedTypeId" @change="loadMaterials()" class="input text-sm py-1.5">
                                    <option value="">-- Select Type --</option>
                                    @foreach($materialTypes as $type)
                                    <option value="{{ $type->id }}">{{ $type->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div x-show="selectedTypeId">
                                <label class="text-xs text-slate-400 mb-1 block">Select Material (or type custom)</label>
                                <select x-model="selectedMaterialId" @change="fillFromMaterial()" class="input text-sm py-1.5">
                                    <option value="">-- Custom / Manual Entry --</option>
                                    <template x-for="m in materials" :key="m.id">
                                        <option :value="m.id" :data-wsale="m.wsale_price" :data-retail="m.retail_price"
                                            :data-desc="m.description" :data-code="m.item_code" :data-unit="m.unit" :data-comments="m.comments"
                                            x-text="m.description + ' (' + m.item_code + ')'"></option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <input type="hidden" name="material_id" :value="selectedMaterialId">
                        <input type="hidden" name="material_type_id" :value="selectedTypeId">

                        {{-- Material fields --}}
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-3">
                            <div class="md:col-span-2">
                                <label class="text-xs text-slate-400 mb-1 block">Description *</label>
                                <input type="text" name="description" x-model="form.description" class="input text-sm py-1.5" required placeholder="Material description...">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Item Code</label>
                                <input type="text" name="item_code" x-model="form.item_code" class="input text-sm py-1.5" placeholder="e.g. CA-FL">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Unit</label>
                                <input type="text" name="unit" x-model="form.unit" class="input text-sm py-1.5" placeholder="Each, L/m, Job...">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Qty *</label>
                                <input type="number" name="qty" x-model="form.qty" class="input text-sm py-1.5" step="0.01" min="0" required value="1">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">W/Sale Price $ <span class="text-slate-600">(internal)</span></label>
                                <input type="number" name="wsale_price" x-model="form.wsale_price" class="input text-sm py-1.5" step="0.01" min="0">
                            </div>
                            <div>
                                <label class="text-xs text-slate-400 mb-1 block">Retail Price $ <span class="text-green-500">(client)</span></label>
                                <input type="number" name="retail_price" x-model="form.retail_price" class="input text-sm py-1.5" step="0.01" min="0">
                            </div>
                            <div class="md:col-span-2">
                                <label class="text-xs text-slate-400 mb-1 block">Comments</label>
                                <input type="text" name="comments" x-model="form.comments" class="input text-sm py-1.5" placeholder="Optional notes...">
                            </div>
                        </div>
                        <div class="flex gap-2">
                            <button type="submit" class="btn btn-primary text-xs py-1.5 px-3"><i class="fas fa-plus mr-1"></i>Add Item</button>
                            <button type="button" onclick="toggleForm('add-item-{{ $section->id }}')" class="btn btn-secondary text-xs py-1.5 px-3">Cancel</button>
                        </div>
                    </form>
                </div>
                <div class="px-5 py-2 border-t border-slate-800 flex justify-end">
                    <button onclick="toggleForm('add-item-{{ $section->id }}')" class="text-xs text-blue-400 hover:text-blue-300">
                        <i class="fas fa-plus mr-1"></i>Add Material to this section
                    </button>
                </div>
                @endif
            </div>
            @endforeach

            {{-- Add Section Form --}}
            @if($editable)
            <div id="add-section-form" class="hidden border-t border-slate-700 bg-slate-800/40 px-5 py-4">
                <p class="text-xs text-slate-400 mb-3 font-medium uppercase tracking-wide">New Section</p>
                <form method="POST" action="{{ route('quotes.sections.store', $quote) }}" class="flex items-end gap-3">
                    @csrf
                    <div class="flex-1">
                        <label class="text-xs text-slate-400 mb-1 block">Section Name *</label>
                        <input type="text" name="name" placeholder="e.g. Kitchen Cabinetry, Admin, Accessories…" class="input text-sm py-1.5" required>
                    </div>
                    <button type="submit" class="btn btn-primary text-xs py-2 px-4 shrink-0"><i class="fas fa-plus mr-1"></i>Create Section</button>
                    <button type="button" onclick="toggleForm('add-section-form')" class="btn btn-secondary text-xs py-2 px-3 shrink-0">Cancel</button>
                </form>
            </div>
            @if($quote->sections->isNotEmpty())
            <div class="px-5 py-3 border-t border-slate-700 flex justify-center">
                <button onclick="toggleForm('add-section-form')" class="text-xs text-slate-400 hover:text-slate-200">
                    <i class="fas fa-plus mr-1"></i>Add Another Section
                </button>
            </div>
            @endif
            @endif

            {{-- Totals --}}
            <div class="p-5 border-t border-slate-700">
                @php
                    $allItems    = $quote->sections->flatMap->items;
                    $grandWsale  = $allItems->sum(fn($i) => (float)($i->total_wsale ?? 0));
                    $grandRetail = $allItems->sum(fn($i) => (float)($i->total_retail ?? $i->total ?? 0));
                    $gstAmt      = $grandRetail * 0.10;
                @endphp
                <div class="max-w-xs ml-auto space-y-2">
                    <div class="flex justify-between text-sm"><span class="text-slate-400">Total W/Sale (Internal)</span><span class="text-slate-300">${{ number_format($grandWsale,2) }}</span></div>
                    <div class="flex justify-between text-sm"><span class="text-slate-400">Total Retail (Client)</span><span class="text-white">${{ number_format($grandRetail,2) }}</span></div>
                    <div class="flex justify-between text-sm"><span class="text-slate-400">GST (10%)</span><span class="text-white">${{ number_format($gstAmt,2) }}</span></div>
                    <div class="flex justify-between text-base font-bold border-t border-slate-700 pt-2">
                        <span class="text-white">Total incl. GST</span>
                        <span class="text-green-400">${{ number_format($grandRetail + $gstAmt,2) }}</span>
                    </div>
                    <div class="flex justify-between text-sm">
                        <span class="text-blue-400">Gross Profit</span>
                        <span class="text-blue-400">${{ number_format($grandRetail - $grandWsale,2) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Sidebar --}}
    <div class="space-y-4">
        <div class="card p-5">
            <h3 class="mb-3">Quote Summary</h3>
            @php $totalRetail = $quote->sections->flatMap->items->sum(fn($i)=>(float)($i->total_retail??$i->total??0)); @endphp
            <div class="text-3xl font-bold text-white">${{ number_format($totalRetail * 1.10,0) }}</div>
            <div class="text-xs text-slate-500 mt-1">Total inc. GST</div>
            <div class="mt-4 space-y-2">
                <div class="flex justify-between text-sm"><span class="text-slate-400">Valid Until</span><span class="text-white">{{ $quote->valid_until?->format('d M Y') ?? '—' }}</span></div>
                <div class="flex justify-between text-sm"><span class="text-slate-400">Markup</span><span class="text-white">{{ $quote->markup_pct ?? 0 }}%</span></div>
                <div class="flex justify-between text-sm border-t border-slate-700 pt-2">
                    <span class="text-slate-400">Deposit Paid</span>
                    <span class="{{ ($quote->deposit_paid??0)>0 ? 'text-green-400 font-medium' : 'text-slate-500' }}">
                        {{ ($quote->deposit_paid??0)>0 ? '$'.number_format($quote->deposit_paid,2) : 'None recorded' }}
                    </span>
                </div>
            </div>
        </div>

        @if($quote->contact)
        <div class="card p-5">
            <h3 class="mb-3">Client</h3>
            <div class="flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center font-bold text-blue-300">{{ $quote->contact->initials }}</div>
                <div>
                    <div class="text-sm font-medium text-white">{{ $quote->contact->full_name }}</div>
                    @if($quote->contact->email)
                    <a href="mailto:{{ $quote->contact->email }}" class="text-xs text-blue-400">{{ $quote->contact->email }}</a>
                    @endif
                </div>
            </div>
        </div>
        @endif

        <div class="card p-5 space-y-2">
            {{-- Download PDF --}}
            <a href="{{ route('quotes.pdf', $quote) }}" target="_blank"
               class="btn w-full justify-center" style="background:#7c3aed;color:#ede9fe;display:flex;align-items:center;">
                <i class="fas fa-file-pdf mr-2"></i>Download PDF
            </a>
            {{-- Print View --}}
            <a href="{{ route('quotes.print', $quote) }}" target="_blank"
               class="btn btn-secondary w-full justify-center">
                <i class="fas fa-print mr-2"></i>Print / Preview
            </a>
            @if($quote->contact?->email)
            <form method="POST" action="{{ route('quotes.send-to-client', $quote) }}"
                onsubmit="return confirm('Send quote email to {{ $quote->contact->email }}?')">@csrf
                <button class="btn btn-success w-full justify-center"><i class="fas fa-envelope mr-2"></i>Send to Client</button>
            </form>
            @endif
            @if($quote->status === 'draft')
            <form method="POST" action="{{ route('quotes.send', $quote) }}">@csrf
                <button class="btn btn-primary w-full justify-center"><i class="fas fa-paper-plane mr-2"></i>Mark as Sent</button>
            </form>
            @endif
            @if(in_array($quote->status, ['sent','viewed']))
            <form method="POST" action="{{ route('quotes.accept', $quote) }}">@csrf
                <button class="btn btn-success w-full justify-center"><i class="fas fa-check mr-2"></i>Mark Accepted</button>
            </form>
            @endif
            @if($quote->status === 'accepted')
            <form method="POST" action="{{ route('quotes.convert', $quote) }}">@csrf
                <button class="btn w-full justify-center" style="background:#166534;color:#4ade80;"><i class="fas fa-file-signature mr-2"></i>Convert to Contract</button>
            </form>
            @endif
            @if($quote->status === 'draft')
            <form method="POST" action="{{ route('quotes.destroy', $quote) }}" onsubmit="return confirm('Delete this quote?')">@csrf @method('DELETE')
                <button class="btn btn-secondary w-full justify-center text-red-400"><i class="fas fa-trash mr-2"></i>Delete Quote</button>
            </form>
            @endif
        </div>

        {{-- Reports quick links --}}
        <!-- <div class="card p-4">
            <h3 class="mb-3 text-sm">Reports</h3>
            <div class="space-y-2">
                <a href="{{ route('reports.gross-profit-quote', ['quote_id' => $quote->id]) }}" class="btn btn-secondary w-full justify-center text-xs py-2">
                    <i class="fas fa-chart-bar mr-2"></i>Gross Profit Report
                </a>
                <a href="{{ route('reports.client-summary', ['quote_id' => $quote->id]) }}" class="btn btn-secondary w-full justify-center text-xs py-2">
                    <i class="fas fa-file-invoice mr-2"></i>Client Summary Report
                </a>
            </div>
        </div> -->

        @if($quote->notes)
        <div class="card p-5"><h3 class="mb-2">Notes</h3><p>{{ $quote->notes }}</p></div>
        @endif
    </div>
</div>

@if($editable)
<script>
function toggleForm(id) {
    const el = document.getElementById(id);
    if (!el) return;
    el.classList.toggle('hidden');
    if (!el.classList.contains('hidden')) {
        const fi = el.querySelector('input[type="text"], input[type="number"], select');
        if (fi) setTimeout(() => fi.focus(), 50);
    }
}

function materialPicker() {
    return {
        selectedTypeId: '',
        selectedMaterialId: '',
        materials: [],
        form: { description: '', item_code: '', unit: 'Each', qty: 1, wsale_price: '', retail_price: '', comments: '' },
        loadMaterials() {
            this.selectedMaterialId = '';
            this.materials = [];
            if (!this.selectedTypeId) return;
            fetch('/materials/api/type/' + this.selectedTypeId + '/materials')
                .then(r => r.json()).then(d => { this.materials = d; });
        },
        fillFromMaterial() {
            if (!this.selectedMaterialId) return;
            const m = this.materials.find(x => x.id == this.selectedMaterialId);
            if (!m) return;
            this.form.description  = m.description;
            this.form.item_code    = m.item_code || '';
            this.form.unit         = m.unit || 'Each';
            this.form.wsale_price  = m.wsale_price;
            this.form.retail_price = m.retail_price;
            this.form.comments     = m.comments || '';
        }
    };
}
</script>
@endif
@endsection