@extends('layouts.app')
@section('content')
@php
    // Clean numeric display: PHP doubles json_encode with full precision on
    // this server (127.2900000000000006…) — trim to a tidy form.
    $cleanNum = function ($v) {
        return rtrim(rtrim(number_format((float) $v, 6, '.', ''), '0'), '.');
    };
    $minPrices = $current['size_min_prices'] ?? [];
    $minPricesJson = '{' . collect($minPrices)
        ->map(fn ($v, $k) => '"' . $k . '":' . $cleanNum($v))->implode(',') . '}';
    $bounds = array_values($current['distance_tier_bounds'] ?? []);
    $descriptions = [
        'markup_base' => "Flat amount added to every size's markup on every quote.",
        'min_cost_distance_km' => 'Routes shorter than this (km) get the minimum charge.',
        'uk_vat_rate' => 'VAT applied when the place of supply is the UK. Enter a fraction: 0.05 = 5%.',
        'size_30_multiplier' => '30 m³ price = the 15 m³ price × this.',
        'price_rounding_decimals' => 'Decimal places on the final displayed price.',
        'size_min_prices' => 'Minimum charge per size, applied under the min-charge distance.',
        'distance_tier_bounds' => 'Distance boundaries (km) that select the rate tier. Must strictly increase.',
        'eu_supported_countries' => 'Moves between two ticked countries are priced with the EU rate block.',
    ];
    // The recognised EU-27 codes — the only values the server accepts.
    $eu27 = [
        'AT' => 'Austria', 'BE' => 'Belgium', 'BG' => 'Bulgaria', 'HR' => 'Croatia', 'CY' => 'Cyprus',
        'CZ' => 'Czechia', 'DK' => 'Denmark', 'EE' => 'Estonia', 'FI' => 'Finland', 'FR' => 'France',
        'DE' => 'Germany', 'GR' => 'Greece', 'HU' => 'Hungary', 'IE' => 'Ireland', 'IT' => 'Italy',
        'LV' => 'Latvia', 'LT' => 'Lithuania', 'LU' => 'Luxembourg', 'MT' => 'Malta', 'NL' => 'Netherlands',
        'PL' => 'Poland', 'PT' => 'Portugal', 'RO' => 'Romania', 'SK' => 'Slovakia', 'SI' => 'Slovenia',
        'ES' => 'Spain', 'SE' => 'Sweden',
    ];
    $currentEu = $current['eu_supported_countries'] ?? [];
    $locked = collect($constants ?? [])->reject(fn ($r) => $r['editable_later']);
@endphp
<style>
    .field-err { color: var(--mo-error); font-size: 12px; display: none; }
    input.invalid:not([type=checkbox]) { border-bottom: 1px solid var(--mo-error) !important; box-shadow: 0 1px 0 0 var(--mo-error) !important; }
    .knob-section { border: 1px solid var(--mo-line); border-radius: 6px; padding: 14px 16px 6px; margin-bottom: 18px; }
    .knob-section > h6 { margin: 0 0 2px; font-weight: 600; }
    .knob-section > p.section-desc { color: var(--mo-muted); font-size: 13px; margin: 0 0 10px; }
    /* Grid rows self-align per row, so the old float-era min-height hack is gone.
       A small top gap keeps the first row clear of the section heading. */
    .knob-section .mo-grid { margin-top: 4px; }
    /* The plain (non-.input-field) price-rounding cell: a small top nudge lines
       its select up with the Materialize label+input siblings in the same grid row. */
    .knob-field--select { align-self: start; margin-top: 8px; }
    /* Page-local 5-up grid for the five min-charge sizes (5/10/15/20/30 m³) —
       same responsive idiom as mo-layout.css's mo-grid--N: 1-col mobile,
       2-up tablet, opening out fully on desktop. */
    .mo-grid--5 { grid-template-columns: 1fr; }
    @media (min-width: 601px) { .mo-grid--5 { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 993px) { .mo-grid--5 { grid-template-columns: repeat(5, 1fr); } }
    .eu-grid { columns: 4 170px; column-gap: 18px; margin-top: 4px; }
    .eu-grid p { margin: 0 0 8px; break-inside: avoid; }
    .live-hint { color: var(--mo-interactive); font-size: 12px; }
    /* AA-legible form labels (Materialize default active-grey ~2.85:1) */
    .input-field label, .input-field label.active { color: var(--mo-muted); }
    /* one filled brand primary + a success-green confirm, matching the sibling editors */
    #reviewBtn { background-color: var(--mo-interactive); }
    #reviewBtn:hover { background-color: var(--mo-interactive-hov); }
    #confirmBtn { background-color: var(--mo-success); }
    /* destructive actions: danger ink + separation from the primary CTA */
    #revertBtn, #resetBtn { color: var(--mo-error); }
    #resetBtn { margin-left: 24px; }
</style>
<br>
<div class="row">
    <div class="col s12">
        <h5 style="margin-bottom: 4px;">Pricing Constants</h5>
        <p style="color:var(--mo-muted); margin-top:0;">
            The fixed values the pricing engine uses. Edit the business knobs below and
            <b>Review changes</b> to preview the impact before saving.
        </p>
        @if(!$gateOpen)
        <div role="status" style="padding:10px 14px;margin:10px 0;border:1px solid var(--mo-warn);background:var(--mo-warn-bg);color:var(--mo-warn);border-radius:4px;">
            Editing is <b>disabled</b> right now — you can review and preview impact, but saving is turned off.
        </div>
        @endif
        <div id="cmsg" role="alert" aria-live="assertive" style="display:none;padding:10px 14px;margin:10px 0;border-radius:4px;"></div>
    </div>
</div>

<form id="constantsForm" onsubmit="return false;">
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    {{-- The server accepts these three as JSON strings; JS keeps them in sync
         with the friendly fields below so nobody has to hand-type JSON. --}}
    <input type="hidden" name="size_min_prices" value='{{ $minPricesJson }}'>
    <input type="hidden" name="distance_tier_bounds" value="{{ json_encode($bounds) }}">
    <input type="hidden" name="eu_supported_countries" value="{{ json_encode($currentEu) }}">

    <div class="knob-section">
        <h6>Core knobs</h6>
        <p class="section-desc">Simple numeric values. Out-of-range entries are flagged as you type.</p>
        <div class="mo-grid mo-grid--3">
            <div class="input-field">
                <input id="markup_base" name="markup_base" type="number" step="1" value="{{ $current['markup_base'] }}">
                <label class="active" for="markup_base">Markup base (+flat)</label>
                <span class="helper-text">{{ $descriptions['markup_base'] }}</span>
                <span class="field-err" aria-live="polite" id="err_markup_base"></span>
            </div>
            <div class="input-field">
                <input id="min_cost_distance_km" name="min_cost_distance_km" type="number" step="1" min="0" value="{{ $current['min_cost_distance_km'] }}">
                <label class="active" for="min_cost_distance_km">Minimum-charge distance (km)</label>
                <span class="helper-text">{{ $descriptions['min_cost_distance_km'] }}</span>
                <span class="field-err" aria-live="polite" id="err_min_cost_distance_km"></span>
            </div>
            <div class="input-field">
                <input id="uk_vat_rate" name="uk_vat_rate" type="number" step="0.001" min="0" max="1" value="{{ $cleanNum($current['uk_vat_rate']) }}">
                <label class="active" for="uk_vat_rate">UK VAT rate (fraction, 0–1)</label>
                <span class="helper-text">{{ $descriptions['uk_vat_rate'] }} <b id="vatHint" class="live-hint"></b></span>
                <span class="field-err" aria-live="polite" id="err_uk_vat_rate"></span>
            </div>
            <div class="input-field">
                <input id="size_30_multiplier" name="size_30_multiplier" type="number" step="1" min="1" value="{{ $current['size_30_multiplier'] }}">
                <label class="active" for="size_30_multiplier">30 m³ multiplier</label>
                <span class="helper-text">{{ $descriptions['size_30_multiplier'] }}</span>
                <span class="field-err" aria-live="polite" id="err_size_30_multiplier"></span>
            </div>
            <div class="knob-field--select">
                <label for="price_rounding_decimals" style="font-size:0.8rem;">Price rounding (decimals)</label>
                <select id="price_rounding_decimals" name="price_rounding_decimals" class="browser-default">
                    @for ($d = 0; $d <= 4; $d++)
                    <option value="{{ $d }}" {{ (int) $current['price_rounding_decimals'] === $d ? 'selected' : '' }}>{{ $d }}{{ $d === 0 ? ' (whole units)' : '' }}</option>
                    @endfor
                </select>
                <span class="helper-text">{{ $descriptions['price_rounding_decimals'] }}</span>
            </div>
        </div>
    </div>

    <div class="knob-section">
        <h6>Minimum charge per size</h6>
        <p class="section-desc">{{ $descriptions['size_min_prices'] }} Each value must be greater than 0.</p>
        <div class="mo-grid mo-grid--5">
            @foreach([5, 10, 15, 20, 30] as $size)
            <div class="input-field">
                <input id="smp_{{ $size }}" type="number" step="any" min="0" value="{{ isset($minPrices[$size]) ? $cleanNum($minPrices[$size]) : '' }}">
                <label class="active" for="smp_{{ $size }}">{{ $size }} m³</label>
                <span class="field-err" aria-live="polite" id="err_smp_{{ $size }}"></span>
            </div>
            @endforeach
        </div>
    </div>

    <div class="knob-section">
        <h6>Distance tiers</h6>
        <p class="section-desc">{{ $descriptions['distance_tier_bounds'] }}</p>
        <div class="mo-grid mo-grid--3">
            @foreach([0, 1, 2] as $i)
            <div class="input-field">
                <input id="dtb_{{ $i }}" type="number" step="1" min="0" value="{{ $bounds[$i] ?? '' }}">
                <label class="active" for="dtb_{{ $i }}">Boundary {{ $i + 1 }} (km)</label>
                <span class="field-err" aria-live="polite" id="err_dtb_{{ $i }}"></span>
            </div>
            @endforeach
        </div>
        <div>
            <span class="field-err" aria-live="polite" id="err_dtb_group"></span>
            <p class="live-hint" id="tierLadder" style="margin-top:0;"></p>
        </div>
    </div>

    <div class="knob-section">
        <h6>Supported EU countries <span id="euCount" class="live-hint"></span></h6>
        <p class="section-desc">{{ $descriptions['eu_supported_countries'] }} At least one must be ticked.</p>
        <span class="field-err" aria-live="polite" id="err_eu"></span>
        <div class="eu-grid">
            {{-- Materialize 0.100.x checkbox pattern: input#id + label[for] siblings. --}}
            @foreach($eu27 as $code => $name)
            <p>
                <input type="checkbox" class="eu-cb filled-in" id="eu_{{ $code }}" data-code="{{ $code }}" {{ array_key_exists($code, $currentEu) ? 'checked' : '' }}>
                <label for="eu_{{ $code }}">{{ $code }} — {{ $name }}</label>
            </p>
            @endforeach
        </div>
    </div>

    <div class="row">
        <div class="input-field col s12">
            <input id="reason" name="reason" type="text">
            <label for="reason">Reason for change (optional)</label>
        </div>
    </div>
    <div class="mo-cluster" style="margin:12px 0 8px;">
        <button id="reviewBtn" class="btn">Review changes</button>
        <button id="confirmBtn" class="btn" style="display:none;" {{ $gateOpen ? '' : 'disabled' }}>Confirm &amp; save</button>
        <a href="#!" id="revertBtn" class="btn-flat">Revert last</a>
        <a href="#!" id="resetBtn" class="btn-flat">Reset to defaults</a>
    </div>
</form>

<div id="previewPanel" class="row" style="display:none;">
    <div class="col s12">
        <div class="card"><div class="card-content">
            <span class="card-title">Impact preview</span>
            <ul id="changedList" class="collection"></ul>
            <p id="quoteImpact"></p>
        </div></div>
    </div>
</div>

@if($locked->isNotEmpty())
<div class="row">
    <div class="col s12">
        <h6 style="color:var(--mo-muted);"><i class="material-icons" aria-hidden="true" style="font-size:18px;vertical-align:-3px;color:var(--mo-muted);">lock</i> Locked (structural) — shown for reference, not editable</h6>
        <table class="striped">
            <tbody>
                @foreach($locked as $row)
                <tr>
                    <td style="font-weight:600; width:22%;">{{ $row['label'] }}</td>
                    <td style="width:26%;">{{ $row['value'] }}</td>
                    <td>
                        {{ $row['meaning'] }}
                        @if($row['note'] !== '')
                            <br><span style="color:var(--mo-error); font-size:12px;"><i class="material-icons" aria-hidden="true" style="font-size:16px;vertical-align:-2px;">warning</i> {{ $row['note'] }}</span>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@stop
@section('js')
<script>
$(function () {
    var base = "{{ url('/') }}";
    var EU_NAMES = @json($eu27);
    var CURRENT_EU = @json($currentEu);
    var SIZES = [5, 10, 15, 20, 30];

    function msg(t, ok) {
        var b = document.getElementById('cmsg');
        b.textContent = t;
        b.style.display = 'block';
        // success stays semantic-green; errors use the shared error tokens
        b.style.background = ok ? 'var(--mo-success-bg)' : 'var(--mo-error-bg)';
        b.style.color = ok ? 'var(--mo-success)' : 'var(--mo-error)';
        b.style.border = '1px solid ' + (ok ? 'var(--mo-success)' : 'var(--mo-error-line)');
    }

    function setErr(id, err) {
        var $i = $('#' + id), $e = $('#err_' + id);
        if (err) { $i.addClass('invalid'); $e.text(err).show(); }
        else { $i.removeClass('invalid'); $e.hide(); }
        return !err;
    }
    function isInt(v) { return /^-?\d+$/.test(String(v).trim()); }

    // Validate every field, decorate inline errors; returns overall validity.
    function validateAll() {
        var ok = true, v;

        v = $('#markup_base').val();
        ok = setErr('markup_base', v === '' ? 'Required.' : (!isInt(v) ? 'Must be a whole number.' : null)) && ok;

        v = $('#min_cost_distance_km').val();
        ok = setErr('min_cost_distance_km',
            v === '' ? 'Required.' : (!isInt(v) || parseInt(v, 10) < 0 ? 'Must be a whole number of km, 0 or more.' : null)) && ok;

        v = $('#uk_vat_rate').val();
        var vat = parseFloat(v), vatErr = null;
        if (v === '' || isNaN(vat)) { vatErr = 'Required.'; }
        else if (vat > 1 && vat <= 100) { vatErr = 'Enter a fraction, not a percentage — ' + v + '% would be ' + (vat / 100) + '.'; }
        else if (vat < 0 || vat > 1) { vatErr = 'Must be between 0 and 1.'; }
        ok = setErr('uk_vat_rate', vatErr) && ok;

        v = $('#size_30_multiplier').val();
        ok = setErr('size_30_multiplier',
            v === '' ? 'Required.' : (!isInt(v) || parseInt(v, 10) < 1 ? 'Must be a whole number, 1 or more.' : null)) && ok;

        SIZES.forEach(function (s) {
            var pv = $('#smp_' + s).val(), pn = parseFloat(pv), e = null;
            if (pv === '' || isNaN(pn)) { e = 'Required.'; }
            else if (pn <= 0) { e = 'Must be greater than 0.'; }
            ok = setErr('smp_' + s, e) && ok;
        });

        var bounds = [], boundsOk = true;
        [0, 1, 2].forEach(function (i) {
            var bv = $('#dtb_' + i).val(), e = null;
            if (bv === '') { e = 'Required.'; }
            else if (!isInt(bv) || parseInt(bv, 10) < 0) { e = 'Must be a whole number of km, 0 or more.'; }
            if (e) { boundsOk = false; }
            else { bounds.push(parseInt(bv, 10)); }
            ok = setErr('dtb_' + i, e) && ok;
        });
        var groupErr = null;
        if (boundsOk && !(bounds[0] < bounds[1] && bounds[1] < bounds[2])) {
            groupErr = 'Boundaries must strictly increase: boundary 1 < boundary 2 < boundary 3.';
        }
        ok = setErr('dtb_group', groupErr) && ok;

        var euChecked = $('.eu-cb:checked').length;
        ok = setErr('eu', euChecked === 0 ? 'Tick at least one country.' : null) && ok;

        return ok;
    }

    // Rebuild the hidden JSON fields the server actually reads.
    function syncHidden() {
        var prices = {};
        SIZES.forEach(function (s) { prices[s] = parseFloat($('#smp_' + s).val()); });
        $('[name="size_min_prices"]').val(JSON.stringify(prices));

        $('[name="distance_tier_bounds"]').val(JSON.stringify([0, 1, 2].map(function (i) {
            return parseInt($('#dtb_' + i).val(), 10);
        })));

        var eu = {};
        $('.eu-cb:checked').each(function () {
            var c = $(this).data('code');
            eu[c] = CURRENT_EU[c] || EU_NAMES[c];
        });
        $('[name="eu_supported_countries"]').val(JSON.stringify(eu));
    }

    function updateHints() {
        var vat = parseFloat($('#uk_vat_rate').val());
        $('#vatHint').text(!isNaN(vat) && vat >= 0 && vat <= 1 ? '= ' + +(vat * 100).toFixed(2) + '%' : '');

        var b = [0, 1, 2].map(function (i) { return parseInt($('#dtb_' + i).val(), 10); });
        if (b.every(function (x) { return !isNaN(x); }) && b[0] < b[1] && b[1] < b[2]) {
            $('#tierLadder').text('under ' + b[0] + ' km: short haul · ' + b[0] + '–' + (b[1] - 1) +
                ' km: medium haul · ' + b[1] + '–' + b[2] + ' km: long haul · over ' + b[2] + ' km: very long haul');
        } else {
            $('#tierLadder').text('');
        }

        $('#euCount').text('(' + $('.eu-cb:checked').length + ' of {{ count($eu27) }} ticked)');
    }

    // Any edit invalidates a shown preview — you must re-review what you save.
    function invalidatePreview() {
        $('#previewPanel').hide();
        $('#confirmBtn').hide();
    }

    $('#constantsForm').on('input change', 'input:not(#reason), select', function () {
        validateAll();
        updateHints();
        invalidatePreview();
    });

    function payload() { return $('#constantsForm').serialize(); }

    $('#reviewBtn').on('click', function () {
        if (!validateAll()) { msg('Fix the highlighted fields before reviewing.', false); return; }
        syncHidden();
        $.ajax({
            url: base + '/constants/preview', type: 'POST', data: payload(),
            success: function (r) {
                var $l = $('#changedList').empty();
                if (!r.changed.length) { $l.append('<li class="collection-item">No changes</li>'); }
                r.changed.forEach(function (c) {
                    $l.append('<li class="collection-item">' + c.key + ': <b>' + JSON.stringify(c.old) + '</b> &rarr; <b>' + JSON.stringify(c.new) + '</b></li>');
                });
                $('#quoteImpact').html('Sample quote (' + r.quote.route + '): <b>' + r.quote.old_total + '</b> &rarr; <b>' + r.quote.new_total + '</b>');
                $('#previewPanel').show();
                if (r.changed.length) { $('#confirmBtn').show(); }
                msg(r.changed.length ? 'Reviewed — confirm to save.' : 'No changes to save.', true);
            },
            error: function (e) {
                var m = (e.responseJSON && e.responseJSON.errors) ? Object.values(e.responseJSON.errors).flat().join(' ') : ('Validation failed (' + e.status + ')');
                msg(m, false);
            }
        });
    });

    $('#confirmBtn').on('click', function () {
        if (!validateAll()) { msg('Fix the highlighted fields before saving.', false); return; }
        syncHidden();
        $.ajax({
            url: base + '/constants/update', type: 'POST', data: payload(),
            success: function (r) {
                msg('Saved: ' + (r.data.changed.join(', ') || 'no change') + '. Reloading…', true);
                setTimeout(function () { location.reload(); }, 1200);
            },
            error: function (e) { msg(e.status === 400 ? 'Editing is disabled.' : 'Save failed (' + e.status + ')', false); }
        });
    });

    function post(url, label) {
        $.ajax({
            url: base + url, type: 'POST', data: { _token: "{{ csrf_token() }}" },
            success: function () { msg(label + ' done — reloading…', true); setTimeout(function () { location.reload(); }, 900); },
            error: function (e) { msg(e.status === 400 ? 'Editing is disabled.' : (label + ' failed (' + e.status + ')'), false); }
        });
    }
    $('#revertBtn').on('click', function () {
        if (confirm('Revert the most recent saved change set? Prices served to customers will change immediately.')) {
            post('/constants/revert', 'Revert');
        }
    });
    $('#resetBtn').on('click', function () {
        if (confirm('Reset ALL constants to the shipped defaults? Any customised values will be lost and live prices will change immediately.')) {
            post('/constants/reset', 'Reset');
        }
    });

    updateHints();
    validateAll();
});
</script>
@stop