@extends('layouts.app')
@section('head')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<style>
    select {
        display: block;
    }
    .mo-req { color: var(--mo-danger); }
    .mo-form-legend { display: block; margin: 0 0 4px; color: var(--mo-muted); font-size: 0.8rem; }
    .mo-form-actions { margin-top: 15px; }
    .mo-form-actions .btn + .btn { margin-left: 12px; }
    /* Match the Waypoints table: compact inline row-action buttons and tighter
       row padding (the global dataTable rule otherwise forces 62px-tall buttons
       and very tall rows). */
    #ExceptionTable td:last-child {
        display: flex;
        gap: 6px;
        align-items: center;
    }
    #ExceptionTable td:last-child .mo-btn {
        box-sizing: border-box;
        min-height: 0;
        padding: 3px 12px;
        font-size: 13px;
        line-height: 1.6;
    }
    #ExceptionTable td { padding-top: 6px; padding-bottom: 6px; }
</style>
@stop
@section('content')
@include('includes.revision_history', ['dataset' => 'routing', 'title' => 'Waypoints & exceptions'])
@include('includes.page_header', [
    'title'   => 'Exceptions',
    'purpose' => 'Cancel a forced waypoint for a specific from/to country pair, so a route matching that pair is no longer dragged through it.',
])
<div class="row">
    <div class="col s12 m12">
        <div class="card-panel" style="background-color: var(--mo-secondary);">
            <form id="exceptionForm" class="addException" method="POST" action="/exception">
                @csrf
                <div class="mo-stack">
                    <div class="mo-grid mo-grid--2">
                        <!-- input -->
                        <div class="input-field">
                            <input placeholder="From country" name="countryf" id="from" type="text" class="validate" list="euCountryList" autocomplete="off" aria-required="true">
                            <label for="from" class="active">From country <span class="mo-req">*</span></label>
                        </div>
                        <!-- input -->
                        <div class="input-field">
                            <input placeholder="To country" name="countryt" id="to" type="text" class="validate" list="euCountryList" autocomplete="off" aria-required="true">
                            <label for="to" class="active">To country <span class="mo-req">*</span></label>
                        </div>
                    </div>
                    <!-- input -->
                    <div class="input-field">
                        <input placeholder="Select a waypoint to cancel" name="exception" id="exception" type="text" class="validate" list="exceptionOptions" autocomplete="off" aria-required="true">
                        <datalist id="exceptionOptions"></datalist>
                        <label for="exception" class="active">Exception (waypoint to cancel) <span class="mo-req">*</span></label>
                        <span class="mo-form-legend">Pick an existing waypoint. Only an exact waypoint name cancels a forced stop.</span>
                    </div>
                </div>
                {{-- European countries for the From/To pair (native datalist;
                     an exception matches on the country pair). --}}
                <datalist id="euCountryList">
                    <option value="United Kingdom"></option><option value="Ireland"></option><option value="France"></option><option value="Germany"></option><option value="Netherlands"></option><option value="Belgium"></option><option value="Luxembourg"></option><option value="Spain"></option><option value="Portugal"></option><option value="Italy"></option><option value="Austria"></option><option value="Switzerland"></option><option value="Czechia"></option><option value="Slovakia"></option><option value="Poland"></option><option value="Denmark"></option><option value="Sweden"></option><option value="Norway"></option><option value="Finland"></option><option value="Hungary"></option><option value="Romania"></option><option value="Bulgaria"></option><option value="Greece"></option><option value="Croatia"></option><option value="Slovenia"></option><option value="Estonia"></option><option value="Latvia"></option><option value="Lithuania"></option><option value="Iceland"></option>
                </datalist>
                <div class="mo-form-actions">
                    <input type="submit" id="add" class="btn btn-primary" value="Add exception">
                    <input type="button" id="addNew" class="btn btn-primary" style="display: none;" value="Cancel">
                </div>
            </form>
        </div>
    </div>
</div>
<div class="row">
    <table id="ExceptionTable">
        <thead>
            <tr>
                <th name="exception">Exception</th>
                <th name="countryf">from</th>
                <th name="countryt">to</th>
                <th name="action">Action</th>
            </tr>
        </thead>
    </table>
</div>

@include('includes.confirm',['message' => 'This cannot be undone. Delete this exception?','title' => 'Delete exception','formId' => 'exceptionDeleteForm','fieldId' => 'exceptionId'])
@stop
@section('js')
<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('js/exceptions/table.js') }}"></script>
<script src="{{ asset('js/exceptions/exception.js') }}"></script>
@stop