@extends('layouts.app')

@section('content')
<style>
    .damage-wrap { max-width:1500px; }
    .damage-head { align-items:flex-start; display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; }
    .page-title { color:#111827; font-size:26px; font-weight:900; }
    .page-subtitle { color:#64748b; font-size:13px; font-weight:700; margin-top:4px; }
    .actions { display:flex; flex-wrap:wrap; gap:8px; }
    .btn { border:0; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-weight:900; padding:10px 13px; text-decoration:none; white-space:nowrap; }
    .btn-blue { background:#1E4FA8; color:#fff; }
    .btn-orange { background:#E84C0D; color:#fff; }
    .btn-green { background:#15803d; color:#fff; }
    .btn-light { background:#f1f5f9; color:#111827; }
    .summary-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom:14px; }
    .summary-card, .panel { background:#fff; border-radius:10px; box-shadow:0 8px 22px rgba(15,23,42,.06); }
    .summary-card { padding:15px; }
    .summary-label { color:#64748b; font-size:12px; font-weight:900; text-transform:uppercase; }
    .summary-value { color:#1E4FA8; font-size:24px; font-weight:900; margin-top:6px; }
    .summary-value.orange { color:#E84C0D; }
    .panel { padding:16px; margin-bottom:14px; }
    .entry-panel { display:none; }
    .entry-panel.is-visible { display:block; }
    .entry-head { align-items:center; display:flex; justify-content:space-between; gap:12px; margin-bottom:12px; }
    .form-grid { display:grid; grid-template-columns:1.4fr 1fr 150px 185px 1fr 1fr auto; gap:10px; align-items:end; }
    .filter-grid { display:grid; grid-template-columns:2fr 1fr 1fr auto auto; gap:10px; align-items:end; }
    .field { display:flex; flex-direction:column; gap:6px; }
    .field.full { grid-column:1 / -1; }
    .field label { color:#334155; font-size:12px; font-weight:900; text-transform:uppercase; }
    .field input, .field select, .field textarea { border:1px solid #d8e1ec; border-radius:8px; box-sizing:border-box; font-size:14px; padding:10px; width:100%; }
    .field textarea { min-height:70px; resize:vertical; }
    .table-wrap { overflow:auto; }
    table { border-collapse:collapse; min-width:1100px; width:100%; }
    th { background:#1E4FA8; color:#fff; font-size:12px; padding:10px 8px; text-align:left; white-space:nowrap; }
    td { border-bottom:1px solid #e5e7eb; padding:9px 8px; font-size:13px; vertical-align:middle; }
    td.num, th.num { text-align:right; }
    tfoot td { background:#f1f5f9; color:#111827; font-weight:900; }
    .product-name { color:#111827; font-weight:900; }
    .muted { color:#64748b; font-weight:700; }
    .success { background:#ecfdf5; color:#14532d; font-weight:900; margin-bottom:12px; padding:10px; }
    .error { background:#fff3ee; color:#E84C0D; font-weight:900; margin-bottom:12px; padding:10px; }
    .entry-title { color:#111827; font-size:17px; font-weight:900; margin:0; }
    .product-lookup-wrap { position:relative; }
    .product-suggestions { background:#fff; border:1px solid #d8e1ec; border-radius:8px; box-shadow:0 14px 30px rgba(15,23,42,.14); display:none; left:0; max-height:280px; overflow:auto; position:absolute; right:0; top:calc(100% + 4px); z-index:20; }
    .product-suggestion { border-bottom:1px solid #eef2f7; cursor:pointer; padding:10px; }
    .product-suggestion:hover { background:#f8fafc; }
    .product-suggestion strong { color:#111827; display:block; font-size:14px; }
    .product-suggestion small { color:#64748b; font-weight:800; }
    @media(max-width: 1000px) {
        .damage-head { flex-direction:column; }
        .summary-grid, .form-grid, .filter-grid { grid-template-columns:1fr; }
    }
</style>

<div class="page-wrap damage-wrap">
    <div class="damage-head">
        <div>
            <div class="page-title">Damaged Products</div>
            <div class="page-subtitle">Record damaged stock and automatically reduce product quantity.</div>
        </div>
        <div class="actions">
            <button class="btn btn-orange" type="button" id="openDamageEntry" data-permission="damaged_products.create">Add Damaged Product</button>
            <a class="btn btn-light" href="{{ url('/inventory') }}">Inventory</a>
            <a class="btn btn-light" href="{{ url('/reports?report=stock_movement') }}">Stock Movement</a>
        </div>
    </div>

    @if(session('success'))
        <div class="success">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="error">{{ $errors->first() }}</div>
    @endif

    <div class="summary-grid">
        <div class="summary-card">
            <div class="summary-label">Damage Records</div>
            <div class="summary-value">{{ number_format($summary->records) }}</div>
        </div>
        <div class="summary-card">
            <div class="summary-label">Damaged Quantity</div>
            <div class="summary-value orange">{{ number_format($summary->quantity, 2) }}</div>
        </div>
        <div class="summary-card">
            <div class="summary-label">Damage Cost</div>
            <div class="summary-value">{{ \App\Models\SystemSetting::formatMoney($summary->value) }}</div>
        </div>
    </div>

    <div class="panel entry-panel {{ $errors->any() ? 'is-visible' : '' }}" id="damageEntryPanel">
        <div class="entry-head">
            <div class="entry-title">Add Damaged Product</div>
            <button class="btn btn-light" type="button" id="closeDamageEntry">X</button>
        </div>
        <form method="POST" action="{{ url('/damaged-products') }}" class="form-grid">
            @csrf
            <div class="field">
                <label>Product</label>
                <div class="product-lookup-wrap">
                    <input type="hidden" name="product_id" id="damageProductId" value="{{ old('product_id') }}" required>
                    <input type="text" id="damageProductSearch" value="" placeholder="Type product name, barcode or scan code" autocomplete="off">
                    <div class="product-suggestions" id="damageProductSuggestions"></div>
                </div>
            </div>
            <div class="field">
                <label>Branch</label>
                <select name="branch_id">
                    <option value="">Use product/default branch</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ old('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Quantity Damaged</label>
                <input type="number" name="quantity" value="{{ old('quantity') }}" min="0.01" step="0.01" required>
            </div>
            <div class="field">
                <label>Damage Date</label>
                <input type="datetime-local" name="damage_date" value="{{ old('damage_date', now()->format('Y-m-d\TH:i')) }}" required>
            </div>
            <div class="field">
                <label>Responsible Person</label>
                <input type="text" name="responsible_person" value="{{ old('responsible_person') }}" placeholder="Person responsible">
            </div>
            <div class="field">
                <label>Reason</label>
                <input type="text" name="reason" value="{{ old('reason') }}" placeholder="Expired, broken, leakage">
            </div>
            <button class="btn btn-blue">Save</button>
            <div class="field full">
                <label>Note</label>
                <textarea name="note" placeholder="Optional details">{{ old('note') }}</textarea>
            </div>
        </form>
    </div>

    <div class="panel">
        <form method="GET" action="{{ url('/damaged-products') }}" class="filter-grid auto-filter-form">
            <div class="field">
                <label>Search</label>
                <input type="text" name="search" value="{{ $filters['search'] }}" placeholder="Product, barcode, responsible person, reason">
            </div>
            <div class="field">
                <label>Branch</label>
                <select name="branch_id">
                    <option value="">All assigned branches</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ $filters['branch_id'] == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="field">
                <label>Category</label>
                <select name="category_id">
                    <option value="">All categories</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ $filters['category_id'] == $category->id ? 'selected' : '' }}>{{ $category->name }}</option>
                    @endforeach
                </select>
            </div>
            <button class="btn btn-blue">Filter</button>
            <a class="btn btn-light" href="{{ url('/damaged-products') }}">Reset</a>
        </form>
    </div>

    <div class="panel">
        <div class="table-wrap">
            <table>
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Barcode</th>
                        <th>Product</th>
                        <th>Branch</th>
                        <th class="num">Qty</th>
                        <th class="num">Stock Before</th>
                        <th class="num">Stock After</th>
                        <th class="num">Unit Cost</th>
                        <th class="num">Total Cost</th>
                        <th>Responsible Person</th>
                        <th>Reason</th>
                        <th>Added By</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($damages as $damage)
                        <tr>
                            <td>{{ $damage->damage_date?->format('Y-m-d H:i') }}</td>
                            <td>{{ $damage->product?->barcode ?: '-' }}</td>
                            <td class="product-name">{{ $damage->product?->name ?: '-' }}</td>
                            <td>{{ $damage->branch?->name ?: '-' }}</td>
                            <td class="num"><strong>{{ number_format($damage->quantity, 2) }}</strong></td>
                            <td class="num">{{ number_format($damage->stock_before, 2) }}</td>
                            <td class="num">{{ number_format($damage->stock_after, 2) }}</td>
                            <td class="num">{{ \App\Models\SystemSetting::formatMoney($damage->unit_cost) }}</td>
                            <td class="num"><strong>{{ \App\Models\SystemSetting::formatMoney($damage->total_cost) }}</strong></td>
                            <td>{{ $damage->responsible_person ?: '-' }}</td>
                            <td>{{ $damage->reason ?: '-' }}</td>
                            <td>{{ $damage->user?->name ?: '-' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="12" style="text-align:center;color:#64748b;font-weight:800;">No damaged products recorded.</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr>
                        <td colspan="4">Totals</td>
                        <td class="num">{{ number_format($summary->quantity, 2) }}</td>
                        <td colspan="3"></td>
                        <td class="num">{{ \App\Models\SystemSetting::formatMoney($summary->value) }}</td>
                        <td colspan="3"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        <div style="margin-top:12px;">{{ $damages->links('vendor.pagination.jevapos') }}</div>
    </div>
</div>
<script>
const damageProducts = @json($productLookup);

const entryPanel = document.getElementById('damageEntryPanel');
const productIdInput = document.getElementById('damageProductId');
const productSearch = document.getElementById('damageProductSearch');
const suggestions = document.getElementById('damageProductSuggestions');

document.getElementById('openDamageEntry')?.addEventListener('click', () => {
    entryPanel.classList.add('is-visible');
    productSearch.focus();
});

document.getElementById('closeDamageEntry')?.addEventListener('click', () => {
    entryPanel.classList.remove('is-visible');
});

function productLabel(product) {
    return `${product.name} | ${product.barcode || '-'} | Stock ${Number(product.stock || 0).toFixed(2)}`;
}

function selectDamageProduct(product) {
    productIdInput.value = product.id;
    productSearch.value = productLabel(product);
    suggestions.style.display = 'none';
}

productSearch?.addEventListener('input', () => {
    productIdInput.value = '';
    const term = productSearch.value.trim().toLowerCase();
    suggestions.innerHTML = '';

    if (!term) {
        suggestions.style.display = 'none';
        return;
    }

    const matches = damageProducts
        .filter(product => `${product.name} ${product.barcode || ''}`.toLowerCase().includes(term))
        .slice(0, 20);

    if (!matches.length) {
        suggestions.innerHTML = '<div class="product-suggestion"><strong>No product found</strong></div>';
        suggestions.style.display = 'block';
        return;
    }

    if (matches.length === 1 && String(matches[0].barcode || '').toLowerCase() === term) {
        selectDamageProduct(matches[0]);
        return;
    }

    matches.forEach(product => {
        const option = document.createElement('div');
        option.className = 'product-suggestion';
        option.innerHTML = `<strong>${product.name}</strong><small>Code: ${product.barcode || '-'} | Stock ${Number(product.stock || 0).toFixed(2)}</small>`;
        option.addEventListener('click', () => selectDamageProduct(product));
        suggestions.appendChild(option);
    });

    suggestions.style.display = 'block';
});

document.addEventListener('click', event => {
    if (!event.target.closest('.product-lookup-wrap')) {
        suggestions.style.display = 'none';
    }
});

if (productIdInput?.value) {
    const selected = damageProducts.find(product => String(product.id) === String(productIdInput.value));
    if (selected) {
        productSearch.value = productLabel(selected);
    }
}
</script>
@endsection