{% extends '@admin/default_frame.twig' %}{% block title %}カテゴリレイアウト編集{% endblock %}{% block sub_title %}コンテンツ管理{% endblock %}{% block stylesheet %}<style>.child-item{border:1px solid #ddd;padding:15px;margin:10px 0;background:#f8f9fa}.icon-preview{max-width:100px;margin-top:10px}</style>{% endblock %}{% block javascript %}<script>$(function(){var idx={{ layout.CategoryLayoutItems|length }};$('#add-child').click(function(){$('#children').append('<div class="child-item"><button type="button" class="btn btn-sm btn-danger float-end remove-child">削除</button><div class="mb-2"><label>子カテゴリID *</label><input type="number" name="child_categories['+idx+'][child_category_id]" class="form-control" required></div><div class="mb-2"><label>表示名 *</label><input type="text" name="child_categories['+idx+'][display_name]" class="form-control" required></div><div class="mb-2"><label>アイコン</label><input type="file" class="form-control icon-upload" data-idx="'+idx+'" accept="image/*"><input type="hidden" name="child_categories['+idx+'][icon_path]" class="icon-path"><div class="icon-preview-box"></div></div></div>');idx++});$(document).on('click','.remove-child',function(){$(this).closest('.child-item').remove()});$(document).on('change','.icon-upload',function(){var input=this,fd=new FormData();fd.append('icon',input.files[0]);$.ajax({url:'{{ url('nz_category_layout_admin_upload_icon') }}',type:'POST',data:fd,processData:false,contentType:false,headers:{'ECCUBE-CSRF-TOKEN':$('meta[name="eccube-csrf-token"]').attr('content')},success:function(res){if(res.success){$(input).siblings('.icon-path').val(res.icon_path);$(input).siblings('.icon-preview-box').html('<img src="'+res.icon_path+'" class="icon-preview">')}}})})});</script>{% endblock %}{% block main %}<div class="c-contentsArea__cols"><div class="c-contentsArea__primaryCol"><form method="post"> <input type="hidden" name="_token" value="{{ csrf_token(constant('Eccube\\Common\\Constant::TOKEN_NAME')) }}"> <div class="c-primaryCol__header"><h2>{% if layout.id %}編集{% else %}新規作成{% endif %}</h2><div><button type="submit" class="btn btn-primary">保存</button><a href="{{ url('nz_category_layout_admin_list') }}" class="btn btn-secondary">戻る</a></div></div> <div class="card mb-3"><div class="card-body"> <div class="mb-3"><label>レイアウト名 *</label><input type="text" name="layout_name" class="form-control" value="{{ layout.layoutName }}" required></div> <div class="mb-3"><label>親カテゴリID *</label><input type="number" name="parent_category_id" class="form-control" value="{{ layout.parentCategoryId }}" required></div> <div class="mb-3"><label>ステータス</label><select name="is_active" class="form-control"><option value="1"{% if layout.isActive %}selected{% endif %}>有効</option><option value="0"{% if not layout.isActive %}selected{% endif %}>無効</option></select></div> <div class="mb-3"><label>表示順序</label><input type="number" name="sort_order" class="form-control" value="{{ layout.sortOrder|default(0) }}"></div> </div></div> <div class="card"><div class="card-header"><h3>子カテゴリ設定</h3><button type="button" id="add-child" class="btn btn-sm btn-success">追加</button></div><div class="card-body" id="children"> {% for item in layout.CategoryLayoutItems %} <div class="child-item"><button type="button" class="btn btn-sm btn-danger float-end remove-child">削除</button> <div class="mb-2"><label>子カテゴリID *</label><input type="number" name="child_categories[{{ loop.index0 }}][child_category_id]" class="form-control" value="{{ item.childCategoryId }}" required></div> <div class="mb-2"><label>表示名 *</label><input type="text" name="child_categories[{{ loop.index0 }}][display_name]" class="form-control" value="{{ item.displayName }}" required></div> <div class="mb-2"><label>アイコン</label><input type="file" class="form-control icon-upload" data-idx="{{ loop.index0 }}" accept="image/*"><input type="hidden" name="child_categories[{{ loop.index0 }}][icon_path]" class="icon-path" value="{{ item.iconPath }}"><div class="icon-preview-box">{% if item.iconPath %}<img src="{{ item.iconPath }}" class="icon-preview">{% endif %}</div></div> </div> {% endfor %} </div></div></form></div></div>{% endblock %}