@extends('layouts.app')
@section('head')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<style>
    select {
        display: block;
    }
    /* Read-only location map shown inside the price panel */
    #ferryMap {
        width: 100%;
        height: 300px;
        border-radius: 4px;
        margin-bottom: .5rem;
    }
    .mo-map-hint {
        margin: 0 0 1rem;
        color: var(--mo-ink);
        opacity: .8;
        font-size: .85rem;
    }
    .mo-req { color: var(--mo-danger); }
    /* Pricing banner (grey with brand accent) */
    .mo-price-banner {
        margin: 0 0 14px;
        padding: 8px 12px;
        border-left: 3px solid var(--mo-interactive);
        border-radius: var(--mo-radius);
        background: #ddd;
        color: var(--mo-ink);
        font-size: 0.85rem;
    }
    .mo-form-actions { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
    /* Ferries auto-detected at price 0 still need an operator to price them */
    .mo-flag { color: var(--mo-danger); font-weight: 600; }
    /* Numeric columns (#, Price): right-align + tabular figures */
    #ferryTable td:nth-child(1), #ferryTable td:nth-child(3),
    #ferryTable th:nth-child(1), #ferryTable th:nth-child(3) {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    /* Compact, style-guide row action buttons */
    #ferryTable td:last-child { display: flex; gap: 6px; align-items: center; }
    #ferryTable td:last-child .mo-btn {
        box-sizing: border-box;
        min-height: 0;
        padding: 3px 12px;
        font-size: 13px;
        line-height: 1.6;
    }
    #ferryTable td { padding-top: 6px; padding-bottom: 6px; }
</style>
@stop
@section('content')
@include('includes.revision_history', ['dataset' => 'ferries', 'title' => 'Ferries'])
@include('includes.page_header', [
    'title'   => 'Ferries',
    'purpose' => 'Ferry crossings are detected automatically when a quote\'s route includes one. Each crossing adds its price to the quote\'s ferry total; a crossing priced 0 flags the quote so an operator can price it. Use this page to set those prices.',
])
<div class="row">
    <div class="col s12 m12">
        <div id="ferryPricePanel" class="card-panel" style="display:none; background-color: var(--mo-secondary);">
            <form id="ferryForm" action="#">
                @csrf
                <input type="hidden" disabled name="_method" value="PUT">
                <p class="mo-price-banner">Setting the price for <strong id="ferryPriceName">—</strong>. A price of 0 leaves the quote flagged so an operator can price it.</p>
                <div>
                    <div id="ferryMap"></div>
                    <p class="mo-map-hint" id="ferryPriceLoc">Detected crossing location.</p>
                </div>
                <div class="input-field">
                    <input placeholder="Price (£)" name="price" id="price" type="text" class="validate" inputmode="decimal" aria-required="true">
                    <label for="price" class="active">Price (£) <span class="mo-req">*</span></label>
                </div>
                <div class="mo-form-actions">
                    <input id="add" type="submit" class="btn btn-primary" value="Save price">
                    <a href="#" id="cancelPrice" class="mo-btn">Cancel</a>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="row">
    <table id="ferryTable">
        <thead>
            <tr>
                <th name="id">#</th>
                <th name="ferry">Ferry</th>
                <th name="price">Price (£)</th>
                <th name="actions">Actions</th>
            </tr>
        </thead>
    </table>
</div>

@include('includes.confirm',[
    'message' => 'This cannot be undone. Delete this ferry?',
    'title' => 'Delete ferry',
    'formId' => 'ferryDeleteForm',
    'fieldId' => 'ferryId'
    ])
@stop
@section('js')
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('js/ferry/table.js') }}"></script>
<script src="{{ asset('js/ferry/ferry.js') }}"></script>
<script>
    // Read-only location map for the price panel. Ferries are detected, not placed
    // by hand, so the map only pinpoints the crossing — there is no click-to-set.
    var moFerryMap = null;
    var moFerryMarker = null;

    function moFerryPlaceMarker(lat, lng, recenter) {
        lat = parseFloat(lat);
        lng = parseFloat(lng);
        if (!moFerryMap || isNaN(lat) || isNaN(lng)) { return; }
        var pos = { lat: lat, lng: lng };
        if (moFerryMarker) {
            moFerryMarker.setPosition(pos);
        } else {
            moFerryMarker = new google.maps.Marker({ position: pos, map: moFerryMap });
        }
        if (recenter) {
            moFerryMap.panTo(pos);
            moFerryMap.setZoom(Math.max(moFerryMap.getZoom(), 9));
        }
    }
    window.moFerryPlaceMarker = moFerryPlaceMarker;

    // Called by table.js after the (initially hidden) panel is shown, so the map
    // lays out at full size before the marker is dropped.
    function moFerryShowLocation(lat, lng) {
        if (moFerryMap && window.google) {
            google.maps.event.trigger(moFerryMap, 'resize');
            moFerryPlaceMarker(lat, lng, true);
        } else {
            window.moFerryPendingEdit = { lat: lat, lng: lng };
        }
    }
    window.moFerryShowLocation = moFerryShowLocation;

    function initFerryMap() {
        var defaults = (window.MO_MAP_DEFAULTS || { center: { lat: 50.0, lng: 9.0 }, zoom: 4 });
        moFerryMap = new google.maps.Map(document.getElementById('ferryMap'), {
            center: defaults.center,
            zoom: defaults.zoom
        });
        // Honour a Set-price click that happened before the map finished loading.
        if (window.moFerryPendingEdit) {
            google.maps.event.trigger(moFerryMap, 'resize');
            moFerryPlaceMarker(window.moFerryPendingEdit.lat, window.moFerryPendingEdit.lng, true);
            window.moFerryPendingEdit = null;
        }
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_KEY', env('GOOGLE_API_KEY')) }}&callback=initFerryMap" async defer></script>
@stop