@extends('layouts.app')
@section('head')
<link rel="stylesheet" href="{{ asset('js/jsonTable/JSONedtr.css') }}">
<link rel="stylesheet" href="{{asset('js/notificationBar/css/jquery.notifyBar.css')}}">
<style>
    .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-tree-btn {
        height: 40px;
        padding: 0 14px;
        border: 1px solid var(--mo-line);
        border-radius: 4px;
        background: #ffffff;
        color: var(--mo-ink);
        font-size: 0.9rem;
        cursor: pointer;
    }
    .mo-tree-btn:hover { background: var(--mo-secondary); }
    .mo-editor-hint {
        color: var(--mo-muted);
        font-size: 0.85rem;
        margin: -8px 0 14px;
    }
    .mo-editing-for {
        color: var(--mo-ink);
        font-weight: 600;
        font-size: 1rem;
        margin: 0 0 10px;
    }
    .mo-country-name { color: var(--mo-interactive); }
    /* leave room for the fixed save bar */
    .mo-pricing-scroll { overflow-x: auto; padding-bottom: 88px; }

    .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);
    }
    /* touch: keep the tree controls at the 44px minimum on coarse pointers */
    @media (pointer: coarse) {
        .mo-tree-btn { height: 44px; }
    }
    /* Mobile: let the country select take the full row and split the two tree
       buttons evenly beneath it, instead of an awkward wrap. */
    @media (max-width: 600px) {
        .mo-controls { gap: 8px; }
        .mo-controls label { flex: 1 1 100%; }
        .mo-controls select { flex: 1 1 100%; min-width: 0; }
        .mo-tree-btn { flex: 1 1 0; }
        .mo-savebar { justify-content: space-between; padding: 10px 16px; }
    }
</style>
<meta name="csrf-token" content="{{ csrf_token() }}">
@stop
@section('content')
@include('includes.revision_history', ['dataset' => 'pricing_data', 'title' => 'Pricing data'])
@include('includes.page_header', [
    'title'   => 'Pricing Data',
    'purpose' => 'Per-country rate table used by the pricing engine — edit the multipliers and costs for each size and distance band, then save. Changes affect new quotes immediately.',
])

<form id="pricingData">
    <div class="mo-controls">
        <label for="countries">Country</label>
        <select id="countries" name="countries" class="browser-default">
            @foreach($data as $code => $values)
                <option value="{{$code}}">{{$values['name']}}</option>
            @endforeach
        </select>
        <button type="button" id="moExpandAll" class="mo-tree-btn">Expand all</button>
        <button type="button" id="moCollapseAll" class="mo-tree-btn">Collapse all</button>
    </div>

    <div class="mo-savebar" id="moSaveBar">
        <span class="mo-dirty" id="moDirty">All changes saved</span>
        <input type="submit" value="Save pricing data" class="mo-btn mo-btn--edit">
    </div>
</form>

<p class="mo-editor-hint">Tap a section to expand it, or use Expand all / Collapse all. Rate multipliers apply to the per-km cost and markup; distance bands are km driven.</p>

<h5 class="mo-editing-for">Editing rates for <span id="moCountryName" class="mo-country-name"></span></h5>

<div class="mo-pricing-scroll">
    <div id="output"></div>
</div>
@stop
@section('js')
    <script>
        var data = @json($data);
        var url = '{{url('/')}}';
        var jsonEditor = null;
        var countries = [];
        jQuery.each(data,function (key,value) {
            countries[key]=value['name'];
        })

    </script>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <script src="{{asset('js/notificationBar/jquery.notifyBar.js')}}"></script>
<script src="{{ asset('js/jsonTable/JSONedtr.js') }}"></script>

<script>

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

    // The country name is a read-only display label (shown in the dropdown and
    // the heading above the editor); it is NOT editable rate data. Strip it
    // from the JSON editor payload so it can't be changed by accident; the
    // saved value is preserved server-side on save.
    function moEditorPayload(countryCode){
        var obj = $.extend(true, {}, data[countryCode] || {});
        delete obj.name;
        return JSON.stringify(obj);
    }
    function moShowCountryName(countryCode){
        var nm = (data[countryCode] && data[countryCode].name) ? data[countryCode].name : countryCode;
        $('#moCountryName').text(nm);
    }

    function moSnapshotBaseline(){
        $('#output .jse--value').each(function(){
            $(this).data('mo-initial', $(this).val());
        });
    }

    function moRecomputeDirty(){
        var n = 0;
        $('#output .jse--value').each(function(){
            if( $(this).val() !== $(this).data('mo-initial') ) n++;
        });
        moDirtyCount = n;
        var $d = $('#moDirty');
        if( n === 0 ){
            $d.text('All changes saved');
            $('#moSaveBar').removeClass('is-dirty');
        } else {
            $d.text( n + (n === 1 ? ' unsaved change' : ' unsaved changes') );
            $('#moSaveBar').addClass('is-dirty');
        }
    }

    // Collapsible presentation layer. Only adds a caret + toggles a CSS class;
    // it never adds/moves/removes any input, so JSONedtr.getData() is untouched.
    function enhancePricingEditor(){
        var $out = $('#output');
        $out.find('.jse--group-label').each(function(){
            if( ! $(this).children('.jse--toggle').length ){
                $(this).prepend('<span class="jse--toggle" aria-hidden="true"></span>');
            }
            // make the header operable by keyboard/AT (ARIA only — no DOM/value change)
            $(this).attr({ 'tabindex': '0', 'role': 'button' });
        });
        // collapsed by default — reflect that in aria-expanded
        $out.find('.jse--row--array').addClass('jse--collapsed');
        $out.find('.jse--row--array > .jse--group-label').attr('aria-expanded', 'false');
    }

    // toggle a section and keep aria-expanded in sync with the visual state
    function moToggleGroup($label){
        var expanded = $label.parent().toggleClass('jse--collapsed').hasClass('jse--collapsed') === false;
        $label.attr('aria-expanded', String(expanded));
    }

    // delegated handlers (bound once)
    $(document).on('click', '#output .jse--group-label', function(){
        moToggleGroup($(this));
    });
    // Enter / Space activate the focused header, like a real button
    $(document).on('keydown', '#output .jse--group-label', function(e){
        if( e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' ){
            e.preventDefault();
            moToggleGroup($(this));
        }
    });
    $('#moExpandAll').on('click', function(){
        $('#output .jse--row--array').removeClass('jse--collapsed');
        $('#output .jse--row--array > .jse--group-label').attr('aria-expanded', 'true');
    });
    $('#moCollapseAll').on('click', function(){
        $('#output .jse--row--array').addClass('jse--collapsed');
        $('#output .jse--row--array > .jse--group-label').attr('aria-expanded', 'false');
    });
    $(document).on('input change', '#output .jse--value', moRecomputeDirty);
    $(window).on('beforeunload', function(){
        if( moDirtyCount > 0 ){
            return 'You have unsaved pricing changes. Leave without saving?';
        }
    });

    /**
     * filter pricing data according to country
     */
    $( document ).ready(function() {
        let countryCode = $("#countries").val();
        moCurrentCountry = countryCode;
        moShowCountryName(countryCode);
        initializeJsonEditor(moEditorPayload(countryCode));
    });

    $("#countries").change(function () {
        let value = this.value;
        if( moDirtyCount > 0 &&
            ! window.confirm('You have ' + moDirtyCount + ' unsaved change' + (moDirtyCount === 1 ? '' : 's') + '. Switch country and discard them?') ){
            $(this).val(moCurrentCountry);
            return;
        }
        moCurrentCountry = value;
        moShowCountryName(value);
        initializeJsonEditor(moEditorPayload(value));
    });

    /**
     * submit pricing data
     */
    $( "#pricingData" ).submit(function( event ) {
        event.preventDefault();
        let selectedData = jsonEditor.getData();
        let isValid = validateJson(selectedData);
        if(!isValid){
            $.notifyBar({html:invalidMessage,position:'bottom',cssClass:'error'});
            return false;
        }
        $(this).find(":submit").prop('disabled',true);

        $.ajaxSetup({
            headers:
                { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
        });
        $.ajax( url+ '/formula/pricing-data-update', {
            type: 'POST',
            data: {
                "pricing_data":selectedData,
                "code": $("#countries").val()
            },
            success: function (responseData, status, xhr) {
                $.notifyBar({html: 'Pricing data updated Successfully',position:'bottom',cssClass:'success'});
                if ('data' in responseData){
                    let c_code = responseData['data']['code'];
                    data[c_code]=responseData['data']['prices'];
                }
                $('input[type="submit"]').removeAttr('disabled');
                moSnapshotBaseline();
                moRecomputeDirty();

            },
            error: function (jqXhr, textStatus, errorMessage) {
                if('responseText' in jqXhr){
                    $.notifyBar({html: jqXhr['responseText'],position:'bottom',cssClass:'error'});
                }else{
                    $.notifyBar({html: 'Pricing data update failed',position:'bottom',cssClass:'error'});
                }
                $('input[type="submit"]').removeAttr('disabled');
            }
        });
       //
    });

    /**
     * initialize json editor
     * @param values
     */
    function initializeJsonEditor(data){
        $('#output').val('');
         jsonEditor = new JSONedtr( data, '#output' );
        new JSONedtr( data, '#output', {
            runFunctionOnUpdate:'getDataOnChange',
            instantChange: true
        });
        // UI-only enhancements after the editor DOM is (re)rendered
        enhancePricingEditor();
        moSnapshotBaseline();
        moRecomputeDirty();
    }
    function getDataOnChange( data ){
        //on change json
    }

    /**
     * validate json
     * @type {boolean}
     */
    var isValidJson = true;
    var invalidMessage = null;
    function validateJson(values){
       jQuery.each(values,checkArray);
        return isValidJson;
    }

    function checkArray(key,value){
        if(typeof value  == 'object' ){
            jQuery.each(value,checkArray);
        }else {
            //check value is null or empty
            if(value.trim() === '' || value ==='null'){
                isValidJson = false;
                invalidMessage = key + " can not be null"
                return false;
            }
            //check value is a number
            if(isNaN(Number(value)) && !Object.values(countries).includes(value)){
                isValidJson = false;
                invalidMessage = "value "+ key + " must be a number"
                return false;
            }
            isValidJson = true;
        }

    }
    function refreshJsonData(){
        let countryCode = $("#countries").val();
        moShowCountryName(countryCode);
        initializeJsonEditor(moEditorPayload(countryCode));
    }

</script>
@stop