@extends('layouts.app')
@section('head')
<style>
    .gm-style .gm-style-iw-c button {
        display: none !important;
    }
    .mo-search-hint {
        display: block;
        margin: 10px 0 0;
        color: var(--mo-muted);
        font-size: 0.85rem;
    }
    /* from/to and the submit button are direct columns of the form's outer
       .row, so they pick up Materialize's 0.75rem column padding that the
       nested-row fields (volume, dates) do not -- leaving them inset 11px
       further right. Zero it so every field and the button share one left edge. */
    #form > .row > .input-field.col { padding-left: 0; padding-right: 0; }
    /* ...and their floating labels are absolutely positioned with a 0.75rem
       left offset that assumed the removed padding, so pull them back to the
       shared left edge too (matches the nested-row fields like Volume). */
    #form > .row > .input-field.col > label { left: 0; }
    /* Provenance tooltips in the price-breakdown panel (pure CSS — rows are
       re-rendered per quote, so no Materialize tooltip JS init). */
    .mo-prov {
        border-bottom: 1px dotted;
        cursor: help;
        position: relative;
    }
    .mo-prov:hover::after,
    .mo-prov:focus::after {
        content: attr(data-prov);
        position: absolute;
        bottom: 125%;
        left: 0;
        background: var(--mo-ink);
        color: var(--mo-bg);
        padding: 8px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: normal;
        line-height: 1.45;
        white-space: pre-line;
        width: max-content;
        max-width: 320px;
        z-index: 1000;
        box-shadow: var(--mo-shadow-md);
        pointer-events: none;
        text-align: left;
    }
    .mo-prov:hover::before,
    .mo-prov:focus::before {
        content: '';
        position: absolute;
        bottom: 125%;
        left: 10px;
        margin-bottom: -5px;
        border: 5px solid transparent;
        border-top-color: var(--mo-ink);
        z-index: 1000;
        pointer-events: none;
    }
    /* Keyboard/touch access to the provenance tooltip (spans get tabindex in JS). */
    .mo-prov:focus {
        outline: 2px solid var(--mo-interactive);
        outline-offset: 2px;
    }
    /* Materialize's .collection clips overflow — let the tooltips escape. */
    #breakdownList.collection,
    #breakdownList .collection-item {
        overflow: visible;
        font-size: 12px;
    }
    /* Make the price-result accordion match the .card-panel above: full
       width, radius, border and shadow instead of Materialize popout (which
       insets each row 24px and squares the corners). */
    #description .collapsible {
        border: 1px solid var(--mo-line);
        border-radius: var(--mo-radius-lg);
        box-shadow: var(--mo-shadow-md);
        background: #fff;
        margin: 0 0 15px;
        /* No overflow:hidden here - it would clip the breakdown provenance
           tooltips (which extend past the panel edge toward the map). Corners
           are rounded on the first/last rows below instead. */
    }
    #description .collapsible.popout > li {
        margin: 0;
        box-shadow: none;
        border: 0;
    }
    /* Round the first and last rows to the container radius (replaces the
       removed overflow:hidden). Total Price is nth-last-child(2) - the last
       visible row while the breakdown is collapsed - so round it too. */
    #description .collapsible > li:first-child,
    #description .collapsible > li:first-child > .collapsible-header {
        border-top-left-radius: var(--mo-radius-lg);
        border-top-right-radius: var(--mo-radius-lg);
    }
    #description .collapsible > li:last-child,
    #description .collapsible > li:last-child:not(.active) > .collapsible-header,
    #description .collapsible > li:last-child.active > .collapsible-body {
        border-bottom-left-radius: var(--mo-radius-lg);
        border-bottom-right-radius: var(--mo-radius-lg);
    }
    /* Emphasise the final quoted total in the accordion. */
    #total {
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--mo-primary);
    }
    /* Promote the quoted Total Price — the primary output — to an elevated,
       clearly-emphasised summary row within the accordion (presentational only;
       #total keeps its id). The Total Price <li> is second from last (the
       hidden breakdown <li> is always last). */
    #description #total { font-size: 1.6rem; }
    #description .collapsible li:nth-last-child(2) {
        background: var(--mo-secondary);
        border-radius: var(--mo-radius);
    }
    #description .collapsible li:nth-last-child(2) .collapsible-header {
        font-weight: 600;
        color: var(--mo-primary);
    }
    /* Bodyless accordion rows toggle nothing — don't imply they're clickable. */
    #description .collapsible-header { cursor: default; }
    #description .collapsible li:has(.collapsible-body) > .collapsible-header {
        cursor: pointer;
    }
    /* Tabular figures so decimal points line up column-to-column. */
    #breakdownList .secondary-content span, #total, #distance, #ferry,
    #zonesList .secondary-content span, #ferryList .secondary-content span {
        font-variant-numeric: tabular-nums;
    }
    #breakdownList .secondary-content { text-align: right; }
    /* Required-field markers on the field labels. */
    .input-field > label.mo-req::after {
        content: ' *';
        color: var(--mo-error);
    }
    /* The read-only date fields open a calendar picker on click. */
    input.datepicker { cursor: pointer; }
    /* Dismiss control on the persistent message bar. */
    .mo-msg-close {
        float: right;
        background: none;
        border: 0;
        color: inherit;
        cursor: pointer;
        font-size: 1.1rem;
        line-height: 1;
        padding: 0 0 0 12px;
    }
    /* Below the mobile breakpoint the half-width date fields can't fit their
       label on one line — let them go full width so label and value don't overlap. */
    @media (max-width: 600px) {
        #windowFromField, #windowToField { width: 100%; }
    }

    /* ------------------------------------------------------------------
       Page layout (Flexbox/CSS-Grid). Stacks on mobile/tablet; on desktop
       the quote form + results sit beside a tall, sticky map canvas.
       Field ids/names are untouched — only their containers are reflowed.
       ------------------------------------------------------------------ */
    .mo-map-layout {
        display: grid;
        gap: var(--mo-gap-lg);
        grid-template-columns: 1fr;   /* mobile + tablet: single column */
        align-items: start;
    }
    @media (min-width: 993px) {
        .mo-map-layout {
            grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
        }
    }
    /* Left column holds the form card, message bar and results accordion. */
    .mo-map-form { min-width: 0; }
    /* The card has a top margin the map column lacks, so its top sat 7px below
       the map. Zero it so the form card and the map box share a top edge. */
    .mo-map-form .card-panel { margin-top: 0; }
    /* Trim the outer form row's trailing margin (it doubled up with the card
       padding) and the action row's top margin (it doubled up with the date
       row's bottom margin) so the spacing around the Calculate button is even. */
    #form > .row { margin-bottom: 0; }
    .mo-actions { margin-top: 0; }
    /* Map canvas: usable height at every breakpoint; sticks alongside the
       form on desktop so it stays in view while the results grow. */
    .mo-map-canvas {
        width: 100%;
        height: 460px;
        background-color: var(--mo-secondary);
        border-radius: var(--mo-radius-lg); /* match the .card-panel corners */
        overflow: hidden;                   /* clip the Google Map tiles to the radius */
    }
    @media (max-width: 600px) {
        .mo-map-canvas { height: 340px; }
    }
    @media (min-width: 993px) {
        .mo-map-canvas {
            /* Definite height so #map's height:100% resolves (percentage heights
               against an `auto` parent collapse to 0 → blank Google Map). */
            /* Stick below the 64px fixed navbar (+16px gap), not under it. */
            height: calc(100vh - 96px);
            min-height: 620px;
            position: sticky;
            top: 80px;
        }
    }
    /* When the size collapses the window to an exact day, "window to" is hidden
       and the lone "collection day" field fills the column rather than leaving a
       dead half (the from/to window pair stays 2-up). */
    #dateModeRow.mo-window-exact #windowFromField { width: 100%; }
</style>
@stop
@section('content')
@include('includes.page_header', [
    'title'   => 'Get a quote',
    'purpose' => 'Enter the pickup and delivery cities and the load size to calculate a removal price and see the route on the map.',
])
{{-- Two-column layout: form + results (left) beside the map (right) on
     desktop; single column stack on tablet/mobile. --}}
<div class="mo-map-layout">
<div class="mo-map-form">
<div class="card-panel">
    <form method="POST" action="/send_location" class="col s12" id="form">
        @csrf
        <div class="row">
            <div class="input-field col s12">
                <label for="from" class="mo-req">Pickup city</label>
                <input type="search" required id="from" name="from" class="validate" placeholder="Start typing a city, e.g. London">

            </div>
            <div class="input-field col s12">
                <label for="to" class="mo-req">Delivery city</label>
                <input id="to" required type="search" name="to" class="validate" placeholder="Start typing a city, e.g. Paris">
            </div>
            <div class="row">
                <div class="input-field col s12">
                    <label for="volume" class="mo-req">Volume <span class="mo-unit">(m³)</span></label>
                    {{-- #volume stays free text (the e2e harness page.fill()s it);
                         the datalist is additive UX only — it suggests the priced
                         size set 5/10/15/20/30 without constraining input. The
                         server rejects off-list volumes with a 422 (SCOPE §6). --}}
                    <input id="volume" required type="text" name="volume" class="validate" inputmode="decimal" placeholder="Volume in m³ — 5, 10, 15, 20 or 30" list="volumeSizes">
                    <datalist id="volumeSizes">
                        <option value="5">
                        <option value="10">
                        <option value="15">
                        <option value="20">
                        <option value="30">
                    </datalist>
                </div>
                {{-- Formula picker retired: the web quote always uses the canonical
                     MuveOne formula. Kept as a hidden field so the search payload
                     stays well-formed; MapController forces this value server-side. --}}
                <input type="hidden" id="formula" name="formula" value="{{ config('pricing.web_default_formula_id') }}">
            </div>
            {{-- Seasonal pricing (D14): collection-window picker. A single control
                 that adapts to the requested size — exact-day sizes show one
                 "Collection day" field, part-load sizes show a "from → to" window.
                 Defaults to today (Europe/London, rendered server-side — never
                 the browser's timezone) so a no-touch quote prices for today.
                 New element ids only: #from/#to/#volume/#seach above
                 must stay untouched (the e2e harness depends on them). --}}
            {{-- Booking notice (Phase 3): every move must be booked at least
                 config('transfer.min_booking_notice_days') days ahead, so the
                 date fields default to (and the pickers floor at) the earliest
                 bookable date, not today. The server re-enforces this. --}}
            @php $moBookByDays = (int) config('transfer.min_booking_notice_days', 7); @endphp
            @php $moEarliest = now('Europe/London')->addDays($moBookByDays); @endphp
            <div class="row" id="dateModeRow">
                <div class="col s12" style="margin-bottom: 6px;">
                    <span style="font-weight: 500;">Collection window</span>
                    <span class="mo-unit" id="windowSpanHint">(up to 3 days)</span>
                </div>
                <div class="col s12" style="margin: -2px 0 8px; font-size: 0.85em; opacity: 0.72;">
                    Earliest collection date <strong>{{ $moEarliest->format('d/m/Y') }}</strong>
                    — moves are booked at least {{ $moBookByDays }} days ahead.
                </div>
                <div class="input-field col s6" id="windowFromField">
                    <label for="window_from" class="active"><span id="windowFromLabel">Window from</span> <span class="mo-unit">(DD/MM/YYYY)</span></label>
                    <input id="window_from" type="text" name="window_from" class="datepicker" value="{{ $moEarliest->format('d/m/Y') }}" placeholder="DD/MM/YYYY">
                </div>
                <div class="input-field col s6" id="windowToField" style="display:none;">
                    <label for="window_to" class="active">Window to <span class="mo-unit">(DD/MM/YYYY)</span></label>
                    <input id="window_to" type="text" name="window_to" class="datepicker" value="{{ $moEarliest->format('d/m/Y') }}" placeholder="DD/MM/YYYY">
                </div>
            </div>
            <div class="input-field col s12 mo-actions">
                <input type="submit" id="seach" class="btn btn-primary" value="Calculate">
                <span class="mo-search-hint">Calculates the price and draws the route between the two cities.</span>
            </div>
        </div>
    </form>
</div>
<div id="msgBar" role="alert" aria-live="assertive" aria-atomic="true" style="display:none; margin:0 0 12px; padding:12px 16px; border-radius:6px; background:var(--mo-error-bg); color:var(--mo-error); border:1px solid var(--mo-error-line); font-weight:500;"></div>
<div id="description">
    <ul class="collapsible popout" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><span>Origin</span><span id="fromAddress" style="margin-left: auto;"></span></div>
        </li>
        <li>
            <div class="collapsible-header">Destination <span id="toAddress" style="margin-left: auto;"></span></div>
        </li>
        <li>
            <div class="collapsible-header">Total Distance <span id="distance" style="margin-left: auto;"></span></div>
        </li>
        <li>
            <div class="collapsible-header">Ferry Cost <span id="ferry" style="margin-left: auto;"></span></div>
            <div class="collapsible-body">
                <ul id="ferryList" class="collection">
                </ul>
            </div>
        </li>
        <li>
            <div class="collapsible-header">Waypoint <span id="waypoint" style="margin-left: auto;"></span></div>
            <div class="collapsible-body">
                <ul id="waypointList" class="collection">
                </ul>
            </div>
        </li>
        <li>
            <div class="collapsible-header">Exceptions <span id="exceptions" style="margin-left: auto;"></span></div>
            <div class="collapsible-body">
                <ul id="exceptionsList" class="collection">
                </ul>
            </div>
        </li>
        <li>
            <div class="collapsible-header">Zones <span id="zones" style="margin-left: auto;"></span></div>
            <div class="collapsible-body">
                <ul id="zonesList" class="collection">
                </ul>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><span>Total Price</span><span id="total" style="margin-left: auto;"></span></div>
        </li>
        <li id="breakdownItem" style="display: none;">
            <div class="collapsible-header">How was this price calculated? <span id="breakdownContext" style="margin-left: auto;"></span></div>
            <div class="collapsible-body">
                <ul id="breakdownList" class="collection">
                </ul>
            </div>
        </li>
        <li id="transferItem" style="display: none;">
            <div class="collapsible-header">Transfer time &amp; booking <span id="transferContext" style="margin-left: auto;"></span></div>
            <div class="collapsible-body">
                <ul id="transferList" class="collection">
                </ul>
            </div>
        </li>
    </ul>
</div>
</div><!-- /.mo-map-form -->
<div class="mo-map-canvas">
    <div style="height: 100%;" id="map"></div>
</div>
</div><!-- /.mo-map-layout -->
@stop
@section('js')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@placekit/autocomplete-js@2/dist/placekit-autocomplete.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/@placekit/autocomplete-js@2"></script>
<script>
    $(document).ready(() => {
        $('#loader').hide();
        $('#description').hide();
        // Per-size collection-window caps (max calendar days inclusive; 1 = exact
        // day), server-rendered from config/transfer.php so the client mirrors the
        // Pricer's per-volume rule. Keys are size strings ("5","10",…).
        var moWindowDays = @json(config('transfer.collection_window_days'));
        // Fallback cap when the typed size is off-list (server re-validates and
        // 422s the volume anyway) — mirrors SeasonalAdjustmentService::MAX_WINDOW_DAYS.
        var MO_WINDOW_DAYS_DEFAULT = {{ \App\Services\SeasonalAdjustmentService::MAX_WINDOW_DAYS }};
        function moWindowDaysForSize() {
            var key = String(parseInt(String($('#volume').val()), 10));
            return moWindowDays[key] || MO_WINDOW_DAYS_DEFAULT;
        }
        // Changing the size re-applies the per-size window cap + label immediately,
        // and re-defaults "to" to the new cap's full span (a pick made under a
        // previous size's cap shouldn't linger under a different one).
        $('#volume').on('input change', function() { moToUserPicked = false; moConstrainWindowTo(); });
        // Calendar selectors (Materialize/pickadate, bundled since 0.100).
        // The inputs become read-only, so only calendar picks can enter them —
        // no free-typed dates. "Today" comes from the server-rendered value
        // (Europe/London), never the browser clock; the server re-validates
        // every date regardless (past dates and >3-day windows still 422).
        function moParseDmy(s) {
            var p = String(s).split('/');
            return new Date(Number(p[2]), Number(p[1]) - 1, Number(p[0]));
        }
        var moToday = moParseDmy($('#window_from').val());
        var moPickerBase = {
            format: 'dd/mm/yyyy',
            min: moToday,
            firstDay: 1,
            selectMonths: true,
            selectYears: 2,
            container: 'body',
            onSet: function(ct) { if (ct.select !== undefined) this.close(); }
        };
        $('#window_from, #window_to').pickadate(moPickerBase);
        // Materialize 0.100's bundled pickadate is incompatible with jQuery
        // 3.4+ — the focus retrigger closes the picker the instant it opens,
        // so clicking the field appears to do nothing. Suppressing the native
        // mousedown focus lets the picker's own click handler open it (the
        // canonical workaround for this pairing; verified live 2026-07-13).
        $('#window_from, #window_to').on('mousedown', function(e) { e.preventDefault(); });
        var moFromPicker = $('#window_from').pickadate('picker');
        var moToPicker = $('#window_to').pickadate('picker');
        // Collection window: "to" is constrained to [from, from + (days-1)] where
        // `days` is the selected size's per-size cap (mirrors the server's D9 rule).
        // days === 1 → exact day: the "to" field is hidden and pinned to "from".
        function moApplyWindowUi(days) {
            var exact = days <= 1;
            $('#windowSpanHint').text(exact ? '(exact day)' : '(up to ' + days + ' days)');
            // Exact-day sizes collapse to a single "Collection day" field (the
            // "window to" field is hidden and the mo-window-exact class lets the
            // lone "from" field fill the column); part-load sizes show from → to.
            $('#dateModeRow').toggleClass('mo-window-exact', exact);
            $('#windowToField').toggle(!exact);
            $('#windowFromLabel').text(exact ? 'Collection day' : 'Window from');
        }
        // Whether the user has deliberately clicked a "to" date (vs. it sitting
        // at its auto-filled default). Only a real, non-muted pick sets this —
        // moConstrainWindowTo()'s own muted set()s never do (see the listener
        // below). Starts false so the very first render defaults to the full span.
        var moToUserPicked = false;
        function moConstrainWindowTo() {
            var days = moWindowDaysForSize();
            moApplyWindowUi(days);
            var sel = moFromPicker.get('select');
            if (!sel) return;
            var from = new Date(sel.year, sel.month, sel.date);
            var max = new Date(sel.year, sel.month, sel.date + (days - 1));
            moToPicker.set('min', from, { muted: true });
            moToPicker.set('max', max, { muted: true });
            var to = moToPicker.get('select');
            var outOfRange = !to || to.pick < from.getTime() || to.pick > max.getTime();
            // Default "to" to the FULL allowed span (from + days-1), maintaining
            // that gap as "from" moves — not the single day it used to collapse
            // to. A user's deliberate, still-in-range pick is left untouched;
            // an invalidated pick (size shrank the cap, or "from" moved past it)
            // is re-validated by reverting to the full span. Exact-day sizes need
            // no special case: max === from when days === 1.
            if (!moToUserPicked || outOfRange) {
                moToPicker.set('select', max, { muted: true });
                $('#window_to').val(moToPicker.get('select', 'dd/mm/yyyy'));
                moToUserPicked = false;
            }
        }
        // Only a genuine calendar click reaches here (muted programmatic sets
        // above don't fire 'set') — that's what promotes "to" from auto-filled
        // default to a deliberate, gap-preserving user choice.
        moToPicker.on('set', function(ct) {
            if (ct.select !== undefined) moToUserPicked = true;
        });
        moFromPicker.on('set', function(ct) {
            if (ct.select !== undefined) moConstrainWindowTo();
        });
        moConstrainWindowTo();
        // Show a message to the user: persistent inline bar + toast (if available).
        function showMsg(text, color) {
            color = color || 'red';
            var bar = document.getElementById('msgBar');
            if (bar) {
                // Rebuild as DOM: the status text is never treated as HTML, the
                // state is paired with an icon (not conveyed by color alone), and
                // a manual dismiss control lets a stale message be cleared.
                bar.innerHTML = '';
                var icon = document.createElement('i');
                icon.className = 'material-icons';
                icon.setAttribute('aria-hidden', 'true');
                icon.textContent = (color === 'teal') ? 'check_circle' : 'error_outline';
                icon.style.verticalAlign = 'middle';
                icon.style.marginRight = '8px';
                bar.appendChild(icon);
                bar.appendChild(document.createTextNode(text));
                var close = document.createElement('button');
                close.type = 'button';
                close.className = 'mo-msg-close';
                close.setAttribute('aria-label', 'Dismiss message');
                close.textContent = '×';
                close.onclick = function() { bar.style.display = 'none'; };
                bar.appendChild(close);
                if (color === 'teal') { bar.style.background = 'var(--mo-success-bg)'; bar.style.color = 'var(--mo-success)'; bar.style.borderColor = 'var(--mo-success)'; }
                else { bar.style.background = 'var(--mo-error-bg)'; bar.style.color = 'var(--mo-error)'; bar.style.borderColor = 'var(--mo-error-line)'; }
                bar.style.display = 'block';
            }
            try {
                if (typeof Materialize !== 'undefined' && Materialize.toast) {
                    Materialize.toast(text, 5000, 'rounded ' + (color === 'teal' ? 'teal accent-3' : 'red'));
                } else if (typeof M !== 'undefined' && M.toast) {
                    M.toast({ html: text, displayLength: 5000, classes: 'rounded ' + color });
                }
            } catch (e) {}
            console.log('[MuveOne Pricer]', text);
        }
        // Render the "Transfer time & booking" panel from response.transfer
        // (per-size loading→delivery range, collection window, book-by notice).
        function renderTransfer(response) {
            $('#transferItem').hide();
            $('#transferList').empty();
            $('#transferContext').text('');
            var t = response.transfer;
            if (!t || !t.sizes) return;
            var keys = Object.keys(t.sizes);
            if (!keys.length) return;
            keys.forEach(function(k) {
                var s = t.sizes[k];
                var range = (s.transfer_min_days === s.transfer_max_days)
                    ? (s.transfer_min_days + (s.transfer_min_days === 1 ? ' day' : ' days'))
                    : (s.transfer_min_days + '–' + s.transfer_max_days + ' days');
                var win = (s.collection_window_days <= 1)
                    ? 'exact day' : ('up to ' + s.collection_window_days + ' days');
                var label = s.m3 + ' m³' + (s.carriage ? ' — ' + s.carriage : '');
                $('#transferList').append(
                    '<li class="collection-item"><div>' + label +
                    '<a href="#!" class="secondary-content"><span>' + range + '</span></a></div>' +
                    '<div style="font-size:0.85em;opacity:0.72;margin-top:2px;">Collection window: '
                    + win + ' · Book at least ' + s.book_by_notice_days
                    + ' days before loading</div></li>'
                );
            });
            $('#transferContext').text('loading → delivery');
            $('#transferItem').show();
        }
        // Render the "How was this price calculated?" panel from response.breakdown
        // (sent by the server only when it reconciles with the served price).
        function renderBreakdown(response) {
            var bd = response.breakdown;
            var size = String($('#volume').val());
            $('#breakdownItem').hide();
            $('#breakdownList').empty();
            $('#breakdownContext').text('');
            if (!bd || !bd.engine || !bd.sizes || !bd.sizes[size]) {
                return;
            }
            var s = bd.sizes[size];
            var eng = bd.engine;
            var money = function(n) { return Number(n).toFixed(2); };
            var tierLabels = {
                low_distance: 'short haul (under 1000km)',
                mid_distance: 'medium haul (1000–2000km)',
                high_distance: 'long haul (2000–3000km)',
                above_high_distance: 'very long haul (over 3000km)'
            };
            var row = function(label, amount) {
                $('#breakdownList').append(
                    '<li class="collection-item"><div>' + label +
                    '<a href="#!" class="secondary-content"><span>' + amount + '</span></a></div></li>'
                );
            };
            // Provenance tooltips (additive: bd.prov absent => every pv() call
            // returns its value untouched, so the panel renders exactly as
            // before — old server × new client mix safely).
            var prov = bd.prov || null;
            var sProv = (prov && prov.sizes && prov.sizes[size]) ? prov.sizes[size] : {};
            var esc = function(t) {
                return String(t)
                    .replace(/&/g, '&amp;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                    .replace(/"/g, '&quot;');
            };
            // Wrap a display value in a hoverable provenance span when its
            // prov string exists; prov strings are plain text (never HTML) —
            // entity-escaped for both the span text and the data-prov attribute.
            var pv = function(value, provText) {
                if (!provText) { return value; }
                return '<span class="mo-prov" tabindex="0" data-prov="' + esc(provText) + '">' + esc(value) + '</span>';
            };
            var detail = !s.derived_from_15;
            row('Rates: <b>' + eng.pricing_country + '</b>' +
                (eng.pricing_country_fallback ? ' (default — route not in the rate table)' : '') +
                ', ' + pv(tierLabels[eng.distance_tier] || eng.distance_tier, prov && prov.distance_tier) +
                ' · place of supply <b>' + eng.place_of_supply + '</b>', '');
            if (s.derived_from_15) {
                row(pv('30 m³ is priced as 2 × the 15 m³ quote', sProv.derived), '');
            }
            row('Route cost' + (detail ? ': ' + pv(eng.distance_km, prov && prov.distance_km) + ' km × ' + pv(s.ppk_rate, sProv.ppk_rate) + ' × ' + pv(s.ppk_percentage, sProv.ppk_percentage) : ''), money(s.ppk_cost));
            // "+ 100" markup base: constant-driven when the server sent the
            // real value; hardcoded literal kept as the no-prov fallback.
            var markupBaseTerm = (prov && prov.markup_base_value != null)
                ? ' + ' + pv(prov.markup_base_value, prov.markup_base_const)
                : ' + 100';
            row('Markup' + (detail ? ': ' + pv(s.markup_base, sProv.markup_base) + ' × ' + pv(s.markup_percentage, sProv.markup_percentage) + markupBaseTerm : ''), money(s.markup));
            row('Ferry cost' + (detail ? ': ' + pv(money(eng.total_ferry_cost), prov && prov.total_ferry_cost) + ' × ' + pv(s.ferry_cost_percentage, sProv.ferry_cost_percentage) : '') +
                (eng.has_null_ferries ? ' — <span style="color:var(--mo-error)">a crossing on this route is unpriced</span>' : ''), money(s.ferry_cost));
            if (Number(s.min_cost) !== 0) {
                // "under 500 km": constant-driven when the server sent the real
                // gate value; hardcoded literal kept as the no-prov fallback.
                if (prov && prov.min_cost_distance_km != null) {
                    row(pv('Minimum charge', sProv.min_cost) + ' (route under ' + pv(prov.min_cost_distance_km, prov.min_cost_rule) + ' km)', money(s.min_cost));
                } else {
                    row('Minimum charge (route under 500 km)', money(s.min_cost));
                }
            }
            if (Number(s.zone_cost) !== 0) {
                row(pv('Zone cost', prov && prov.total_zone_cost), money(s.zone_cost));
            }
            // Seasonal M-adjustment (D11): rendered whenever the explainer sent
            // the per-size entry — including at 0% — so the panel always shows
            // which month/week curve priced the quote (the label text comes
            // entirely from the server-side explainer — weekly labels need
            // no client change).
            if (s.seasonal) {
                row(pv(s.seasonal.label, prov && prov.seasonal), money(s.seasonal.amount));
            }
            row('<b>Subtotal</b>', '<b>' + money(s.subtotal) + '</b>');
            if (Number(s.margin_amount) !== 0) {
                row('Import/export margin (+' + pv((Number(eng.margin) * 100).toFixed(0) + '%', prov && prov.margin) + ')', money(s.margin_amount));
            }
            if (Number(s.vat_amount) !== 0) {
                row('VAT (+' + pv((Number(eng.vat_rate) * 100).toFixed(0) + '%', prov && prov.vat_rate) + ')', money(s.vat_amount));
            }
            row('<b style="color:var(--mo-primary)">Total (rounded)</b>', '<b style="color:var(--mo-primary)">' + s.total_formatted + '</b>');
            $('#breakdownContext').text(money(s.total));
            $('#breakdownItem').show();
        }
        // City autocomplete via PlaceKit (successor to the discontinued Algolia Places).
        // Wrapped so a PlaceKit failure can never break the search handler below.
        try {
            var pkKey = '{{ env("PLACEKIT_KEY") }}';
            // European removals app — scope city suggestions to Europe so results
            // are relevant regardless of where the browser is (PlaceKit has no
            // flag to disable IP-proximity ranking, so we constrain by country).
            var euCountries = ['gb','ie','fr','de','nl','be','lu','es','pt','it','at','ch','cz','sk','pl','dk','se','no','fi','hu','ro','bg','gr','hr','si','ee','lv','lt','is'];
            // NOTE on browser-location bias: PlaceKit has no flag to disable proximity
            // ranking. Scoping to `countries` overrides PlaceKit's default of using the
            // visitor's IP *country* (the real cause of skewed results) — so ranking
            // falls to text match + population, e.g. "Lond" -> "City of London".
            // We deliberately do NOT set `coordinates`: any fixed anchor reintroduces a
            // proximity bias that mis-ranks (e.g. anchoring near Calais floated
            // "Bromley" above "London"). Population-based ranking is the best result.
            if (typeof placekitAutocomplete !== 'undefined' && pkKey) {
                ['#from', '#to'].forEach(function (sel) {
                    placekitAutocomplete(pkKey, {
                        target: sel,
                        language: 'en',
                        format: {
                            // Store a clean, geocodable "City, Country" value for the backend.
                            value: function (item) {
                                return [item.city || item.name, item.country].filter(Boolean).join(', ');
                            },
                        },
                    }).configure({
                        types: ['city'],
                        countries: euCountries,
                        maxResults: 6,
                    });
                });
            } else {
                console.log('[MuveOne Pricer] PlaceKit not initialised (missing key or library).');
            }
        } catch (e) {
            console.log('[MuveOne Pricer] PlaceKit init failed:', e);
        }
        $("#form").submit(function(e) {
            $('#loader').show();
            $('#msgBar').hide();
            $('#seach').prop('disabled', true);
            $('#ferryList').empty();
            $('#waypoint').empty();
            $('#exceptions').empty();
            $('#exceptionsList').empty();
            $('#transferItem').hide();
            $('#transferList').empty();
            e.preventDefault();
            var requestData = {
                "_token": "{{ csrf_token() }}",
                'from': $('#from').val(),
                'to': $('#to').val(),
                'volume': $('#volume').val(),
                'formula': $('#formula').val(),
            };
            // Seasonal pricing: one collection-window control, but the wire
            // contract stays moving_date XOR collection_window (the server 422s
            // on both). Only a TRUE range — "to" strictly after "from", with the
            // "to" field on screen — posts collection_window; a single collection
            // day (exact-day size, to == from, or a stale/inverted to that never
            // synced) posts moving_date so the basis/breakdown/email render a
            // single date and an inverted window can never reach the server.
            // Compare as YYYYMMDD integers to sidestep any picker timezone skew.
            var moDmyNum = function(s) {
                var p = String(s).split('/');
                return Number(p[2]) * 10000 + Number(p[1]) * 100 + Number(p[0]);
            };
            var winFrom = $('#window_from').val();
            var winTo = $('#window_to').val();
            if ($('#windowToField').is(':visible') && moDmyNum(winTo) > moDmyNum(winFrom)) {
                requestData['collection_window'] = { 'from': winFrom, 'to': winTo };
            } else {
                requestData['moving_date'] = winFrom;
            }
            $.ajax({
                url: baseUrl + "/send_location",
                type: "POST",
                data: requestData,
                success: function(locDetail) {
                    $('#ferryList').empty();
                    $('#loader').hide();
                    $('#seach').prop('disabled', false);
                    var response;
                    try {
                        response = (typeof locDetail === 'string') ? JSON.parse(locDetail) : locDetail;
                    } catch (parseErr) {
                        console.log('Parse error:', parseErr, locDetail);
                        showMsg('Unexpected response from the server. Please reload the page and try again.', 'red');
                        return;
                    }
                    console.log(response);
                    var status = response ? response['status'] : null;
                    if (!response || !status) {
                        showMsg('Could not calculate a price — the server returned no result. Check the locations and try again.', 'red');
                        return;
                    }
                    if (status == 'OK') {
                        showMsg('Success', 'teal');
                        $('#total').text(response.finalPrice.total_price);
                        try {
                            $('#description').fadeIn('slow');
                            $('#fromAddress').text(response['from']);
                            $('#toAddress').text(response['to']);
                            $('#distance').text(response['distance'] + 'km');
                            $('#ferry').text(response['ferriesCost']);
                            $('#zones').text('');

                            //get ferries
                            if (response['ferries'].length > 0) {
                                $.each(response['ferries'], function(key, items) {
                                    $('#ferryList').append('<li class="collection-item"><div>' + items['name'] + '<a href="#!" class="secondary-content"><span>' + items['price'] + '</span></a></div></li>');
                                });
                            } else {
                                $('#ferryList').append('<li class="collection-item"><div>No Ferries</div></li>');
                            }
                            // get wapoints
                            if (response['waypoint'].length > 0) {
                                $('#waypoint').text(response['waypoint'].length - 1);
                                $('#waypointList').empty();
                                $.each(response['waypoint'], function(key, items) {
                                    if (key != 0) {
                                        $('#waypointList').append('<li class="collection-item"><div>' + items.replace('|', '') + '</div></li>');
                                    }
                                });
                            } else {
                                $('#waypointList').empty().append('<li class="collection-item"><div>No Waypoint</div></li>');
                            }
                            // get exceptions (stops the engine removed for this route).
                            // Config-provided strings — build the row via .text() so
                            // they are escaped, never interpolated into an HTML string.
                            if (response['exceptions'] && response['exceptions'].length > 0) {
                                $('#exceptions').text(response['exceptions'].length);
                                $('#exceptionsList').empty();
                                $.each(response['exceptions'], function(key, items) {
                                    var text = items['exception'] + ' — removed for ' +
                                        items['countryf'] + ' → ' + items['countryt'];
                                    $('#exceptionsList').append(
                                        $('<li class="collection-item"></li>').append(
                                            $('<div></div>').text(text)
                                        )
                                    );
                                });
                            } else {
                                $('#exceptionsList').empty().append('<li class="collection-item"><div>No Exceptions</div></li>');
                            }
                            //get zones
                            let zones = Object.keys(response.zones).length;
                            if (zones > 0) {
                                $('#zones').text(zones);
                                $('#zonesList').empty();
                                $.each(response['zones'], function(key, items) {
                                    $('#zonesList').append('<li class="collection-item"><div>' + items['zone'] + '<a href="#!" class="secondary-content"><span>' + items['distance'] + 'km ('+items['price']+')</span></a></div></li>');
                                });
                            } else {
                                $('#zonesList').empty().append('<li class="collection-item"><div>No zones</div></li>');
                            }
                            // price breakdown panel (additive; hides itself when the
                            // server sent no breakdown — it can never block the quote)
                            try {
                                renderBreakdown(response);
                            } catch (bdErr) {
                                $('#breakdownItem').hide();
                                console.log(bdErr);
                            }
                            // transfer-time & booking panel (additive; hides itself
                            // when the server sent no transfer block)
                            try {
                                renderTransfer(response);
                            } catch (tErr) {
                                $('#transferItem').hide();
                                console.log(tErr);
                            }
                            // console.log(response);
                            onChangeHandler(response);
                        } catch (error) {
                            $('#loader').hide();
                            $('#seach').prop('disabled', false);
                            showMsg('The price was calculated but the result could not be fully displayed: ' + error, 'red');
                            console.log(error);
                        }
                    } else {
                        $('#loader').hide();
                        showMsg('Could not calculate a price (' + status + '). Please check the from/to locations.', 'red');
                    }
                },
                error: function(e) {
                    $('#loader').hide();
                    $('#seach').prop('disabled', false);
                    var msg;
                    if (e.status === 419) {
                        msg = 'Your session expired. Please reload the page and try again.';
                    } else if (e.responseJSON && e.responseJSON.message) {
                        msg = e.responseJSON.message;
                    } else {
                        msg = 'Request failed (HTTP ' + (e.status || '?') + '). Please try again.';
                    }
                    showMsg(msg, 'red');
                    console.log('AJAX error:', e.status, e.responseText);
                }
            });
        });
    });

    var onChangeHandler = response => initMap(response);
    var map;
    var initMap = (routes) => {
        if (routes) {
            let resp = routes['routes'][0]['legs'][0];
            map = new google.maps.Map(document.getElementById('map'), {
                center: {
                    lat: routes['origin']['lat'],
                    lng: routes['origin']['lng']
                },
                zoom: 8
            });

            var origin, destination = new google.maps.LatLng();
            origin = routes['origin'];
            destination = routes['destination'];

            new google.maps.Marker({
                position: origin,
                icon: '{{ asset("image/start.png") }}',
                map: map
            });
            new google.maps.Marker({
                position: destination,
                icon: '{{ asset("image/end.png") }}',
                map: map
            });

            var flightPlanCoordinates = routes['routes'][0]['overview_polyline']['points'];
            var bounds = new google.maps.LatLngBounds();
            bounds.extend(origin);
            bounds.extend(destination);
            map.fitBounds(bounds);

            //mark zones
            $.each(routes['zones'], function(key, value) {
                let a = value.polygon;
                const bounds = new window.google.maps.LatLngBounds();
                $.each(a, function(k, point) {
                    bounds.extend(new window.google.maps.LatLng(point.lat, point.lng));
                });
                let polygonCenter = bounds.getCenter();
                var infowindow = new google.maps.InfoWindow({
                    content: '<div id="content">' +
                        '<span>' + value.zone + '</span>' +
                        '</div>'
                });

                infowindow.setPosition(bounds.getCenter());
                infowindow.open(map);

                new google.maps.Marker({
                    position: value.start,
                    icon: '{{ asset("image/location.png") }}',
                    map: map
                });
                new google.maps.Marker({
                    position: value.end,
                    icon: '{{ asset("image/location.png") }}',
                    map: map
                });
                var polygon = new google.maps.Polygon({
                    paths: value.polygon,
                    strokeColor: "#000000",
                    strokeOpacity: 0.8,
                    strokeWeight: 1,
                    fillColor: "#000000",
                    fillOpacity: 0.1
                });
                polygon.setMap(map);

            });
            //end mark zones
        } else {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(position => {
                    let location = {
                        lat: position.coords.latitude,
                        lng: position.coords.longitude
                    };
                    map.setCenter(location);
                    map.getCenter();
                });
            }
            var mapDefaults = (window.MO_MAP_DEFAULTS || { center: { lat: 50.0, lng: 9.0 }, zoom: 4 });
            map = new google.maps.Map(document.getElementById('map'), {
                center: mapDefaults.center,
                zoom: mapDefaults.zoom
            });
            var flightPlanCoordinates = [];
        }
        var flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            geodesic: false,
            strokeColor: getComputedStyle(document.documentElement).getPropertyValue('--mo-primary').trim(),
            strokeOpacity: 1,
            strokeWeight: 2
        });
        flightPath.setMap(map);
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY', env('GOOGLE_API_KEY')) }}&callback=initMap" async defer></script>
@stop