{**
 * 2007-2019 PrestaShop and Contributors
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2019 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file='checkout/_partials/steps/checkout-step.tpl'}

{block name='step_content'}
    <div id="hook-display-before-carrier">
      {$hookDisplayBeforeCarrier nofilter}
    </div>

    <div class="flex w-full p-4">
      {if $delivery_options|count}
        <form
          class="flex flex-col w-full gap-4"
          id="js-delivery"
          data-url-update="{url entity='order' params=['ajax' => 1, 'action' => 'selectDeliveryOption']}"
          method="post"
        >
          <div class="form-fields">
            {block name='delivery_options'}
              <div class="delivery-options flex flex-col gap-2">
                {foreach from=$delivery_options item=carrier key=carrier_id}
                    <div class="flex items-center delivery-option">
                      <div class="col-sm-1">
                        <span class="custom-radio float-xs-left">
                          <input type="radio" name="delivery_option[{$id_address}]" id="delivery_option_{$carrier.id}" value="{$carrier_id}"{if $delivery_option == $carrier_id} checked{/if}>
                          <span></span>
                        </span>
                      </div>
                      <label for="delivery_option_{$carrier.id}" class="col-sm-11 delivery-option-2">
                        <div class="flex items-center gap-2">
                          <div class="col-sm-5 col-xs-12">
                            <div class=" flex items-center gap-2">
                              {if $carrier.logo}
                              <div>
                                  <img src="{$carrier.logo}" alt="{$carrier.name}" />
                              </div>
                              {/if}
                              <div class="text-lg font-semibold">
                                <span class="h6 carrier-name">{$carrier.name}</span>
                              </div>
                            </div>
                          </div>
                          <div class="flex gap-2 flex-wrap">
                            <div class="">
                              <span class="carrier-delay">( {$carrier.delay} )</span>
                            </div>
                            <div class="">
                              <span class="carrier-price">( {$carrier.price} )</span>
                            </div>
                          </div>
                        </div>
                      </label>
                    </div>
                {/foreach}
              </div>
            {/block}
            <div class="flex w-full">
              {if $recyclablePackAllowed}
                <span class="custom-checkbox">
                  <input type="checkbox" id="input_recyclable" name="recyclable" value="1" {if $recyclable} checked {/if}>
                  <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
                  <label for="input_recyclable">{l s='I would like to receive my order in recycled packaging.' d='Shop.Theme.Checkout'}</label>
                </span>
              {/if}

              {if $gift.allowed}
                <span class="custom-checkbox">
                  <input class="js-gift-checkbox" id="input_gift" name="gift" type="checkbox" value="1" {if $gift.isGift}checked="checked"{/if}>
                  <span><i class="material-icons rtl-no-flip checkbox-checked">&#xE5CA;</i></span>
                  <label for="input_gift">{$gift.label}</label >
                </span>

                <div id="gift" class="collapse{if $gift.isGift} in{/if}">
                  <label for="gift_message">{l s='If you\'d like, you can add a note to the gift:' d='Shop.Theme.Checkout'}</label>
                  <textarea rows="2" cols="120" id="gift_message" name="gift_message">{$gift.message}</textarea>
                </div>
              {/if}

            </div>
          </div>
          <button type="submit" class="uppercase font-medium py-2 text-center w-full bg-blue-950 text-gray-50" name="confirmDeliveryOption" value="1">
            {l s='Continue' d='Shop.Theme.Actions'}
          </button>
        </form>
      {else}
      <p class="font-semibold text-red-500">{l s='Unfortunately, there are no carriers available for your delivery address.' d='Shop.Theme.Checkout'}</p>
      {/if}
    </div>

    <div id="hook-display-after-carrier">
      {$hookDisplayAfterCarrier nofilter}
    </div>

    <div id="extra_carrier"></div>
{/block}