@extends('m3::liberty-theme.layout.main')
@section('title')
    Solon Sentinel Portal - ordersOnHoldReq
@endsection
@section('breadcrumb')
<div class="row">
    <hr class="hr-primary" />
    <nav class="navbar navbar-expand-lg navbar-light" aria-label="Page navigation">
        <div class="container-fluid">
          <nav aria-label="breadcrumb">
            <ol class="breadcrumb breadcrumb-custom">
              <li class="breadcrumb-item"><a href="/" data-abc="true"><i class="fa fa-home"></i> Dashboard</a></li>
              <li class="breadcrumb-item"><a data-abc="true" href="/ordersOnHoldReq"><i class="fa fa-truck"></i> Orders On Hold</a></li>
              <li class="breadcrumb-item"><a data-abc="true" href="/ordersOnHoldReq/{{ $request->reason }}">Reason: {{ $request->reason }}</a></li>
              <li class="breadcrumb-item active" aria-current="page">Order: {{ $request->order }}</li>
            </ol>
          </nav>
        </div>
    </nav>
</div>
@endsection
@section('content')
    <!-- /.row -->
    <div class="container-fluid px-4">
        <h1 class="mt-4">Orders</h1>
        <div class="card mb-4">
            <div class="card-header" style="line-height: 34px;">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link active" id="order-tab" data-bs-toggle="tab" href="#order" role="tab" aria-controls="order" aria-selected="true">Order inquiry</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="details-tab" data-bs-toggle="tab" href="#details" role="tab" aria-controls="details" aria-selected="false">Details</a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link" id="comments-tab" data-bs-toggle="tab" href="#comments" role="tab" aria-controls="comments" aria-selected="false">Comments</a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="order" role="tabpanel" aria-labelledby="order-tab">@include('m3::liberty-theme.partials.tabs.orders')</div>
                        <div class="tab-pane fade" id="details" role="tabpanel" aria-labelledby="details-tab">@include('m3::liberty-theme.partials.tabs.details')</div>
                        <div class="tab-pane fade" id="comments" role="tabpanel" aria-labelledby="comments-tab">@include('m3::liberty-theme.partials.tabs.comments')</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- /.row -->
    @include('m3::liberty-theme.partials.modals.blank')
    @include('m3::liberty-theme.partials.modals.shipToEdit')
    @include('m3::liberty-theme.partials.modals.shipToCheckBox')
@endsection

@section('scripts')
    <script>
        $( document ).ready(function() {

            $(document).on('click', '#DATE', function(e){
                e.preventDefault();
                $(this).attr("autocomplete", "off");
            });

            $(document).on('click', '#AMSPARE5', function(e){
                e.preventDefault();
                $(this).attr("autocomplete", "off");
            });

            $(document).on('click', '.close', function(e){
                $('.altEditor-modal').modal('hide');
            });

            $(document).on('click', "button[data-dismiss='modal']", function(e){
                $('.altEditor-modal').modal('hide');
            });

            $(document).on('keyup', "#AMCOMM", function(e){
                var maxlength = "150";
                var currentLength = $(this).val().length;

                if($("#counter_" + $(this).attr("id")).length == 0) {
                    $(this).after("<div id='"+"counter_" + $(this).attr("id")+"'></div>");
                }

                if( currentLength >= maxlength ){
                    $("#counter_" + $(this).attr("id")).html(currentLength + ' / ' + maxlength);
                    }else{
                    $("#counter_" + $(this).attr("id")).html(maxlength - currentLength + " chars left");
                }
            });


            $('.toUpper').on('input', function(evt) {
                $(this).val(function(_, val) {
                    return val.toUpperCase();
                });
            });

            $(document).on('click', '#submitShipToEdit', function(){
                $("#shipToEdit").modal('hide');
            });
            $(document).on('click', '.close-modal', function(){
                $("#shipToEdit").modal('hide');
            });

            // close and go to checkbox
            $(document).on('click', '.close-modal2', function(){
                $("#blank-modal").modal('hide');
                //$('#shipToCheckBox').modal('show');
            });
            // close and goto edit
            $(document).on('click', '.close-modal3', function(){
                $("#blank-modal").modal('hide');
                $('#shipToEdit').modal('show');
            });

            // Make Bill to and Ship To boxes the same height
            var s1 = $('#div1').height();
            var s2 = $('#div2').height();
            if (s1 > s2){
                $('#div2').css('height', s1 + "px");
            }else{
                $('#div1').css('height', s2 + "px");
            }

            // Open Modal Ship To Edit
            $(document).on('click', '#shipToEdit_click', function(){
                $('#shipToEdit').modal('show');
            });
            // Open Modal Ship To CheckBox
            $(document).on('click', '#shipToCheckBox_click', function(){
                $('#shipToCheckBox').modal('show');
            });


            // Save Ship To Edit
            $(document).on('click', '#submitShipToEdit', function(){

                var changes_detected = 0;

                // Retrieve the values we need to pass on
                var NEW_SHSHA1 = $("input[name=SHSHA1]").val();
                var NEW_SHSHA2 = $("input[name=SHSHA2]").val();
                var NEW_SHSHCI = $("input[name=SHSHCI]").val();
                var NEW_SHSHST = $("input[name=SHSHST]").val();
                var NEW_SHSHZP = $("input[name=SHSHZP]").val();

                // Retrieve old values
                var OLD_SHSHA1 = $("#OLD_SHSHA1").text();
                var OLD_SHSHA2 = $("#OLD_SHSHA2").text();
                var OLD_SHSHCI = $("#OLD_SHSHCI").text();
                var OLD_SHSHST = $("#OLD_SHSHST").text();
                var OLD_SHSHZP = $("#OLD_SHSHZP").text();

                //alert("NEW_SHSHA1: "+NEW_SHSHA1+", NEW_SHSHCI: "+NEW_SHSHCI+", NEW_SHSHST: "+NEW_SHSHST+",NEW_SHSHZP: "+NEW_SHSHZP);
                if (NEW_SHSHA1=="" || NEW_SHSHCI=="" || NEW_SHSHST=="" || NEW_SHSHZP==""){
                    $('.blank-body').html("There are fields that are blank that must be populated.");
                    $('#blank-submit').addClass('close-modal2');
                    $('#blank-submit').html('Close');
                    $('#blank-close').addClass('close-modal3');
                    $('#blank-close').html('Back');
                    $('#blank-modal').modal('show');
                }
                // Compare the new and the old value before submiting
                if(NEW_SHSHA1!=OLD_SHSHA1){changes_detected = 1;}
                //alert("NEW_SHSHA1: "+NEW_SHSHA1+", OLD_SHSHA1: "+OLD_SHSHA1+", changes_detected: "+changes_detected);
                if(NEW_SHSHA2!=OLD_SHSHA2){changes_detected = 1; if(NEW_SHSHA2=="") NEW_SHSHA2=" ";}
                //alert("NEW_SHSHA2: "+NEW_SHSHA2+", OLD_SHSHA2: "+OLD_SHSHA2+", changes_detected: "+changes_detected);
                if(NEW_SHSHCI!=OLD_SHSHCI){changes_detected = 1;}
                if(NEW_SHSHST!=OLD_SHSHST){changes_detected = 1;}
                if(NEW_SHSHZP!=OLD_SHSHZP){changes_detected = 1;}

                // If we have no changes we let the user know in a blank modal
                if (changes_detected==0){
                    $('.blank-body').html("No changes has been detected. Click (Back) to make changes.");
                    $('#blank-submit').addClass('close-modal2');
                    $('#blank-submit').html('Close');
                    $('#blank-close').addClass('close-modal3');
                    $('#blank-close').html('Back');
                    $('#blank-modal').modal('show');

                // Send ajax request
                }else{

                    var csrf = document.querySelector('meta[name="csrf-token"]').content;

                    $.ajax({
                        type:'POST',
                        url:'/ordersOnHoldReq/{{ $request->reason }}/{{ $request->order }}/saveShipToEdit',
                        data: {
                            'SHSHA1': NEW_SHSHA1,
                            'SHSHA2': NEW_SHSHA2,
                            'SHSHCI': NEW_SHSHCI,
                            'SHSHST': NEW_SHSHST,
                            'SHSHZP': NEW_SHSHZP,
                            '_token': csrf
                        },
                        success:function(data){
                            // If no errors load the next checkbox
                            if (data=="success"){
                                $('#blank-modal').modal('hide');
                                $('#shipToEdit').modal('hide');
                                $('#shipToCheckBox').modal('show');

                                // Update the page with out a reload
                                $.get('/ordersOnHoldReq/{{ $request->reason }}/{{ $request->order }}', function(response) {
                                    var $page = $(response);
                                    $("#shipTo").replaceWith($page.find("#shipTo"));
                                    $("#shipToEditData").replaceWith($page.find("#shipToEditData"));

                                    var s1 = $('#div1').height();
                                    var s2 = $('#div2').height();

                                    if (s1 > s2){
                                        $('#div2').css('height', s1 + "px");
                                    }else{
                                        $('#div1').css('height', s2 + "px");
                                    }

                                });

                            }

                            // If no errors then go to the next modal
                        }
                     });

                }

            });

            // Save Ship To CheckBox

            $(document).on('click', '#submitShipToCheckBox', function(){

                // Retrieve checkbox values
                var check1 = $('#check1').is(":checked");
                var check2 = $('#check2').is(":checked");
                var csrf = document.querySelector('meta[name="csrf-token"]').content;

                // Save with AJAX
                $.ajax({
                    type:'POST',
                    url:'/ordersOnHoldReq/{{ $request->reason }}/{{ $request->order }}/saveShipToCheckBox',
                    data: {
                        'check1': check1,
                        'check2': check2,
                        '_token': csrf
                    },
                    success:function(data){
                        // If no errors load the next checkbox
                        if (data=="success"){
                            $('#shipToCheckBox').modal('hide');

                            $.get('/ordersOnHoldReq/{{ $request->reason }}/{{ $request->order }}', function(response) {

                                var $page = $(response);

                                $("#shipTo").html($page.find("#shipTo"));
                                $("#orderData").html($page.find("#orderData"));

                                var s1 = $('#div1').height();
                                var s2 = $('#div2').height();

                                if (s1 > s2){
                                    $('#div2').css('height', s1 + "px");
                                }else{
                                    $('#div1').css('height', s2 + "px");
                                }
                            });
                        }
                    }
                });

            });

            // Comment editor / datatable tab
            var columnDefs = [
                {
                    data: "AMSPARE7",
                    title: "Id",
                    type: "hidden"
                },
                {
                    data: "AMTRANID",
                    title: "User",
                    type: "hidden"
                },
                {
                    data: "DATE",
                    title: "Creation Date",
                    type: "hidden"
                },
                {
                    data: "AMSPARE5",
                    title: "Reminder Date",
                    datetimepicker: { timepicker: true, format : "Y/m/d H:i", forceParse: false, validateOnBlur: false}
                },
                {
                    data: "AMCOMM",
                    title: "Comment",
                    type: "textarea"
                }
            ];

            var myTable;
            var csrf = document.querySelector('meta[name="csrf-token"]').content;

            myTable = $('#example').DataTable({
                "sPaginationType": "full_numbers",
                ajax: {
                    url : '/ordersOnHoldReq/{{$request->reason}}/{{$request->order}}/jsoncomment',
                    // our data is an array of objects, in the root node instead of /data node, so we need 'dataSrc' parameter
                    dataSrc : ''
                },
                columns: columnDefs,
                dom: 'Bfrtip',        // Needs button container
                select: 'single',
                responsive: true,
                altEditor: true,     // Enable altEditor
                buttons: [
                    {
                        text: 'Add',
                        name: 'add',        // do not change name
                        className: 'comm'
                    },
                    {
                        extend: 'selected', // Bind to Selected row
                        text: 'Edit',
                        name: 'edit',        // do not change name
                        className: 'comm'
                    },
                    {
                        extend: 'selected', // Bind to Selected row
                        text: 'Delete',
                        name: 'delete'      // do not change name
                    },
                    {
                        text: 'Refresh',
                        name: 'refresh'      // do not change name
                    }
                ],
                onAddRow: function(datatable, rowdata, success, error) {

                    rowdata["_token"] = csrf;

                    $.ajax({
                        // a typical url would be / with type='POST'
                        url: '/ordersOnHoldReq/{{$request->reason}}/{{$request->order}}/jsoncommentsave',
                        type: 'POST',
                        data: rowdata,
                        success: function(result) {$('.altEditor-modal').modal('hide'); myTable.ajax.reload();},
                        error: error,
                    });
                },
                onDeleteRow: function(datatable, rowdata, success, error) {

                    rowdata["_token"] = csrf;

                    console.log(rowdata);

                    $.ajax({
                        // a typical url would be /{id} with type='DELETE'
                        url: '/ordersOnHoldReq/{{$request->reason}}/{{$request->order}}/jsoncommentsave/'+rowdata.AMSPARE7,
                        type: 'DELETE',
                        data: rowdata,
                        success: function(result) {$('.altEditor-modal').modal('hide'); myTable.ajax.reload();},
                        error: error
                    });
                },
                onEditRow: function(datatable, rowdata, success, error) {

                    rowdata["_token"] = csrf;

                    $.ajax({
                        // a typical url would be /{id} with type='PUT'
                        url: '/ordersOnHoldReq/{{$request->reason}}/{{$request->order}}/jsoncommentsave/'+rowdata.AMSPARE7,
                        type: 'PUT',
                        data: rowdata,
                        success: function(result) {$('.altEditor-modal').modal('hide'); myTable.ajax.reload();},
                        error: error
                    });
                }
            });

            $(document).on('click', ".comm", function(e){
                var maxlength = "150";
                var currentLength = $("#AMCOMM").val().length + 0;
                $("#AMCOMM").attr('maxlength', maxlength);

                if($("#counter_AMCOMM").length == 0) {
                    $("#AMCOMM").after("<div id='counter_AMCOMM'></div>");

                    if( currentLength >= maxlength ){
                        $("#counter_AMCOMM").html(currentLength + ' / ' + maxlength);
                    }else{
                        $("#counter_AMCOMM").html(maxlength - currentLength + " chars left");
                    }

                }
            });
        });
    </script>
@endsection