<div
  id="wrapper"
  phx-hook="TourGuide"
  data-btn-trigger="#product-tour-btn-form"
  data-next-label={gettext("Next")}
  data-prev-label={gettext("Back")}
  data-finish-label={gettext("Finish")}
  data-group="create-event"
>
  <div id="product-tour-btn-form" class="hidden fixed bottom-5 right-5 z-30">
    <button class="close absolute -top-1.5 -right-1.5 bg-red-500 text-white rounded-full">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-4 w-4"
      >
        <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
      </svg>
    </button>

    <button class="open text-sm text-primary-500 bg-white shadow-md border border-primary-500 rounded-md pl-2 pr-4 py-2 flex items-center justify-center space-x-2">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        class="h-5 w-5"
      >
        <path
          fill-rule="evenodd"
          d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0ZM8.94 6.94a.75.75 0 1 1-1.061-1.061 3 3 0 1 1 2.871 5.026v.345a.75.75 0 0 1-1.5 0v-.5c0-.72.57-1.172 1.081-1.287A1.5 1.5 0 1 0 8.94 6.94ZM10 15a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
          clip-rule="evenodd"
        />
      </svg>

      <span><%= gettext("How it works ?") %></span>
    </button>
  </div>
  <div class="border-b border-gray-200 py-4 flex flex-col sm:flex-row sm:items-center justify-between">
    <div class="flex-1 min-w-0">
      <h1 class="text-2xl font-medium leading-6 text-gray-900 sm:truncate">
        <%= @page_title %>
      </h1>
    </div>
    <div class="flex mt-4 space-x-5 sm:mt-0">
      <%= if (@uploads.presentation_file.entries |> Enum.at(0, %{}) |> Map.get(:progress, 0) == 0 || @uploads.presentation_file.entries |> Enum.at(0, %{}) |> Map.get(:progress, 0) == 100) && @changeset.valid? do %>
        <button
          type="submit"
          form="event-form"
          phx_disable_with="Loading..."
          class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
        >
          <%= case @action do
            :edit -> gettext("Save")
            :new -> gettext("Create")
          end %>
        </button>
      <% else %>
        <div class="opacity-25 cursor-default w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0">
          <%= case @action do
            :edit -> gettext("Save")
            :new -> gettext("Create")
          end %>
        </div>
      <% end %>
      <%= if @action == :edit && !@event.expired_at do %>
        <%= link(gettext("Delete"),
          to: "#",
          phx_click: "delete",
          phx_value_id: @event.uuid,
          data: [confirm: gettext("Are you sure?")],
          class:
            "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
        ) %>
      <% end %>
    </div>
  </div>

  <%= if Map.get(@event, :presentation_file) == nil || Map.get(@event.presentation_file, :length) == 0 || Map.get(@event.presentation_file, :id) == nil do %>
    <div
      class="mb-3 mt-12"
      data-tg-group="create-event"
      data-tg-order="1"
      data-tg-tour={"<p class='mb-3'>#{gettext("Select your presentation file. Accepted formats are PDF, PPT, or PPTX. Ensure the file size does not exceed the maximum limit.")}</p><p class='opacity-50 text-xs'>#{gettext("Animations in PPT/PPTX files are not supported, which is why we recommend exporting your presentation to PDF to ensure it displays correctly.")}</p>"}
      data-tg-title={"📄 #{gettext("Presentation file (optional)")}"}
    >
      <label class="block text-sm font-medium text-gray-700 mb-2">
        <%= gettext("Select your presentation (optional)") %>
      </label>
      <div class="max-w-lg flex flex-col justify-center items-center px-6 pt-5 pb-6 border-2 bg-white shadow-base border-gray-300 border-dashed rounded-md">
        <%= if @uploads.presentation_file.entries |> Enum.at(0, %{}) |> Map.get(:progress, 0) < 100 do %>
          <div class="space-y-1 text-center" phx-drop-target={@uploads.presentation_file.ref}>
            <svg
              class="mx-auto h-12 w-12 text-gray-400"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 48 48"
              aria-hidden="true"
            >
              <path
                d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
            <div class="flex text-sm text-gray-600">
              <label class="relative cursor-pointer bg-white rounded-md font-medium text-primary-600">
                <form
                  id="file-form"
                  phx-change="validate-file"
                  phx-submit="save-file"
                  phx-target={@myself}
                >
                  <span><%= gettext("Upload a file") %></span>
                  <.live_file_input upload={@uploads.presentation_file} class="sr-only" />
                </form>
              </label>
              <p class="pl-1"><%= gettext("or drag and drop") %></p>
            </div>
            <p class="text-xs text-gray-500">
              <%= gettext("PDF, PPT, PPTX up to %{size} MB", size: @max_file_size) %>
            </p>
            <%= for entry <- @uploads.presentation_file.entries do %>
              <progress id="file" max="100" value={entry.progress}>
                <%= entry.progress %>
              </progress>
              <%= for err <- upload_errors(@uploads.presentation_file, entry) do %>
                <p class="text-red-500 text-sm px-4 py-2 border border-red-600 rounded-md my-3">
                  <%= error_to_string(err) %>
                </p>
              <% end %>
            <% end %>
          </div>
        <% else %>
          <%= for entry <- @uploads.presentation_file.entries do %>
            <div class="flex space-x-1">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="h-6 w-6 text-supporting-green-500"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M5 13l4 4L19 7"
                />
              </svg>
              <p class="text-gray-700"><%= gettext("Presentation uploaded") %></p>
            </div>
            <p class="text-xs text-gray-400"><%= entry.client_name %></p>
            <p>
              <a
                href="#"
                phx-click="remove-file"
                phx-value-ref={entry.ref}
                phx-target={@myself}
                class="text-red-500 text-sm"
              >
                <%= gettext("Remove") %>
              </a>
            </p>
          <% end %>
        <% end %>
      </div>
    </div>
  <% else %>
    <div class="mt-12 mb-3">
      <label class="block text-sm font-medium text-gray-700 mb-2">
        <%= gettext("Select your presentation") %>
      </label>
      <div class="max-w-lg flex flex-col justify-center items-center px-6 pt-5 pb-6 border-2 bg-white shadow-base border-gray-300 border-dashed rounded-md">
        <%= if @uploads.presentation_file.entries |> Enum.at(0, %{}) |> Map.get(:progress, 0) < 100 do %>
          <div class="flex space-x-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-supporting-green-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <p class="text-gray-700"><%= gettext("Presentation attached") %></p>
          </div>
          <div class="flex flex-col space-y-3 items-center">
            <label class="text-primary-500 text-sm">
              <form
                id="file-form"
                phx-change="validate-file"
                phx-submit="save-file"
                phx-target={@myself}
              >
                <span><%= gettext("Change file") %></span>
                <.live_file_input upload={@uploads.presentation_file} class="sr-only" />
              </form>
            </label>
            <%= for entry <- @uploads.presentation_file.entries do %>
              <progress id="file" max="100" value={entry.progress}>
                <%= entry.progress %>
              </progress>
              <%= for err <- upload_errors(@uploads.presentation_file, entry) do %>
                <p class="text-red-500 text-sm px-4 py-2 border border-red-600 rounded-md my-3">
                  <%= error_to_string(err) %>
                </p>
              <% end %>
            <% end %>
            <p class="text-supporting-red-500 text-sm italic text-center hidden">
              <%= gettext(
                "Changing your file will remove all interaction elements like polls associated."
              ) %>
            </p>
          </div>
        <% else %>
          <div class="flex space-x-1">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="h-6 w-6 text-supporting-green-500"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M5 13l4 4L19 7"
              />
            </svg>
            <p class="text-gray-700"><%= gettext("Presentation replaced") %></p>
          </div>

          <%= for entry <- @uploads.presentation_file.entries do %>
            <p class="text-xs text-gray-400"><%= entry.client_name %></p>
            <div :if={entry.progress < 100}>
              <progress id="file" max="100" value={entry.progress}>
                <%= entry.progress %>
              </progress>
            </div>
            <%= for err <- upload_errors(@uploads.presentation_file, entry) do %>
              <p class="text-red-500 text-sm px-4 py-2 border border-red-600 rounded-md my-3">
                <%= error_to_string(err) %>
              </p>
            <% end %>
            <p>
              <a
                href="#"
                phx-click="remove-file"
                phx-value-ref={entry.ref}
                phx-target={@myself}
                class="text-red-500 text-sm"
              >
                <%= gettext("Remove") %>
              </a>
            </p>
          <% end %>
        <% end %>

        <%= for entry <- @uploads.presentation_file.entries do %>
          <%= for err <- upload_errors(@uploads.presentation_file, entry) do %>
            <p class="text-red-500 text-sm px-4 py-2 border border-red-600 rounded-md my-3">
              <%= error_to_string(err) %>
            </p>
          <% end %>
        <% end %>
      </div>
    </div>
  <% end %>

  <.form
    :let={f}
    for={@changeset}
    id="event-form"
    phx-target={@myself}
    phx-change="validate"
    phx-submit="save"
  >
    <div class="relative">
      <div class="my-3">
        <ClaperWeb.Component.Input.text
          form={f}
          key={:name}
          name={gettext("Name of your event")}
          autofocus="true"
          required="true"
          minlength="5"
          maxlength="50"
        />
      </div>

      <div
        class="my-3"
        data-tg-title={"🔑 #{gettext("Access code")}"}
        data-tg-tour={"<p>#{gettext("This code will be used by your attendees to access the event. You have the option to create a custom code.")}</p>"}
        data-tg-group="create-event"
        data-tg-order="2"
      >
        <ClaperWeb.Component.Input.code
          form={f}
          key={:code}
          name={gettext("Code")}
          required="true"
        />
      </div>

      <div
        class="my-3"
        data-tg-title={"🗓️ #{gettext("Event start date")}"}
        data-tg-tour={"<p class='mb-3'>#{gettext("Select the start date for your event. Future dates are permissible.")}</p><p class='opacity-50 text-xs'>#{gettext("Attendees attempting to access the event prior to this date will be directed to a waiting room.")}</p>"}
        data-tg-group="create-event"
        data-tg-order="3"
        phx-update="ignore"
        id="date-picker"
      >
        <ClaperWeb.Component.Input.date
          form={f}
          key={:started_at}
          name={gettext("When your event will start?")}
          required="true"
          from={Date.add(Date.utc_today(), -1)}
          to={Date.add(Date.utc_today(), 365)}
        />
      </div>
    </div>

    <div
      class="mt-7 mb-3"
      data-tg-title={"🧑‍💻 #{gettext("Facilitators")}"}
      data-tg-tour={"<p class='mb-3'>#{gettext("If you require assistance in managing your event, you can grant access to others. Simply enter their email addresses; once they register an account with these emails, they will be able to manage the event.")}</p><p class='opacity-50 text-xs'>#{gettext("Note: Facilitators do not have the ability to delete your event.")}</p>"}
      data-tg-group="create-event"
      data-tg-order="4"
    >
      <span class="text-lg block font-medium text-gray-700">
        <%= gettext("Facilitators can present and manage interactions") %>
      </span>
      <button
        type="button"
        phx-click="add-leader"
        phx-target={@myself}
        class="rounded-md bg-primary-500 hover:bg-primary-600 transition flex items-center mt-3 md:w-max text-white py-5 px-3 text-sm max-h-0"
      >
        <svg
          class="text-white h-6 transform"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          aria-hidden="true"
        >
          <path
            fill-rule="evenodd"
            d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
            clip-rule="evenodd"
          />
        </svg>
        <span><%= gettext("Add facilitator") %></span>
      </button>
    </div>

    <%= inputs_for f, :leaders, fn l -> %>
      <div class="flex items-center space-x-4 mt-2" id={l.data.temp_id || l.id}>
        <img
          class="h-10 w-10 rounded-full"
          src={"https://www.gravatar.com/avatar/#{:crypto.hash(:md5, (l.data.email || "") |> String.downcase() |> String.trim() ) |> Base.encode16() |> String.downcase()}"}
          alt=""
        />

        <%= if is_nil(l.data.temp_id) do %>
          <div class="relative">
            <ClaperWeb.Component.Input.text
              form={l}
              readonly={true}
              placeholder={gettext("User email address")}
              key={:email}
              name=""
            />
            <%= hidden_input(l, :user_email, value: @current_user.email) %>
          </div>

          <label
            phx-click={JS.hide(to: "##{l.data.temp_id || l.id}")}
            class="cursor-pointer md:ml-3 rounded-md bg-supporting-red-500 hover:bg-supporting-red-600 transition flex items-center mt-2 md:w-max text-white py-7 px-3 text-sm max-h-0"
          >
            <span><%= gettext("Remove") %></span>
            <%= checkbox(l, :delete, class: "hidden") %>
          </label>
        <% else %>
          <div class="relative">
            <ClaperWeb.Component.Input.text
              form={l}
              placeholder={gettext("User email address")}
              key={:email}
              name=""
            />
          </div>

          <%= hidden_input(l, :temp_id) %>
          <%= hidden_input(l, :event_id, value: @event.id) %>
          <%= hidden_input(l, :user_email, value: @current_user.email) %>

          <button
            type="button"
            phx-click="remove-leader"
            phx-value-remove={l.data.temp_id}
            phx-target={@myself}
            class="md:ml-3 rounded-md bg-supporting-red-500 hover:bg-supporting-red-600 transition flex items-center mt-2 md:w-max text-white py-5 px-3 text-sm max-h-0"
          >
            <span><%= gettext("Remove") %></span>
          </button>
        <% end %>
      </div>
    <% end %>
  </.form>
</div>
