@extends('layouts.dashboard')
@section('title', t('الخطط والأسعار','Plans & Pricing'))
@section('page-title','💰 '.t('إدارة الخطط والأسعار','Manage Plans & Pricing'))

@section('styles')
<style>
.plan-edit-card { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; overflow:hidden; transition:all .2s; }
.plan-edit-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.08); border-color:#bfdbfe; }
.plan-header-bar { padding:14px 20px; display:flex; align-items:center; justify-content:space-between; }
.plan-body { padding:0 20px 20px; }
</style>
@endsection

@section('content')

<div id="save-msg" style="display:none;padding:14px;border-radius:10px;margin-bottom:16px;font-weight:600"></div>

{{-- Existing Plans --}}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-bottom:28px">
  @foreach($plans as $plan)
  <div class="plan-edit-card">
    <div class="plan-header-bar" style="background:{{ $plan->active?'#eff6ff':'#f8fafc' }};border-bottom:1px solid #f1f5f9">
      <div style="display:flex;align-items:center;gap:10px">
        <div style="font-size:22px">
          @if($plan->id==='free')🆓@elseif($plan->id==='monthly')📅@elseif($plan->id==='quarterly')🗓️@elseif($plan->id==='yearly')⭐@elseif($plan->id==='lifetime')♾️@else💳@endif
        </div>
        <div>
          <div style="font-weight:800;font-size:16px">{{ $plan->name }}</div>
          <div style="font-size:11px;color:#94a3b8">ID: <code>{{ $plan->id }}</code></div>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:8px">
        <span class="badge {{ $plan->active?'badge-green':'badge-gray' }}">{{ $plan->active?t('نشطة','Active'):t('مخفية','Hidden') }}</span>
        @if($plan->id !== 'free')
        <form method="POST" action="{{ route('admin.plans.delete',$plan->id) }}" style="display:inline">@csrf @method('DELETE')
          <button class="btn btn-sm btn-danger" onclick="return confirm('{{ t('حذف هذه الخطة؟','Delete this plan?') }}')" title="{{ t('حذف','Delete') }}">🗑️</button>
        </form>
        @endif
      </div>
    </div>

    <div class="plan-body">
      <form id="form-{{ $plan->id }}">
        @csrf
        <div class="form-row" style="margin-top:14px">
          <div class="form-group">
            <label class="form-label" style="font-size:12px">{{ t('اسم الخطة','Plan Name') }}</label>
            <input type="text" name="name" class="form-input" value="{{ $plan->name }}" style="font-size:13px">
          </div>
          <div class="form-group">
            <label class="form-label" style="font-size:12px">{{ t('السعر ($)','Price ($)') }}</label>
            <div style="display:flex;align-items:center;gap:4px">
              <span style="color:#64748b;font-weight:700">$</span>
              <input type="number" name="price" class="form-input" value="{{ $plan->price }}" min="0" step="0.01" style="font-size:15px;font-weight:700;color:#2563eb">
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label" style="font-size:12px">{{ t('عدد المواقع','Sites') }}</label>
            <input type="number" name="sites" class="form-input" value="{{ $plan->sites }}" min="1" max="1000" style="font-size:13px">
          </div>
          <div class="form-group">
            <label class="form-label" style="font-size:12px">{{ t('مدة الصلاحية (أيام)','Duration (days)') }}</label>
            <div style="display:flex;gap:4px;margin-bottom:4px;flex-wrap:wrap">
              @foreach([30,90,180,365] as $d)
              <button type="button" class="btn btn-sm btn-outline" style="font-size:10px;padding:3px 8px"
                onclick="document.querySelector('#form-{{ $plan->id }} [name=days]').value={{ $d }}">{{ $d }}</button>
              @endforeach
              <button type="button" class="btn btn-sm btn-outline" style="font-size:10px;padding:3px 8px"
                onclick="document.querySelector('#form-{{ $plan->id }} [name=days]').value=0">♾️</button>
            </div>
            <div style="display:flex;align-items:center;gap:6px">
              <input type="number" name="days" class="form-input" value="{{ $plan->days }}" min="0" style="font-size:13px">
              <span style="font-size:11px;color:#94a3b8;flex-shrink:0">{{ $plan->days === 0 ? '♾️ '.t('مدى الحياة','Lifetime') : $plan->days.' '.t('يوم','days') }}</span>
            </div>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label" style="font-size:12px">{{ t('الترتيب','Sort Order') }}</label>
            <input type="number" name="sort_order" class="form-input" value="{{ $plan->sort_order }}" min="0" style="font-size:13px">
          </div>
          <div class="form-group" style="padding-top:22px">
            <label style="display:flex;align-items:center;gap:8px;cursor:pointer">
              <input type="checkbox" name="active" value="1" {{ $plan->active?'checked':'' }} style="width:16px;height:16px">
              <span style="font-weight:600;font-size:13px">{{ t('نشطة وظاهرة','Active & Visible') }}</span>
            </label>
          </div>
        </div>
        <button type="button" onclick="savePlan('{{ $plan->id }}')" class="btn btn-primary btn-block">
          💾 {{ t('حفظ','Save') }} — {{ $plan->name }}
        </button>
      </form>
    </div>
  </div>
  @endforeach
</div>

{{-- Add New Plan --}}
<div class="card">
  <div class="card-header">
    <h3>➕ {{ t('إضافة خطة جديدة','Add New Plan') }}</h3>
  </div>
  <form method="POST" action="{{ route('admin.plans.store') }}" style="padding:20px">
    @csrf
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px">
      <div class="form-group">
        <label class="form-label">{{ t('معرف الخطة (ID)','Plan ID') }} *</label>
        <input type="text" name="id" class="form-input" placeholder="pro-monthly" dir="ltr" required>
        <div style="font-size:11px;color:#94a3b8;margin-top:2px">{{ t('حروف وأرقام فقط (بدون مسافات)','letters/numbers only') }}</div>
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('الاسم','Name') }} *</label>
        <input type="text" name="name" class="form-input" placeholder="{{ t('خطة احترافية','Pro Plan') }}" required>
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('السعر ($)','Price ($)') }} *</label>
        <input type="number" name="price" class="form-input" value="0" min="0" step="0.01" required>
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('المواقع','Sites') }}</label>
        <input type="number" name="sites" class="form-input" value="1" min="1">
      </div>
      <div class="form-group">
        <label class="form-label">{{ t('الأيام (0=مدى الحياة)','Days (0=Lifetime)') }}</label>
        <input type="number" name="days" class="form-input" value="30" min="0">
      </div>
    </div>
    <button type="submit" class="btn btn-primary" style="margin-top:4px">➕ {{ t('إضافة الخطة','Add Plan') }}</button>
  </form>
</div>

{{-- Info --}}
<div class="alert alert-info" style="margin-top:16px">
  💡 {{ t('التغييرات في الأسعار تؤثر فقط على الاشتراكات الجديدة وليس الموجودة','Price changes only affect new subscriptions, not existing ones') }}
</div>

@endsection

@section('scripts')
<script>
function savePlan(id) {
  var form   = document.getElementById('form-' + id);
  var inputs = form.querySelectorAll('input,select');
  var fd     = new FormData();
  fd.append('_token', '{{ csrf_token() }}');
  inputs.forEach(function(inp) {
    if (inp.type === 'checkbox') {
      if (inp.checked) fd.append(inp.name, inp.value);
    } else {
      fd.append(inp.name, inp.value);
    }
  });

  fetch('/admin/plans/' + id, {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
      'Accept': 'application/json',
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: fd
  })
  .then(r => r.json())
  .then(data => {
    var msg = document.getElementById('save-msg');
    msg.style.display = 'block';
    msg.style.background = data.success ? '#f0fdf4' : '#fef2f2';
    msg.style.color      = data.success ? '#16a34a' : '#dc2626';
    msg.style.border     = data.success ? '1px solid #bbf7d0' : '1px solid #fecaca';
    msg.textContent = data.message;
    window.scrollTo(0, 0);
    setTimeout(() => msg.style.display = 'none', 3000);
  })
  .catch(err => {
    var msg = document.getElementById('save-msg');
    msg.style.display = 'block';
    msg.style.background = '#fef2f2';
    msg.style.color = '#dc2626';
    msg.textContent = '❌ ' + err;
    window.scrollTo(0, 0);
  });
}
</script>
@endsection