@extends('layouts.app')
@section('head')
<link rel="stylesheet" href="{{asset('js/notificationBar/css/jquery.notifyBar.css')}}">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<style>
    /* Applied-rules overview table — matches the Exceptions/Waypoints tables:
       compact inline row-action buttons and tighter row padding (the global
       dataTable rule otherwise forces tall buttons and rows). */
    .mo-rules-heading { margin: 6px 0 10px; font-size: 1rem; font-weight: 700; color: var(--mo-ink); }
    #rulesTable td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
    #rulesTable td:last-child {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    #rulesTable td:last-child .mo-btn {
        box-sizing: border-box;
        min-height: 0;
        padding: 3px 12px;
        font-size: 13px;
        line-height: 1.6;
    }
    /* highlight the row currently loaded in the chart below */
    #rulesTable tr.mo-row-current td { background: var(--mo-secondary); font-weight: 600; }
    .mo-rules-wrap { margin-bottom: 22px; }
    /* Materialize hides native selects without .browser-default; the DataTables
       "Show N entries" length menu is one, so force it visible (as the
       Exceptions page does). */
    .mo-rules-wrap .dataTables_length select { display: inline-block; height: auto; }
    .mo-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin: 0 0 18px;
    }
    .mo-controls label { font-weight: 600; color: var(--mo-ink); margin: 0; }
    .mo-controls select {
        display: inline-block;
        height: 40px;
        padding: 0 10px;
        min-width: 240px;
        border: 1px solid var(--mo-line);
        border-radius: 4px;
        background: #ffffff;
        color: var(--mo-ink);
    }
    .mo-controls input[type="text"] {
        display: inline-block;
        height: 38px;
        width: 170px;
        margin: 0;
        padding: 0 10px;
        border: 1px solid var(--mo-line);
        border-radius: 4px;
        background: #ffffff;
        color: var(--mo-ink);
        box-sizing: border-box;
    }
    .mo-controls select.mo-country { min-width: 210px; }
    .mo-controls .mo-btn { cursor: pointer; }
    /* Two logical groups — the rule editor (left) and the new-rule builder
       (right) — pushed apart on wide screens; each wraps internally, and both
       stack full-width on mobile. */
    .mo-controls { justify-content: space-between; }
    .mo-controls__group { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
    .mo-editor-hint {
        color: var(--mo-muted);
        font-size: 0.85rem;
        margin: -8px 0 14px;
    }

    .mo-chart-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        margin-bottom: 12px;
        font-size: 12px;
        color: var(--mo-muted);
    }
    .mo-chart-legend span { display: flex; align-items: center; gap: 6px; }
    .mo-chart-wrap { position: relative; width: 100%; height: 300px; }

    .mo-months {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
        gap: 10px;
        margin: 18px 0 0;
    }
    /* 52 weekly inputs pack tighter than the 12 monthly ones */
    .mo-months.is-week {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }
    .mo-month label {
        display: block;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--mo-muted);
        margin: 0 0 2px;
    }
    .mo-month input[type="number"] {
        height: 34px;
        margin: 0;
        padding: 0 8px;
        border: 1px solid var(--mo-line);
        border-radius: 4px;
        background: var(--mo-bg);
        color: var(--mo-ink);
        box-sizing: border-box;
        width: 100%;
    }
    /* touch: bigger numeric targets (16px also blocks iOS auto-zoom) */
    @media (pointer: coarse) {
        .mo-month input[type="number"] { height: 44px; font-size: 16px; }
    }

    /* leave room for the fixed save bar and keep it clear of the chart on
       short pages (the bar is viewport-fixed) */
    .mo-seasonality-body { padding-bottom: 120px; min-height: calc(100vh - 64px); }

    .mo-savebar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 20;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 16px;
        padding: 12px 20px;
        background: var(--mo-bg);
        border-top: 1px solid var(--mo-line);
        box-shadow: var(--mo-shadow-md);
    }
    .mo-savebar .mo-dirty { color: var(--mo-muted); font-size: 0.9rem; }
    .mo-savebar.is-dirty .mo-dirty { color: var(--mo-warn); font-weight: 600; }
    .mo-savebar input[type="submit"] { margin: 0; cursor: pointer; }
    /* one clear filled primary CTA per screen */
    .mo-savebar input[type="submit"] {
        background: var(--mo-interactive);
        color: #fff;
        border-color: var(--mo-interactive);
    }
    /* Mobile: both control groups and their selects go full-width so nothing is
       cramped, and the fixed save bar spreads its status + CTA to the edges. */
    @media (max-width: 600px) {
        .mo-controls { gap: 10px; }
        .mo-controls__group { flex: 1 1 100%; }
        .mo-controls select,
        .mo-controls select.mo-country { flex: 1 1 100%; min-width: 0; }
        .mo-savebar { justify-content: space-between; padding: 10px 16px; }
    }
</style>
@stop
@section('content')
@include('includes.revision_history', ['dataset' => 'seasonal', 'title' => 'Seasonality'])
@include('includes.page_header', [
    'title'   => 'Seasonality',
    'purpose' => 'A weekly percentage curve (ISO weeks 1–52) that scales the route + ferry cost of a quote by the week it is priced for. Drag the points on the chart (or type values) between -50% and +200%, then save. 0% leaves prices unchanged.',
])

<div class="mo-seasonality-body">
    <div class="mo-controls">
        <div class="mo-controls__group">
            <label for="newOrigin" id="addRuleLabel">Add a rule</label>
            <select id="newOrigin" class="browser-default mo-country" aria-label="Origin country for the new rule">
                <option value="">Origin: any country (*)</option>
                @foreach($countries as $code => $name)
                <option value="{{ $code }}">{{ $name }} ({{ $code }})</option>
                @endforeach
            </select>
            <select id="newDest" class="browser-default mo-country" aria-label="Destination country for the new rule">
                <option value="">Destination: any country (*)</option>
                @foreach($countries as $code => $name)
                <option value="{{ $code }}">{{ $name }} ({{ $code }})</option>
                @endforeach
            </select>
            <button type="button" id="addRule" class="mo-btn mo-btn--edit">Add rule</button>
            <button type="button" id="cancelEdit" class="mo-btn" style="display:none;">Cancel</button>
        </div>
    </div>
    <p class="mo-editor-hint">Most specific rule wins per quote: exact pair &rsaquo; origin-only &rsaquo; destination-only &rsaquo; default. Direction matters (GB&rarr;PL and PL&rarr;GB are separate rules). Each rule is a weekly curve (ISO weeks 1&ndash;52). The default (all routes) rule cannot be deleted.</p>

    <div class="mo-rules-wrap">
        <p class="mo-rules-heading">Applied rules</p>
        <table id="rulesTable" class="display">
            <thead>
                <tr>
                    <th name="origin">Origin</th>
                    <th name="destination">Destination</th>
                    <th name="weeks">Adjusted weeks</th>
                    <th name="peak">Peak adjustment</th>
                    <th name="action">Action</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="mo-chart-legend">
        <span><span style="width: 12px; height: 3px; border-radius: 2px; background: var(--mo-interactive);"></span>Seasonal adjustment</span>
        <span><span style="width: 12px; height: 0; border-top: 2px dashed var(--mo-muted);"></span>0% baseline</span>
    </div>
    <div class="mo-chart-wrap">
        <canvas id="seasonalityChart" role="img" aria-label="Draggable line chart of seasonal adjustment percentages by ISO week (1 to 52), y-axis ranging from -50% to 200%, crossing the 0% baseline.">Seasonal adjustment percentages from -50% to 200%.</canvas>
    </div>

    <div class="mo-months" id="monthInputs"></div>

    <form id="seasonalityForm">
        <div class="mo-savebar" id="moSaveBar">
            <span class="mo-dirty" id="moDirty">All changes saved</span>
            <input type="submit" value="Save seasonal curve" class="mo-btn mo-btn--edit">
        </div>
    </form>
</div>
@stop
@section('js')
<script>
    var rules = @json($rules);
    var url = '{{url('/')}}';
</script>
<script src="{{asset('js/notificationBar/jquery.notifyBar.js')}}"></script>
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
{{-- SRI hash verified against both the cdnjs-served file and the cdnjs API (sha512, 2026-07-13) --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.js" integrity="sha512-ZwR1/gSZM3ai6vCdI+LVF1zSq/5HznD3ZSTk7kajkaj4D292NLuduDCO1c/NT8Id+jE58KYLKT7hXnbtryGmMg==" crossorigin="anonymous"></script>
{{-- chartjs-plugin-dragdata v2 UMD (self-hosted vendor copy; auto-registers against the global Chart) --}}
<script src="{{ asset('js/chartjs-plugin-dragdata.min.js') }}"></script>
<script>

    var MIN_PCT = -50, MAX_PCT = 200;   // D2 cap — matches the y-axis and the server-side validation
    var WEEKS = [];                     // 'W1'…'W52' — ISO weeks; week 53 is never edited (lookup maps 53→52)
    for( var w = 1; w <= 52; w++ ) WEEKS.push('W' + w);

    var chart = null;
    var currentRule = 0;        // index into rules
    // Weekly-only editor: every rule is a 52-point ISO-week curve. Monthly rows
    // may still exist server-side as a dormant legacy fallback, but they are
    // never edited or shown here (the weekly curve overrides them when priced).
    var periodMode = 'week';    // fixed — retained so the index-driven machinery below stays mode-agnostic
    var savedBaseline = null;   // last-saved 52 values of the current rule; null = brand-new unsaved rule

    function clampPct(v){ return Math.max(MIN_PCT, Math.min(MAX_PCT, v)); }
    function roundPct(v){ return Math.round(v * 10) / 10; }
    function isDefaultRule(rule){ return rule.origin === null && rule.destination === null; }
    function ruleDisplayName(rule){ return isDefaultRule(rule) ? 'Default (all routes)' : rule.label; }
    function currentValues(){ return chart.data.datasets[0].data; }
    function activeLabels(){ return WEEKS; }
    function activeCount(){ return 52; }
    function zerosArr(n){ var a = []; for( var i = 0; i < n; i++ ) a.push(0); return a; }
    // The working copy of the current rule's weekly curve. A rule with no saved
    // weekly curve edits a flat-zero one — nothing is written to the server
    // until the user explicitly saves it.
    function ruleModeValues(rule){
        return rule.weeklyValues ? rule.weeklyValues.slice() : zerosArr(52);
    }

    // --- applied-rules overview table --------------------------------------
    // Matches the Exceptions/Waypoints DataTables. Driven off the in-memory
    // `rules` array (not an AJAX endpoint), so it stays in sync as rules are
    // added / deleted / saved without a page reload.
    var rulesTable = null;

    // Summary of a rule's weekly curve: how many weeks are adjusted (percent
    // != 0) and the largest-magnitude adjustment with its week. A rule with no
    // saved weekly curve (or an all-zero one) has no pricing effect.
    function ruleWeekSummary(rule){
        var vals = rule.weeklyValues;
        if( !vals ){ return { count: 0, peakPct: 0, peakWeek: null }; }
        var count = 0, peakPct = 0, peakWeek = null;
        for( var i = 0; i < vals.length; i++ ){
            var v = Number(vals[i]) || 0;
            if( v !== 0 ){ count++; }
            if( Math.abs(v) > Math.abs(peakPct) ){ peakPct = v; peakWeek = i + 1; }
        }
        return { count: count, peakPct: peakPct, peakWeek: peakWeek };
    }

    function anyCell(code){
        return ( code === null || code === '' ) ? '<span class="mo-any">Any</span>' : code;
    }

    // Build the DataTables row array from `rules`. Each row carries its rule
    // index so the delegated Edit/Delete handlers can act on it.
    function rulesTableData(){
        return rules.map(function(rule, i){
            var s = ruleWeekSummary(rule);
            var weeks = rule.isNew ? '<span class="mo-any">Unsaved</span>'
                : s.count === 0 ? '<span class="mo-any">None (flat 0%)</span>'
                : String(s.count);
            var peak = ( rule.isNew || s.peakWeek === null ) ? '&mdash;'
                : ( s.peakPct > 0 ? '+' : '' ) + roundPct(s.peakPct) + '% (W' + s.peakWeek + ')';
            var actions = '<a href="#" class="mo-rule-edit mo-btn mo-btn--edit">Edit</a>'
                + ( isDefaultRule(rule) ? '' : ' <a href="#" class="mo-rule-delete mo-btn mo-btn--delete">Delete</a>' );
            return {
                idx: i,
                origin: anyCell(rule.origin),
                destination: anyCell(rule.destination),
                weeks: weeks,
                peak: peak,
                actions: actions
            };
        });
    }

    function renderRulesTable(){
        if( !rulesTable ){ return; }
        rulesTable.clear().rows.add(rulesTableData()).draw(false);
        highlightCurrentRow();
    }

    // Mark the row whose rule is loaded in the chart below.
    function highlightCurrentRow(){
        if( !rulesTable ){ return; }
        rulesTable.rows().every(function(){
            var isCur = this.data().idx === currentRule;
            $(this.node()).toggleClass('mo-row-current', isCur);
        });
    }

    // --- dirty-state / navigation-guard state (UI only) -------------------
    var moDirtyCount = 0;

    function moRecomputeDirty(){
        var vals = currentValues();
        var n = 0;
        if( savedBaseline === null ){
            n = activeCount(); // a new rule is entirely unsaved
        } else {
            for( var i = 0; i < activeCount(); i++ ){
                if( Number(vals[i]) !== Number(savedBaseline[i]) ) n++;
            }
        }
        moDirtyCount = n;
        var $d = $('#moDirty');
        var rule = rules[currentRule];
        if( n === 0 ){
            if( !rule.isNew && !rule.weeklyValues ){
                $d.text('No weekly curve saved yet');
            } else {
                $d.text('All changes saved');
            }
            $('#moSaveBar').removeClass('is-dirty');
        } else if( savedBaseline === null ){
            $d.text('New rule — not saved yet');
            $('#moSaveBar').addClass('is-dirty');
        } else {
            $d.text( n + (n === 1 ? ' unsaved change' : ' unsaved changes') );
            $('#moSaveBar').addClass('is-dirty');
        }
    }

    $(window).on('beforeunload', function(){
        if( moDirtyCount > 0 ){
            return 'You have unsaved seasonality changes. Leave without saving?';
        }
    });

    // --- chart <-> numeric inputs mirroring --------------------------------
    // Rebuilds the numeric-input grid for the active mode (12 month boxes or
    // 52 week boxes). data-month is the period INDEX (0-based) in both modes;
    // the delegated input/blur handlers below are index-driven and work for
    // either length unchanged.
    function buildPeriodInputs(){
        var $wrap = $('#monthInputs').empty();
        $wrap.toggleClass('is-week', periodMode === 'week');
        activeLabels().forEach(function(name, i){
            $wrap.append(
                '<div class="mo-month">' +
                '<label for="month-' + i + '">' + name + '</label>' +
                '<input type="number" class="mo-month-input" id="month-' + i + '" data-month="' + i + '"' +
                ' step="0.1" min="' + MIN_PCT + '" max="' + MAX_PCT + '">' +
                '</div>'
            );
        });
    }

    function syncInputs(){
        var vals = currentValues();
        $('.mo-month-input').each(function(){
            $(this).val(vals[ Number($(this).data('month')) ]);
        });
    }

    $(document).on('input change', '.mo-month-input', function(){
        var i = Number($(this).data('month'));
        var v = parseFloat(this.value);
        if( isNaN(v) ) return;
        chart.data.datasets[0].data[i] = clampPct(v);
        chart.update('none');
        moRecomputeDirty();
    });
    $(document).on('blur', '.mo-month-input', function(){
        // snap the input display back to the (clamped) chart value
        var i = Number($(this).data('month'));
        $(this).val(chart.data.datasets[0].data[i]);
    });

    // --- chart (styling per the reference monthly-percentage control) ------
    function initChart(values){
        // Read brand tokens from CSS custom properties so the chart stays on-palette
        // without hardcoding hex (mirrors the map page's getComputedStyle pattern).
        var cssv = function(n){ return getComputedStyle(document.documentElement).getPropertyValue(n).trim(); };
        var C_INTERACTIVE = cssv('--mo-interactive') || '#1863dc';
        var C_LINE = cssv('--mo-line') || '#e2e7f4';
        var C_MUTED = cssv('--mo-muted') || '#64708f';
        chart = new Chart(document.getElementById('seasonalityChart'), {
            type: 'line',
            data: {
                labels: WEEKS,
                datasets: [{
                    label: 'Seasonal adjustment',
                    data: values.slice(),
                    borderColor: C_INTERACTIVE,
                    backgroundColor: 'rgba(24,99,220,0.10)',
                    borderWidth: 2,
                    fill: true,
                    tension: 0.3,
                    pointRadius: 4,
                    pointHitRadius: 14,
                    pointBackgroundColor: C_INTERACTIVE,
                    pointBorderColor: '#ffffff',
                    pointBorderWidth: 2
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                // No entry animation. Besides honouring reduced-motion, the
                // draw-in animation started by `new Chart()` is still in flight
                // when boot() immediately calls loadRule() → update('none');
                // it then asynchronously settles the points ~11px ABOVE their
                // true value pixels, leaving a flat 0% curve floating above the
                // 0% baseline (found 2026-07-21). Disabling it makes the
                // programmatic value placement authoritative and correct.
                animation: false,
                plugins: {
                    legend: { display: false },
                    tooltip: { callbacks: { label: function(c){ return c.parsed.y + '%'; } } },
                    dragData: {
                        showTooltip: true,
                        onDrag: function(e, datasetIndex, index, value){
                            // clamp to the D2 cap while dragging
                            var v = clampPct(value);
                            chart.data.datasets[datasetIndex].data[index] = v;
                            $('.mo-month-input[data-month="' + index + '"]').val(roundPct(v));
                        },
                        onDragEnd: function(e, datasetIndex, index, value){
                            // round once the drag settles
                            var v = roundPct(clampPct(value));
                            chart.data.datasets[datasetIndex].data[index] = v;
                            chart.update('none');
                            $('.mo-month-input[data-month="' + index + '"]').val(v);
                            moRecomputeDirty();
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: C_LINE, drawTicks: false },
                        border: { display: false },
                        ticks: { color: C_MUTED, autoSkip: false, font: { size: 12 } }
                    },
                    y: {
                        min: MIN_PCT,
                        max: MAX_PCT,
                        grid: {
                            color: function(ctx){ return ctx.tick.value === 0 ? C_MUTED : C_LINE; },
                            lineWidth: function(ctx){ return ctx.tick.value === 0 ? 2 : 1; },
                            drawTicks: false
                        },
                        border: { display: false },
                        ticks: {
                            stepSize: 50,
                            color: C_MUTED,
                            font: { size: 12 },
                            callback: function(v){ return v + '%'; }
                        }
                    }
                }
            }
        });
    }

    // --- weekly curve styling ------------------------------------------------
    // Tighter points + auto-skipped x ticks suit the 52-point weekly curve. All
    // the dragdata/clamp/round/dirty machinery is index-driven, so it is
    // unchanged from the original monthly editor.
    function applyModeStyle(){
        var ds = chart.data.datasets[0];
        ds.pointRadius = 3;
        ds.pointHitRadius = 8;
        ds.pointBorderWidth = 1;
        chart.options.scales.x.ticks.autoSkip = true;
        chart.options.scales.x.ticks.maxTicksLimit = 14;
    }

    // Retained as a no-op hook so loadRule()/save() call sites stay untouched;
    // the Monthly/Weekly toggle and its controls were removed (weekly-only).
    function updateModeUi(){}

    // --- rule selection / add / delete --------------------------------------
    // The old Rule dropdown + "Delete rule" button were removed (the applied-
    // rules table now handles selection via Edit and removal via Delete). This
    // stays as the single "rules changed → refresh the list" hook so its many
    // call sites are untouched.
    function renderRuleOptions(){
        renderRulesTable();
    }

    function loadRule(i){
        currentRule = i;
        var rule = rules[i];
        buildPeriodInputs();
        chart.data.labels = activeLabels();
        chart.data.datasets[0].data = ruleModeValues(rule);
        applyModeStyle();
        chart.update('none');
        // Baseline: null while the whole rule is unsaved; otherwise the
        // last-saved weekly curve. A rule with no saved weekly curve baselines
        // against flat zeros so an untouched rule is NOT dirty (and never
        // auto-creates weekly rows server-side).
        if( rule.isNew ){
            savedBaseline = null;
        } else {
            savedBaseline = rule.weeklyValues ? rule.weeklyValues.slice() : zerosArr(52);
        }
        syncInputs();
        moRecomputeDirty();
        updateModeUi();
        highlightCurrentRow(); // reflect the loaded rule in the applied-rules table
    }

    // --- add vs. edit-route mode for the country form -----------------------
    // The Origin/Destination form both CREATES rules and EDITS an existing
    // rule's route. editingIndex = the rule being route-edited, or null (add).
    var editingIndex = null;

    function ruleLabelOf(origin, dest){ return (origin || '*') + '→' + (dest || '*'); }

    function enterEditMode(idx){
        editingIndex = idx;
        var rule = rules[idx];
        $('#newOrigin').val(rule.origin || '');
        $('#newDest').val(rule.destination || '');
        $('#addRuleLabel').text('Edit rule route');
        $('#addRule').text('Update rule');
        $('#cancelEdit').show();
    }

    function exitEditMode(){
        editingIndex = null;
        $('#addRuleLabel').text('Add a rule');
        $('#addRule').text('Add rule');
        $('#cancelEdit').hide();
        $('#newOrigin, #newDest').val('');
    }

    $('#cancelEdit').on('click', function(){ exitEditMode(); });

    // Create a brand-new rule from the form (add mode).
    function createRuleFromForm(){
        // Both controls are dropdowns fed from the server-side whitelist
        // (SeasonalAdjustmentService::supportedCountries), so only valid
        // codes can reach here; the save endpoint re-validates regardless.
        var o = $('#newOrigin').val();
        var d = $('#newDest').val();
        var origin = o === '' ? null : o;
        var dest = d === '' ? null : d;
        if( origin === null && dest === null ){
            $.notifyBar({html: 'The default (all routes) rule already exists.', position: 'bottom', cssClass: 'error'});
            return;
        }
        var existing = rules.findIndex(function(r){ return r.origin === origin && r.destination === dest; });
        if( existing !== -1 ){
            $.notifyBar({html: 'That rule already exists — it has been selected.', position: 'bottom', cssClass: 'error'});
            if( moDirtyCount === 0 || window.confirm('Discard your unsaved changes and switch to it?') ){
                loadRule(existing);
            }
            return;
        }
        if( moDirtyCount > 0 &&
            ! window.confirm('You have ' + moDirtyCount + ' unsaved change' + (moDirtyCount === 1 ? '' : 's') + '. Add a new rule and discard them?') ){
            return;
        }
        rules.push({
            origin: origin,
            destination: dest,
            label: ruleLabelOf(origin, dest),
            values: zerosArr(12), // dormant monthly slot; never edited here (weekly-only)
            weeklyValues: null,   // filled in on first save
            hasMonthly: false,
            isNew: true
        });
        currentRule = rules.length - 1;
        renderRuleOptions();
        loadRule(currentRule);
        $('#newOrigin, #newDest').val('');
    }

    // Update the editing rule's route (and save its current curve). A rule's
    // identity IS its (origin, destination), so a route change is a MOVE: save
    // the curve under the NEW route, then delete the OLD route. Save-new-first
    // means a mid-move failure can never lose the curve (worst case: a leftover
    // old rule the user can delete).
    function updateRuleRoute(){
        var idx = editingIndex;
        var rule = rules[idx];
        var o = $('#newOrigin').val();
        var d = $('#newDest').val();
        var newOrigin = o === '' ? null : o;
        var newDest = d === '' ? null : d;
        var routeChanged = ( newOrigin !== rule.origin || newDest !== rule.destination );

        if( routeChanged ){
            if( isDefaultRule(rule) ){
                $.notifyBar({html: 'The default (all routes) rule can’t be given a specific route — use Add rule to create a specific rule.', position: 'bottom', cssClass: 'error'});
                return;
            }
            if( newOrigin === null && newDest === null ){
                $.notifyBar({html: 'A specific rule can’t be changed to the default (all routes) — the default already exists.', position: 'bottom', cssClass: 'error'});
                return;
            }
            var clash = rules.findIndex(function(r, i){ return i !== idx && r.origin === newOrigin && r.destination === newDest; });
            if( clash !== -1 ){
                $.notifyBar({html: 'That rule already exists.', position: 'bottom', cssClass: 'error'});
                return;
            }
            if( ! window.confirm('Move this rule from ' + ruleDisplayName(rule) + ' to ' + ruleLabelOf(newOrigin, newDest) + '? The old rule will be removed.') ){
                return;
            }
        }

        // Save the current chart curve under the (possibly new) route.
        var values = currentValues().map(function(v){ return roundPct(clampPct(Number(v) || 0)); });
        var oldOrigin = rule.origin, oldDest = rule.destination, oldWasSaved = !rule.isNew;

        $('#addRule, #cancelEdit').prop('disabled', true);
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

        $.ajax( url + '/seasonality/save', {
            type: 'POST',
            data: { 'origin_country': newOrigin || '', 'destination_country': newDest || '', 'period_type': 'week', 'values': values },
            success: function(resp){
                var saved = ( resp && resp.data && resp.data.values ) ? resp.data.values.map(Number) : values.slice();
                rule.origin = newOrigin; rule.destination = newDest;
                rule.label = ruleLabelOf(newOrigin, newDest);
                rule.weeklyValues = saved; rule.isNew = false;

                var finish = function(){
                    $('#addRule, #cancelEdit').prop('disabled', false);
                    currentRule = idx;
                    exitEditMode();
                    renderRuleOptions();
                    loadRule(idx);
                    $.notifyBar({html: routeChanged ? 'Rule moved to ' + rule.label : 'Seasonal curve saved', position: 'bottom', cssClass: 'success'});
                };

                if( routeChanged && oldWasSaved ){
                    $.ajax( url + '/seasonality/delete', {
                        type: 'POST',
                        data: { 'origin_country': oldOrigin || '', 'destination_country': oldDest || '' },
                        success: finish,
                        error: function(jqXhr){
                            // New route saved but old couldn't be removed — re-add the
                            // old rule client-side so the table reflects both, and warn.
                            rules.push({ origin: oldOrigin, destination: oldDest, label: ruleLabelOf(oldOrigin, oldDest),
                                values: zerosArr(12), weeklyValues: saved.slice(), hasMonthly: false, isNew: false });
                            var msg = 'Created ' + rule.label + ' but could not remove the old rule — delete it manually.';
                            if( jqXhr.responseJSON && jqXhr.responseJSON.message ){ msg = jqXhr.responseJSON.message; }
                            $.notifyBar({html: msg, position: 'bottom', cssClass: 'error'});
                            $('#addRule, #cancelEdit').prop('disabled', false);
                            currentRule = idx; exitEditMode(); renderRuleOptions(); loadRule(idx);
                        }
                    });
                } else {
                    finish();
                }
            },
            error: function(jqXhr){
                var msg = 'Rule update failed';
                if( jqXhr.responseJSON && jqXhr.responseJSON.message ){ msg = jqXhr.responseJSON.message; }
                else if( jqXhr.responseText ){ msg = jqXhr.responseText; }
                $.notifyBar({html: msg, position: 'bottom', cssClass: 'error'});
                $('#addRule, #cancelEdit').prop('disabled', false);
            }
        });
    }

    $('#addRule').on('click', function(){
        if( editingIndex !== null ){ updateRuleRoute(); }
        else { createRuleFromForm(); }
    });

    // Delete rules[idx] (from either the toolbar button or the applied-rules
    // table's Delete action). The default rule is undeletable (the server also
    // refuses). Deletion reloads the default rule, so guard unsaved edits.
    function deleteRuleByIndex(idx){
        var rule = rules[idx];
        if( !rule || isDefaultRule(rule) ) return;
        if( editingIndex !== null ){ exitEditMode(); } // a delete cancels any in-progress route edit

        if( moDirtyCount > 0 &&
            ! window.confirm('You have ' + moDirtyCount + ' unsaved change' + (moDirtyCount === 1 ? '' : 's') + ' in the editor. Delete this rule and discard them?') ){
            return;
        }

        if( rule.isNew ){ // never saved — just drop it client-side
            rules.splice(idx, 1);
            currentRule = 0;
            renderRuleOptions();
            loadRule(0);
            return;
        }
        if( ! window.confirm('Delete the ' + ruleDisplayName(rule) + ' rule? Quotes it covered fall back to the next matching rule.') ){
            return;
        }
        $.ajaxSetup({
            headers:
                { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });
        $.ajax( url + '/seasonality/delete', {
            type: 'POST',
            data: {
                'origin_country': rule.origin || '',
                'destination_country': rule.destination || ''
            },
            success: function(){
                $.notifyBar({html: 'Seasonal rule deleted', position: 'bottom', cssClass: 'success'});
                rules.splice(idx, 1);
                currentRule = 0;
                renderRuleOptions();
                loadRule(0);
            },
            error: function(jqXhr){
                var msg = 'Seasonal rule delete failed';
                if( jqXhr.responseJSON && jqXhr.responseJSON.message ){ msg = jqXhr.responseJSON.message; }
                else if( jqXhr.responseText ){ msg = jqXhr.responseText; }
                $.notifyBar({html: msg, position: 'bottom', cssClass: 'error'});
            }
        });
    }

    // --- save ---------------------------------------------------------------
    $('#seasonalityForm').submit(function( event ){
        event.preventDefault();
        var rule = rules[currentRule];
        var values = currentValues().map(function(v){ return roundPct(clampPct(Number(v) || 0)); });
        $(this).find(':submit').prop('disabled', true);

        $.ajaxSetup({
            headers:
                { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });
        $.ajax( url + '/seasonality/save', {
            type: 'POST',
            data: {
                'origin_country': rule.origin || '',
                'destination_country': rule.destination || '',
                'period_type': 'week',
                'values': values
            },
            success: function (responseData) {
                $.notifyBar({html: 'Seasonal curve saved', position: 'bottom', cssClass: 'success'});
                var saved = ( responseData && responseData.data && responseData.data.values )
                    ? responseData.data.values.map(Number)
                    : values.slice();
                rule.weeklyValues = saved;
                rule.isNew = false; // the rule now exists server-side (a reload shows it)
                chart.data.datasets[0].data = saved.slice();
                chart.update('none');
                savedBaseline = saved.slice();
                syncInputs();
                moRecomputeDirty();
                renderRuleOptions();
                $('input[type="submit"]').removeAttr('disabled');
            },
            error: function (jqXhr) {
                var msg = 'Seasonal curve update failed';
                if( jqXhr.responseJSON && jqXhr.responseJSON.message ){ msg = jqXhr.responseJSON.message; }
                else if( jqXhr.responseText ){ msg = jqXhr.responseText; }
                $.notifyBar({html: msg, position: 'bottom', cssClass: 'error'});
                $('input[type="submit"]').removeAttr('disabled');
            }
        });
    });

    // scroll the editor chart into view (applied-rules table sits above it)
    function scrollToChart(){
        var el = document.querySelector('.mo-chart-wrap');
        if( el ){ el.scrollIntoView({ behavior: 'smooth', block: 'center' }); }
    }
    // scroll the Origin/Destination form into view (it sits above the table)
    function scrollToForm(){
        var el = document.querySelector('.mo-controls');
        if( el ){ el.scrollIntoView({ behavior: 'smooth', block: 'start' }); }
    }

    // --- boot ---------------------------------------------------------------
    $(document).ready(function(){
        // Applied-rules table (same DataTables style as the Exceptions table).
        // Populated from `rules` via renderRulesTable(), which renderRuleOptions
        // calls; init it BEFORE that first call so the initial draw lands.
        rulesTable = $('#rulesTable').DataTable({
            data: [],
            columns: [
                { data: 'origin', name: 'origin' },
                { data: 'destination', name: 'destination' },
                { data: 'weeks', name: 'weeks' },
                { data: 'peak', name: 'peak' },
                { data: 'actions', name: 'actions', orderable: false, searchable: false }
            ],
            language: {
                emptyTable: 'No seasonal rules yet.',
                zeroRecords: 'No rules match your search.'
            }
        });

        // Edit → load the rule + open route-edit mode on the form above (which
        // pre-fills Origin/Destination so the route can be changed).
        $('#rulesTable tbody').on('click', '.mo-rule-edit', function(e){
            e.preventDefault();
            var idx = rulesTable.row($(this).closest('tr')).data().idx;
            if( idx !== currentRule ){ // switching rule discards unsaved curve edits
                if( moDirtyCount > 0 &&
                    ! window.confirm('You have ' + moDirtyCount + ' unsaved change' + (moDirtyCount === 1 ? '' : 's') + '. Switch rule and discard them?') ){
                    return;
                }
                loadRule(idx);
            }
            enterEditMode(idx);
            scrollToForm();
        });
        // Delete → shared delete path (non-default rules only; button is absent
        // on the default row).
        $('#rulesTable tbody').on('click', '.mo-rule-delete', function(e){
            e.preventDefault();
            var idx = rulesTable.row($(this).closest('tr')).data().idx;
            deleteRuleByIndex(idx);
        });

        renderRuleOptions();
        // the controller guarantees at least the default rule; seed the chart
        // with its weekly curve (loadRule re-applies it and builds the inputs)
        initChart(rules[0].weeklyValues || zerosArr(52));
        loadRule(0);
    });

</script>
@stop