/**
 * App eCommerce customer all
 */

'use strict';

// Datatable (jquery)
$(function () {
  let borderColor, bodyBg, headingColor;

  if (isDarkStyle) {
    borderColor = config.colors_dark.borderColor;
    bodyBg = config.colors_dark.bodyBg;
    headingColor = config.colors_dark.headingColor;
  } else {
    borderColor = config.colors.borderColor;
    bodyBg = config.colors.bodyBg;
    headingColor = config.colors.headingColor;
  }

  // Variable declaration for table
  var dt_customer_table = $('.datatables-customers'),
    select2 = $('.select2'),
    customerView = baseUrl + 'app/ecommerce/customer/details/overview';
  if (select2.length) {
    var $this = select2;
    $this.wrap('<div class="position-relative"></div>').select2({
      placeholder: 'United States ',
      dropdownParent: $this.parent()
    });
  }

  // customers datatable
  if (dt_customer_table.length) {
    var dt_customer = dt_customer_table.DataTable({
      ajax: {
        url: '/api/novosti',
        dataSrc: ''
      },
      columns: [
        // columns according to JSON
        { data: 'naslov' },
        { data: 'kategorija' },
        { data: 'created_at' },
        { data: 'updated_at' }
      ],
      columnDefs: [
        {
          // Invoice ID
          targets: 0,
          render: function (data, type, full, meta) {
            var $naziv = full['naslov'];
            var $id = full['id'];
            // Creates full output for row
            var $row_output = '<a href="/administracija/novosti/uredi/' + $id + '">' + $naziv + '</a>';
            return $row_output;
          }
        },
        {
          // Invoice ID
          targets: 3,
          render: function (data, type, full, meta) {
            var $naziv = full['naziv'];
            var $id = full['id'];
            // Creates full output for row
            var $row_output =
              '<a class="btn btn-danger" href="/administracija/novosti/brisanje/' + $id + '">Izbriši</a>';
            return $row_output;
          }
        }
      ],
      order: [[2, 'desc']],
      dom:
        '<"card-header d-flex flex-wrap pb-md-2"' +
        '<"d-flex align-items-center me-5"f>' +
        '<"dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end gap-3 gap-sm-0 flex-wrap flex-sm-nowrap"lB>' +
        '>t' +
        '<"row mx-2"' +
        '<"col-sm-12 col-md-6"i>' +
        '<"col-sm-12 col-md-6"p>' +
        '>',

      language: {
        sLengthMenu: '_MENU_',
        search: '',
        emptyTable: 'Nema podatak',
        info: 'Prikazuje _START_ do _END_ od _TOTAL_ od ukupno rezultata',
        infoEmpty: 'Prikazuje 0 do 0 od 0 unosa',
        loadingRecords: 'Učitavanje...',
        searchPlaceholder: 'Pretraži',
        paginate: {
          first: 'Prvi',
          last: 'Posljednji',
          next: 'Naredna',
          previous: 'Prethodna'
        }
      },
      // Buttons with Dropdown
      buttons: [
        {
          text: '<i class="ti ti-plus me-0 me-sm-1 mb-1 ti-xs"></i><span class="d-none d-sm-inline-block">Dodaj novost</span>',
          className: 'add-new btn btn-primary py-2 waves-effect waves-light',
          attr: {
            'data-bs-toggle': 'offcanvas',
            'data-bs-target': '#offcanvasEcommerceCustomerAdd'
          }
        }
      ]
      // For responsive popup
    });
    $('.dataTables_length').addClass('ms-n2 mt-0 mt-md-3 me-2');
    $('.dt-action-buttons').addClass('pt-0');
    $('.dataTables_filter').addClass('ms-n3');
    $('.dt-buttons').addClass('d-flex flex-wrap');
  }

  // Filter form control to default size
  // ? setTimeout used for multilingual table initialization
  setTimeout(() => {
    $('.dataTables_filter .form-control').removeClass('form-control-sm');
    $('.dataTables_length .form-select').removeClass('form-select-sm');
  }, 300);
});

// Validation & Phone mask
(function () {
  //klijentNovi = document.getElementById('klijentNovi');

  // Add New customer Form Validation
  const fv = FormValidation.formValidation(klijentNovi, {
    fields: {
      naziv: {
        validators: {
          notEmpty: {
            message: 'Unesite naziv proizvoda '
          }
        }
      },
      cijena: {
        validators: {
          notEmpty: {
            message: 'Unesite cijenu proizvoda '
          }
        }
      }
    },
    plugins: {
      trigger: new FormValidation.plugins.Trigger(),
      bootstrap5: new FormValidation.plugins.Bootstrap5({
        // Use this for enabling/changing valid/invalid class
        eleValidClass: '',
        rowSelector: function (field, ele) {
          // field is the field name & ele is the field element
          return '.mb-3';
        }
      }),
      //submitButton: new FormValidation.plugins.SubmitButton(),
      // Submit the form when all fields are valid
      // defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
      autoFocus: new FormValidation.plugins.AutoFocus()
    }
  });
})();
