= form_with url: checkout_update_path(checkout_step), model: @order, method: :put, data: { remote: "true" } do |f|
  .medium-6
    = f.fields :bill_address, model: @order.bill_address do |bill_address|
      %div.checkout-substep
        -# YOUR DETAILS
        %div.checkout-title
          = t("split_checkout.step1.contact_information.title")

        .two-columns-inputs
          %div.checkout-input.with-floating-label{ "data-controller": "floating-label" }
            = f.label :email, t("split_checkout.step1.contact_information.email.label")
            = f.text_field :email, { placeholder: " " }
            = f.error_message_on :email

          %div.checkout-input.with-floating-label{ "data-controller": "floating-label" }
            = bill_address.label :phone, t("split_checkout.step1.contact_information.phone.label")
            = bill_address.text_field :phone, { placeholder: " " }
            = f.error_message_on "bill_address.phone"

      %div.checkout-substep
        -# BILLING ADDRESS
        %div.checkout-title
          = t("split_checkout.step1.billing_address.title")

        .two-columns-inputs
          %div.checkout-input.with-floating-label{ "data-controller": "floating-label" }
            = bill_address.label :firstname, t("split_checkout.step1.billing_address.first_name.label")
            = bill_address.text_field :firstname, { placeholder: " " }
            = f.error_message_on "bill_address.firstname"

          %div.checkout-input.with-floating-label{ "data-controller": "floating-label" }
            = bill_address.label :lastname, t("split_checkout.step1.billing_address.last_name.label")
            = bill_address.text_field :lastname, { placeholder: " " }
            = f.error_message_on "bill_address.lastname"

        %div.checkout-input.with-floating-label{ "data-controller": "floating-label"}
          = bill_address.label :address1, t("split_checkout.step1.address.address1.label")
          = bill_address.text_field :address1, { placeholder: " " }
          = f.error_message_on "bill_address.address1"

        %div.checkout-input.with-floating-label{ "data-controller": "floating-label"}
          = bill_address.label :address2, t("split_checkout.step1.address.address2.label")
          = bill_address.text_field :address2, { placeholder: " " }
          = f.error_message_on "bill_address.address2"

        %div.checkout-input.with-floating-label{ "data-controller": "floating-label"}
          = bill_address.label :city, t("split_checkout.step1.address.city.label")
          = bill_address.text_field :city, { placeholder: " " }
          = f.error_message_on "bill_address.city"

        %div.checkout-input.with-floating-label{ "data-controller": "floating-label"}
          = bill_address.label :zipcode, t("split_checkout.step1.address.zipcode.label")
          = bill_address.text_field :zipcode, { placeholder: " " }
          = f.error_message_on "bill_address.zipcode"

        %div{ "data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
          - bill_address_country = @order.bill_address.country || DefaultCountry.country

          %div.checkout-input
            = bill_address.label :country_id, t("split_checkout.step1.address.country_id.label")
            = bill_address.select :country_id, countries, { selected: bill_address_country.id }, { "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange" }

          %div.checkout-input
            = bill_address.label :state_id, t("split_checkout.step1.address.state_id.label")
            = bill_address.select :state_id, states_for_country(bill_address_country), { selected: @order.bill_address&.state_id }, { "data-dependent-select-target": "select" }

        - if spree_current_user
          %div.checkout-input
            = f.check_box :save_bill_address
            = f.label :save_bill_address, t(:checkout_default_bill_address)

    %div.checkout-substep{ "data-controller": "toggle shippingmethod" }
      - selected_shipping_method = @order.shipping_method&.id || params[:shipping_method_id]
      %div.checkout-title
        = t("split_checkout.step1.shipping_info.title")

      - display_ship_address = false
      - ship_method_description = nil

      - selected_shipping_method ||= @shipping_methods[0].id if @shipping_methods.length == 1
      - @shipping_methods.each do |shipping_method|
        - ship_method_is_selected = shipping_method.id == selected_shipping_method.to_i
        %div.checkout-input.checkout-input-radio
          = fields_for shipping_method do |shipping_method_form|
            = shipping_method_form.radio_button :name, shipping_method.id,
              id: "shipping_method_#{shipping_method.id}",
              checked: ship_method_is_selected,
              name: "shipping_method_id",
              "data-requireAddress": shipping_method.require_ship_address,
              "data-action": "toggle#toggle shippingmethod#selectShippingMethod",
              "data-toggle-show": shipping_method.require_ship_address
            = shipping_method_form.label shipping_method.id, shipping_method.name, {for: "shipping_method_" + shipping_method.id.to_s }
            %em.fees= payment_or_shipping_price(shipping_method, @order)
            - display_ship_address = display_ship_address || (ship_method_is_selected && shipping_method.require_ship_address)
        %div.checkout-input{"data-shippingmethod-target": "shippingMethodDescription", "data-shippingmethodid": shipping_method.id , style: "display: #{ship_method_is_selected ? 'block' : 'none'}" }
          #distributor_address.panel
            - if shipping_method.description.present?
              %span #{shipping_method.description}
              %br/
              %br/
            - if @order.order_cycle.pickup_time_for(@order.distributor)
              = t :checkout_ready_for
            = @order.order_cycle.pickup_time_for(@order.distributor)

      = f.error_message_on :shipping_method, standalone: true

      %div.checkout-input{ "data-toggle-target": "content", style: "display: #{display_ship_address ? 'block' : 'none'}" }
        = f.check_box :ship_address_same_as_billing, { id: "ship_address_same_as_billing", name: "ship_address_same_as_billing", "data-action": "shippingmethod#showHideShippingAddress", "data-shippingmethod-target": "shippingAddressCheckbox", checked: shipping_and_billing_match?(@order) }, 1, nil
        = f.label :ship_address_same_as_billing, t(:checkout_address_same), { for: "ship_address_same_as_billing" }

      %div{"data-shippingmethod-target": "shippingMethodAddress", style: "display: #{!display_ship_address || shipping_and_billing_match?(@order) ? 'none' : 'block'}" }
        = f.fields :ship_address, model: @order.ship_address do |ship_address|
          %div.checkout-input.with-floating-label{ "data-controller": "floating-label"}
            = ship_address.label :address1, t("split_checkout.step1.address.address1.label")
            = ship_address.text_field :address1, { placeholder: " " }
            = f.error_message_on "ship_address.address1"

          %div.checkout-input.with-floating-label{ "data-controller": "floating-label"}
            = ship_address.label :address2, t("split_checkout.step1.address.address2.label")
            = ship_address.text_field :address2, { placeholder: " " }
            = f.error_message_on "ship_address.address2"

          %div.checkout-input.with-floating-label{ "data-controller": "floating-label"}
            = ship_address.label :city, t("split_checkout.step1.address.city.label")
            = ship_address.text_field :city, { placeholder: " " }
            = f.error_message_on "ship_address.city"

          %div.checkout-input.with-floating-label{ "data-controller": "floating-label"}
            = ship_address.label :zipcode, t("split_checkout.step1.address.zipcode.label")
            = ship_address.text_field :zipcode, { placeholder: " " }
            = f.error_message_on "ship_address.zipcode"

          %div{ "data-controller": "dependent-select", "data-dependent-select-options-value": countries_with_states }
            - ship_address_country = @order.ship_address.country || DefaultCountry.country

            %div.checkout-input
              = ship_address.label :country_id, t("split_checkout.step1.address.country_id.label")
              = ship_address.select :country_id, countries, { selected: ship_address_country.id }, { "data-dependent-select-target": "source", "data-action": "dependent-select#handleSelectChange" }

            %div.checkout-input
              = ship_address.label :state_id, t("split_checkout.step1.address.state_id.label")
              = ship_address.select :state_id, states_for_country(ship_address_country), { selected: @order.ship_address&.state_id }, { "data-dependent-select-target": "select" }

      - if spree_current_user
        %div.checkout-input{ "data-toggle-target": "content", style: "display: #{display_ship_address ? 'block' : 'none'}" }
          = f.check_box :save_ship_address
          = f.label :save_ship_address, t(:checkout_default_ship_address)

      .div.checkout-input
        = f.label :special_instructions, t(:checkout_instructions)
        = f.text_area :special_instructions, size: "60x4"

    %div.checkout-submit
      = f.submit t("split_checkout.step1.submit"), class: "button primary", disabled: @terms_and_conditions_accepted == false || @platform_tos_accepted == false
      %a.button.cancel{href: main_app.cart_path}
        = t("split_checkout.step1.cancel")