$( document ).ready(function($) {
    var request;

    function showTab2() {
        jQuery('#1').removeClass('active show');
        jQuery('#2').addClass('active show');
        jQuery('#exTab1 li:first-child a').removeClass('active show');
        jQuery('#exTab1 li:nth-child(2) a').addClass('active show');
    }

    function getItemsAjaxRequest(type) {
        if (request) {
            request.abort();
        }
          request = $.ajax({
              url: "get_data.php",
              type: "POST",
              dataType: 'html',
              data: type,
              success: function(data) {
                  $('#tab_2_list').html(data);

                  $('#tab_2_list li').on('click', function() {
                    showTab3();
                    var classes = $(this).attr('class');
                    var classes_arr = classes.split(" ");

                    var classes = { //Fetch form data
                        'type': classes_arr[0],
                        'id': classes_arr[1]
                    };
                    getItemDetailsAjaxRequest(classes);
                });
              }
          });
    
    }

    jQuery('li.outdoor').on('click', function(){
        showTab2();
        var type = { //Fetch form data
            'type'     : 'outdoor'
        };
        getItemsAjaxRequest(type);  
    });

    jQuery('li.racing').on('click', function(){
        showTab2();
        var type = { //Fetch form data
            'type'     : 'racing'
        };
        getItemsAjaxRequest(type);  
    });

    jQuery('li.helicopter').on('click', function(){
        showTab2();
        var type = { //Fetch form data
            'type'     : 'helicopter'
        };
        getItemsAjaxRequest(type);  
    });

    // ==============================================================================================
    function getItemDetailsAjaxRequest(classes) {
        if (request) {
            request.abort();
          }
          request = $.ajax({
              url: "get_data.php",
              type: "POST",
              dataType: 'html',
              data: classes,
              success: function(data) {
                  $('.tab-pane#3').html(data);
              }
          });
    }

   
    function showTab3() {
        jQuery('#2').removeClass('active show');
        jQuery('#3').addClass('active show');
        jQuery('#exTab1 li:nth-child(2) a').removeClass('active show');
        jQuery('#exTab1 li:nth-child(3) a').addClass('active show');
    }


    // $('#exTab1').on('click', function() {
    //     $('.tab-pane#3').html('');
    //     $('#tab_2_list').html('');
    // });

 
});