@extends('garage.layouts.app')

@section('title', 'Add Package')

@push('styles')
@include('shared.garage-purchase-order-ui-styles')
@endpush

@section('content')
<div class="gpo-page container-fluid px-2 px-lg-3 py-2">
    <div class="gpo-hero">
        <h1><i class="bi bi-box2-heart me-2" style="color:#0d9488;"></i>Package</h1>
        <p>Create a fixed-price offer bundle. Add Parts + Services from <strong>Quick add</strong> (left). The bundle price can be lower than the sum for marketing offers.</p>
    </div>

    @if(session('error'))
        <div class="alert alert-danger py-2 small mb-2">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="alert alert-danger py-2 small mb-2">
            <ul class="mb-0 ps-3">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="POST" action="{{ route('garage.packages.store') }}" id="pkgForm">
        @csrf

        <div class="gpo-split">
            <div class="gpo-panel gpo-panel-inv">
                <div class="gpo-panel-hd teal gpo-inv-panel-hd">
                    <span class="gpo-inv-hd-title"><i class="bi bi-lightning-charge"></i> Quick add</span>
                </div>
                <div class="gpo-panel-bd">
                    <ul class="nav nav-pills mb-2 gs-quick-tabs gs-quick-tabs-2" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pkg-tab-parts" data-bs-toggle="pill" data-bs-target="#pkg-pane-parts" type="button" role="tab">
                                <i class="bi bi-box-seam me-1"></i>Parts
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pkg-tab-services" data-bs-toggle="pill" data-bs-target="#pkg-pane-services" type="button" role="tab">
                                <i class="bi bi-wrench-adjustable me-1"></i>Services
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="pkg-pane-parts" role="tabpanel" aria-labelledby="pkg-tab-parts">
                            <div class="gpo-inv-toolbar">
                                <input type="search" class="gpo-search" id="pkgPartSearch" placeholder="Search SKU, part name…" autocomplete="off">
                                <div class="gpo-inv-filter-line">
                                    <span id="pkgPartFilterLabel"><strong>{{ count($parts ?? []) }}</strong> parts</span>
                                    <span class="badge rounded-pill" id="pkgPartCount">{{ count($parts ?? []) }}</span>
                                </div>
                            </div>
                            <div class="gpo-inv-scroll" id="pkgPartList"></div>
                        </div>
                        <div class="tab-pane fade" id="pkg-pane-services" role="tabpanel" aria-labelledby="pkg-tab-services">
                            <div class="p-2 rounded-3" style="background:#f8fafc;border:1px solid #e5e7eb;">
                                <div class="gpo-lbl mb-1">Add service</div>
                                <div class="d-flex flex-wrap gap-2 align-items-end">
                                    <div style="min-width:180px;flex:1;">
                                        <div class="gpo-lbl">Category</div>
                                        <select class="gpo-sel" id="pkgQuickSvcCat">
                                            <option value="">— All —</option>
                                        </select>
                                    </div>
                                    <div style="min-width:220px;flex:2;">
                                        <div class="gpo-lbl">Service</div>
                                        <input type="search" class="gpo-inp mb-1" id="pkgQuickSvcSearch" placeholder="Type and press Enter to add…" autocomplete="off">
                                        <select class="gpo-sel" id="pkgQuickSvcId">
                                            <option value="">— Select —</option>
                                        </select>
                                    </div>
                                    <div style="min-width:90px;">
                                        <div class="gpo-lbl">Qty</div>
                                        <input type="number" step="0.01" min="0.01" class="gpo-inp" id="pkgQuickSvcQty" value="1">
                                    </div>
                                    <div style="min-width:120px;">
                                        <div class="gpo-lbl">Rate</div>
                                        <input type="number" step="0.01" min="0" class="gpo-inp" id="pkgQuickSvcRate" value="0" readonly>
                                    </div>
                                    <div style="min-width:120px;">
                                        <button type="button" class="btn btn-sm btn-outline-primary" id="pkgQuickSvcAddBtn">
                                            <i class="bi bi-plus-lg me-1"></i>Add
                                        </button>
                                    </div>
                                </div>
                                <div class="small text-muted mt-2">Services you add will appear in the Services table on the right.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="gpo-panel">
                <div class="gpo-panel-hd">
                    <span><i class="bi bi-clipboard2-check me-1"></i>Package detail</span>
                    <a href="{{ route('garage.packages.index') }}" class="btn btn-sm btn-outline-secondary py-0 px-2">Back</a>
                </div>
                <div class="gpo-panel-bd">
                    <div class="gpo-form-grid cols-4 mb-2">
                        <div style="grid-column: span 2;">
                            <div class="gpo-lbl">Package name <span class="text-danger">*</span></div>
                            <input type="text" class="gpo-inp" name="name" value="{{ old('name') }}" required>
                        </div>
                        <div>
                            <div class="gpo-lbl">Code</div>
                            <input type="text" class="gpo-inp" name="code" value="{{ old('code') }}" placeholder="Optional">
                        </div>
                        <div>
                            <div class="gpo-lbl">Offer price (PKR) <span class="text-danger">*</span></div>
                            <input type="number" step="0.01" min="0" class="gpo-inp" name="package_price" value="{{ old('package_price', '0') }}" required>
                        </div>
                        <div style="grid-column: span 4;">
                            <div class="gpo-lbl">Description</div>
                            <textarea class="gpo-inp" rows="2" name="description" placeholder="Short marketing description…">{{ old('description') }}</textarea>
                        </div>
                        <div style="grid-column: span 4;">
                            <label class="d-flex align-items-center gap-2 small" style="font-weight:700;color:#475569;">
                                <input type="checkbox" name="is_active" value="1" @checked(old('is_active', true))>
                                Active
                            </label>
                        </div>
                    </div>

                    <input type="hidden" name="items" id="itemsInput" value="">

                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-1">
                        <div class="gpo-lbl mb-0">Bundle items</div>
                        <div class="small text-muted">Parts and Services are kept separate.</div>
                    </div>

                    <div class="gpo-cart-scroll table-responsive">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-1">
                            <div class="small fw-bold text-dark">Parts</div>
                            <div class="small text-muted">Count: <span id="pkgPartsInBundle">0</span></div>
                        </div>
                        <table class="table table-sm align-middle gpo-lines mb-3">
                            <thead class="table-light">
                                <tr>
                                    <th>Part</th>
                                    <th style="width:120px;">Qty</th>
                                    <th style="width:140px;" class="text-end">Unit</th>
                                    <th style="width:70px;" class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody id="pkgItemsBodyParts">
                                <tr><td colspan="4" class="text-center text-muted py-4">No parts yet.</td></tr>
                            </tbody>
                        </table>

                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-1">
                            <div class="small fw-bold text-dark">Services</div>
                            <div class="small text-muted">Count: <span id="pkgServicesInBundle">0</span></div>
                        </div>
                        <table class="table table-sm align-middle gpo-lines mb-0">
                            <thead class="table-light">
                                <tr>
                                    <th>Service</th>
                                    <th style="width:120px;">Qty</th>
                                    <th style="width:140px;" class="text-end">Unit</th>
                                    <th style="width:70px;" class="text-end">Action</th>
                                </tr>
                            </thead>
                            <tbody id="pkgItemsBodyServices">
                                <tr><td colspan="4" class="text-center text-muted py-4">No services yet.</td></tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="gpo-actions mt-2">
                        <a href="{{ route('garage.packages.index') }}" class="gpo-btn-ghost text-decoration-none">Cancel</a>
                        <button type="submit" class="gpo-btn-save"><i class="bi bi-check2-circle me-1"></i>Save package</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const PARTS = @json($partsForJs ?? []);
    const SERVICES = @json($servicesForJs ?? []);
    const SVC_CATS = @json($garageServiceCategories ?? []);

    let items = [];

    function escapeHtml(s) {
        if (!s) return '';
        return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }
    function moneyCompact(n) {
        const x = Number(n) || 0;
        const hasCents = Math.round(x * 100) % 100 !== 0;
        return x.toLocaleString('en-PK', hasCents ? { minimumFractionDigits: 2, maximumFractionDigits: 2 } : { maximumFractionDigits: 0 });
    }

    function setHidden() {
        const hid = document.getElementById('itemsInput');
        if (hid) hid.value = JSON.stringify(items);
    }

    function renderItems() {
        const bodyP = document.getElementById('pkgItemsBodyParts');
        const bodyS = document.getElementById('pkgItemsBodyServices');
        if (!bodyP || !bodyS) return;

        const parts = items.map((it, idx) => ({ it, idx })).filter(x => x.it.item_type === 'part');
        const svcs = items.map((it, idx) => ({ it, idx })).filter(x => x.it.item_type === 'service');

        const pCount = document.getElementById('pkgPartsInBundle');
        const sCount = document.getElementById('pkgServicesInBundle');
        if (pCount) pCount.textContent = String(parts.length);
        if (sCount) sCount.textContent = String(svcs.length);

        bodyP.innerHTML = parts.length ? parts.map(function (x) {
            const it = x.it;
            const idx = x.idx;
            const nm = escapeHtml(it.title || '—');
            return '<tr data-idx="' + idx + '">' +
                '<td><div class="fw-semibold">' + nm + '</div></td>' +
                '<td><input type="number" min="0.01" step="0.01" class="form-control form-control-sm js-qty" value="' + (Number(it.quantity)||1) + '"></td>' +
                '<td class="text-end"><input type="number" min="0" step="0.01" class="form-control form-control-sm js-unit text-end" value="' + (Number(it.unit_price_snapshot)||0) + '"></td>' +
                '<td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger js-del"><i class="bi bi-x-lg"></i></button></td>' +
            '</tr>';
        }).join('') : '<tr><td colspan="4" class="text-center text-muted py-4">No parts yet.</td></tr>';

        bodyS.innerHTML = svcs.length ? svcs.map(function (x) {
            const it = x.it;
            const idx = x.idx;
            const nm = escapeHtml(it.title || '—');
            return '<tr data-idx="' + idx + '">' +
                '<td><div class="fw-semibold">' + nm + '</div></td>' +
                '<td><input type="number" min="0.01" step="0.01" class="form-control form-control-sm js-qty" value="' + (Number(it.quantity)||1) + '"></td>' +
                '<td class="text-end"><input type="number" min="0" step="0.01" class="form-control form-control-sm js-unit text-end" value="' + (Number(it.unit_price_snapshot)||0) + '"></td>' +
                '<td class="text-end"><button type="button" class="btn btn-sm btn-outline-danger js-del"><i class="bi bi-x-lg"></i></button></td>' +
            '</tr>';
        }).join('') : '<tr><td colspan="4" class="text-center text-muted py-4">No services yet.</td></tr>';

        setHidden();
    }

    function addPart(partId, qty) {
        const p = PARTS.find(x => Number(x.id) === Number(partId));
        if (!p) return;
        items.push({
            item_type: 'part',
            garage_part_id: p.id,
            garage_service_id: null,
            title: p.name,
            quantity: Math.max(0.01, Number(qty) || 1),
            unit_price_snapshot: Number(p.selling_price) || 0,
            notes: null
        });
        renderItems();
    }

    function addService(serviceId, qty) {
        const s = SERVICES.find(x => Number(x.id) === Number(serviceId));
        if (!s) return;
        items.push({
            item_type: 'service',
            garage_part_id: null,
            garage_service_id: s.id,
            title: s.name,
            quantity: Math.max(0.01, Number(qty) || 1),
            unit_price_snapshot: Number(s.price) || 0,
            notes: null
        });
        renderItems();
    }

    function renderQuickParts() {
        const q = (document.getElementById('pkgPartSearch')?.value || '').toLowerCase().trim();
        const el = document.getElementById('pkgPartList');
        const cnt = document.getElementById('pkgPartCount');
        if (!el) return;
        const filtered = PARTS.filter(function (p) {
            if (!q) return true;
            const blob = [p.name, p.inventory_code].filter(Boolean).join(' ').toLowerCase();
            return blob.includes(q);
        });
        if (cnt) cnt.textContent = String(filtered.length);
        if (!filtered.length) { el.innerHTML = '<div class="gpo-inv-empty">No matches.</div>'; return; }
        el.innerHTML = filtered.map(function (p) {
            const code = p.inventory_code || '—';
            const nm = escapeHtml(p.name);
            const meta = 'Unit ' + moneyCompact(p.selling_price || 0);
            return '<div class="gpo-inv-row">' +
                '<div class="gpo-inv-row-detail">' +
                    '<div class="gpo-inv-row-top">' +
                        '<span class="gpo-inv-sku" title="' + escapeHtml(code) + '">' + escapeHtml(code) + '</span>' +
                        '<span class="gpo-inv-name" title="' + nm + '">' + nm + '</span>' +
                    '</div>' +
                    '<div class="gpo-inv-inline-meta">' + meta + '</div>' +
                '</div>' +
                '<div class="gpo-inv-row-actions">' +
                    '<input type="number" min="0.01" step="0.01" value="1" class="gpo-inv-qty" data-qty-for="part" data-id="' + p.id + '">' +
                    '<button type="button" class="gpo-inv-add-btn" data-add-part="' + p.id + '"><span class="gpo-inv-add-lbl"><i class="bi bi-plus-lg"></i> Add</span></button>' +
                '</div>' +
            '</div>';
        }).join('');
    }

    // ---- Quick add services (left tab) ----
    const qCat = document.getElementById('pkgQuickSvcCat');
    const qSvc = document.getElementById('pkgQuickSvcId');
    if (qCat && qSvc) {
        qCat.innerHTML = '<option value="">— All —</option>' + (SVC_CATS || []).map(function (c) {
            return '<option value="' + escapeHtml(String(c.id)) + '">' + escapeHtml(String(c.name)) + '</option>';
        }).join('');

        function fillQuickServices(catId, searchText) {
            const q = String(searchText || '').toLowerCase().trim();
            const list = (SERVICES || []).filter(function (s) {
                if (catId && String(s.garage_part_category_id || '') !== String(catId)) return false;
                if (!q) return true;
                return String(s.name || '').toLowerCase().includes(q);
            });
            qSvc.innerHTML = '<option value="">— Select —</option>' + list.map(function (s) {
                return '<option value="' + s.id + '" data-price="' + (Number(s.price) || 0) + '">' + escapeHtml(s.name) + '</option>';
            }).join('');
        }
        fillQuickServices(null, null);

        qCat.addEventListener('change', function () {
            fillQuickServices(this.value, document.getElementById('pkgQuickSvcSearch')?.value || '');
        });
        const qSearch = document.getElementById('pkgQuickSvcSearch');
        if (qSearch) {
            qSearch.addEventListener('input', function () {
                fillQuickServices(qCat.value || null, qSearch.value || '');
            });
            qSearch.addEventListener('keydown', function (e) {
                if (e.key !== 'Enter') return;
                e.preventDefault();
                fillQuickServices(qCat.value || null, qSearch.value || '');
                const first = qSvc.querySelector('option[value]:not([value=""])');
                if (first) {
                    qSvc.value = first.value;
                    qSvc.dispatchEvent(new Event('change'));
                    document.getElementById('pkgQuickSvcAddBtn')?.click();
                }
            });
        }
        qSvc.addEventListener('change', function () {
            const opt = this.options[this.selectedIndex];
            if (!opt) return;
            document.getElementById('pkgQuickSvcRate').value = String(Number(opt.getAttribute('data-price') || 0));
        });
        const addBtn = document.getElementById('pkgQuickSvcAddBtn');
        if (addBtn) addBtn.addEventListener('click', function () {
            const svcId = qSvc.value || null;
            const qty = Math.max(0.01, parseFloat(document.getElementById('pkgQuickSvcQty').value) || 1);
            if (!svcId) { alert('Select service.'); return; }
            addService(svcId, qty);
        });
    }

    document.addEventListener('click', function (e) {
        const btnPart = e.target.closest('[data-add-part]');
        if (btnPart) {
            const id = btnPart.getAttribute('data-add-part');
            const q = document.querySelector('input[data-qty-for="part"][data-id="' + id + '"]');
            addPart(id, q ? q.value : 1);
            return;
        }
        const del = e.target.closest('.js-del');
        if (del) {
            const tr = del.closest('tr');
            const idx = tr ? Number(tr.getAttribute('data-idx')) : -1;
            if (idx >= 0) items.splice(idx, 1);
            renderItems();
        }
    });

    document.addEventListener('input', function (e) {
        if (e.target && e.target.id === 'pkgPartSearch') renderQuickParts();
    });
    document.addEventListener('keydown', function (e) {
        if (e.target && e.target.id === 'pkgPartSearch' && e.key === 'Enter') {
            e.preventDefault();
            renderQuickParts();
            const firstBtn = document.querySelector('#pkgPartList [data-add-part]');
            if (firstBtn) firstBtn.click();
        }
    });

    document.addEventListener('change', function (e) {
        const tr = e.target.closest('tr[data-idx]');
        if (!tr) return;
        const idx = Number(tr.getAttribute('data-idx'));
        if (!(idx >= 0)) return;
        if (e.target.classList.contains('js-qty')) items[idx].quantity = Math.max(0.01, Number(e.target.value) || 1);
        if (e.target.classList.contains('js-unit')) items[idx].unit_price_snapshot = Math.max(0, Number(e.target.value) || 0);
        setHidden();
    });

    document.getElementById('pkgForm')?.addEventListener('submit', function () { setHidden(); });

    renderQuickParts();
    renderItems();
});
</script>
@endpush