@extends(($fromSetup ?? false) ? 'layouts.setup' : 'layouts.app')
@php
  $isEdit = isset($plan) && $plan !== null;
@endphp
@section('title', $isEdit ? 'プラン編集' : 'プラン追加')
@section('page-title', $product->name . ' — ' . ($isEdit ? 'プラン編集' : 'プラン追加'))
@section(($fromSetup ?? false) ? 'setup_body' : 'content')

<div class="d-flex justify-content-between align-items-center mb-4">
  <a href="{{ route('product.show', array_merge(['product' => $product], ($fromSetup ?? false) ? ['setup' => 1] : [])) }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i>プラン一覧へ戻る
  </a>
</div>

<div class="row justify-content-center">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header">{{ $isEdit ? 'プランを編集' : 'プランを追加' }}</div>
      <div class="card-body">
        <form method="POST" action="{{ $isEdit
          ? route('product.plan.update', array_merge(['product' => $product, 'plan' => $plan], ($fromSetup ?? false) ? ['setup' => 1] : []))
          : route('product.plan.store', array_merge(['product' => $product], ($fromSetup ?? false) ? ['setup' => 1] : [])) }}">
          @csrf
          @if($isEdit) @method('PUT') @endif
          @if($fromSetup ?? false)<input type="hidden" name="setup" value="1">@endif

          @include('product.partials._plan_form_fields', [
            'isEdit' => $isEdit,
            'plan' => $plan ?? null,
            'grantOptionGroups' => $grantOptionGroups,
            'scenarioOptions' => $scenarioOptions,
            'paymentGatewayAccounts' => $paymentGatewayAccounts,
            'selectedGrantTarget' => $selectedGrantTarget ?? '',
            'selectedScenarioId' => $selectedScenarioId ?? '',
          ])

          <div class="d-flex gap-2 mt-4 pt-3 border-top">
            <button type="submit" class="btn btn-primary">{{ $isEdit ? '更新する' : '追加する' }}</button>
            <a href="{{ route('product.show', array_merge(['product' => $product], ($fromSetup ?? false) ? ['setup' => 1] : [])) }}" class="btn btn-outline-secondary">キャンセル</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

@if(!$isEdit)
@push('scripts')
<script>
function togglePaymentOptions(type) {
  const installmentRow = document.getElementById('installmentRow');
  const subscriptionRow = document.getElementById('subscriptionRow');
  if (installmentRow) installmentRow.style.display = (type === 'installment') ? 'block' : 'none';
  if (subscriptionRow) subscriptionRow.style.display = (type === 'subscription') ? 'block' : 'none';
  const methodSelect = document.getElementById('paymentMethod');
  const gatewayRow = document.getElementById('paymentGatewayAccountRow');
  if (type === 'free') {
    methodSelect.value = 'free';
    methodSelect.disabled = true;
    if (gatewayRow) gatewayRow.style.display = 'none';
  } else {
    methodSelect.disabled = false;
    if (methodSelect.value === 'free') methodSelect.value = 'credit';
    syncGatewayRowVisibility();
  }
}

function syncGatewayRowVisibility() {
  const gatewayRow = document.getElementById('paymentGatewayAccountRow');
  const methodSelect = document.getElementById('paymentMethod');
  const paymentType = document.getElementById('paymentType')?.value;
  if (!gatewayRow || !methodSelect) return;
  if (paymentType === 'free') {
    gatewayRow.style.display = 'none';
    return;
  }
  gatewayRow.style.display = methodSelect.value === 'credit' ? 'block' : 'none';
}

document.getElementById('paymentMethod')?.addEventListener('change', syncGatewayRowVisibility);
document.addEventListener('DOMContentLoaded', () => {
  const type = document.getElementById('paymentType')?.value || 'one_time';
  togglePaymentOptions(type);
});
</script>
@endpush
@else
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', () => {
  const gatewayRow = document.getElementById('paymentGatewayAccountRow');
  const isCredit = @json($plan->payment_method === 'credit');
  if (gatewayRow) gatewayRow.style.display = isCredit ? 'block' : 'none';
});
</script>
@endpush
@endif
@endsection