{% extends "base.html" %}
{% load static %}
{% block title %}
    Create Organization
{% endblock title %}
{% block description %}
    Create an organization by filling out the necessary information, including organization name, website, logo, email, and subscription plan.
{% endblock description %}
{% block keywords %}
    Create Organization, Organization Information, Website, Logo, Email, Subscription Plan, Organization Registration
{% endblock keywords %}
{% block og_title %}
    Create Organization - Register Your Organization
{% endblock og_title %}
{% block og_description %}
    Register your organization by providing essential information such as organization name, website, logo, email, and selecting a subscription plan.
{% endblock og_description %}
{% load gravatar %}
{% load i18n %}
{% block content %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.1/velocity.min.js"
            integrity="sha384-WT0CC+OrC0vGKpxNQInSyfMeKWFIpgiHtnV9HsqN0g6n9urfDfEUQJZFpT0t9P4U"
            crossorigin="anonymous"></script>
    <div class="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-md mx-auto">
            <!-- Header -->
            <div class="text-center mb-8">
                <h2 class="mt-6 text-3xl font-bold tracking-tight text-gray-900">Join Organization</h2>
                <p class="mt-2 text-sm text-gray-600">Join an organization and collaborate with their team</p>
            </div>
            <!-- Join Form -->
            <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
                <form class="space-y-6" method="post" action="{% url 'join' %}">
                    {% csrf_token %}
                    {% if messages %}
                        {% for message in messages %}
                            <div class="rounded-md {% if message.tags == 'error' %}bg-red-50{% else %}bg-green-50{% endif %} p-4 mb-4">
                                <div class="flex">
                                    <div class="flex-shrink-0">
                                        {% if message.tags == 'error' %}
                                            <i class="fas fa-exclamation-circle text-red-400"></i>
                                        {% else %}
                                            <i class="fas fa-check-circle text-green-400"></i>
                                        {% endif %}
                                    </div>
                                    <div class="ml-3">
                                        <p class="text-sm {% if message.tags == 'error' %}text-red-700{% else %}text-green-700{% endif %}">{{ message }}</p>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% endif %}
                    <div>
                        <label for="organization" class="block text-sm font-medium text-gray-700">Organization Name</label>
                        <div class="mt-1">
                            <input type="text"
                                   name="organization"
                                   id="organization"
                                   required
                                   value="{{ organization_name }}"
                                   class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-[#e74c3c] focus:outline-none focus:ring-[#e74c3c] sm:text-sm"
                                   placeholder="Enter organization name">
                        </div>
                    </div>
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700">Your Email</label>
                        <div class="mt-1">
                            <input type="email"
                                   name="email"
                                   id="email"
                                   required
                                   class="block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-[#e74c3c] focus:outline-none focus:ring-[#e74c3c] sm:text-sm"
                                   placeholder="Enter your email">
                        </div>
                    </div>
                    <div>
                        <button type="submit"
                                class="flex w-full justify-center rounded-md border border-transparent bg-[#e74c3c] py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-[#e74c3c] focus:ring-offset-2 transition-colors duration-200">
                            <i class="fas fa-user-plus mr-2"></i>
                            Join Organization
                        </button>
                    </div>
                </form>
            </div>
            <!-- Back Link -->
            <div class="mt-6 text-center">
                <a href="{% url 'organizations' %}"
                   class="text-sm font-medium text-[#e74c3c] hover:text-red-700">
                    <i class="fas fa-arrow-left mr-1"></i>
                    Back to Organizations
                </a>
            </div>
        </div>
    </div>
{% endblock content %}
{% block after_js %}
    <script type="text/javascript">
  // Create a Stripe client.
  var paymentType = 'card';
  var showcard = document.getElementById('showcard');
  showcard.addEventListener('click', function (event) {
    paymentType = 'card'
  })
  var showwallet = document.getElementById('showwallet');
  showwallet.addEventListener('click', function (event) {
    paymentType = 'wallet'
  })

  // Custom styling can be passed to options when creating an Element.
  // (Note that this demo uses a wider set of styles than the guide below.)
  var style = {
    base: {
      color: '#32325d',
      fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
      fontSmoothing: 'antialiased',
      fontSize: '16px',
      '::placeholder': {
        color: '#aab7c4'
      }
    },
    invalid: {
      color: '#fa755a',
      iconColor: '#fa755a'
    }
  };

  // Create an instance of the card Element.
  var card = elements.create('card', {
    style: style
  });

  // Add an instance of the card Element into the `card-element` <div>.
  card.mount('#card-element');
  // Handle real-time validation errors from the card Element.
  card.on('change', function (event) {
    var displayError = document.getElementById('card-errors');
    if (event.error) {
      displayError.textContent = event.error.message;
    } else {
      displayError.textContent = '';
    }
  });
    </script>
    <script type="text/javascript">
  $('document').ready(function () {
    $('#cardButton, #walletButton').click(function () {

      setTimeout(function () {

        $(".page-transition").velocity("fadeIn", {
          queue: false
        });

      }, 100);

      $('.page-transition').velocity({
        scale: "10000%",
        translateZ: 0
      }, {
        duration: 500,
        complete: function () {

        }

      })

    })

    $('#showcard').click(function () {
      $(".wallet").velocity({
        scale: "65%",
        translateZ: 0
      }, {
        duration: 400,
        easing: "easeInOutBack",
        complete: function () {

          $(".card").velocity({
            scale: "100%",
            translateZ: 0
          }, {
            duration: 400,
            easing: "easeInOutBack"
          });

          setTimeout(function () {

            $(".card").velocity("fadeIn", {
              queue: false,
              duration: 150
            });

          }, 150);


        }
      });

      setTimeout(function () {

        $(".wallet").velocity("fadeOut", {
          queue: false,
          duration: 150
        });

      }, 150);

    });

    $('#showwallet').click(function () {
      $(".wallet").velocity({
        scale: "65%",
        translateZ: 0
      });

      $(".card").velocity({
        scale: "65%",
        translateZ: 0
      }, {
        duration: 400,
        easing: "easeInOutBack",
        complete: function () {

          $(".wallet").velocity({
            scale: "100%",
            translateZ: 0
          }, {
            duration: 400,
            easing: "easeInOutBack"
          });

          setTimeout(function () {

            $(".wallet").velocity("fadeIn", {
              queue: false,
              duration: 150
            });

          }, 150);


        }
      });

      setTimeout(function () {

        $(".card").velocity("fadeOut", {
          queue: false,
          duration: 150
        });

      }, 150);

    });

  });
    </script>
    <script type="text/javascript">
  $(document).ready(function () {
    var base_color = "rgb(230,230,230)";
    var active_color = "rgb(237, 40, 70)";



    var child = 1;
    var length = $("section").length - 1;
    $("#prev").addClass("disabled");
    $("#submit").addClass("disabled");

    $("section").not("section:nth-of-type(1)").hide();
    $("section").not("section:nth-of-type(1)").css('transform', 'translateX(100px)');

    var svgWidth = length * 200 + 24;
    $("#svg_wrap").html(
      '<svg version="1.1" id="svg_form_time" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 ' + svgWidth + ' 24" xml:space="preserve"></svg>'
    );

    function makeSVG(tag, attrs) {
      var el = document.createElementNS("http://www.w3.org/2000/svg", tag);
      for (var k in attrs) el.setAttribute(k, attrs[k]);
      return el;
    }

    for (i = 0; i < length; i++) {
      var positionX = 12 + i * 200;
      var rect = makeSVG("rect", {
        x: positionX,
        y: 9,
        width: 200,
        height: 6
      });
      document.getElementById("svg_form_time").appendChild(rect);
      // <g><rect x="12" y="9" width="200" height="6"></rect></g>'
      var circle = makeSVG("circle", {
        cx: positionX,
        cy: 12,
        r: 12,
        width: positionX,
        height: 6
      });
      document.getElementById("svg_form_time").appendChild(circle);
    }

    var circle = makeSVG("circle", {
      cx: positionX + 200,
      cy: 12,
      r: 12,
      width: positionX,
      height: 6
    });
    document.getElementById("svg_form_time").appendChild(circle);

    $('#svg_form_time rect').css('fill', base_color);
    $('#svg_form_time circle').css('fill', base_color);
    $("circle:nth-of-type(1)").css("fill", active_color);


    $(".button").click(function () {
      $("#svg_form_time rect").css("fill", active_color);
      $("#svg_form_time circle").css("fill", active_color);
      var id = $(this).attr("id");
      if (id == "next") {
        $("#prev").removeClass("disabled");
        if (child >= length) {
          $(this).addClass("disabled");
          $('#submit').removeClass("disabled");
        }
        if (child <= length) {
          child++;
        }
      } else if (id == "prev") {
        $("#next").removeClass("disabled");
        $('#submit').addClass("disabled");
        if (child <= 2) {
          $(this).addClass("disabled");
        }
        if (child > 1) {
          child--;
        }
      }
      var circle_child = child + 1;
      $("#svg_form_time rect:nth-of-type(n + " + child + ")").css(
        "fill",
        base_color
      );
      $("#svg_form_time circle:nth-of-type(n + " + circle_child + ")").css(
        "fill",
        base_color
      );
      var currentSection = $("section:nth-of-type(" + child + ")");
      currentSection.fadeIn();
      currentSection.css('transform', 'translateX(0)');
      currentSection.prevAll('section').css('transform', 'translateX(-100px)');
      currentSection.nextAll('section').css('transform', 'translateX(100px)');
      $('section').not(currentSection).hide();
    });

  });
    </script>
{% endblock after_js %}