@extends('layouts.app')

@section('head')
<link rel="stylesheet" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

<style>
    select {
        display: block;
    }

    label {
        font-size: 14px;
        /* color: #000000; */
    }

    .my-12{
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .mo-customs-note {
        margin: 0 0 18px;
        padding: 12px 14px;
        border: 1px solid var(--mo-line);
        border-left: 3px solid var(--mo-interactive);
        border-radius: var(--mo-radius);
        background: var(--mo-secondary);
        font-size: 13px;
        line-height: 1.5;
    }
    .mo-customs-note dl {
        margin: 0;
    }
    .mo-customs-note dt {
        font-weight: 600;
        margin-top: 6px;
    }
    .mo-customs-note dd {
        margin: 0 0 2px;
    }

    /* Numeric columns (#, Price, Cost): right-align + tabular figures */
    #customPricingTable td:nth-child(1), #customPricingTable td:nth-child(4), #customPricingTable td:nth-child(5),
    #customPricingTable th:nth-child(1), #customPricingTable th:nth-child(4), #customPricingTable th:nth-child(5) {
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    /* Compact, style-guide row action buttons (matches the Ferries table) */
    #customPricingTable td:last-child { display: flex; gap: 6px; align-items: center; }
    #customPricingTable td:last-child .mo-btn {
        box-sizing: border-box;
        min-height: 0;
        padding: 3px 12px;
        font-size: 13px;
        line-height: 1.6;
    }
    #customPricingTable td { padding-top: 6px; padding-bottom: 6px; }

    /* Modal: keep Save as the sole solid primary; demote Close to a secondary
       outline so the dismiss action does not compete with the submit. */
    #assignPriceModal .modal-footer .modal-close {
        background: transparent;
        color: var(--mo-primary);
        border: 1px solid var(--mo-line);
        box-shadow: none;
    }
    #assignPriceModal .modal-footer .modal-close:hover {
        background: var(--mo-secondary);
    }
    /* Match the Zones filled-in checkbox hit area inside the modal. */
    #assignPriceModal [type="checkbox"] + label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
</style>
@stop

@section('content')
@include('includes.revision_history', ['dataset' => 'customs_prices', 'title' => 'Customs charges'])
@include('includes.page_header', [
    'title'   => 'Customs Charges',
    'purpose' => 'Set the customs clearance charge applied to cross-border moves involving a customs country.',
])

<div class="mo-customs-note">
    <dl>
        <dt>Price (£)</dt>
        <dd>The customs clearance amount charged to the customer (the selling price).</dd>
        <dt>Cost (£)</dt>
        <dd>Your own cost for that clearance, kept for margin reporting.</dd>
        <dt>Is Default</dt>
        <dd>The fallback charge used when no row matches the move's origin and destination.</dd>
    </dl>
</div>

<div class="row">
<button class="btn waves-effect waves-light" type="button" id="newPriceTrigger">Assign New Price</button>
</div>


<div class="row">
    <table id="customPricingTable">
        <thead>
            <tr>
                <th name="id">#</th>
                <th name="origin">Origin</th>
                <th name="destination">Destination</th>
                <th name="price">Price <span class="mo-unit">(£)</span></th>
                <th name="cost">Cost <span class="mo-unit">(£)</span></th>
                <th name="isDefault">Is Default</th>
                <th name="actions">Actions</th>
            </tr>
        </thead>
    </table>
</div>

@include('includes.confirm',[
    'message' => 'Do you want to delete assigned Price?',
    'title' => 'Delete Assigned Price',
    'formId' => 'assignedPriceDeleteForm',
    'fieldId' => 'assignedPriceId'
    ])
@include('includes.update_custom_price')

@stop

@section('js')

<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('js/customsPrice/table.js') }}"></script>
<script src="{{ asset('js/customsPrice/customsPrice.js') }}"></script>
@stop