{# templates/slurpit_nautobot/reconcile.html #}
{% extends 'generic/object_list.html' %}
{% load buttons %}
{% load i18n %}
{% load helpers %}
{% load static %}
{% load perms %}

{% block title %}
  Reconcile
{% endblock %}

{% block header %}
  <div class="title-container ps-4 pb-3">

    {# Title #}
    
    <div id="content-title" class="d-flex align-items-center">
      {% include "slurpit_nautobot/logo.html" %}
      <h1 class="ms-3 mb-0">Reconcile</h1>
      <style>
        h1:before {
          content: '';
        }
      </style>
      {% block subtitle %}{% endblock %}
    </div>

    {# Controls #}
    {% block controls %}{% endblock controls %}

  </div>

  <ul class="nav nav-tabs px-3">
    <li class="nav-item" role="presentation">
      <a class="nav-tab nav-link {% if request.GET.tab == 'ipam' or request.GET.tab is None %}active{% endif %}" href="?tab=ipam">
        IPAM {% badge ipam_count %}
      </a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-tab nav-link {% if request.GET.tab == 'interface' %}active{% endif %}" href="?tab=interface">
        Interfaces {% badge interface_count %}
      </a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-tab nav-link {% if request.GET.tab == 'prefix' %}active{% endif %}" href="?tab=prefix">
        Prefixes {% badge prefix_count %}
      </a>
    </li>    
  </ul>
  <style>
    .greenLink a {
      color: #007dff !important
    }
  </style>

{% endblock header %}

{% block content %}

  <div class="tab-content">
    <div class="tab-pane fade show active" role="tabpanel" aria-labelledby="tabpanel">

        <form method="post" class="form form-horizontal" id="reconcile_form">
            {% csrf_token %}
            <input type="hidden" name="action" value="accept" id="action_input" />
            <input type="hidden" name="tab" value="{{ request.GET.tab }}" id="tab_input" />
            <input type="hidden" name="return_url" value="{% if return_url %}{{ return_url }}{% else %}{{ request.path }}{% if request.GET %}?{{ request.GET.urlencode }}{% endif %}{% endif %}" />
        
            {# Object table #}

            {% if request.GET.tab == 'ipam' or request.GET.tab is None %}
            <div class="alert alert-info d-flex align-items-center gap-2 mb-3 mx-0" role="alert" style="border-left: 4px solid #0dcaf0;line-height:30px;">
              <i class="mdi mdi-information-outline fs-5"></i>
              <span><strong>Note:</strong> Uniqueness is defined by IP Address + Namespace. Therefore, IP Address + VRF uniqueness is not supported in Nautobot.</span>
            </div>
            {% endif %}

            {% if request.GET.tab == 'prefix' %}
            <div class="alert alert-info d-flex align-items-center gap-2 mb-3 mx-0" role="alert" style="border-left: 4px solid #0dcaf0;line-height:30px;">
              <i class="mdi mdi-information-outline fs-5"></i>
              <span><strong>Note:</strong> Uniqueness is defined by Prefix + Namespace. Therefore, Prefix + VRF uniqueness is not supported in Nautobot.</span>
            </div>
            {% endif %}

            {% if prerequisite_model %}
              {% include 'inc/missing_prerequisites.html' %}
            {% endif %}

            <div class="table-responsive">
              <div id="select_all_box" class="d-none card border-default noprint">
                  <div class="card-body">
                      <div class="form-check form-check-inline">
                          <label for="select_all" class="form-check-label">
                              <input type="checkbox" id="select_all" name="_all" class="form-check-input" />
                              Select <strong>all {{ table.rows|length }} {{ table.data.verbose_name_plural }}</strong> matching query
                          </label>
                      </div>
                  </div>
              </div>
            </div>
            
            <div class="card">
                <div class="card-body htmx-container table-responsive" id="object_list">
                  <div class="col-md-12">
                    <div class="noprint">
                      {% block bulk_buttons %}
                        <div class="" role="group">
                            <!-- <a name="sync"  class="btn btn-orange btn-sm mx-2" href="{% url 'plugins:slurpit_nautobot:import' %}"><i class="mdi mdi-sync" aria-hidden="true"></i> {% trans "Sync" %}</a> -->
                            <a class="btn btn-success btn-sm mx-2" style="margin-right: 5px;" data-bs-toggle="modal" data-bs-target="#acceptModal">
                                <i class="mdi mdi-check" aria-hidden="true"></i> 
                                <span id="syncCaption">{% trans "Accept" %}</span>
                            </a>
                            <a  class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#declineModal">
                                <i class="mdi mdi-close" aria-hidden="true"></i> {% trans "Decline" %}
                            </a>
                            <button type="submit" name="_edit" formaction="{{edit_bulk_url}}" class="btn btn-warning btn-sm protect-btn" style="margin-left: 15px">
                              <i class="mdi mdi-pencil" aria-hidden="true"></i> Edit Selected
                            </button>
                        </div>
                      {% endblock %}                      
                    </div>
                  </div>
      
                  {% block table %}
                    {% include "slurpit_nautobot/table.html" %}
                  {% endblock %}
                  
                </div>
            </div>
        </form>
    </div>
  </div> 

  <div class="modal fade" tabindex="-1" id="acceptModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
  
        <!-- Modal Header -->
        <div class="modal-header">
          <h2 class="modal-title">Are you sure to accept the selected records?</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <!-- Modal Footer -->
        <div class="modal-footer">
            <a class="btn btn-success btn-sm protect-btn" id="accept_btn">{% trans "Accept" %}</a>
            <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="modal">Close</button>
        </div>
  
      </div>
    </div>
  </div>

  <div class="modal fade" tabindex="-1" id="declineModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
  
        <!-- Modal Header -->
        <div class="modal-header">
          <h2 class="modal-title">Are you sure to decline the selected records?</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
  
        <!-- Modal Footer -->
        <div class="modal-footer">
            <a class="btn btn-danger btn-sm protect-btn" id="decline_btn">{% trans "Decline" %}</a>
            <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
        </div>
  
      </div>
    </div>
  </div>


    <div class="modal fade" style="padding-right: 15px;" tabindex="-1" id="reconcile-detail-modal" aria-modal="true" role="dialog">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">

          <!-- Modal Header -->
          <div class="modal-header" style="display: flex;">
            <h4 class="modal-title" id="modal-title">
            </h4>
            <button type="button" class="btn-close" aria-label="Close" style="margin-left: auto" id="reconcile-close"></button>
          </div>
          <div class="modal-body">
            <div class="row" style="align-items: stretch;">
              <div class="col col-md-6">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        {% trans "Change" %}
                    </div>
                    <div class="card-body">
                      <table class="table table-hover attr-table">
                        <tr>
                            <th scope="row">{% trans "Time" %}</th>
                            <td id="updated_time_val">
                                
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">{% trans "Action" %}</th>
                            <td id="action_val">
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">{% trans "Object Type" %}</th>
                            <td id="object_type_val">
                                {{ object_type }}
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">{% trans "Object" %}</th>
                            <td id="object_val">
                                
                            </td>
                        </tr>
                      </table>
                    </div>
                </div>
              </div>
              <div class="col col-md-6">
                  <div class="card" style="height: 100%;">
                      <div class="card-header">
                          {% trans "Difference" %}
                      </div>
                      <div class="card-body" id="diff-card-body">
                      </div>
                  </div>
              </div>
            </div>

            <div class="row mb-3" style="align-items: stretch;">
              <div class="col col-md-6">
                  <div class="card" style="height: 100%;">
                      <div class="card-header">
                          {% trans "Current state" %}
                      </div>
                      <div class="card-body" id="current-card-body">
                      </div>
                  </div>
              </div>

              <div class="col col-md-6">
                <div class="card" style="height: 100%;">
                    <div class="card-header">
                        {% trans "Incomming change" %}
                    </div>
                    <div class="card-body" id="incomming-card-body">
                       
                    </div>
                </div>
            </div>
          </div>
          <div class="row mb-3" style="align-items: stretch;">
              <div class="col col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                      <span><i class="mdi mdi-bug-outline me-1"></i>{% trans "Debug: Raw API Data" %}</span>
                      <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#raw-data-collapse" title="Toggle Raw Data">
                          <i class="mdi mdi-bug"></i>
                      </button>
                    </div>
                    <div class="collapse" id="raw-data-collapse">
                      <div class="card-body">
                          <pre class="change-data" id="raw-data-body" style="max-height: 300px; overflow-y: auto;"></pre>
                      </div>
                    </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop fade" id="modal-backdrop"></div>



    <style>
      .footer {
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
      margin-left: 0px !important;
      margin-right: 0px !important;
      }
      .reconcile-detail-btn {
        cursor: pointer;
        text-decoration: none !important;
      }
      .change-data {
          background-color: #f8f9fa;
          color: #212529;
          padding: 10px;
          border-radius: 4px;
      }
      [data-bs-theme="dark"] .change-data {
          background-color: #2b3035;
          color: #dee2e6;
      }
      #reconcile-detail-modal {
          z-index: 1060 !important;
      }
      #modal-backdrop {
          z-index: 1050 !important;
      }
      pre.change-diff.change-added {
          background-color: #2fb34433 !important;
      }
      pre.change-diff.change-removed {
          background-color: #d639392e !important;
      }
      pre.change-data>span {
          display: block;
      }
      pre.change-data>span.removed {
          display: block;
          background-color: #d639392e !important;
      }
      pre.change-data>span.added {
          display: block;
          background-color: #2fb34433 !important;
      }
    </style>

    <script>
      var tabInput = document.getElementById('tab_input')

      const csrfTokenInput = document.querySelector('input[name="csrfmiddlewaretoken"]');
      const csrfToken = csrfTokenInput.value;
      const buttons = document.querySelectorAll('.reconcile-detail-btn');

      // Find the button element on the page
      var closeButton = document.getElementById('reconcile-close');
      var reconcileDetailModal = document.getElementById('reconcile-detail-modal');
      var modalBackdrop = document.getElementById('modal-backdrop')

      modalBackdrop.style.display = 'none'

      function removeWhitespace(html) {
        return html.replace(/>\s+</g, '><').trim();
      }
      // Attach event listener to a parent element that exists when the page loads
      document.addEventListener('click', function(event) {
        // Check if the clicked element is one of our buttons
        if (event.target.matches('.reconcile-detail-btn')) {
          handleClick(event);
        }
      });

      function handleClick(event) {
        const pk = event.target.getAttribute('pk');
        const currentUrl = window.location.href;
        const url = new URL(currentUrl);
        const urlWithoutParams = url.origin + url.pathname;
      
        const data = { 
          pk: pk, tab: 
          tabInput.value, 
          action: "get"
        };

        const formData = new FormData();
        for (let key in data) {
          formData.append(key, data[key]);
        }

        fetch(urlWithoutParams, {
          method: 'POST', // Specify the method
          headers: {
            'X-CSRFToken': csrfToken
          },
          body: formData 
          })
          .then(response => {
            return response.json();
          })
          .then(data => {
            const title = data['title']
            const objectType = data['object_type']

            const action = data['action']
            const currentState = data['current_state']
            const incommingChange = data['incomming_change']
            const diffRemoved = data['diff_removed']
            const diffAdded = data['diff_added']
            const updated_time = data['updated_time']
            const modalTitle = document.getElementById('modal-title');
            const object = data['object']
            modalTitle.textContent = `${title} | ${objectType} | ${action}`

            // Put change values
            document.getElementById('updated_time_val').innerHTML = updated_time
            document.getElementById('action_val').innerHTML = action
            document.getElementById('object_type_val').innerHTML = objectType
            if(object && object.get_absolute_url)
              document.getElementById('object_val').innerHTML = object
            
            
            const fieldOrder = data.compared_fields || Object.keys(incommingChange || currentState || {});

            const currentCardBody = document.getElementById('current-card-body')
            let currentContent = '<span class="text-muted">None</span>'

            if(currentState) {
              currentContent = '<pre class="change-data">'
              for (const k of fieldOrder) {
                if (!(k in currentState) || k === 'raw_data' || k === 'last_updated') continue;
                const v = currentState[k];
                if(diffRemoved && Object.prototype.hasOwnProperty.call(diffRemoved, k))
                  currentContent += `<span class="removed">${k}: ${JSON.stringify(v, null, 4)}</span>`
                else
                  currentContent += `<span>${k}: ${JSON.stringify(v, null, 4)}</span>`
              }
              currentContent += '</pre>'
              currentContent = removeWhitespace(currentContent);
            }
            currentCardBody.innerHTML = currentContent
            
            const incommingCardBody = document.getElementById('incomming-card-body')
            let incommingContent = '<span class="text-muted">None</span>'

            if(incommingChange) {
              incommingContent = '<pre class="change-data">'
              for (const k of fieldOrder) {
                if (!(k in incommingChange) || k === 'raw_data' || k === 'last_updated') continue;
                const v = incommingChange[k];
                if(diffAdded && Object.prototype.hasOwnProperty.call(diffAdded, k))
                  incommingContent += `<span class="added">${k}: ${JSON.stringify(v, null, 4)}</span>`
                else
                  incommingContent += `<span>${k}: ${JSON.stringify(v, null, 4)}</span>`
              }
              incommingContent += '</pre>'
              incommingContent = removeWhitespace(incommingContent);
            }
            incommingCardBody.innerHTML = incommingContent

            const diffCardBody = document.getElementById('diff-card-body')
            let diffContent = ''

            if(diffAdded == diffRemoved) {
              diffContent = `<span class="text-muted" style="margin-left: 10px;">None</span>`
            }else{
              diffContent = `<pre class="change-diff change-removed">${JSON.stringify(diffRemoved, null, 4)}</pre>`
              diffContent += `<pre class="change-diff change-added">${JSON.stringify(diffAdded, null, 4)}</pre>`
              diffContent = removeWhitespace(diffContent);
            }
            diffCardBody.innerHTML = diffContent

            const rawDataBody = document.getElementById('raw-data-body')
            let debugText = ""
            
            if (data.compared_fields) {
                debugText += "### [ Comparison: Fields Being Checked ] ###\n"
                debugText += JSON.stringify(data.compared_fields, null, 4) + "\n\n"
            }

            if (data.current_state) {
                debugText += "### [ Comparison: Current State ] ###\n"
                debugText += JSON.stringify(data.current_state, null, 4) + "\n\n"
            }

            if (data.incomming_change) {
                debugText += "### [ Comparison: Incoming Change ] ###\n"
                const inc = { ...data.incomming_change };
                delete inc.raw_data;
                debugText += JSON.stringify(inc, null, 4) + "\n\n"
            }
            
            if (incommingChange && incommingChange.raw_data) {
                debugText += "### [ Original Raw API Data ] ###\n"
                debugText += JSON.stringify(incommingChange.raw_data, null, 4)
            }
            
            rawDataBody.textContent = debugText || "No debug data available";

            reconcileDetailModal.style.display = "block"
            reconcileDetailModal.classList.add("show")
            modalBackdrop.style.display = "block"
        })
        .catch(error => {
        });
      }



      // reconcileDetailModal.style.display = 'block'
      // Define the function to be called when the button is clicked
      function handleCloseButtonClick(event) {
        reconcileDetailModal.style.display = "none"
        reconcileDetailModal.classList.remove("show")
        modalBackdrop.style.display = "none"
      }

      // Add the event listener for the 'click' event
      closeButton.addEventListener('click', handleCloseButtonClick);


      var reconcile_form = document.getElementById('reconcile_form')
      var accept_btn = document.getElementById('accept_btn')
      var decline_btn = document.getElementById('decline_btn')
      var action_input = document.getElementById('action_input')

      accept_btn.addEventListener("click", function(event) {
          action_input.value = "accept"
          reconcile_form.submit()
      });

      decline_btn.addEventListener("click", function(event) {
          action_input.value = "decline"
          reconcile_form.submit()
      });


      var searchBtn = document.getElementById("search-btn")

      var searchForm = document.getElementById("search-form")

      if(searchBtn) {
        searchBtn.addEventListener("click", function(event) {
          searchForm.submit()
        })
      }


      const projectButtons = document.querySelectorAll('.protect-btn');

      projectButtons.forEach(button => {
        button.addEventListener('click', protectButton);
      });
      function protectButton(event) {
          buttonName = event.target.textContent
          setTimeout(() => recoverButton(event, buttonName), 1500);
          event.target.classList.add('disabled');
          event.target.textContent = 'Please wait'
      }
      function recoverButton(event, buttonName) {
          event.target.classList.remove('disabled');
          event.target.textContent = buttonName
      }

    </script>

{% endblock content %}

<footer class="footer container-fluid">
  {% block footer %}
    <div class="row align-items-center justify-content-between mx-0">

      <div class="col-sm-12 col-md-auto fs-4 noprint">
        <nav class="nav justify-content-center justify-content-lg-start">
          {% block footer_links %}
            <a type="button" class="nav-link h6" href="https://slurpit.io" target="_blank">
              https://slurpit.io
            </a>
          {% endblock footer_links %}
        </nav>
      </div>

      <div class="col-sm-12 col-md-auto text-center text-lg-end text-muted"  >
        <span class="d-block d-md-inline">
          {% now 'T' %}
        </span>
        <span class="ms-md-3 d-block d-md-inline">{{ settings.HOSTNAME }} (v{{ settings.VERSION }})</span>
        <span class="ms-md-3 d-block d-md-inline">Slurpit(v{{ settings.PLUGINS_CONFIG.slurpit_nautobot.version }})</span>
      </div>

    </div>
    
  {% endblock footer %}
</footer>