@extends('layouts.layout-horizontal')

@section('title', 'Mass Update Cost Price')

@section('css')
<style>
    .mrp-input { width: 120px; }
    .mrp-row:hover { background: #f8fafc; }
    .mrp-changed { background: #fefce8 !important; }
    .search-box { width: 300px; max-width: 100%; }
    #mrpLoader {
        position: fixed; inset: 0; z-index: 2000;
        background: rgba(255,255,255,.92);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 14px; transition: opacity .2s;
    }
    #mrpLoader.hidden { opacity: 0; pointer-events: none; }
    #mrpLoader .spin-ring {
        width: 42px; height: 42px; border-radius: 50%;
        border: 3px solid #e2e8f0; border-top-color: #0d6efd;
        animation: mrpSpin .8s linear infinite;
    }
    #mrpLoader .loader-text { font-size: .85rem; color: #475569; font-weight: 500; }
    #mrpLoader .loader-sub { font-size: .7rem; color: #94a3b8; }
    @keyframes mrpSpin { to { transform: rotate(360deg); } }
    .sticky-save {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1050;
        background: #fff;
        border-top: 2px solid #e2e8f0;
        padding: 12px 24px;
        box-shadow: 0 -4px 12px rgba(0,0,0,.08);
        display: none;
    }
    .sticky-save.has-changes { display: flex; }
    .card-body { padding-bottom: 70px; }
</style>
@endsection

@section('content')
<div id="mrpLoader">
    <div class="spin-ring"></div>
    <div class="loader-text">Loading {{ $products->count() }} of {{ $products->total() }} products...</div>
    <div class="loader-sub">Search and pagination are handled by the server.</div>
</div>

<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between flex-wrap gap-2">
        <h5 class="mb-0">Mass Update Cost Price</h5>
        <div class="d-flex align-items-center gap-2 flex-wrap">
            <form method="GET" action="{{ route('products.mass-mrp') }}" class="d-flex align-items-center gap-2 flex-wrap mb-0">
                <input type="text" name="q" class="form-control form-control-sm search-box" placeholder="Search products..." value="{{ $q }}" autofocus>
                <div class="form-check form-switch mb-0">
                    <input type="hidden" name="missing" value="0">
                    <input class="form-check-input" type="checkbox" name="missing" value="1" id="filterMissing" @checked($missing)>
                    <label class="form-check-label small" for="filterMissing" title="Hides products that already have HSN other than 1 and non-zero tax">Needs update only</label>
                </div>
                <button class="btn btn-primary btn-sm" type="submit">
                    <i class="ph-duotone ph-magnifying-glass"></i>
                </button>
                @if($q !== '' || $missing)
                    <a href="{{ route('products.mass-mrp') }}" class="btn btn-outline-secondary btn-sm">Clear</a>
                @endif
            </form>
            <a href="{{ route('products.index') }}" class="btn btn-outline-secondary btn-sm">Back</a>
        </div>
    </div>
    <div class="card-body">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif

        <form method="POST" action="{{ route('products.mass-mrp.update') }}" id="massMrpForm">
            @csrf
            <input type="hidden" name="return_url" value="{{ request()->fullUrl() }}">

            <div class="d-flex align-items-center gap-2 mb-3 p-2 bg-light rounded" style="border:1px solid #e2e8f0;">
                <i class="ph-duotone ph-calendar" style="font-size:1.1rem;color:#64748b"></i>
                <label class="form-label mb-0 small fw-semibold">Tax effective from:</label>
                <input type="date" name="tax_effective_date" class="form-control form-control-sm" style="width:160px"
                    value="{{ old('tax_effective_date', now()->toDateString()) }}">
                <small class="text-muted">Select an existing HSN to auto-fill its latest tax, or type a new HSN.</small>
            </div>

            <datalist id="hsnOptions">
                @foreach(array_keys($hsnTaxOptions ?? []) as $hsn)
                    <option value="{{ $hsn }}">Tax {{ $hsnTaxOptions[$hsn] !== null ? rtrim(rtrim(number_format((float) $hsnTaxOptions[$hsn], 2, '.', ''), '0'), '.') . '%' : 'not set' }}</option>
                @endforeach
            </datalist>

            <div class="table-responsive">
                <table class="table table-sm table-hover align-middle mb-0" id="mrpTable">
                    <thead class="table-light">
                        <tr>
                            <th style="width:50px">#</th>
                            <th style="width:90px">Product ID</th>
                            <th>Name</th>
                            <th style="width:130px">HSN</th>
                            <th style="width:130px" class="text-end">Current Cost Price</th>
                            <th style="width:130px">New Cost Price</th>
                            <th style="width:130px" class="text-end">Current Tax %</th>
                            <th style="width:110px">New Tax %</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($products as $i => $p)
                        @php
                            $currentTax = $p->latestTaxRate?->percentage;
                            $currentTaxStr = $currentTax !== null ? rtrim(rtrim(number_format((float)$currentTax, 2, '.', ''), '0'), '.') : '';
                        @endphp
                        <tr class="mrp-row">
                            <td class="text-muted">{{ ($products->firstItem() ?? 1) + $i }}</td>
                            <td><code>{{ $p->product_id }}</code></td>
                            <td>{{ $p->name }}</td>
                            <td>
                                <input type="text" maxlength="20"
                                       name="hsn[{{ $p->id }}]"
                                       class="form-control form-control-sm hsn-input mass-input"
                                       value="{{ $p->hsn ?? '' }}"
                                       data-original="{{ $p->hsn ?? '' }}"
                                       list="hsnOptions"
                                       placeholder="HSN">
                            </td>
                            <td class="text-end">{{ $p->mrp ? number_format($p->mrp, 2) : '-' }}</td>
                            <td>
                                <input type="number" step="0.01" min="0"
                                       name="mrp[{{ $p->id }}]"
                                       class="form-control form-control-sm mrp-input mass-input"
                                       value="{{ $p->mrp !== null ? number_format((float)$p->mrp, 2, '.', '') : '' }}"
                                       data-original="{{ $p->mrp !== null ? number_format((float)$p->mrp, 2, '.', '') : '' }}"
                                       placeholder="0.00">
                            </td>
                            <td class="text-end">
                                {{ $currentTax !== null ? rtrim(rtrim(number_format((float)$currentTax, 2, '.', ''), '0'), '.') . '%' : '-' }}
                                @if($p->latestTaxRate)
                                    <div class="small text-muted" style="font-size:.7rem">since {{ \Carbon\Carbon::parse($p->latestTaxRate->starts_at)->format('d-M-Y') }}</div>
                                @endif
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" max="100"
                                       name="tax[{{ $p->id }}]"
                                       class="form-control form-control-sm tax-input mass-input"
                                       value="{{ $currentTaxStr }}"
                                       data-original="{{ $currentTaxStr }}"
                                       placeholder="0">
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted py-4">No products found.</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mt-3">
                <div class="small text-muted">
                    Showing {{ $products->firstItem() ?? 0 }}-{{ $products->lastItem() ?? 0 }} of {{ $products->total() }}
                </div>
                {{ $products->links() }}
            </div>
        </form>
    </div>
</div>

<div class="sticky-save" id="stickyBar">
    <div class="d-flex justify-content-between align-items-center w-100">
        <span id="changeCount" class="fw-semibold">No changes</span>
        <button type="button" class="btn btn-primary" id="saveBtn">
            <i class="ph-duotone ph-floppy-disk me-1"></i> Save Changes
        </button>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const loader = document.getElementById('mrpLoader');
    const inputs = document.querySelectorAll('.mass-input');
    const mrpInputs = document.querySelectorAll('.mrp-input');
    const changeCount = document.getElementById('changeCount');
    const stickyBar = document.getElementById('stickyBar');
    const rows = document.querySelectorAll('.mrp-row');
    const hsnTaxMap = @json($hsnTaxOptions ?? []);

    function rowHasChange(tr) {
        return Array.from(tr.querySelectorAll('.mass-input'))
            .some(function(i){ return i.dataset.original !== i.value; });
    }

    function countChanges() {
        let changed = 0;
        rows.forEach(function(tr) {
            var c = rowHasChange(tr);
            tr.classList.toggle('mrp-changed', c);
            if (c) changed++;
        });
        changeCount.textContent = changed ? changed + ' row(s) changed' : 'No changes';
        stickyBar.classList.toggle('has-changes', changed > 0);
    }

    inputs.forEach(function(input) {
        input.addEventListener('input', countChanges);
    });

    document.querySelectorAll('.hsn-input').forEach(function(input) {
        input.addEventListener('change', function() {
            const hsn = this.value.trim();
            if (!Object.prototype.hasOwnProperty.call(hsnTaxMap, hsn) || hsnTaxMap[hsn] === null) return;

            const row = this.closest('tr');
            const taxInput = row ? row.querySelector('.tax-input') : null;
            if (!taxInput) return;

            const tax = parseFloat(hsnTaxMap[hsn]);
            taxInput.value = Number.isFinite(tax) ? tax.toFixed(2).replace(/\.?0+$/, '') : '';
            countChanges();
        });
    });

    document.getElementById('saveBtn').addEventListener('click', function() {
        var changed = 0;
        rows.forEach(function(tr) {
            var has = rowHasChange(tr);
            if (!has) {
                tr.querySelectorAll('.mass-input').forEach(function(i) { i.disabled = true; });
            } else {
                changed++;
            }
        });
        if (changed === 0) { alert('No changes to save.'); return; }
        document.getElementById('massMrpForm').submit();
    });

    mrpInputs.forEach(function(input, idx) {
        input.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                for (var i = idx + 1; i < mrpInputs.length; i++) {
                    if (mrpInputs[i].closest('tr').style.display !== 'none') {
                        mrpInputs[i].focus();
                        mrpInputs[i].select();
                        break;
                    }
                }
            }
        });
    });

    requestAnimationFrame(function() {
        loader.classList.add('hidden');
        setTimeout(function() { loader.remove(); }, 250);
    });
});
</script>
@endsection