@extends('layouts.setup')
@section('title', '会社情報・法務')
@section('page-title', '会社情報・法務')
@push('styles')
<style>
.business-list-card { margin-bottom: 14px; }
.business-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #edf1f7; }
.business-row:last-child { border-bottom: 0; }
.business-name { color: #2f3f59; font-size: 0.96rem; font-weight: 600; }
.business-meta { font-size: 0.8rem; color: #64748b; }
.business-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.business-group-select { min-width: 130px; font-size: 0.82rem; }
</style>
@endpush

@section('setup_body')
<div class="alert alert-light border small mb-3">
  販売ページや配信メールに載せる、あなたの会社情報（会社名・住所・連絡先）です。複数登録でき、ファネルやシナリオごとに使う会社を選べます。
</div>

<div class="setup-toolbar">
  <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#addBusinessModal"><i class="bi bi-plus-lg me-1"></i>追加</button>
  <button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#businessGroupModal">グループ管理</button>
</div>

@if(($settings ?? collect())->isEmpty())
<div class="setup-form-card"><div class="card-body text-center py-5">
  <i class="bi bi-building" style="font-size:3rem;color:#ddd;"></i>
  <h5 class="mt-3 text-muted">会社情報がありません</h5>
  <button class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#addBusinessModal">会社情報を追加する</button>
</div></div>
@else
@php
  $groups = $groups ?? collect();
  $groupedSettings = $settings->groupBy(fn ($business) => $business->group_id ? ('g_'.$business->group_id) : 'none');
@endphp
@foreach($groupedSettings as $groupKey => $items)
  @php
    $groupName = '未分類';
    if ($groupKey !== 'none') {
      $groupId = (int) str_replace('g_', '', $groupKey);
      $group = $groups->firstWhere('id', $groupId);
      $groupName = $group ? $group->name : 'グループ';
    }
  @endphp
  <div class="setup-form-card business-list-card">
    <div class="card-header">{{ $groupName }}</div>
    @foreach($items as $business)
      <div class="business-row">
        <div class="min-w-0">
          <div class="business-name">{{ $business->displayName() }}</div>
          <div class="business-meta">
            {{ $business->business_type === 'corporation' ? '法人' : '個人事業主' }}
            @if($business->representative) / 代表: {{ $business->representative }} @endif
            @if($business->email) / {{ $business->email }} @endif
          </div>
        </div>
        <div class="business-right">
          <select class="form-select form-select-sm business-group-select" data-business-id="{{ $business->id }}">
            <option value="">未分類</option>
            @foreach($groups as $groupOption)
              <option value="{{ $groupOption->id }}" @selected((int)($business->group_id ?? 0) === (int)$groupOption->id)>{{ $groupOption->name }}</option>
            @endforeach
          </select>
          @if($business->is_default)
            <span class="badge bg-primary">既定</span>
          @endif
          <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editBusiness{{ $business->id }}">編集</button>
          @if($settings->count() > 1)
            <form method="POST" action="{{ route('setting.business.destroy', $business) }}" class="m-0" onsubmit="return confirm('この会社情報を削除しますか？紐づくファネル・シナリオは別の会社情報へ移します。')">
              @csrf @method('DELETE')
              <button type="submit" class="btn btn-sm btn-outline-danger">削除</button>
            </form>
          @endif
        </div>
      </div>
    @endforeach
  </div>
@endforeach
@endif

<div class="modal fade" id="addBusinessModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">会社情報を追加</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <form method="POST" action="{{ route('setting.business.update') }}">
      @csrf
      <div class="modal-body">
        @include('setting.partials.business-form-fields', ['business' => null, 'groups' => $groups])
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button><button type="submit" class="btn btn-primary">追加する</button></div>
    </form>
  </div></div>
</div>

@foreach(($settings ?? collect()) as $business)
<div class="modal fade" id="editBusiness{{ $business->id }}" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">会社情報を編集</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <form method="POST" action="{{ route('setting.business.row.update', $business) }}">
      @csrf @method('PUT')
      <div class="modal-body">
        @include('setting.partials.business-form-fields', ['business' => $business, 'groups' => $groups])
        <div class="form-check mt-3">
          <input class="form-check-input" type="checkbox" name="is_default" value="1" id="businessDefault{{ $business->id }}" @checked($business->is_default)>
          <label class="form-check-label" for="businessDefault{{ $business->id }}">既定の会社にする</label>
        </div>
      </div>
      <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">キャンセル</button><button type="submit" class="btn btn-primary">保存する</button></div>
    </form>
  </div></div>
</div>
@endforeach

<div class="modal fade" id="businessGroupModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg"><div class="modal-content">
    <div class="modal-header"><h5 class="modal-title">グループ管理</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
      <form id="business-group-add-form" class="d-flex gap-2 mb-3">
        @csrf
        <input type="text" name="name" class="form-control" placeholder="新しいグループ名" maxlength="100" required>
        <button type="submit" class="btn btn-primary text-nowrap">追加</button>
      </form>
      @if($groups->isEmpty())
        <p class="text-muted mb-0">グループがありません</p>
      @else
        <table class="table table-hover align-middle mb-0">
          <thead><tr><th>グループ名</th><th class="text-end">操作</th></tr></thead>
          <tbody>
            @foreach($groups as $group)
              <tr id="business-group-row-{{ $group->id }}">
                <td><span class="group-name-display">{{ $group->name }}</span><input type="text" class="form-control form-control-sm d-none group-name-input" value="{{ $group->name }}"></td>
                <td class="text-end">
                  <button type="button" class="btn btn-sm btn-outline-secondary me-1 btn-business-group-edit" data-group-id="{{ $group->id }}"><i class="bi bi-pencil"></i></button>
                  <button type="button" class="btn btn-sm btn-outline-success me-1 d-none btn-business-group-save" data-group-id="{{ $group->id }}"><i class="bi bi-check-lg"></i></button>
                  <button type="button" class="btn btn-sm btn-outline-danger btn-business-group-delete" data-group-id="{{ $group->id }}" data-group-name="{{ $group->name }}"><i class="bi bi-trash"></i></button>
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      @endif
    </div>
    <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button></div>
  </div></div>
</div>

@push('scripts')
<script>
const businessCsrfToken = document.querySelector('meta[name="csrf-token"]').content;

document.getElementById('business-group-add-form')?.addEventListener('submit', async (e) => {
  e.preventDefault();
  const res = await fetch('{{ route("setting.business.group.store") }}', {
    method: 'POST',
    headers: { 'X-CSRF-TOKEN': businessCsrfToken, 'Accept': 'application/json' },
    body: new FormData(e.currentTarget),
  });
  const data = await res.json();
  if (data.success) location.reload();
});

document.querySelectorAll('.btn-business-group-edit').forEach((btn) => {
  btn.addEventListener('click', () => {
    const row = document.getElementById(`business-group-row-${btn.dataset.groupId}`);
    row.querySelector('.group-name-display').classList.add('d-none');
    row.querySelector('.group-name-input').classList.remove('d-none');
    row.querySelector('.btn-business-group-save').classList.remove('d-none');
    btn.classList.add('d-none');
  });
});

document.querySelectorAll('.btn-business-group-save').forEach((btn) => {
  btn.addEventListener('click', async () => {
    const row = document.getElementById(`business-group-row-${btn.dataset.groupId}`);
    const input = row.querySelector('.group-name-input');
    const res = await fetch(`/business/group/${btn.dataset.groupId}`, {
      method: 'PUT',
      headers: { 'X-CSRF-TOKEN': businessCsrfToken, 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({ name: input.value }),
    });
    const data = await res.json();
    if (data.success) location.reload();
  });
});

document.querySelectorAll('.btn-business-group-delete').forEach((btn) => {
  btn.addEventListener('click', async () => {
    if (!confirm(`「${btn.dataset.groupName || 'このグループ'}」を削除しますか？`)) return;
    const res = await fetch(`/business/group/${btn.dataset.groupId}`, {
      method: 'DELETE',
      headers: { 'X-CSRF-TOKEN': businessCsrfToken, 'Accept': 'application/json' },
    });
    const data = await res.json();
    if (data.success) location.reload();
  });
});

document.querySelectorAll('.business-group-select').forEach((select) => {
  select.addEventListener('change', async () => {
    const res = await fetch(`/business/${select.dataset.businessId}/group`, {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': businessCsrfToken, 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify({ group_id: select.value || null }),
    });
    const data = await res.json();
    if (data.success) location.reload();
  });
});
</script>
@endpush
@endsection