app/template/default/index.twig line 1

Open in your IDE?
  2. {% extends 'default_frame.twig' %}
  5. {% set body_class = 'front_page' %}
  7. {% block stylesheet %}
  8.     <style>
  9.         input[type='date'],
  10.         input[type='datetime'],
  11.         input[type='datetime-local'],
  12.         input[type='month'],
  13.         input[type='time'],
  14.         input[type='week'] {
  15.             &::-webkit-inner-spin-button {
  16.                 display: none;
  17.             }
  18.         }
  19.         ::-webkit-datetime-edit-year-field,
  20.         ::-webkit-datetime-edit-month-field,
  21.         ::-webkit-datetime-edit-day-field {
  22.             &:after {
  23.                 content: "";
  24.             }
  25.             &:not([aria-valuenow]) {
  26.                 color: transparent;
  27.             }
  28.         }
  29.         ::-webkit-datetime-edit-text {
  30.             color: darkgray;
  31.         }
  32.         ::-webkit-clear-button {
  33.             margin-left: 0;
  34.             margin-right: 5px;
  35.         }
  36.         ::-webkit-calendar-picker-indicator {
  37.             color: transparent;
  38.             background: url("https://www.globaladvancedcomm.com/img/ico_calendar.png") no-repeat;
  39.             background-size: 30px;
  40.             padding: 10px;
  41.         }
  42.     </style>
  43. {% endblock %}
  45. {% block javascript %}
  46. <script>
  47. function CancelAllItem() {
  48.     result_inq = confirm("Clear shopping cart?");
  49.     if (result_inq == true) {
  50.         $.post('{{ url("homepage") }}', 'mode=set_cancel')
  51.         .done(function (data) {
  52.             console.log(data.form);
  53.         })
  54.     }
  55. }
  58. function getTotalPrice() {
  59.     var order_plan = $('input[name="order_plan"]:checked').val();
  60.     if (order_plan == null) {
  61.         return;
  62.     }
  63.     switch (order_plan) {
  64.     case '1':
  65.     case '208':
  66.     case '209':
  67.     case '210':
  68.     case '867':
  69.     case '868':
  70.     case '872':
  71.         product_code = "Basic";
  72.         break;
  73.     case '2':
  74.         product_code = "Premium";
  75.         break;
  76.     case '205':
  77.     case '206':
  78.     case '207':
  79.         product_code = "SIM";
  80.         break;
  81.     case '4':
  82.         product_code = "5G";
  83.         break;
  84.     default:
  85.         product_code = "super";
  86.     }
  88.     $.ajax({
  89.         url: "{{ path('getTotal') }}",
  90.         type: 'POST',
  91.         dataType: 'json',
  92.         data: {
  93.             product_code: product_code,
  94.             product_id: order_plan,
  95.             num: $('#num').val(),
  96.             insurance: $('#order_tappuri_0').prop('checked'),
  97.             charger: $('#order_tappuri_1').prop('checked'),
  98.             adapter: $('#order_tappuri_2').prop('checked'),
  99.             sparewifi: $('#order_tappuri_3').prop('checked'),
  100.             pocketalk: $('#order_tappuri_4').prop('checked'),
  101.             sparewifi3gb: $('#order_tappuri_5').prop('checked'),
  102.         },
  103.         success: function (data) {
  104.         var usd = data.usd;
  105.         $('#total').html(data.total.toLocaleString() + '<span class="txt">JPY</span><br><span class="txt">About</span><span class="txt2"> ' + usd.toFixed(2) + '</span><span class="txt">USD</span>');
  106.         },
  107.         error: function (xhr, status, error) {
  108.             // エラー時の処理
  109.             console.error(xhr.responseText);
  110.         }
  111.     });
  112. }
  115. </script>
  116. <script>
  117.     $(document).ready(function () {
  118.         var min = new Date();
  119.         min.setDate(min.getDate() + 2);
  120.         // URLを取得
  121.         let url = new URL(window.location.href);
  123.         // URLSearchParamsオブジェクトを取得
  124.         let params = url.searchParams;
  126.         switch (params.get('plan')) {
  127.         case 'premium':
  128.             $('input[name=order_plan]:eq(0)').prop('checked', true);
  129.             break;
  130.         case 'super':
  131.             $('input[name=order_plan]:eq(1)').prop('checked', true);
  132.             break;
  133.         case '5g':
  134.             $('input[name=order_plan]:eq(2)').prop('checked', true);
  135.             break;
  136.         case 'prepaid-10gb':
  137.             $('input[name=order_plan]:eq(3)').prop('checked', true);
  138.             break;
  139.         case 'prepaid-50gb':
  140.             $('input[name=order_plan]:eq(4)').prop('checked', true);
  141.             break;
  142.         case 'prepaid-100gb':
  143.             $('input[name=order_plan]:eq(5)').prop('checked', true);
  144.             break;
  145.         case 'longplan90days':
  146.             $('input[name=order_plan]:eq(6)').prop('checked', true);
  147.             break;
  148.         case 'longplan180days':
  149.             $('input[name=order_plan]:eq(7)').prop('checked', true);
  150.             break;
  151.         case 'longplan360days':
  152.             $('input[name=order_plan]:eq(8)').prop('checked', true);
  153.             break;
  154.         case 'longplan120days':
  155.             $('input[name=order_plan]:eq(9)').prop('checked', true);
  156.             break;
  157.         case 'longplan150days':
  158.             $('input[name=order_plan]:eq(10)').prop('checked', true);
  159.             break;
  160.         case 'longplan300days':
  161.             $('input[name=order_plan]:eq(11)').prop('checked', true);
  162.             break;
  163.         default:
  164.             $('input[name=order_plan]:eq(0)').prop('checked', true);
  165.             break;
  166.         }
  167.         $('#shipping_delivery_date, #end_date').datepicker({
  168.             autoUpdateInput: false,
  169.             minDate: '+1d',
  170.             showWeek: false,
  171.             dateFormat: "yy/mm/dd",
  172.             firstDay: 0, /* 週の開始を日曜にする */
  173.             isRTL: false,
  174.             showMonthAfterYear: true,
  175.             showButtonPanel: true,
  176.             onClose: function (date) {
  177.                 const startDate = $(this).attr('id') === 'shipping_delivery_date'
  178.                     ? date
  179.                     : $('#shipping_delivery_date').val();
  180.                 const fromDate = $(this).attr('id') === 'end_date'
  181.                     ? date
  182.                     : $('#end_date').val();
  183.                 const num = getDiff(startDate, fromDate);
  184.                 if (isNaN(num) || num < 1) {
  185.                     $('#days').text('');
  186.                     $('#num').val('');
  187.                     return;
  188.                 }
  189.                 $('#days').text('　' + num + 'days');
  190.                 $('#num').val(num);
  192.                 getTotalPrice();
  193.             },
  194.         });
  196.         $('#sim_start_date').datepicker({
  197.             autoUpdateInput: false,
  198.             minDate: '+3d',
  199.             showWeek: false,
  200.             dateFormat: "mm/dd/yy",
  201.             firstDay: 0, /* 週の開始を日曜にする */
  202.             isRTL: false,
  203.             showMonthAfterYear: true,
  204.             showButtonPanel: true
  205.         });
  206.         $('#sim_start_date').on('change', function (e) {
  207.             var startArray = $(this).val().split('/');
  208.             var start_dt = new Date(startArray[2], startArray[0] - 1, startArray[1], 0, 0, 0);
  209.             var yyyy = start_dt.getFullYear();
  210.             var mm = start_dt.getMonth() + 1;
  211.             var dd = start_dt.getDate();
  212.             if (mm < 10) {
  213.                 mm = '0' + mm;
  214.             }
  215.             if (dd < 10) {
  216.                 dd = '0' + dd;
  217.             }
  218.             var start_date = yyyy + '/' + mm + '/' + dd;
  220.             $('#shipping_delivery_date').val(start_date);
  222.             switch ($('input[name=order_plan]:checked').val()) {
  223.             case '208': start_dt.setMonth(start_dt.getMonth() + 3);
  224.                 var yyyy = start_dt.getFullYear();
  225.                 var mm = start_dt.getMonth() + 1;
  226.                 var dd = start_dt.getDate();
  227.                 if (mm < 10) {
  228.                     mm = '0' + mm;
  229.                 }
  230.                 if (dd < 10) {
  231.                     dd = '0' + dd;
  232.                 }
  233.                 var end_date = yyyy + '/' + mm + '/' + dd;
  234.                 $('#end_date').val(end_date);
  235.                 break;
  236.             case '209': start_dt.setFullYear(start_dt.getMonth() + 6);
  237.                 var yyyy = start_dt.getFullYear();
  238.                 var mm = start_dt.getMonth() + 1;
  239.                 var dd = start_dt.getDate();
  240.                 if (mm < 10) {
  241.                     mm = '0' + mm;
  242.                 }
  243.                 if (dd < 10) {
  244.                     dd = '0' + dd;
  245.                 }
  246.                 var end_date = yyyy + '/' + mm + '/' + dd;
  247.                 $('#end_date').val(end_date);
  248.                 break;
  249.             case '210': start_dt.setFullYear(start_dt.getFullYear() + 1);
  250.                 var yyyy = start_dt.getFullYear();
  251.                 var mm = start_dt.getMonth() + 1;
  252.                 var dd = start_dt.getDate();
  253.                 if (mm < 10) {
  254.                     mm = '0' + mm;
  255.                 }
  256.                 if (dd < 10) {
  257.                     dd = '0' + dd;
  258.                 }
  259.                 var end_date = yyyy + '/' + mm + '/' + dd;
  260.                 $('#end_date').val(end_date);
  261.                 break;
  262.             case '867': start_dt.setMonth(start_dt.getMonth() + 4);
  263.                 var yyyy = start_dt.getFullYear();
  264.                 var mm = start_dt.getMonth() + 1;
  265.                 var dd = start_dt.getDate();
  266.                 if (mm < 10) {
  267.                     mm = '0' + mm;
  268.                 }
  269.                 if (dd < 10) {
  270.                     dd = '0' + dd;
  271.                 }
  272.                 var end_date = yyyy + '/' + mm + '/' + dd;
  273.                 $('#end_date').val(end_date);
  274.                 break;
  275.             case '868': start_dt.setFullYear(start_dt.getMonth() + 5);
  276.                 var yyyy = start_dt.getFullYear();
  277.                 var mm = start_dt.getMonth() + 1;
  278.                 var dd = start_dt.getDate();
  279.                 if (mm < 10) {
  280.                     mm = '0' + mm;
  281.                 }
  282.                 if (dd < 10) {
  283.                     dd = '0' + dd;
  284.                 }
  285.                 var end_date = yyyy + '/' + mm + '/' + dd;
  286.                 $('#end_date').val(end_date);
  287.                 break;
  288.             case '872': start_dt.setFullYear(start_dt.getMonth() + 10);
  289.                 var yyyy = start_dt.getFullYear();
  290.                 var mm = start_dt.getMonth() + 1;
  291.                 var dd = start_dt.getDate();
  292.                 if (mm < 10) {
  293.                     mm = '0' + mm;
  294.                 }
  295.                 if (dd < 10) {
  296.                     dd = '0' + dd;
  297.                 }
  298.                 var end_date = yyyy + '/' + mm + '/' + dd;
  299.                 $('#end_date').val(end_date);
  300.                 break;
  301.             default:
  302.                 $('#end_date').val('3000/01/01');
  303.             }
  304.         });
  306.         function getDiff(date1Str, date2Str) {
  307.             var date1 = new Date(date1Str);
  308.             var date2 = new Date(date2Str);
  310.             // getTimeメソッドで経過ミリ秒を取得し、２つの日付の差を求める
  311.             var msDiff = date2.getTime() - date1.getTime();
  313.             // 求めた差分（ミリ秒）を日付へ変換します（経過ミリ秒÷(1000ミリ秒×60秒×60分×24時間)。端数切り捨て）
  314.             var daysDiff = Math.floor(msDiff / (1000 * 60 * 60 * 24));
  316.             // 差分へ1日分加算して返却します
  317.             return ++ daysDiff;
  318.         }
  320.         $('input[name="order_plan"]').on('change', function (e) {
  321.             displayInitialize();
  322.             getTotalPrice();
  323.         });
  325.         $('#order_tappuri_0').on('click', function (e) {
  326.             getTotalPrice();
  327.         });
  329.         $('#order_tappuri_1').on('click', function (e) {
  330.             getTotalPrice();
  331.         });
  333.         $('#order_tappuri_2').on('click', function (e) {
  334.             getTotalPrice();
  335.         });
  337.         $('#order_tappuri_3').on('click', function (e) {
  338.             getTotalPrice();
  339.         });
  341.         $('#order_tappuri_4').on('click', function (e) {
  342.             getTotalPrice();
  343.         });
  345.         $('#order_tappuri_5').on('click', function (e) {
  346.             getTotalPrice();
  347.         });
  349.         let oldSimStartDate = '';
  350.         let oldShippingDeliveryDate = '';
  351.         let oldEndDate = '';
  353.         function displayInitialize() {
  355.             if ($('#sim_start_date').is(':visible')) {
  356.                 oldSimStartDate = $('#sim_start_date').val();
  357.             }
  359.             if ($('#shipping_delivery_date').is(':visible')) {
  360.                 oldShippingDeliveryDate = $('#shipping_delivery_date').val();
  361.             }
  363.             if ($('#end_date').is(':visible')) {
  364.                 oldEndDate = $('#end_date').val();
  365.             }
  367.             switch ($('input[name="order_plan"]:checked').val()) {
  368.             case '205':
  369.             case '206':
  370.             case '207':
  371.                 $('#period').html('&#10103; Delivery date select');
  372.                 $('#sim_start_date').show().val(oldSimStartDate);
  373.                 $('#rental_period').hide();
  374.                 $('#shipping_delivery_date').val('');
  375.                 $('#end_date').val('');
  376.                 $('#days').text('');
  377.                 $('#num').val('');
  378.                 break;
  379.             case '208':
  380.                 $('#period').html('&#10103; Start date select');
  381.                 $('#sim_start_date').show().val(oldSimStartDate);
  382.                 $('#rental_period').hide();
  383.                 $('#shipping_delivery_date').val('');
  384.                 $('#end_date').val('');
  385.                 $('#days').text('');
  386.                 $('#num').val('90');
  387.                 break;
  388.             case '209':
  389.             $('#period').html('&#10103; Start date select');
  390.                 $('#sim_start_date').show().val(oldSimStartDate);
  391.                 $('#rental_period').hide();
  392.                 $('#shipping_delivery_date').val('');
  393.                 $('#end_date').val('');
  394.                 $('#days').text('');
  395.                 $('#num').val('180');
  396.                 break;
  397.             case '210':
  398.                 $('#period').html('&#10103; Start date select');
  399.                 $('#sim_start_date').show().val(oldSimStartDate);
  400.                 $('#rental_period').hide();
  401.                 $('#shipping_delivery_date').val('');
  402.                 $('#end_date').val('');
  403.                 $('#days').text('');
  404.                 $('#num').val('360');
  405.                 break;
  406.             case '867':
  407.                 $('#period').html('&#10103; Start date select');
  408.                 $('#sim_start_date').show().val(oldSimStartDate);
  409.                 $('#rental_period').hide();
  410.                 $('#shipping_delivery_date').val('');
  411.                 $('#end_date').val('');
  412.                 $('#days').text('');
  413.                 $('#num').val('120');
  414.                 break;
  415.             case '868':
  416.                 $('#period').html('&#10103; Start date select');
  417.                 $('#sim_start_date').show().val(oldSimStartDate);
  418.                 $('#rental_period').hide();
  419.                 $('#shipping_delivery_date').val('');
  420.                 $('#end_date').val('');
  421.                 $('#days').text('');
  422.                 $('#num').val('150');
  423.                 break;
  424.             case '872':
  425.                 $('#period').html('&#10103; Start date select');
  426.                 $('#sim_start_date').show().val(oldSimStartDate);
  427.                 $('#rental_period').hide();
  428.                 $('#shipping_delivery_date').val('');
  429.                 $('#end_date').val('');
  430.                 $('#days').text('');
  431.                 $('#num').val('300');
  432.                 break;
  433.             default:
  434.                 $('#period').html('&#10103;　Rental period select');
  435.                 $('#rental_period').show();
  436.                 $('#shipping_delivery_date').val(oldShippingDeliveryDate);
  437.                 $('#end_date').val(oldEndDate);
  438.                 $('#sim_start_date').hide();
  440.                 const num = getDiff(oldShippingDeliveryDate, oldEndDate);
  441.                 if (!isNaN(num) && num > 0) {
  442.                     $('#days').text('　' + num + 'days');
  443.                     $('#num').val(num);
  444.                 }
  445.             }
  447.             getTotalPrice();
  448.         }
  450.         $('form').on('submit', function () {
  451.             $('#sim_start_date').remove();
  452.             return true;
  453.         });
  454.         displayInitialize();
  455.     })
  456. </script>
  457. {% endblock %}
  459. {% block main %}
  460.     <div class="orderpage">
  461.         <div class="orderpage__h1">
  462.             Order your pocket Wi-Fi now
  463.         </div>
  465.         <div class="">
  466.             <form method="post" action="{{ url('homepage') }}">
  468.                 {{ form_widget(form._token) }}
  469.                 {{ form_widget(form.mode) }}
  471.                 </div>
  473.                 &nbsp;
  474.                 <!--<div class="orderpage__h2">New Order</div>2024.0117-->
  476.                 <!--ベネフィット-->
  477.                 　<div class="orderpage__box">
  478.                     <div class="orderpage__h2 orderpage__h2--blue">Benefit</div>
  479.                         <div align="center"><img src="https://globaladvancedcomm.com/wp-content/uploads/2024/02/2024.0206-gac.jpg" alt="wifi-rental benefit" width="100%" height="100%"></div>
  480.                 　</div>
  481.                     <div class="orderpage__h3">
  482.                     <strong>Please select</strong><br> ❶WiFi Plan & ❷Rental period <br>→<strong>Prices are displayed.</strong>
  483.                 </div>
  485.                 <div class="orderpage__h3 orderpage__h3--green">
  486.                     <a href="https://www.globaladvancedcomm.com/rental-agreement/" target="_blank">&nbsp;<i class="fas fa-external-link-alt"></i>&nbsp;Please check "Rental Agreement" in advance.</a>
  487.                 </div>
  489.                 <!--①WiFi Plan select-->
  490.                 <div class="orderpage__box">
  491.                     <div class="orderpage__h2 orderpage__h2--blue">&#10102; WiFi Plan select</div>
  492.                     <!--Wi-Fiプラン-->
  493.                     <div id="order_plan">
  494.                         <div class="radio">
  495.                             <input type="radio" id="order_plan_2" name="order_plan" required="required" value="2">
  496.                             <label class="required">
  497.                                 Standard Plan
  498.                                 <div><img src="https://www.globaladvancedcomm.com/images/orderpage/wifi-3gb-type.png"></div>
  499.                             </label>
  500.                         <a href="#period">Rental period select↓</a>
  501.                         </div>
  502.                         <div class="radio">
  504.                             <input type="radio" id="order_plan_1" name="order_plan" required="required" value="3">
  505.                             <label class="required">
  506.                                 Unlimited Plan
  507.                                 <div><img src="https://www.globaladvancedcomm.com/images/orderpage/wifi-unlimited-type.png"></div>
  508.                             </label>
  509.                         <a href="#period">Rental period select↓</a>
  510.                         </div>
  512.                         <div class="radio">
  513.                             <input type="radio" id="order_plan_0" name="order_plan" required="required" value="4">
  514.                             <label class="required">
  515.                                 5G Unlimited Plan
  516.                                 <div><img src="https://www.globaladvancedcomm.com/images/orderpage/wifi-5g-unlimited-type.png"></div>
  517.                             </label>
  518.                         <a href="#period">Rental period select↓</a>
  519.                         </div>
  521.                 <!--ロングプラン-->
  522.                         <details>
  523.                 <summary><div class="orderpage__h4"><font color="#224f86"><strong>▶︎Unlimited Long Plan 90days~</strong></font></div></summary>
  524.                         <div class="radio"></div><!--ダミー-->
  525.                         <div class="radio"></div><!-ダミー-->
  526.                         <div class="radio">
  527.                             <input type="radio" id="order_plan_6" name="order_plan" required="required" value="208">
  528.                                 <label for="order_plan_6">[90days]</label>
  529.                         </div>
  530.                         <div class="radio">
  531.                             <input type="radio" id="order_plan_9" name="order_plan" required="required" value="867">
  532.                                 <label for="order_plan_9">[120days]</label>
  533.                         </div>
  534.                         <div class="radio">
  535.                             <input type="radio" id="order_plan_10" name="order_plan" required="required" value="868">
  536.                                 <label for="order_plan_10">[150days]</label>
  537.                         </div>
  538.                         <div class="radio">
  539.                             <input type="radio" id="order_plan_7" name="order_plan" required="required" value="209">
  540.                                 <label for="order_plan_7">[180days]</label>
  541.                         </div>
  542.                         <div class="radio">
  543.                             <input type="radio" id="order_plan_11" name="order_plan" required="required" value="872">
  544.                                 <label for="order_plan_11">[300days]</label>
  545.                         </div>
  546.                         <div class="radio">
  547.                             <input type="radio" id="order_plan_8" name="order_plan" required="required" value="210">
  548.                                 <label for="order_plan_8">[360days]</label>
  549.                         </div>
  550.                 </details>
  551.                 <!--SIMカードプラン-->
  553.                                 </div
  554.                             </div>
  555.                 </div>
  557.                 <div class="orderpage__box">
  559.                     <div class="orderpage__h2 orderpage__h2--blue" id="period"></div>
  561.                     <div class="orderpage__date">
  562.                         {% if SD_Flg=="2" %}
  563.                             <p style="color:#FF0000;">Arrangements can be made the next day with the hotel only.<br>*Delivery to the hotel/home will be made <strong>around 12:00 pm </strong> on the first day of the rental.
  564.                                 {{ err.shipping_delivery_date }}
  565.                                 {{ err.end_date }}
  566.                             </p>
  567.                             <input type="text" id="sim_start_date" autocomplete="off" name="sim_start_date" class="form-control" placeholder="mm/dd/yyyy" size="30"/>
  568.                             <div id="rental_period">
  569.                                 <input type="text" id="shipping_delivery_date" autocomplete="off" name="shipping_delivery_date" class="form-control" placeholder="yyyy/mm/dd"/>
  570.                                 〜
  571.                                 <input type="text" id="end_date" autocomplete="off" name="end_date" class="form-control" placeholder="yyyy/mm/dd" />
  572.                                 <span id="days"></span>
  573.                             </div>
  574.                             <input type="hidden" id="num" name="num"/>
  575.                         {% else %}
  576.                             <input type="hidden" id="shipping_delivery_date" name="shipping_delivery_date" required="required" value="{{ SD_Flg }}"><span id="days"></span>
  577.                             <button onclick="CancelAllItem();" class="btn_can_set">Clear shopping cart</button>
  578.                         {% endif %}
  579.                     </div>
  581.                     <div class="orderpage__calc">
  582.                         <div class="orderpage__calc--h1">Total
  583.                             <span id="total" class="total"></span>
  584.                         </div>
  585.                     </div>
  587.                 <div class="orderpage__h3"><font color="#ff0000"><strong>Please read the following before ordering !</strong></font></div>
  588.                     <ul>
  589.                         <li class="orderpage__except orderpage__except--1">Please order at least 2 days prior to the rental start date for<font color="#ff0000"><strong>airport arrangement.</strong></font>.<br>
  590.                         (<font color="#ff0000"><strong>[Next day delivery is available!]</strong></font>
  591.                         If the delivery destination is a <font color="#ff0000"><strong>hotel</strong></font>, next-day arrangements are possible!)</li>
  593.                         <li class="orderpage__except orderpage__except--2">We do not ship on Sundays and holidays; orders placed after 1:00 p.m. will be shipped on the next business day at the earliest.</li>
  595.                         <li class="orderpage__except orderpage__except--3">If you would like to pick up from one of the following delivery locations, please place your order at least <font color="#ff0000"><strong>3 days before</strong></font> your rental start date.<br/><br/>
  596.                             [Airport Pickup] : Fukuoka, Shin-Chitose<br/>
  597.                             [Hotel or Residence] :Hokkaido, Okinawa, Kyushu (Fukukoka pref., Saga pref., Nagasaki pref., Oita pref., Kumamoto pref., Miyazaki pref. and Kagoshima pref.), Kagawa pref.,Kochi pref., Okayama pref., Ehime pref., Tokushima pref., Hiroshima pref., Shimane pref.,Tottori pref., Yamaguchi pref.
  598.                         </li>
  599.                         <li class="orderpage__except orderpage__except--4">For rentals
  600.                             <font color="#ff0000"><strong>longer than 60 days</strong></font>, please contact us.</br><a href="mailto:info@globaladvancedcomm.com">info@globaladvancedcomm.com</a></li>
  601.                     </ul>
  602.                 </div>
  603.                 <div class="orderpage__box">
  604.                     <div class="orderpage__h2 orderpage__h2--blue">&#10104; Option</div>
  605.                         <div class="orderpage__h3">
  606.                             Please put a check mark.
  607.                         </div>
  610.                         <div id="order_tappuri">
  612.                             <div class="checkbox">
  613.                                 <input type="checkbox" id="order_tappuri_4" name="order_tappuri[]" value="pocketalk" data-gtm-form-interact-field-id="4">
  614.                                 <label for="order_tappuri_4">
  615.                                     <div>［POCKETALK］<br><font color="#ff0000"><del>880JPY</del>→440JPY/day(inc.tax)<br>or max 8,800JPY for long rental (inc.tax)</font><br><img src="https://www.globaladvancedcomm.com/reservation_english/html/upload/save_image/pocketalk.png" width="58%" height="58%" ></div>
  616.                                     Translating both by voice and text with over 74 languages to choose from!<br>Enjoy your time in Japan by translating  Japanese with your native language!
  617.                                 </label>
  618.                             </div>
  619.                             <div>
  620.                             <p>How to use POCKETALK
  621.                             <iframe width="360" height="200" src="https://www.youtube.com/embed/sh9DDzVnqCA?si=LzoW9xV29DrisKO4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe><br>
  622.                             <div class="orderpage__h3">Merit/Differences from smartphone apps</div>
  623.                             <font color="#ff0000">[Long battery life]</font><br>
  624.                             Pocket Talk W boasts a long battery life. Under normal usage conditions, it can be used throughout the day, making it ideal for extended periods of time on the go.<br>
  625.                             <br>
  626.                             <font color="#ff0000">[Real-time voice translation]</font><br>
  627.                             Pocket Talk W provides real-time voice translation. This feature allows dialogues to proceed without delay and enables smooth communication. It features less delay compared to interpreter applications.<br>
  628.                             </p>
  629.                             </div>
  630.                             <div class="checkbox">
  631.                                 <input type="checkbox" id="order_tappuri_1" name="order_tappuri[]" value="charger" data-gtm-form-interact-field-id="1">
  632.                                 <label for="order_tappuri_1">
  633.                                     <div>［Portable Charger］<br><font color="#ff0000">80JPY/day<br>or max 1,000JPY for long rental (inc.tax) </font><br><img src="https://globaladvancedcomm.com/gac_new/wp-content/uploads/images/mobile_battery.jpg" width="50%" height="50%" ></div>
  634.                                     Batteries Capacity : 10,000mAh<br>Output : USB＆TypeC<br>Smartphones can be fully charged <br>more than twice!</label>
  635.                             </div>
  637.                             <div class="checkbox">
  638.                                 <input type="checkbox" id="order_tappuri_0" name="order_tappuri[]" value="insurance" data-gtm-form-interact-field-id="0">
  639.                                 <label for="order_tappuri_0">
  640.                                     <div>［Premium Insurance］<br><font color="#ff0000">110JPY/day<br>or max 10,000JPY for long rental (inc.tax)</font><br><img src="https://globaladvancedcomm.com/gac_new/wp-content/uploads/images/warranty.jpg" width="50%" height="50%" ></div>
  641.                                     Alternative equipment can be arranged immediately in case of trouble!<br>Same-day delivery is available in Tokyo's 23 wards if you contact us by 4:00 p.m!</label>
  642.                             </div>
  644.                             <div class="checkbox">
  645.                                 <input type="checkbox" id="order_tappuri_2" name="order_tappuri[]" value="393" data-gtm-form-interact-field-id="2">
  646.                                     <label for="order_tappuri_2">
  647.                                     <div>［Travel Adapter］ <br><font color="#ff0000">500JPY(inc.tax)</font><br><img src="https://globaladvancedcomm.com/gac_new/wp-content/uploads/images/us-japan-trabel-adapter.jpg" width="50%" height="50%" ></div>
  648.                                     The adapter allows you to plug other electronics from your own country!<br><br></label>
  649.                             </div>
  651.                             <div class="checkbox">
  652.                                 <input type="checkbox" id="order_tappuri_5" name="order_tappuri[]" value="sparewifi3gb" data-gtm-form-interact-field-id="5">
  653.                                 <label for="order_tappuri_5">
  654.                                     <div>［Spare WiFi(3GB/day Type)］<br><font color="#ff0000">220JPY/day(inc.tax)</font><br><img src="https://www.globaladvancedcomm.com/reservation_english/html/upload/save_image/wifi-3gb-type.png" width="81%" height="81%" ></div>
  655.                                     Special price for Wi-Fi for standard plan!<br>Limited Time Campaign Option<br>Limited number of units per month<br><font color="#ff0000">21units</font></label>
  656.                             </div>
  657.                         </div>
  660.                         <div class="grid-col2">
  661.                             <div>
  663.                                 <div class="orderpage__h3">Premium Insurance</div>
  664.                                 <ul>
  665.                                     <li>The rental liability insurance will not be applicable without
  666.                                         <font color="#ff0000">a lost/theft police report.</font>
  667.                                     </li>
  668.                                     <li>For reparable breakdown or visible damage :
  669.                                         <strong>Free</strong>
  670.                                     </li>
  671.                                     <li>For non-repairable damage, water leakage :
  672.                                         <strong>30%</strong>
  673.                                         of the device (or accessory) price is charged to you (70% is paid by us)</li>
  674.                                     <li>For loss or theft :
  675.                                         <strong>30%</strong>
  676.                                         of the device (or accessory) price is charged to you (70% is paid by us)</li>
  677.                                     <li>
  678.                                         <font color="#ff0000">The rental liability insurance covers one rental device only. To get insurance for multiple devices, you will need to purchase one for each device.</font>
  679.                                     </li>
  680.                                 </ul>
  681.                             </div>
  682.                             <div>
  683.                                 <div class="orderpage__h3">Portable Charger</div>
  684.                                 <ul>
  685.                                     <li>Quick charging type – compact,
  686.                                         <strong>light and convenient for mobile use !</strong>
  687.                                     </li>
  688.                                     <li>You can go out without any worry about the remaining battery life of your Wi-Fi or mobile phone during your trip !<br>Price is
  689.                                         <font color="#ff0000">80JPY/day</font>
  690.                                         for rental no matter how long you rent.</li>
  691.                                     <li>The actual product may be slightly different from the picture due to availability.<br>Thank you for your understanding in advance.</li>
  692.                                 </ul>
  693.                             </div>
  694.                         </div>
  695.                 <center>
  696.                     <h6>To order more than 1 rental item, please specify the quantity on the next page(shopping cart).</h6>
  697.                 </center>
  699.                 <div id="list_box__button_menu" class="btn-default-original">
  700.                     {{ form_widget(form.sel_order) }}
  701.                 </div>
  703.             </form>
  705.         <form method="post" action="{{ url('homepage') }}" name="cancel">
  706.             {# 2つ目のフォームでは_tokenフィールドを出力しないようにします #}
  707.             <input type="hidden" name="_token" value="{{ csrf_token('cancel') }}">
  708.             <input type="hidden" id="mode" name="mode" value="set_cancel">
  709.         </form>
  713.     </div>
  714. {% endblock %}