app/template/default/Product/detail.twig line 757

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% set body_class = 'product_page' %}
  15. {% block stylesheet %}
  16.     <style>
  18.         .slick-slider {
  19.             margin-bottom: 10px;
  20.             margin-top: -20px;
  21.         }
  23.         .slick-dots {
  24.             position: absolute;
  25.             bottom: -45px;
  26.             display: block;
  27.             width: 100%;
  28.             padding: 0;
  29.             list-style: none;
  30.             text-align: center;
  31.         }
  33.         .slick-dots li {
  34.             position: relative;
  35.             display: inline-block;
  36.             width: 20px;
  37.             height: 20px;
  38.             margin: 0 5px;
  39.             padding: 0;
  41.             cursor: pointer;
  42.         }
  44.         .slick-dots li button {
  45.             font-size: 0;
  46.             line-height: 0;
  47.             display: block;
  48.             width: 20px;
  49.             height: 20px;
  50.             padding: 5px;
  51.             cursor: pointer;
  52.             color: transparent;
  53.             border: 0;
  54.             outline: none;
  55.             background: transparent;
  56.         }
  58.         .slick-dots li button:hover,
  59.         .slick-dots li button:focus {
  60.             outline: none;
  61.         }
  63.         .slick-dots li button:hover:before,
  64.         .slick-dots li button:focus:before {
  65.             opacity: 1;
  66.         }
  68.         .slick-dots li button:before {
  69.             content: " ";
  70.             line-height: 20px;
  71.             position: absolute;
  72.             top: 0;
  73.             left: 0;
  74.             width: 12px;
  75.             height: 12px;
  76.             text-align: center;
  77.             opacity: .25;
  78.             background-color: black;
  79.             border-radius: 50%;
  81.         }
  83.         .slick-dots li.slick-active button:before {
  84.             opacity: .75;
  85.             background-color: black;
  86.         }
  88.         .slick-dots li button.thumbnail img {
  89.             width: 0;
  90.             height: 0;
  91.         }
  93.     </style>
  94.     <link rel="stylesheet" href="/html/user_data/js/style.css">
  95.     <link rel="stylesheet" href="/html/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  96. {% endblock %}
  98. {% block javascript %}
  100.     <script>
  101.         eccube.classCategories = {{ class_categories_as_json(Product)|raw }};
  103.         // 規格2に選択肢を割り当てる。
  104.         function fnSetClassCategories(form, classcat_id2_selected) {
  105.             var $form = $(form);
  106.             var product_id = $form.find('input[name=product_id]').val();
  107.             var $sele1 = $form.find('select[name=classcategory_id1]');
  108.             var $sele2 = $form.find('select[name=classcategory_id2]');
  109.             eccube.setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
  110.         }
  112.         {% if form.classcategory_id2 is defined %}
  113.         fnSetClassCategories(
  114.             $('#form1'), {{ form.classcategory_id2.vars.value|json_encode|raw }}
  115.         );
  116.         {% elseif form.classcategory_id1 is defined %}
  117.         eccube.checkStock($('#form1'), {{ Product.id }}, {{ form.classcategory_id1.vars.value|json_encode|raw }}, null);
  118.         {% endif %}
  119.     </script>
  120.     <script>
  121.         $(function() {
  122.             // bfcache無効化
  123.             $(window).bind('pageshow', function(event) {
  124.                 if (event.originalEvent.persisted) {
  125.                     location.reload(true);
  126.                 }
  127.             });
  129.             // Core Web Vital の Cumulative Layout Shift(CLS)対策のため
  130.             // img タグに width, height が付与されている.
  131.             // 630px 未満の画面サイズでは縦横比が壊れるための対策
  132.             // see https://github.com/EC-CUBE/ec-cube/pull/5023
  133.             $('.ec-grid2__cell').hide();
  134.             var removeSize = function () {
  135.                 $('.slide-item').height('');
  136.                 $('.slide-item img')
  137.                     .removeAttr('width')
  138.                     .removeAttr('height')
  139.                     .removeAttr('style');
  141.             };
  142.             var slickInitial = function(slick) {
  143.                 $('.ec-grid2__cell').fadeIn(1500);
  144.                 var baseHeight = $(slick.target).height();
  145.                 var baseWidth = $(slick.target).width();
  146.                 var rate = baseWidth / baseHeight;
  147.                 if(baseHeight * rate < 400){
  148.                     $('.slide-item').height(baseHeight * rate); // 余白を削除する
  149.                 }else{
  150.                     $('.slide-item').height(400); // 余白を削除する
  151.                 }
  152.                 // transform を使用することでCLSの影響を受けないようにする
  153.                 $('.slide-item img')
  154.                     .css(
  155.                         {
  156.                             'transform-origin': 'top left',
  157.                             'transform': 'scaleY(' + rate + ')',
  158.                             'transition': 'transform .1s'
  159.                         }
  160.                     );
  161.                 // 正しいサイズに近くなったら属性を解除する
  162.                 setTimeout(removeSize, 500);
  163.             };
  164.             $('.item_visual').on('init', slickInitial);
  165.             // リサイズ時は CLS の影響を受けないため属性を解除する
  166.             $(window).resize(removeSize);
  167.             $('.item_visual').slick({
  168.                 dots: false,
  169.                 arrows: true,
  170.                 responsive: [{
  171.                     breakpoint: 768,
  172.                     settings: {
  173.                         dots: true,
  174.                         arrows: false
  175.                     }
  176.                 }]
  177.             });
  179.             $('.slideThumb').on('click', function() {
  180.                 var index = $(this).attr('data-index');
  181.                 $('.item_visual').slick('slickGoTo', index, false);
  182.             })
  183.         });
  185.     </script>
  186.     <script>
  187.         $(function() {
  188.             $('.add-cart').on('click', function(event) {
  189.                 {% if form.classcategory_id1 is defined %}
  190.                 // 規格1フォームの必須チェック
  191.                 if ($('#classcategory_id1').val() == '__unselected' || $('#classcategory_id1').val() == '') {
  192.                     $('#classcategory_id1')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  193.                     return true;
  194.                 } else {
  195.                     $('#classcategory_id1')[0].setCustomValidity('');
  196.                 }
  197.                 {% endif %}
  199.                 {% if form.classcategory_id2 is defined %}
  200.                 // 規格2フォームの必須チェック
  201.                 if ($('#classcategory_id2').val() == '__unselected' || $('#classcategory_id2').val() == '') {
  202.                     $('#classcategory_id2')[0].setCustomValidity('{{ '項目が選択されていません'|trans }}');
  203.                     return true;
  204.                 } else {
  205.                     $('#classcategory_id2')[0].setCustomValidity('');
  206.                 }
  207.                 {% endif %}
  209.                 // タイプ2: カート送信直前に set_count を quantity に同期
  210.                 if($('#set_count').length){
  211.                     var _sc = parseInt($('#set_count').val()) || 1;
  212.                     $('#quantity').val(_sc);
  213.                     $('input[name="quantity"]').val(_sc);
  214.                 }
  216.                 // 個数フォームのチェック
  217.                 if ($('#quantity').val() < 1) {
  218.                     $('#quantity')[0].setCustomValidity('{{ '1以上で入力してください。'|trans }}');
  219.                     return true;
  220.                 } else {
  221.                     $('#quantity')[0].setCustomValidity('');
  222.                 }
  224.                 event.preventDefault();
  225.                 $form = $('#form1');
  226.                 $.ajax({
  227.                     url: $form.attr('action'),
  228.                     type: $form.attr('method'),
  229.                     data: $form.serialize(),
  230.                     dataType: 'json',
  231.                     beforeSend: function(xhr, settings) {
  232.                         // Buttonを無効にする
  233.                         $('.add-cart').prop('disabled', true);
  234.                     }
  235.                 }).done(function(data) {
  236.                     // レスポンス内のメッセージをalertで表示
  237.                     $.each(data.messages, function() {
  238.                         $('#ec-modal-header').text(this);
  239.                     });
  241.                     $('.ec-modal').show()
  243.                     // カートブロックを更新する
  244.                     $.ajax({
  245.                         url: "{{ url('block_cart') }}",
  246.                         type: 'GET',
  247.                         dataType: 'html'
  248.                     }).done(function(html) {
  249.                         $('.ec-headerRole__cart').html(html);
  250.                     });
  251.                 }).fail(function(data) {
  252.                     alert('{{ '施工検討リストへの追加に失敗しました。'|trans }}');
  253.                 }).always(function(data) {
  254.                     // Buttonを有効にする
  255.                     $('.add-cart').prop('disabled', false);
  256.                 });
  257.             });
  258.         });
  260.         $('.ec-modal-wrap').on('click', function(e) {
  261.             // モーダル内の処理は外側にバブリングさせない
  262.             e.stopPropagation();
  263.         });
  264.         $('.ec-modal-overlay, .ec-modal, .ec-modal-close, .ec-inlineBtn--cancel').on('click', function() {
  265.             $('.ec-modal').hide()
  266.         });
  269.         var pw = "{% if mitsumori_json %}{{ mitsumori_json.pw }}{% endif %}";
  270.         var pd = "{% if mitsumori_json %}{{ mitsumori_json.pd }}{% endif %}";
  271.         var ph = "{% if mitsumori_json %}{{ mitsumori_json.ph }}{% endif %}";
  272.         var pm = "{% if mitsumori_json %}{{ mitsumori_json.pm }}{% endif %}";
  273.         var pc = "{% if mitsumori_json %}{{ mitsumori_json.pc }}{% endif %}";
  274.         var op0 = "{% if mitsumori_json %}{{ mitsumori_json.op[0] }}{% endif %}";
  275.         var op1 = "{% if mitsumori_json %}{{ mitsumori_json.op[1] }}{% endif %}";
  276.         var op2 = "{% if mitsumori_json %}{{ mitsumori_json.op[2] }}{% endif %}";
  277.         var op3 = "{% if mitsumori_json %}{{ mitsumori_json.op[3] }}{% endif %}";
  278.         var op4 = "{% if mitsumori_json %}{{ mitsumori_json.op[4] }}{% endif %}";
  279.         var op5 = "{% if mitsumori_json %}{{ mitsumori_json.op[5] }}{% endif %}";
  280.         var op6 = "{% if mitsumori_json %}{{ mitsumori_json.op[6] }}{% endif %}";
  281.         var op7 = "{% if mitsumori_json %}{{ mitsumori_json.op[7] }}{% endif %}";
  282.         var op8 = "{% if mitsumori_json %}{{ mitsumori_json.op[8] }}{% endif %}";
  283.         var op9 = "{% if mitsumori_json %}{{ mitsumori_json.op[9] }}{% endif %}";
  284.         var op10 = "{% if mitsumori_json %}{{ mitsumori_json.op[10] }}{% endif %}";
  286.         const formatter = new Intl.NumberFormat('ja-JP');
  288.         function mitsumori_simulation(type , value_id){
  289.             var pp = {{ pp|raw }};
  290.             if(type == "pw"){
  291.                 pw = $('#'+value_id).val();
  292.             }
  293.             if(type == "pd"){
  294.                 pd = $('#'+value_id).val();
  295.             }
  296.             if(type == "ph"){
  297.                 ph = $('#'+value_id).val();
  298.             }
  299.             if(type == "pm"){
  300.                 pm = $('#'+value_id).val();
  301.             }
  302.             if(type == "pc"){
  303.                 pc = $('#'+value_id).val();
  304.             }
  305.             if(type == "op0"){ op0 = $('#'+value_id).val(); }
  306.             if(type == "op1"){ op1 = $('#'+value_id).val(); }
  307.             if(type == "op2"){ op2 = $('#'+value_id).val(); }
  308.             if(type == "op3"){ op3 = $('#'+value_id).val(); }
  309.             if(type == "op4"){ op4 = $('#'+value_id).val(); }
  310.             if(type == "op5"){ op5 = $('#'+value_id).val(); }
  311.             if(type == "op6"){ op6 = $('#'+value_id).val(); }
  312.             if(type == "op7"){ op7 = $('#'+value_id).val(); }
  313.             if(type == "op8"){ op8 = $('#'+value_id).val(); }
  314.             if(type == "op9"){ op9 = $('#'+value_id).val(); }
  315.             if(type == "op10"){ op10 = $('#'+value_id).val(); }
  317.             if(pm == ""){
  318.                 $('#mitsumori_message').text("素材を選択してください");
  319.             }
  320.             if(ph == ""){
  321.                 $('#mitsumori_message').text("高さを選択してください");
  322.             }
  323.             if(pd == ""){
  324.                 $('#mitsumori_message').text("奥行きを選択してください");
  325.             }
  326.             if(pw == ""){
  327.                 $('#mitsumori_message').text("幅を選択してください");
  328.             }
  329.             if(pc == ""){
  330.                 $('#mitsumori_message').text("カラーを選択してください");
  331.                 $('#mitsumori_btn').hide();
  332.                 $('#mitsumori_goukei').text("---円");
  333.                 $('#mitsumori_off').text("---円");
  334.                 $('#mitsumori_price').text("---円");
  335.                 $('#maker_price').text("---円");
  336.                 $('#mitsumori_ct').text("---円");
  337.                 $('#mitsumori_option').text("---円");
  338.             }
  339.             if(pw != "" && pd != "" && ph != "" && pm != "" && pc != ""){
  340.                 $('#mitsumori_btn').show();
  341.                 
  342.                 pp.forEach((el) => {
  343.                   if((pw == el.w || pw == "指定なし") && (pd == el.d || pd == "指定なし") && (ph == el.h || ph == "指定なし") && (pm == el.m || pm == "指定なし") && (pc == el.c || pc == "指定なし")){
  345.                     if(op0 == "商品購入のみ" || op1 == "商品購入のみ" || op2 == "商品購入のみ" || op3 == "商品購入のみ" || op4 == "商品購入のみ" 
  346.                         || op5 == "商品購入のみ" || op6 == "商品購入のみ" || op7 == "商品購入のみ" || op8 == "商品購入のみ" || op9 == "商品購入のみ"){
  347.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price)) + "円");
  348.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price)) + "円");
  349.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  350.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  351.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  352.                           $('#mitsumori_ct').text("0円");
  353.                           $('#mitsumori_option').text("0円");
  355.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price)) + "円");
  356.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  357.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  358.                           $('#mitsumori_ct_01').text("0円");
  359.                           $('#mitsumori_ct_02').text("0円");
  360.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price)) + "円");
  361.                         
  362.                         mitsumori_goukei = (parseInt(el.price));
  363.                         shoukei = mitsumori_goukei / 1.1;
  364.                         tax = parseInt(mitsumori_goukei - shoukei);
  365.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  366.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  367.                     }else{
  368.                           $('#mitsumori_message').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  369.                           $('#mitsumori_goukei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  370.                           $('#mitsumori_off').text(formatter.format(parseInt(el.price) - parseInt(el.maker_price)) + "円");
  371.                           $('#mitsumori_price').text(formatter.format(parseInt(el.price)) + "円");
  372.                           $('#maker_price').text(formatter.format(parseInt(el.maker_price)) + "円");
  373.                           $('#mitsumori_ct').text(formatter.format(parseInt(el.ct)) + "円");
  374.                           $('#mitsumori_option').text("0円");
  376.                           $('#mitsumori_kei').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  379.                           $('#mitsumori_price_01').text(formatter.format(parseInt(el.price)) + "円");
  380.                           $('#mitsumori_price_02').text(formatter.format(parseInt(el.price)) + "円");
  381.                           $('#mitsumori_ct_01').text(formatter.format(parseInt(el.ct)) + "円");
  382.                           $('#mitsumori_ct_02').text(formatter.format(parseInt(el.ct)) + "円");
  383.                           $('#mitsumori_goukei_02').text(formatter.format(parseInt(el.price) + parseInt(el.ct)) + "円");
  385.                         mitsumori_goukei = (parseInt(el.price) + parseInt(el.ct));
  386.                         shoukei = mitsumori_goukei / 1.1;
  387.                         tax = parseInt(mitsumori_goukei - shoukei);
  389.                           $('#mitsumori_shoukei').text(formatter.format(parseInt(shoukei)) + "円");
  390.                           $('#mitsumori_tax').text(formatter.format(parseInt(tax)) + "円");
  392.                     }
  393.                   }
  394.                 });    
  397.                 // タイプ5: ステップ・フェンス・面積の現在値を取得
  398.                 if($('input[name=deck_step]:checked').length){ deck_step = $('input[name=deck_step]:checked').val(); }
  399.                 if($('input[name=deck_fence]:checked').length){ deck_fence = $('input[name=deck_fence]:checked').val(); }
  401.                 // タイプ2: 窓サイズ・窓タイプ・ガラスタイプ・セット数
  402.                 var mado_w_val     = $('#mado_w').val()     || '';
  403.                 var mado_h_val     = $('#mado_h').val()     || '';
  404.                 var mado_type_val  = $('input[name=mado_type]:checked').val()  || '';
  405.                 var glass_type_val = $('input[name=glass_type]:checked').val() || '';
  406.                 var set_count_val  = parseInt($('#set_count').val()) || 1;
  408.                 // タイプ3: 台数
  409.                 var daisu_val = parseInt($('#daisu').val()) || 1;
  411.                 // タイプ4・6: 枚数
  412.                 var maisu_val = parseInt($('#maisu').val()) || 1;
  414.                 // タイプ5: 面積
  415.                 var area_val = $('#area').val() || '';
  417.                 // sale_type
  418.                 var sale_type_id = {{ ProductClass.SaleType.id }};
  420.                 var mitsumori_json = { "mitsumori_goukei": $('#mitsumori_goukei').text(),
  421.                                         "mitsumori_goukei_02": $('#mitsumori_goukei_02').text(),
  422.                                         "mitsumori_price": $('#mitsumori_price').text(),
  423.                                         "maker_price": $('#maker_price').text(),
  424.                                         "mitsumori_off": $('#mitsumori_off').text(),
  425.                                         "mitsumori_ct": $('#mitsumori_ct').text(),
  426.                                         "mitsumori_option": $('#mitsumori_option').text(),
  427.                                         "product_id": {{ Product.id }},
  428.                                         "sale_type": sale_type_id,
  429.                                         "pw": pw,
  430.                                         "pd": pd,
  431.                                         "ph": ph,
  432.                                         "pm": pm,
  433.                                         "pc": pc,
  434.                                         "op": [op0,op1,op2,op3,op4,op5,op6,op7,op8,op9,op10],
  435.                                         "mado_w":     mado_w_val,
  436.                                         "mado_h":     mado_h_val,
  437.                                         "mado_type":  mado_type_val,
  438.                                         "glass_type": glass_type_val,
  439.                                         "set_count":  set_count_val,
  440.                                         "daisu":      daisu_val,
  441.                                         "maisu":      maisu_val,
  442.                                         "area":       area_val,
  443.                                         "deck_step":  deck_step,
  444.                                         "deck_fence": deck_fence };
  446.                 $('#mitsumori_json').val(JSON.stringify(mitsumori_json));
  447.                 
  448.             }
  449.             
  451.         }
  453.         {% if color and color|length == 1 %}
  454.             pc = "指定なし";
  455.             {% for cc in color %}{% if cc and cc['name'] %} pc = "{{ cc['name'] }}"; {% endif %}{% endfor %}
  456.         {% endif %}
  458.         {% if p_w and (p_w|length == 1 or p_w|join == "") %}
  459.             pw = "指定なし";
  460.             {% for pw in p_w %}{% if pw %} pw = "{{ pw }}"; {% endif %}{% endfor %}
  461.         {% endif %}
  463.         {% if p_d and (p_d|length == 1 or p_d|join == "") %}
  464.             pd = "指定なし";
  465.             {% for pd in p_d %}{% if pd %} pd = "{{ pd }}"; {% endif %}{% endfor %}
  466.         {% endif %}
  468.         {% if p_h and (p_h|length == 1 or p_h|join == "") %}
  469.             ph = "指定なし";
  470.             {% for ph in p_h %}{% if ph %} ph = "{{ ph }}"; {% endif %}{% endfor %}
  471.         {% endif %}
  473.         {% if p_m and (p_m|length == 1 or p_m|join == "") %}
  474.             pm = "指定なし";
  475.             {% for pm in p_m %}{% if pm %} pm = "{{ pm }}"; {% endif %}{% endfor %}
  476.         {% endif %}
  478.         // ページ読み込み時: タイプ別に quantity の初期値をセット
  479.         (function initQuantityByType(){
  480.             var saleType = {{ ProductClass.SaleType.id }};
  481.             if(saleType == 2 && $('#set_count').length){
  482.                 var _v = parseInt($('#set_count').val()) || 1;
  483.                 $('#quantity').val(_v);
  484.                 $('input[name="quantity"]').val(_v);
  485.             } else if(saleType == 3 && $('#daisu').length){
  486.                 $('#quantity').val(parseInt($('#daisu').val()) || 1);
  487.             } else if((saleType == 4 || saleType == 6) && $('#maisu').length){
  488.                 $('#quantity').val(parseInt($('#maisu').val()) || 1);
  489.             } else if(saleType == 9 && $('#quantity_only').length){
  490.                 $('#quantity').val(parseInt($('#quantity_only').val()) || 1);
  491.             }
  492.         })();
  494.         mitsumori_simulation("","");
  495.         function contact_form(product_id){
  496.             $('#form1').attr('action', '{{ url('contact', {product:Product.id}) }}');
  497.             $('#form1').submit();
  498.         }
  500.         // maisu / madoset は下部の新しい関数定義を使用
  503.         function heibei(bei){
  504.             $('#heibei').val(parseInt($('#heibei').val()) + bei);
  505.             if(parseInt($('#heibei').val()) < 1){ $('#heibei').val(1); }
  506.             if(parseInt($('#heibei').val()) > 100){ $('#heibei').val(100); }
  507.             $('#quantity').val($('#heibei').val());
  508.             mitsumori_simulation('heibei','heibei');
  509.         }
  510.         function daisu(dai){
  511.             $('#daisu').val(parseInt($('#daisu').val()) + dai);
  512.             if(parseInt($('#daisu').val()) < 1){ $('#daisu').val(1); }
  513.             if(parseInt($('#daisu').val()) > 10){ $('#daisu').val(10); }
  514.             $('#quantity').val($('#daisu').val());
  515.             mitsumori_simulation('daisu','daisu');
  516.         }
  517.         function maisu(mai){
  518.             $('#maisu').val(parseInt($('#maisu').val()) + mai);
  519.             if(parseInt($('#maisu').val()) < 1){ $('#maisu').val(1); }
  520.             if(parseInt($('#maisu').val()) > 100){ $('#maisu').val(100); }
  521.             $('#quantity').val($('#maisu').val());
  522.             mitsumori_simulation('maisu','maisu');
  523.         }
  525.         // タイプ2: セット数プルダウン連動
  526.         function madosetSelect(val){
  527.             var v = parseInt(val);
  528.             if(v < 1) v = 1;
  529.             if(v > 20) v = 20;
  530.             // id="quantity" と name="quantity" 両方を確実に書き換え
  531.             $('#quantity').val(v);
  532.             $('input[name="quantity"]').val(v);
  533.             mitsumori_simulation('set','set_count');
  534.         }
  535.         // タイプ2: ±ボタン版（後方互換）
  536.         function madoset(mai){
  537.             var current = parseInt($('#set_count').val()) || 1;
  538.             var next = current + mai;
  539.             if(next < 1) next = 1;
  540.             if(next > 20) next = 20;
  541.             $('#set_count').val(next);
  542.             madosetSelect(next);
  543.         }
  545.         // タイプ5: ステップ・フェンス選択値を mitsumori_json に保存するためのグローバル変数
  546.         var deck_step = "{% if mitsumori_json %}{{ mitsumori_json.deck_step|default('不要') }}{% else %}不要{% endif %}";
  547.         var deck_fence = "{% if mitsumori_json %}{{ mitsumori_json.deck_fence|default('不要') }}{% else %}不要{% endif %}";
  549.         // PDF出力: モーダルの mitsumori_json をフォームに同期してから送信
  550.         function syncPdfJson(){
  551.             var jsonVal = $('#mitsumori_json').val();
  552.             $('#pdf_mitsumori_json').val(jsonVal);
  553.         }
  555.         // タイプ9: 商品のみ購入
  556.         function quantityOnly(val){
  557.             var current = parseInt($('#quantity_only').val()) || 1;
  558.             var next = current + val;
  559.             if(next < 1) next = 1;
  560.             $('#quantity_only').val(next);
  561.             $('#quantity').val(next);
  562.         }
  564.     </script>
  565.     <script type="application/ld+json">
  566.     {
  567.         "@context": "https://schema.org/",
  568.         "@type": "Product",
  569.         "name": "{{ Product.name }}",
  570.         "image": [
  571.             {% for img in Product.ProductImage %}
  572.                 "{{ app.request.schemeAndHttpHost }}{{ asset(img, 'save_image') }}"{% if not loop.last %},{% endif %}
  574.             {% else %}
  575.                 "{{ app.request.schemeAndHttpHost }}{{ asset(''|no_image_product, 'save_image') }}"
  576.             {% endfor %}
  577.         ],
  578.         "description": "{{ Product.description_list | default(Product.description_detail) | replace({'\n': '', '\r': ''}) | slice(0,300) }}",
  579.         {% if Product.code_min %}
  580.         "sku": "{{ Product.code_min }}",
  581.         {% endif %}
  582.         "offers": {
  583.             "@type": "Offer",
  584.             "url": "{{ url('product_detail', {'id': Product.id}) }}",
  585.             "priceCurrency": "{{ eccube_config.currency }}",
  586.             "price": {{ Product.getPrice02IncTaxMin ? Product.getPrice02IncTaxMin : 0}},
  587.             "availability": "{{ Product.stock_find ? "InStock" : "OutOfStock" }}"
  588.         }
  589.     }
  590.     </script>
  592. {% endblock %}
  594. {% block main %}
  595.     <div class="ec-productRole" style="margin-top:20px;">
  596.         <div class="ec-grid2">
  597.             <div class="ec-grid2__cell">
  598.                 <div class="ec-sliderItemRole">
  599.                     {# 商品名 #}
  600.                     <div class="ec-productRole__title">
  601.                         <h2 class="ec-headingTitle">{{ Product.name }}</h2>
  602.                     </div>
  603.                     {% if BaseInfo.option_favorite_product %}
  604.                      <div style="position:relative;top: 20px;left: 10px;z-index:100;">
  605.                         {% if is_favorite == false %}
  606.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  607.                            <button type="submit" id="favorite" class="favorite">&#9825;</button>
  608.                         </form>
  609.                         {% else %}
  610.                         <form action="{{ url('product_add_favorite', {id:Product.id}) }}" method="post">
  611.                            <button type="submit" id="favorite" class="favorite" style="color:red;">&#9829;</button>
  612.                         </form>
  613.                         {% endif %}
  614.                      </div>
  615.                     {% endif %}
  616.                     <div class="item_visual">
  617.                         {% for ProductImage in Product.ProductImage %}
  618.                             <div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550" style="max-height: 400px;"{% if loop.index > 1 %} loading="lazy"{% endif %}></div>
  619.                         {% else %}
  620.                             <div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}" alt="{{ loop.first ? Product.name : '' }}" width="550" height="550" style="max-height: 400px;"></div>
  621.                         {% endfor %}
  622.                     </div>
  623.                     <div class="item_nav">
  624.                         {% for ProductImage in Product.ProductImage %}
  625.                             <div class="slideThumb" data-index="{{ loop.index0 }}"><img src="{{ asset(ProductImage, 'save_image') }}" alt="" width="80" height="80" loading="lazy"></div>
  626.                         {% endfor %}
  627.                     </div>
  629.                 </div>
  631.             </div>
  633.             <div class="ec-grid2__cell2">
  634.                 <div class="ec-productRole__profile" >
  635.                     {# 関連カテゴリ #}
  636.                     {% if Product.ProductCategories is not empty %}
  637.                         <div class="ec-productRole__category" style="padding:10px 0;">
  638.                             {% for ProductCategory in Product.ProductCategories %}
  639.                                 <ul>
  640.                                     <li>
  641.                                         {% for Category in ProductCategory.Category.path %}
  642.                                             <a href="{{ url('product_list') }}?category_id={{ Category.id }}">{{ Category.name }}</a> {%- if loop.last == false %}
  643.                                             <span>＞</span>{% endif -%}
  644.                                         {% endfor %}
  645.                                     </li>
  646.                                 </ul>
  647.                             {% endfor %}
  648.                         </div>
  649.                     {% endif %}
  650.                     {# 販売価格 #}
  651.                     <div class="ec-productRole__price">
  652.                         <span style="color:black;font-size:15px;">工事費込み価格</span>
  653.                         {% if Product.hasProductClass -%}
  654.                             {% if Product.getPrice02IncTaxMin == Product.getPrice02IncTaxMax %}
  655.                                 <div class="ec-price">
  656.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }}</span>
  657.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  658.                                 </div>
  659.                             {% else %}
  660.                                 <div class="ec-price">
  661.                                     <span class="ec-price__price price02-default">{{ Product.getPrice02IncTaxMin|price }} ～ {{ Product.getPrice02IncTaxMax|price }}</span>
  662.                                     <span class="ec-price__tax">({{ '税込'|trans }})</span>
  663.                                 </div>
  664.                             {% endif %}
  665.                         {% else %}
  666.                             <div class="ec-price">
  667.                                 <span class="ec-price__price">{{ Product.getPrice02IncTaxMin|price }}</span>
  668.                                     <span class="ec-price__tax">({{ '税込'|trans }})～</span>
  669.                             </div>
  670.                         {% endif %}
  671.                     </div>
  672.                     {# タグ #}
  673.                     <ul class="ec-productRole__tags">
  674.                         {% for Tag in Product.Tags %}
  675.                             <li class="ec-productRole__tag tag_{{ Tag.id }}">{{ Tag }}</li>
  676.                         {% endfor %}
  677.                     </ul>
  678.                     {# 商品コード #}
  679.                     {% if Product.code_min is not empty %}
  680.                         <div class="ec-productRole__code">
  681.                             {{ '商品コード'|trans }}： <span class="product-code-default">{{ Product.code_min }}{% if Product.code_min != Product.code_max %} ～ {{ Product.code_max }}{% endif %}</span>
  682.                         </div>
  683.                     {% endif %}
  685.                     <div class="ec-productRole__description">
  686.                         <div class="ec-rectHeading">
  687.                             <h4>製品情報</h4>
  688.                         </div>
  689.                         {{ Product.sales_infomation|raw|nl2br }}
  690.                     </div>
  693.                     <div class="card card-danger" style="clear:both;margin:1px;">
  694.                       <div class="card-header">
  695.                         <h3 class="card-title">見積シミュレーション</h3>
  696.                       </div>
  697.                       <div class="card-body p-2">
  699.                     {% set type1 = getProduct_field(Product.id,"related_name1") %}
  700.                         {% set type2 = getProduct_field(Product.id,"related_name2") %}
  701.                         {% set type3 = getProduct_field(Product.id,"related_name3") %}
  702.                         {% set hasRelated = (type1 and related_product1 and related_product1|length)
  703.                                          or (type2 and related_product2 and related_product2|length)
  704.                                          or (type3 and related_product3 and related_product3|length) %}
  705.                         {% if hasRelated %}
  706.                             <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のタイプを選択してください。</label></div>
  707.                         {% endif %}
  708.                         {% if type1 and related_product1 and related_product1|length %}
  709.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  710.                           <label class="col-4 col-form-label mt-2">{{ type1 }}</label>
  711.                           <div class="col-8 mt-2">
  712.                             <div class="form-group clearfix">
  713.                               {% for rp_id, rp_name in related_product1 %}
  714.                               <div class="icheck-danger d-inline">
  715.                                 <input type="radio" name="rp1" id="rp1_{{ rp_id }}" value="{{ rp_name }}" {% if base_select1 == rp_name %}checked{% endif %} onclick="location.href='/products/detail/{{ rp_id }}';"><label for="rp1_{{ rp_id }}">{{ rp_name }}</label>
  716.                               </div>
  717.                               {% endfor %}
  718.                             </div>
  719.                           </div>
  720.                         </div>
  721.                         {% endif %}
  723.                         {% if type2 and related_product2 and related_product2|length %}
  724.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  725.                           <label class="col-4 col-form-label mt-2">{{ type2 }}</label>
  726.                           <div class="col-8 mt-2">
  727.                             <div class="form-group clearfix">
  728.                               {% for rp_id, rp_name in related_product2 %}
  729.                               <div class="icheck-danger d-inline">
  730.                                 <input type="radio" name="rp2" id="rp2_{{ rp_id }}" value="{{ rp_name }}" {% if base_select2 == rp_name %}checked{% endif %} onclick="location.href='/products/detail/{{ rp_id }}';"><label for="rp2_{{ rp_id }}">{{ rp_name }}</label>
  731.                               </div>
  732.                               {% endfor %}
  733.                             </div>
  734.                           </div>
  735.                         </div>
  736.                         {% endif %}
  738.                         {% if type3 and related_product3 and related_product3|length %}
  739.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  740.                           <label class="col-4 col-form-label mt-2">{{ type3 }}</label>
  741.                           <div class="col-8 mt-2">
  742.                             <div class="form-group clearfix">
  743.                               {% for rp_id, rp_name in related_product3 %}
  744.                               <div class="icheck-danger d-inline">
  745.                                 <input type="radio" name="rp3" id="rp3_{{ rp_id }}" value="{{ rp_name }}" {% if base_select3 == rp_name %}checked{% endif %} onclick="location.href='/products/detail/{{ rp_id }}';"><label for="rp3_{{ rp_id }}">{{ rp_name }}</label>
  746.                               </div>
  747.                               {% endfor %}
  748.                             </div>
  749.                           </div>
  750.                         </div>
  751.                         {% endif %}
  754.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">この商品のオプションを選択してください。</label></div>
  757.                         {% if color and color|length and ProductClass.SaleType.id != 3 %}
  758.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  759.                           <label class="col-4 col-form-label mt-2">カラー</label>
  760.                           <div class="col-8 mt-2">
  761.                             <div class="form-group clearfix">
  762.                             {% set idx = 0 %}
  763.                             {% for cc in color %}
  764.                               {% if cc and cc['name'] %}
  765.                               {% set idx = idx + 1 %}
  766.                               <div class="icheck-danger d-inline">
  767.                                 <input type="radio" name="color" id="cc_{{ idx }}" value="{{ cc['name'] }}" {% if mitsumori_json and mitsumori_json.pc == cc['name'] or color|length == 1 %}checked{% endif %} onclick="mitsumori_simulation('pc','cc_{{ idx }}');"><label for="cc_{{ idx }}">{{ cc['name'] }}</label>
  768.                               </div>
  769.                               {% endif %}
  770.                             {% endfor %}
  771.                             </div>
  772.                           </div>
  773.                         </div>
  774.                         {% endif %}
  775.                         {% if p_w and p_w|length and p_w|join != "" %}
  776.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  777.                           <label class="col-4 col-form-label">幅</label>
  778.                           <div class="col-8">
  779.                             <div class="form-group clearfix">
  780.                             {% set idx = 0 %}
  781.                             {% for pw in p_w %}
  782.                               {% if pw %}
  783.                               {% set idx = idx + 1 %}
  784.                               <div class="icheck-danger d-inline">
  785.                                 <input type="radio" name="pw" id="pw_{{ idx }}" value="{{ pw }}" {% if mitsumori_json and mitsumori_json.pw == pw or p_w|length == 1 %}checked{% endif %} onclick="mitsumori_simulation('pw','pw_{{ idx }}');"><label for="pw_{{ idx }}">{{ pw }}</label>
  786.                               </div>
  787.                               {% endif %}
  788.                             {% endfor %}
  789.                             </div>
  790.                           </div>
  791.                         </div>
  792.                         {% endif %}
  793.                         {% if p_d and p_d|length and p_d|join != "" %}
  794.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  795.                           <label class="col-4 col-form-label">奥行き</label>
  796.                           <div class="col-8">
  797.                             <div class="form-group clearfix">
  798.                             {% set idx = 0 %}
  799.                             {% for pd in p_d %}
  800.                               {% if pd %}
  801.                               {% set idx = idx + 1 %}
  802.                               <div class="icheck-danger d-inline">
  803.                                 <input type="radio" name="pd" id="pd_{{ idx }}" value="{{ pd }}" {% if (mitsumori_json and mitsumori_json.pd == pd) or p_d|length == 1 %}checked{% endif %} onclick="mitsumori_simulation('pd','pd_{{ idx }}');"><label for="pd_{{ idx }}">{{ pd }}</label>
  804.                               </div>
  805.                               {% endif %}
  806.                             {% endfor %}
  807.                             </div>
  808.                           </div>
  809.                         </div>
  810.                         {% endif %}
  811.                         {% if p_h and p_h|length and p_h|join != "" %}
  812.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  813.                           <label class="col-4 col-form-label">高さ</label>
  814.                           <div class="col-8">
  815.                             <div class="form-group clearfix">
  816.                             {% set idx = 0 %}
  817.                             {% for ph in p_h %}
  818.                               {% if ph %}
  819.                               {% set idx = idx + 1 %}
  820.                               <div class="icheck-danger d-inline">
  821.                                 <input type="radio" name="ph" id="ph_{{ idx }}" value="{{ ph }}" {% if (mitsumori_json and mitsumori_json.ph == ph) or p_h|length == 1%}checked{% endif %} onclick="mitsumori_simulation('ph','ph_{{ idx }}');"><label for="ph_{{ idx }}">{{ ph }}</label>
  822.                               </div>
  823.                               {% endif %}
  824.                             {% endfor %}
  825.                             </div>
  826.                           </div>
  827.                         </div>
  828.                         {% endif %}
  829.                         {% if p_m and p_m|length and p_m|join != "" %}
  830.                         <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  831.                           <label class="col-4 col-form-label">素材</label>
  832.                           <div class="col-8">
  833.                             <div class="form-group clearfix">
  834.                             {% set idx = 0 %}
  835.                             {% for pm in p_m %}
  836.                               {% if pm %}
  837.                               {% set idx = idx + 1 %}
  838.                               <div class="icheck-danger d-inline">
  839.                                 <input type="radio" name="pm" id="pm_{{ idx }}" value="{{ pm }}" {% if mitsumori_json and mitsumori_json.pm == pm or p_m|length == 1 %}checked{% endif %} onclick="mitsumori_simulation('pm','pm_{{ idx }}');"><label for="pm_{{ idx }}">{{ pm }}</label>
  840.                               </div>
  841.                               {% endif %}
  842.                             {% endfor %}
  843.                             </div>
  844.                           </div>
  845.                         </div>
  846.                         {% endif %}
  848.                         <!-- 1: 施工見積（通常） → 幅/奥行/高さ/素材/カラーは上部の共通ブロックで表示済み -->
  849.                         {% if ProductClass.SaleType.id == 1 %}
  850.                         {% endif %}
  852.                         <!-- 2: 施工見積（補助金・窓） -->
  853.                         {% if ProductClass.SaleType.id == 2 %}
  855.                             {# 窓サイズ（自由入力） #}
  856.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  857.                               <label class="col-4 col-form-label">窓サイズ</label>
  858.                               <div class="col-4">
  859.                                 <div class="input-group">
  860.                                   <span class="input-group-text">窓幅</span>
  861.                                   <input type="number" name="mado_w" id="mado_w" class="form-control" value="{{ mitsumori_json.mado_w|default('') }}" placeholder="例: 90" min="1" onchange="mitsumori_simulation('mado_w','mado_w');">
  862.                                   <span class="input-group-text">cm</span>
  863.                                 </div>
  864.                               </div>
  865.                               <div class="col-4">
  866.                                 <div class="input-group">
  867.                                   <span class="input-group-text">窓高さ</span>
  868.                                   <input type="number" name="mado_h" id="mado_h" class="form-control" value="{{ mitsumori_json.mado_h|default('') }}" placeholder="例: 110" min="1" onchange="mitsumori_simulation('mado_h','mado_h');">
  869.                                   <span class="input-group-text">cm</span>
  870.                                 </div>
  871.                               </div>
  872.                             </div>
  874.                             {# 窓タイプ（p_d データから選択肢を生成） #}
  875.                             {% if p_d and p_d|length and p_d|join != "" %}
  876.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  877.                               <label class="col-4 col-form-label">窓タイプ</label>
  878.                               <div class="col-8">
  879.                                 <div class="form-group clearfix">
  880.                                 {% set idx = 0 %}
  881.                                 {% for pd_val in p_d %}
  882.                                   {% if pd_val %}
  883.                                   {% set idx = idx + 1 %}
  884.                                   <div class="icheck-danger d-inline">
  885.                                     <input type="radio" name="mado_type" id="mado_type_{{ idx }}" value="{{ pd_val }}"
  886.                                       {% if (mitsumori_json and mitsumori_json.pd == pd_val) or (p_d|length == 1) %}checked{% endif %}
  887.                                       onclick="mitsumori_simulation('pd','mado_type_{{ idx }}');">
  888.                                     <label for="mado_type_{{ idx }}">{{ pd_val }}</label>
  889.                                   </div>
  890.                                   {% endif %}
  891.                                 {% endfor %}
  892.                                 </div>
  893.                               </div>
  894.                             </div>
  895.                             {% endif %}
  897.                             {# ガラスタイプ（p_m データから選択肢を生成） #}
  898.                             {% if p_m and p_m|length and p_m|join != "" %}
  899.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  900.                               <label class="col-4 col-form-label">ガラスタイプ</label>
  901.                               <div class="col-8">
  902.                                 <div class="form-group clearfix">
  903.                                 {% set idx = 0 %}
  904.                                 {% for pm_val in p_m %}
  905.                                   {% if pm_val %}
  906.                                   {% set idx = idx + 1 %}
  907.                                   <div class="icheck-danger d-inline">
  908.                                     <input type="radio" name="glass_type" id="glass_type_{{ idx }}" value="{{ pm_val }}"
  909.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or (p_m|length == 1) %}checked{% endif %}
  910.                                       onclick="mitsumori_simulation('pm','glass_type_{{ idx }}');">
  911.                                     <label for="glass_type_{{ idx }}">{{ pm_val }}</label>
  912.                                   </div>
  913.                                   {% endif %}
  914.                                 {% endfor %}
  915.                                 </div>
  916.                               </div>
  917.                             </div>
  918.                             {% endif %}
  920.                             {# セット数（プルダウン） → quantity に連動 #}
  921.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  922.                               <label class="col-4 col-form-label">セット数</label>
  923.                               <div class="col-8">
  924.                                 <select name="set_count" id="set_count" class="form-control" onchange="madosetSelect(this.value);">
  925.                                   {% for i in 1..20 %}
  926.                                     <option value="{{ i }}" {% if mitsumori_json and mitsumori_json.set_count == i %}selected{% endif %}>{{ i }} セット</option>
  927.                                   {% endfor %}
  928.                                 </select>
  929.                               </div>
  930.                             </div>
  932.                         {% endif %}
  934.                         <!-- 3: 施工見積（物置・ゴミステーション） -->
  935.                         {% if ProductClass.SaleType.id == 3 %}
  937.                             {# 幅・奥行き・高さ（p_w/p_d/p_h からラジオボタン生成） #}
  938.                             {% if p_w and p_w|length and p_w|join != "" %}
  939.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  940.                               <label class="col-4 col-form-label">幅</label>
  941.                               <div class="col-8">
  942.                                 <div class="form-group clearfix">
  943.                                 {% set idx = 0 %}
  944.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  945.                                   <div class="icheck-danger d-inline">
  946.                                     <input type="radio" name="pw" id="pw3_{{ idx }}" value="{{ pw_val }}"
  947.                                       {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}
  948.                                       onclick="mitsumori_simulation('pw','pw3_{{ idx }}');">
  949.                                     <label for="pw3_{{ idx }}">{{ pw_val }}</label>
  950.                                   </div>
  951.                                 {% endif %}{% endfor %}
  952.                                 </div>
  953.                               </div>
  954.                             </div>
  955.                             {% endif %}
  957.                             {% if p_d and p_d|length and p_d|join != "" %}
  958.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  959.                               <label class="col-4 col-form-label">奥行き</label>
  960.                               <div class="col-8">
  961.                                 <div class="form-group clearfix">
  962.                                 {% set idx = 0 %}
  963.                                 {% for pd_val in p_d %}{% if pd_val %}{% set idx = idx + 1 %}
  964.                                   <div class="icheck-danger d-inline">
  965.                                     <input type="radio" name="pd" id="pd3_{{ idx }}" value="{{ pd_val }}"
  966.                                       {% if (mitsumori_json and mitsumori_json.pd == pd_val) or p_d|length == 1 %}checked{% endif %}
  967.                                       onclick="mitsumori_simulation('pd','pd3_{{ idx }}');">
  968.                                     <label for="pd3_{{ idx }}">{{ pd_val }}</label>
  969.                                   </div>
  970.                                 {% endif %}{% endfor %}
  971.                                 </div>
  972.                               </div>
  973.                             </div>
  974.                             {% endif %}
  976.                             {% if p_h and p_h|length and p_h|join != "" %}
  977.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  978.                               <label class="col-4 col-form-label">高さ</label>
  979.                               <div class="col-8">
  980.                                 <div class="form-group clearfix">
  981.                                 {% set idx = 0 %}
  982.                                 {% for ph_val in p_h %}{% if ph_val %}{% set idx = idx + 1 %}
  983.                                   <div class="icheck-danger d-inline">
  984.                                     <input type="radio" name="ph" id="ph3_{{ idx }}" value="{{ ph_val }}"
  985.                                       {% if (mitsumori_json and mitsumori_json.ph == ph_val) or p_h|length == 1 %}checked{% endif %}
  986.                                       onclick="mitsumori_simulation('ph','ph3_{{ idx }}');">
  987.                                     <label for="ph3_{{ idx }}">{{ ph_val }}</label>
  988.                                   </div>
  989.                                 {% endif %}{% endfor %}
  990.                                 </div>
  991.                               </div>
  992.                             </div>
  993.                             {% endif %}
  995.                             {# 棚タイプ（p_m データから選択肢を生成） #}
  996.                             {% if p_m and p_m|length and p_m|join != "" %}
  997.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  998.                               <label class="col-4 col-form-label">棚タイプ<br><small class="text-muted">（間仕切り仕様）</small></label>
  999.                               <div class="col-8">
  1000.                                 <div class="form-group clearfix">
  1001.                                 {% set idx = 0 %}
  1002.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  1003.                                   <div class="icheck-danger d-inline">
  1004.                                     <input type="radio" name="pm" id="pm3_{{ idx }}" value="{{ pm_val }}"
  1005.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}
  1006.                                       onclick="mitsumori_simulation('pm','pm3_{{ idx }}');">
  1007.                                     <label for="pm3_{{ idx }}">{{ pm_val }}</label>
  1008.                                   </div>
  1009.                                 {% endif %}{% endfor %}
  1010.                                 </div>
  1011.                               </div>
  1012.                             </div>
  1013.                             {% endif %}
  1015.                             {# カラー（共通の color データ使用） #}
  1016.                             {% if color and color|length %}
  1017.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1018.                               <label class="col-4 col-form-label">カラー</label>
  1019.                               <div class="col-8">
  1020.                                 <div class="form-group clearfix">
  1021.                                 {% set idx = 0 %}
  1022.                                 {% for cc in color %}{% if cc and cc['name'] %}{% set idx = idx + 1 %}
  1023.                                   <div class="icheck-danger d-inline">
  1024.                                     <input type="radio" name="color3" id="cc3_{{ idx }}" value="{{ cc['name'] }}"
  1025.                                       {% if (mitsumori_json and mitsumori_json.pc == cc['name']) or color|length == 1 %}checked{% endif %}
  1026.                                       onclick="mitsumori_simulation('pc','cc3_{{ idx }}');">
  1027.                                     <label for="cc3_{{ idx }}">{{ cc['name'] }}</label>
  1028.                                   </div>
  1029.                                 {% endif %}{% endfor %}
  1030.                                 </div>
  1031.                               </div>
  1032.                             </div>
  1033.                             {% endif %}
  1035.                             {# 台数 #}
  1036.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1037.                               <label class="col-4 col-form-label">台数</label>
  1038.                               <div class="col-4">
  1039.                                 <div class="input-group mb-3">
  1040.                                   <input type="number" name="daisu" id="daisu" class="form-control" value="{{ mitsumori_json.daisu|default('1') }}" min="1" max="10" onchange="mitsumori_simulation('daisu','daisu');">
  1041.                                   <span class="input-group-text">台</span>
  1042.                                 </div>
  1043.                               </div>
  1044.                               <div class="col-4">
  1045.                                 <button type="button" class="btn btn-info" onclick="daisu(+1);">＋</button>
  1046.                                 <button type="button" class="btn btn-danger" onclick="daisu(-1);">ー</button>
  1047.                               </div>
  1048.                             </div>
  1050.                         {% endif %}
  1052.                         <!-- 4: 施工見積（フェンス・組み立て式） -->
  1053.                         {% if ProductClass.SaleType.id == 4 %}
  1055.                             {# 枚数 #}
  1056.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1057.                               <label class="col-4 col-form-label">枚数</label>
  1058.                               <div class="col-4 mb-3">
  1059.                                 <div class="input-group">
  1060.                                   <input type="number" name="maisu" id="maisu" class="form-control" value="{{ mitsumori_json.maisu|default('3') }}" min="3" max="20" onchange="mitsumori_simulation('maisu','maisu');">
  1061.                                   <span class="input-group-text">枚</span>
  1062.                                 </div>
  1063.                               </div>
  1064.                               <div class="col-4">
  1065.                                 <button type="button" class="btn btn-info" onclick="maisu(+1);">＋</button>
  1066.                                 <button type="button" class="btn btn-danger" onclick="maisu(-1);">ー</button>
  1067.                               </div>
  1068.                             </div>
  1070.                         {% endif %}
  1072.                         <!-- 5: 施工見積（ウッドデッキ・タイルデッキ） -->
  1073.                         {% if ProductClass.SaleType.id == 5 %}
  1075.                             {# 施工面積（㎡ 直接入力） #}
  1076.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1077.                               <label class="col-4 col-form-label">施工面積</label>
  1078.                               <div class="col-8">
  1079.                                 <div class="input-group">
  1080.                                   <input type="number" name="area" id="area"
  1081.                                     class="form-control"
  1082.                                     value="{{ mitsumori_json.area|default('') }}"
  1083.                                     placeholder="例: 7.5"
  1084.                                     min="0.1" step="0.1"
  1085.                                     onchange="mitsumori_simulation('area','area');">
  1086.                                   <span class="input-group-text">㎡</span>
  1087.                                 </div>
  1088.                                 <small class="text-muted">幅(cm) × 奥行き(cm) ÷ 10000 = ㎡</small>
  1089.                               </div>
  1090.                             </div>
  1092.                             {# ステップの有無 #}
  1093.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1094.                               <label class="col-4 col-form-label">ステップ</label>
  1095.                               <div class="col-8">
  1096.                                 <div class="form-group clearfix">
  1097.                                   <div class="icheck-danger d-inline">
  1098.                                     <input type="radio" name="deck_step" id="deck_step_yes" value="必要"
  1099.                                       {% if mitsumori_json and mitsumori_json.deck_step == '必要' %}checked{% endif %}
  1100.                                       onclick="mitsumori_simulation('op0','deck_step_yes');">
  1101.                                     <label for="deck_step_yes">必要</label>
  1102.                                   </div>
  1103.                                   <div class="icheck-danger d-inline">
  1104.                                     <input type="radio" name="deck_step" id="deck_step_no" value="不要"
  1105.                                       {% if not mitsumori_json or mitsumori_json.deck_step == '不要' or not mitsumori_json.deck_step %}checked{% endif %}
  1106.                                       onclick="mitsumori_simulation('op0','deck_step_no');">
  1107.                                     <label for="deck_step_no">不要</label>
  1108.                                   </div>
  1109.                                 </div>
  1110.                               </div>
  1111.                             </div>
  1113.                             {# ウッドデッキフェンスの有無 #}
  1114.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1115.                               <label class="col-4 col-form-label">デッキフェンス</label>
  1116.                               <div class="col-8">
  1117.                                 <div class="form-group clearfix">
  1118.                                   <div class="icheck-danger d-inline">
  1119.                                     <input type="radio" name="deck_fence" id="deck_fence_yes" value="必要"
  1120.                                       {% if mitsumori_json and mitsumori_json.deck_fence == '必要' %}checked{% endif %}
  1121.                                       onclick="mitsumori_simulation('op1','deck_fence_yes');">
  1122.                                     <label for="deck_fence_yes">必要</label>
  1123.                                   </div>
  1124.                                   <div class="icheck-danger d-inline">
  1125.                                     <input type="radio" name="deck_fence" id="deck_fence_no" value="不要"
  1126.                                       {% if not mitsumori_json or mitsumori_json.deck_fence == '不要' or not mitsumori_json.deck_fence %}checked{% endif %}
  1127.                                       onclick="mitsumori_simulation('op1','deck_fence_no');">
  1128.                                     <label for="deck_fence_no">不要</label>
  1129.                                   </div>
  1130.                                 </div>
  1131.                               </div>
  1132.                             </div>
  1134.                         {% endif %}
  1136.                         <!-- 6: 施工見積（芝生・枚数・数量買い） -->
  1137.                         {% if ProductClass.SaleType.id == 6 %}
  1139.                             {# 規格（p_m データ → 素材から抽出） #}
  1140.                             {% if p_m and p_m|length and p_m|join != "" %}
  1141.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1142.                               <label class="col-4 col-form-label">規格</label>
  1143.                               <div class="col-8">
  1144.                                 <div class="form-group clearfix">
  1145.                                 {% set idx = 0 %}
  1146.                                 {% for pm_val in p_m %}{% if pm_val %}{% set idx = idx + 1 %}
  1147.                                   <div class="icheck-danger d-inline">
  1148.                                     <input type="radio" name="pm" id="pm6_{{ idx }}" value="{{ pm_val }}"
  1149.                                       {% if (mitsumori_json and mitsumori_json.pm == pm_val) or p_m|length == 1 %}checked{% endif %}
  1150.                                       onclick="mitsumori_simulation('pm','pm6_{{ idx }}');">
  1151.                                     <label for="pm6_{{ idx }}">{{ pm_val }}</label>
  1152.                                   </div>
  1153.                                 {% endif %}{% endfor %}
  1154.                                 </div>
  1155.                               </div>
  1156.                             </div>
  1157.                             {% endif %}
  1159.                             {# 芝の長さ（p_w データ → 幅から抽出） #}
  1160.                             {% if p_w and p_w|length and p_w|join != "" %}
  1161.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1162.                               <label class="col-4 col-form-label">芝の長さ</label>
  1163.                               <div class="col-8">
  1164.                                 <div class="form-group clearfix">
  1165.                                 {% set idx = 0 %}
  1166.                                 {% for pw_val in p_w %}{% if pw_val %}{% set idx = idx + 1 %}
  1167.                                   <div class="icheck-danger d-inline">
  1168.                                     <input type="radio" name="pw" id="pw6_{{ idx }}" value="{{ pw_val }}"
  1169.                                       {% if (mitsumori_json and mitsumori_json.pw == pw_val) or p_w|length == 1 %}checked{% endif %}
  1170.                                       onclick="mitsumori_simulation('pw','pw6_{{ idx }}');">
  1171.                                     <label for="pw6_{{ idx }}">{{ pw_val }}</label>
  1172.                                   </div>
  1173.                                 {% endif %}{% endfor %}
  1174.                                 </div>
  1175.                               </div>
  1176.                             </div>
  1177.                             {% endif %}
  1179.                             {# 施工面積（㎡ 自由入力） #}
  1180.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1181.                               <label class="col-4 col-form-label">施工面積</label>
  1182.                               <div class="col-8">
  1183.                                 <div class="input-group">
  1184.                                   <input type="number" name="area" id="area"
  1185.                                     class="form-control"
  1186.                                     value="{{ mitsumori_json.area|default('') }}"
  1187.                                     placeholder="例: 10.5"
  1188.                                     min="0.1" step="0.1"
  1189.                                     onchange="mitsumori_simulation('area','area');">
  1190.                                   <span class="input-group-text">平米</span>
  1191.                                 </div>
  1192.                               </div>
  1193.                             </div>
  1195.                         {% endif %}
  1197.                         <!-- 9: 商品のみ購入 -->
  1198.                         {% if ProductClass.SaleType.id == 9 %}
  1199.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1200.                               <label class="col-4 col-form-label">数量</label>
  1201.                               <div class="col-4">
  1202.                                 <div class="input-group mb-3">
  1203.                                   <input type="number" name="quantity_only" id="quantity_only" class="form-control" value="1" min="1" onchange="$('#quantity').val(this.value);">
  1204.                                   <span class="input-group-text">個</span>
  1205.                                 </div>
  1206.                               </div>
  1207.                               <div class="col-4">
  1208.                                 <button type="button" class="btn btn-info" onclick="quantityOnly(+1);">＋</button>
  1209.                                 <button type="button" class="btn btn-danger" onclick="quantityOnly(-1);">ー</button>
  1210.                               </div>
  1211.                             </div>
  1212.                         {% endif %}
  1217.                         <div class="row" style="border-bottom:1px solid rgba(0,0,0,.125)"><label class="col-12 col-form-label">取り付け工事のご希望に関してお答えください。</label></div>
  1218.                         {% for i in 0..10 %}
  1219.                             {% if op and op|length >= i+1 %}
  1220.                             {% if op[i]['name'] %}
  1221.                             <div class="form-group row mt-2" style="border-bottom:1px solid rgba(0,0,0,.125)">
  1222.                               <label class="col-4 col-form-label">{{ op[i]['name'] }}</label>
  1223.                               <div class="col-8">
  1224.                                 {{ op[i]['comment'] }}
  1225.                                 <div class="form-group clearfix">
  1226.                                   <div class="icheck-danger d-inline">
  1227.                                     <input type="radio" name="op{{ i }}" id="op{{ i }}_1" value="{{ op[i]['on'] }}" {% if mitsumori_json and mitsumori_json.op[i] == op[i]['on'] %}checked{% endif %} onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_1');"><label for="op{{ i }}_1">{{ op[i]['on'] }}</label>
  1228.                                   </div>
  1229.                                 </div>
  1230.                                 <div class="form-group clearfix">
  1231.                                   <div class="icheck-danger d-inline">
  1232.                                     <input type="radio" name="op{{ i }}" id="op{{ i }}_2" value="{{ op[i]['off'] }}" {% if mitsumori_json and mitsumori_json.op[i] == op[i]['off'] %}checked{% endif %} onclick="mitsumori_simulation('op{{ i }}','op{{ i }}_2');"><label for="op{{ i }}_2">{{ op[i]['off'] }}</label>
  1233.                                   </div>
  1234.                                 </div>
  1235.                               </div>
  1236.                             </div>
  1237.                             {% endif %}
  1238.                             {% endif %}
  1239.                         {% endfor %}
  1241.                       </div>
  1242.                       <!-- /.card-body -->
  1243.                     </div>
  1246.                     <form action="{{ url('product_add_cart', {id:Product.id}) }}" method="post" id="form1" name="form1">
  1247.                         {% if Product.stock_find %}
  1248.                             <div class="ec-productRole__actions">
  1249.                                 {% if form.classcategory_id1 is defined %}
  1250.                                     <div class="ec-select">
  1251.                                         {{ form_row(form.classcategory_id1) }}
  1252.                                         {{ form_errors(form.classcategory_id1) }}
  1253.                                     </div>
  1254.                                     {% if form.classcategory_id2 is defined %}
  1255.                                         <div class="ec-select">
  1256.                                             {{ form_row(form.classcategory_id2) }}
  1257.                                             {{ form_errors(form.classcategory_id2) }}
  1258.                                         </div>
  1259.                                     {% endif %}
  1260.                                 {% endif %}
  1261.                                 <div class="ec-numberInput">
  1262.                                     {{ form_widget(form.quantity, { type: 'hidden' }) }}
  1263.                                     {{ form_errors(form.quantity) }}
  1264.                                 </div>
  1265.                             </div>
  1267.                         {% else %}
  1268.                             <div class="ec-productRole__btn">
  1269.                                 <button type="button" class="ec-blockBtn--action" disabled="disabled">
  1270.                                     {{ 'ただいま品切れ中です。'|trans }}
  1271.                                 </button>
  1272.                             </div>
  1273.                         {% endif %}
  1274.                         <div class="ec-productRole__btn mt-3">
  1275.                            <button type="submit" id="cart_btn" class="ec-blockBtn--action add-cart">施工検討リストに入れる</button>
  1276.                         </div>
  1277.                         {{ form_rest(form) }}
  1278.                     </form>
  1279.                     <div class="ec-modal">
  1280.                         <div class="ec-modal-overlay">
  1281.                             <div class="ec-modal-wrap">
  1282.                                 <span class="ec-modal-close"><span class="ec-icon"><img src="{{ asset('assets/icon/cross-dark.svg') }}" alt=""/></span></span>
  1283.                                 <div id="ec-modal-header" class="text-center">{{ '施工検討リストに追加しました。'|trans }}</div>
  1284.                                 <div class="ec-modal-box">
  1285.                                     <div class="ec-role">
  1286.                                         <span class="ec-inlineBtn--cancel">{{ '商品検索を続ける'|trans }}</span>
  1287.                                         <a href="{{ url('cart') }}" class="ec-inlineBtn--action">{{ '施工検討リストへ進む'|trans }}</a>
  1288.                                     </div>
  1289.                                 </div>
  1290.                             </div>
  1291.                         </div>
  1292.                     </div>
  1293.                     <div class="ec-productRole__description">{{ Product.description_detail|raw|nl2br }}
  1294.                     </div>
  1295.                 </div>
  1296.                 <div class="card col-12 collapsed-card sticky-top float-right">
  1297.                     <div class="card-header">
  1298.                       <h3 class="card-title">現在のお見積り額</h3>
  1299.                       <div class="card-tools">
  1300.                         <span class="float-left" id="mitsumori_message">395000円</span>
  1301.                         <button type="button" class="btn btn-tool" data-card-widget="collapse">
  1302.                           <i class="fas fa-plus"></i>
  1303.                         </button>
  1304.                       </div>
  1305.                     </div>
  1306.                     <div class="card-body p-0">
  1307.                       <ul class="nav nav-pills flex-column">
  1308.                         <li class="nav-item active">
  1309.                           <a class="nav-link">
  1310.                             <i class="far fa-file-alt"></i> 合計(工事費・税込)
  1311.                             <span class="float-right" id="mitsumori_goukei">395,000円</span>
  1312.                           </a>
  1313.                         </li>
  1314.                         <li class="nav-item active">
  1315.                           <a class="nav-link">
  1316.                             <i class="far fa-file-alt"></i> 商品価格
  1317.                             <span class="float-right" id="mitsumori_price">307,008円</span>
  1318.                           </a>
  1319.                         </li>
  1320.                         <li class="nav-item">
  1321.                           <a class="nav-link">
  1322.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> カタログ価格
  1323.                             <span class="float-right" id="maker_price">479,700円</span>
  1324.                           </a>
  1325.                         </li>
  1326.                         <li class="nav-item">
  1327.                           <a class="nav-link">
  1328.                             &nbsp;&nbsp;<i class="far fa-file-alt"></i> お値引き
  1329.                             <span class="float-right" id="mitsumori_off">-172,692円</span>
  1330.                           </a>
  1331.                         </li>
  1332.                         <li class="nav-item">
  1333.                           <a class="nav-link">
  1334.                             <i class="far fa-file-alt"></i> 基本工事費
  1335.                             <span class="float-right" id="mitsumori_ct">53,250円</span>
  1336.                           </a>
  1337.                         </li>
  1338.                         <li class="nav-item">
  1339.                           <a class="nav-link">
  1340.                             <i class="far fa-file-alt"></i> 施工オプション
  1341.                             <span class="float-right"id="mitsumori_option">6,297円</span>
  1342.                           </a>
  1343.                         </li>
  1344.                       </ul>
  1345.                     </div>
  1346.                     <div class="card-footer">
  1347.                         <button type="button" id="mitsumori_btn" class="btn btn-info" data-toggle="modal" data-target="#modal-mitsumori">
  1348.                           見積書表示
  1349.                         </button>
  1350.                         <button type="submit" id="cart_btn2" class="btn btn-info add-cart">施工検討リストに入れる</button>
  1352.                     </div>
  1353.                 </div>
  1354.             </div>
  1356.         </div>
  1358.     </div>
  1360.   <div class="modal" id="modal-mitsumori">
  1361.     <div class="modal-dialog modal-mitsumori" style="max-width:1000px">
  1362.       <div class="modal-content">
  1363.         <div class="modal-header">
  1364.           <h4 class="modal-title">お見積書</h4>
  1365.           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  1366.             <span aria-hidden="true">&times;</span>
  1367.           </button>
  1368.         </div>
  1369.         <div class="modal-body">
  1370.             <div class="invoice p-3 mb-5" style="max-width:1000px; margin:auto;">
  1371.               <!-- title row -->
  1372.               <div class="row">
  1373.                 <div class="col-12">
  1374.                   <h2>概算お見積書 
  1375.                     <small class="float-right" style="font-size:14px;">発行日: 2025/03/14</small>
  1376.                   </h2>
  1377.                 </div>
  1378.                 <!-- /.col -->
  1379.               </div>
  1380.               <!-- info row -->
  1381.               <div class="row invoice-info">
  1382.                 <div class="col-sm-8 invoice-col">
  1383.                   <h3>お客様</h3>
  1384.                   <span>下記の通り、お見積もり申し上げます。</span>
  1385.                   <br />
  1386.                   <br / >
  1387.                   <br />
  1388.                   <h2>お見積金額：　<span id="mitsumori_kei">399,080円</span></h2>
  1389.                   <span>
  1390.                     <br/>
  1391.                     <br/>
  1392.                     <br/>
  1393.                     <br/>
  1394.                   </span>
  1395.                 </div>
  1396.                 <div class="col-sm-4 invoice-col">
  1397.                   <p>
  1398.                     <img alt="" src="/html/user_data/js/images/logo.png" style="width: 260px; max-width: 100%; max-height: 10mm;">
  1399.                   </p>
  1400.                   <p>有限会社プラス</p>
  1401.                   <p>〒400-0334</p>
  1402.                   <p>山梨県南アルプス市藤田1450番地2</p>
  1403.                   <p>TEL: 055-284-6480</p>
  1404.                   <img alt="" src="/html/user_data/js/images/seal.svg" style="z-index: 2; position: absolute; width: 21mm; left: 58mm; top: 36mm;">
  1405.                 </div>
  1406.                 <!-- /.col -->
  1407.                 <!-- /.col -->
  1408.               </div>
  1409.               <!-- /.row -->
  1410.               <!-- Table row -->
  1411.               <div class="row">
  1412.                 <div class="col-12 table-responsive">
  1413.                   <table class="table table-striped">
  1414.                     <thead>
  1415.                       <tr>
  1416.                         <th>項目</th>
  1417.                         <th>数量</th>
  1418.                         <th>単位</th>
  1419.                         <th>単価</th>
  1420.                         <th>小計</th>
  1421.                       </tr>
  1422.                     </thead>
  1423.                     <tbody>
  1424.                       <tr>
  1425.                         <td>プレーンルーフ 600タイプ 1台用 単体セット</td>
  1426.                         <td>1</td>
  1427.                         <td>式</td>
  1428.                         <td id="mitsumori_price_01">352,800</td>
  1429.                         <td id="mitsumori_price_02">352,800</td>
  1430.                       </tr>
  1431.                       <tr>
  1432.                         <td>基本工事費</td>
  1433.                         <td>1</td>
  1434.                         <td>式</td>
  1435.                         <td id="mitsumori_ct_01">10,000</td>
  1436.                         <td id="mitsumori_ct_02">10,000</td>
  1437.                       </tr>
  1438.                       <tr>
  1439.                         <td>残土・ガラ処理</td>
  1440.                         <td>1</td>
  1441.                         <td>式</td>
  1442.                         <td>0円</td>
  1443.                         <td></td>
  1444.                       </tr>
  1445.                       <tr>
  1446.                         <td>　</td>
  1447.                         <td></td>
  1448.                         <td></td>
  1449.                         <td></td>
  1450.                         <td></td>
  1451.                       </tr>
  1452.                     </tbody>
  1453.                   </table>
  1454.                 </div>
  1455.                 <!-- /.col -->
  1456.               </div>
  1457.               <!-- /.row -->
  1458.               <div class="row">
  1459.                 <!-- accepted payments column -->
  1460.                 <div class="col-6">
  1461.                   <p class="lead">お支払い方法</p>
  1462.                   <p class="text-muted well well-sm shadow-none" style="margin-top: 10px;">銀行振込、クレジットカード決済、PAYPAY決済
  1463.                     <br>銀行振込：山梨中央銀行　白根支店　普通口座　391402
  1464.                     <br>※商品代金と工事代金の総額が金100万円（税込）を超える場合、着手金として代金の半額をご契約後お支払いいただきます。 
  1465.                   </p>
  1466.                 </div>
  1467.                 <!-- /.col -->
  1468.                 <div class="col-6">
  1469.                   <div class="table-responsive">
  1470.                     <table class="table">
  1471.                       <tbody>
  1472.                         <tr>
  1473.                           <th style="width:50%">小計:</th>
  1474.                           <td id="mitsumori_shoukei">362,800</td>
  1475.                         </tr>
  1476.                         <tr>
  1477.                           <th>消費税 (10%)</th>
  1478.                           <td id="mitsumori_tax">36,280</td>
  1479.                         </tr>
  1480.                         <tr>
  1481.                           <th>合計:</th>
  1482.                           <td id="mitsumori_goukei_02">399,080</td>
  1483.                         </tr>
  1484.                       </tbody>
  1485.                     </table>
  1486.                   </div>
  1487.                 </div>
  1488.                 <!-- /.col -->
  1489.               </div>
  1490.               <!-- /.row -->
  1491.             </div>
  1492.         </div>
  1493.         <div class="modal-footer justify-content-between">
  1494.                   {# PDF出力: mitsumori_json を POST して PDF ダウンロード #}
  1495.                   <form method="post" action="{{ url('mitsumori_pdf') }}" target="_blank" id="pdf_download_form">
  1496.                     <input type="hidden" name="_token" value="{{ csrf_token('mitsumori_pdf') }}">
  1497.                     <input type="hidden" name="mitsumori_json" id="pdf_mitsumori_json">
  1498.                     <button type="submit" class="btn btn-primary float-right" style="margin-right: 5px;" onclick="syncPdfJson();">
  1499.                       <i class="fas fa-download"></i>PDF出力
  1500.                     </button>
  1501.                   </form>
  1502.                   <button type="submit" id="cart_btn3" class="btn btn-info add-cart">施工検討リストに入れる</button>
  1503.         </div>
  1504.       </div>
  1505.       <!-- /.modal-content -->
  1506.     </div>
  1507.     <!-- /.modal-dialog -->
  1508.   </div>
  1509.   <!-- /.modal -->
  1513. {% endblock %}