@extends('layouts.console')
@section('title','マスタ管理')@section('console','運営管理')@section('heading','マスタ管理')
@section('who','管理者')@section('logout', route('admin.logout'))
@section('nav')@include('admin._nav')@endsection

@section('content')
<div class="aw-tabs" style="margin-bottom:14px;">
  @foreach($types as $k=>$label)
    <a href="{{ route('admin.masters',['type'=>$k]) }}" @class(['active'=>$type===$k])>{{ $label }}</a>
  @endforeach
</div>

<section class="sec">
  <div class="sec-hd">
    <h2 class="ic-doc">{{ $types[$type] }} マスタ</h2>
    <button type="button" id="saveOrder" class="btn btn-sm primary">並び順を保存</button>
  </div>
  <p class="small muted" style="margin:0 0 8px;">行の左の <b>≡</b> をドラッグして並べ替え →「並び順を保存」。名称・表示の変更は各行「保存」。</p>

  <div id="mlist">
    @forelse($rows as $r)
    <form method="post" action="{{ route('admin.masters.save') }}" class="card card-pad mrow"
          data-id="{{ $r->id }}" draggable="true"
          style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:6px;cursor:grab;">@csrf
      <span class="mhandle" style="cursor:grab;font-size:18px;user-select:none;">≡</span>
      <input type="hidden" name="type" value="{{ $type }}">
      <input type="hidden" name="id" value="{{ $r->id }}">
      <input type="hidden" name="sort" value="{{ $r->sort }}">
      <span class="small muted">#{{ $r->id }}</span>
      <input type="text" name="name" value="{{ $r->name }}" style="flex:1;min-width:200px;" required>
      <label class="small"><input type="checkbox" name="is_active" value="1" @checked($r->is_active)> 表示</label>
      <button class="btn btn-sm primary">保存</button>
    </form>
    @empty
    <div class="card card-pad muted">未登録</div>
    @endforelse
  </div>

  <form method="post" action="{{ route('admin.masters.save') }}"
        class="card card-pad" style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--brand-pale);margin-top:10px;">@csrf
    <input type="hidden" name="type" value="{{ $type }}">
    <span class="small muted">＋新規</span>
    <input type="text" name="name" placeholder="名称" style="flex:1;min-width:200px;" required>
    <label class="small"><input type="checkbox" name="is_active" value="1" checked> 表示</label>
    <button class="btn btn-sm">追加</button>
  </form>

  <form method="post" action="{{ route('admin.masters.reorder') }}" id="reorderForm" style="display:none;">@csrf
    <input type="hidden" name="type" value="{{ $type }}">
    <div id="reorderIds"></div>
  </form>
  <p class="small muted" style="margin-top:8px;">※ 既存IDは保持。新規はID最大+1で採番。</p>
</section>

<script>
(function(){
  var list=document.getElementById('mlist'); if(!list) return;
  var dragEl=null;
  list.addEventListener('dragstart',function(e){
    var f=e.target.closest('.mrow'); if(!f) return;
    dragEl=f; f.style.opacity='0.4';
  });
  list.addEventListener('dragend',function(){ if(dragEl){dragEl.style.opacity='';dragEl=null;} });
  list.addEventListener('dragover',function(e){
    e.preventDefault();
    var t=e.target.closest('.mrow'); if(!t||t===dragEl) return;
    var r=t.getBoundingClientRect();
    var after=(e.clientY-r.top)/(r.height)>0.5;
    list.insertBefore(dragEl, after? t.nextSibling : t);
  });
  document.getElementById('saveOrder').addEventListener('click',function(){
    var box=document.getElementById('reorderIds'); box.innerHTML='';
    list.querySelectorAll('.mrow').forEach(function(f){
      var i=document.createElement('input');
      i.type='hidden'; i.name='ids[]'; i.value=f.getAttribute('data-id');
      box.appendChild(i);
    });
    document.getElementById('reorderForm').submit();
  });
})();
</script>
@endsection