<div id="modal-developer" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title"><i class="fa-solid fa-cog"></i> {{ heading_title }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>{{ column_component }}</th>
              <th class="w-25">{{ entry_cache }}</th>
              <th class="text-end" style="width: 1px;">{{ column_action }}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ text_cache }}</td>
              <td></td>
              <td class="text-end"><button type="button" value="cache" data-bs-toggle="tooltip" title="{{ button_refresh }}" class="btn btn-warning"><i class="fa-solid fa-rotate"></i></button></td>
            </tr>
            <tr>
              <td>{{ text_theme }}</td>
              <td></td>
              <td class="text-end"><button type="button" value="theme" data-bs-toggle="tooltip" title="{{ button_refresh }}" class="btn btn-warning"><i class="fa-solid fa-rotate"></i></button></td>
            </tr>
            <tr>
              <td>{{ text_sass }}</td>
              <td>
                <div class="form-check form-switch form-switch-lg">
                  <input type="hidden" name="developer_sass" value="0"/>
                  <input type="checkbox" name="developer_sass" value="1" id="input-developer-sass" class="form-check-input"{% if developer_sass %} checked{% endif %}/>
                </div>
              </td>
              <td class="text-end"><button type="button" value="sass" data-bs-toggle="tooltip" title="{{ button_refresh }}" class="btn btn-warning"><i class="fa-solid fa-rotate"></i></button></td>
            </tr>
            <tr>
              <td>{{ text_vendor }}</td>
              <td></td>
              <td class="text-end"><button type="button" value="vendor" data-bs-toggle="tooltip" title="{{ button_refresh }}" class="btn btn-warning"><i class="fa-solid fa-rotate"></i></button></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
$('input[name=\'developer_sass\']').on('change', function() {
    $.ajax({
        url: 'index.php?route=common/developer.edit&user_token={{ user_token }}',
        type: 'post',
        data: $('input[name=\'developer_sass\']:checked'),
        dataType: 'json',
        beforeSend: function() {
            $('input[name=\'developer_sass\']').prop('disabled', true);
        },
        complete: function() {
            $('input[name=\'developer_sass\']').prop('disabled', false);
        },
        success: function(json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#modal-developer .modal-body').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#modal-developer .modal-body').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});

$('#modal-developer table button').on('click', function() {
    var element = this;

    $.ajax({
        url: 'index.php?route=common/developer.' + $(element).attr('value') + '&user_token={{ user_token }}',
        dataType: 'json',
        beforeSend: function() {
            $(element).button('loading');
        },
        complete: function() {
            $(element).button('reset');
        },
        success: function(json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#modal-developer .modal-body').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa-solid fa-circle-exclamation"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }

            if (json['success']) {
                $('#modal-developer .modal-body').prepend('<div class="alert alert-success alert-dismissible"><i class="fa-solid fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
//--></script>
