<?php defined('ABSPATH') || die('Cheatin\' uh?'); ?>

<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

<div class="container">
  <div class="header">
    <div class="subheader">New feed</div>
  </div>

  <form id="save-form" method="POST" enctype="multipart/form-data">
    <?php PROD_Classes_Helpers_Tools::setNonce('save_initial_data', 'prod_nonce'); ?>
    <input type="hidden" name="action" value="save_initial_data"/>

    <div class="flex-row">
      <div class="left-panel">
        <div class="input-block">
          <label>Feed name:<span class="required">*</span></label>
          <input class="project-name" name="project_name" placeholder="" required />
        </div>

        <div class="input-block">
          <label>Country:</label>
          <select name="country">
            <?php
              include_once _PROD_CLASSES_DIR_ . 'ObjController.php';
              $saveAtts = PROD_Classes_ObjController::getClass('PROD_Classes_Attributes');
              $saveAtts->activate_checks();
              $channel_configs = $saveAtts->activate_checks();

              $countries=[];
              foreach ($channel_configs as $key => $val) {
                if ($key == "All countries") {
                  $countries = array_merge($countries, $val);
                   foreach ($countries as $key => $val) {
                      echo "<option value='" . esc_attr($key) . "'>" . esc_html($key) . "</option>";
                   }
                }
              }
            ?>
          </select>
        </div>

        <div class="input-block">
          <label>Channel:</label>
          <select class="select-channel" name="channel">
            <?php
              $channels = [];
              foreach ($channel_configs as $key => $val) {
                if ($key == "Channels") {
                  $channels = array_merge($channels, $val);
                }
              }
              foreach ($channels as $key => $val) {
                $fields = $val['fields'];
                echo "<option value='" . esc_attr($key) . "' id='" . esc_attr($fields) . "'>" . esc_html($key) . "</option>";
              }
            ?>
          </select>
        </div>

        <div class="toggle-switch">
          <label for="include_variations">Include product variations:</label>
          <input type="checkbox" id="include_variations" name="include_variations" />
        </div>
      </div>

      <div class="right-panel">
        <div class="input-block">
          <label>File format:</label>
          <select name="file_format" style="height:36px;">
            <?php
              $format_arr = ["xml", "csv", "txt"];
              foreach ($format_arr as $format) {
                echo "<option value='" . esc_attr($format) . "'>" . esc_html(strtoupper($format)) . "</option>";
              }
            ?>
          </select>
        </div>

        <div class="input-block">
          <label>Refresh interval:</label>
          <select name="refresh_interval" style="height:36px; width: 100px;">
            <option value="daily">Daily</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
          </select>
        </div>
     
        <div class="input-block">
          <label>Product Category:</label>
          <select name="product_category">
            <option value="all">All Categories</option>
            <?php
              $terms = get_terms(['taxonomy' => 'product_cat', 'hide_empty' => false]);
              foreach ($terms as $term) {
                echo "<option value='" . esc_attr($term->term_id) . "'>" . esc_html($term->name) . "</option>";
              }
            ?>
          </select>
        </div>

      </div>
    </div>

    <div class="button-container">
      <button class="save-initial" type="submit">Next</button>
    </div>

  </form>

</div>

<style>
    /* Reset minor default */
    * {
      box-sizing: border-box;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9fafb;
      margin: 0;
      padding: 0;
    }

    .container {
      width:70vw;
      margin: 50px auto;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 10px 20px rgba(0,0,0,0.08);
      padding: 30px 40px;
      position: relative;
      top:4vw;
    }

    .header {
      font-weight: 600;
      font-size: 1.4vw;
      color: #2c3e50;
      display: flex;
      align-items: center;
      gap: 1vw;
    }

  .header .highlight {
    color: #ffb449;
  }

  .subheader {
    font-weight: 600;
    font-size: 1vw;
    color: #34495e;
    margin-bottom:1vw;
  }

  .flex-row {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
  }

  .left-panel, .right-panel {
    flex: 1 1 300px;
    background: #f5f8fa;
    border-radius: 1vw;
    padding: 1vw 2vw;
    box-shadow: inset 0 0 8px #e1e8ed;
  }

  .input-block {
    margin-bottom: 1vw;
  }
  .project-name{
    width:100%;
  }
  .input-block label {
    display: block;
    font-weight: 600;
    font-size: 1vw;
    margin-bottom: 6px;
    color: #34495e;
  }

  .input-block label .required {
    color: #e74c3c;
    margin-left: 4px;
  }

  input[type="text"],
  select {
    width: 100%;
   
    font-size: 1vw;
    border: 1.5px solid #ccc;
    border-radius: 0.5vw;
    transition: border-color 0.3s ease;
  }

  input[type="text"]:focus,
  select:focus {
    border-color: #1abc9c;
    outline: none;
    box-shadow: 0 0 6px rgba(26, 188, 156, 0.3);
  }
  .button-container {
    margin-top: 2vw;
    text-align: left;
  }
  button {
    background-color: #b5eedf;
    font-weight: 600;
    font-size: 1cvw;
    border: none;
    padding: 0.5vw 2vw;
    border-radius: 2vw;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  button:hover {
    background-color: #a2e6d2;
  }
</style>


<script>
    (function ($){ 

        $("#save-form").submit(function(e) {
          e.preventDefault();
          let project_name = $(".project-name").val();
          let country = $("select[name='country']").val();
          let channel = $("select[name='channel']").val();
          let include_variations = $("#include_variations").is(":checked") ? 1 : 0;
          let file_format = $("select[name='file_format']").val();
          let refresh_interval = $("select[name='refresh_interval']").val();
          let product_category = $("select[name='product_category']").val();
          let stock_status =  $("select[name='stock_status']").val();

          $.post(sqQuery.ajaxurl, {
            prod_nonce: sqQuery.nonce,
            action: "save_initial_data",
            project_name: project_name,
            country: country,
            channel: channel,
            include_variations: include_variations,
            file_format: file_format,
            refresh_interval: refresh_interval,
            product_category: product_category,
            stock_status: stock_status
          }).done(function(response) {
              if(response) {
                  window.location.href = ajaxurl.replace('admin-ajax.php', 'admin.php?page=new_feed&tab=field_mapping');
              } else {
                  alert("Error saving feed");
              }
          });
      });
    }(jQuery));
</script>
