@extends('layout.admin')
@section('content')

<style>
  .wrap{max-width:720px;margin:0 auto;padding:14px}
  .card{background:#fff;border-radius:16px;border:1px solid #e2e8f0;box-shadow:0 10px 24px rgba(0,0,0,.04);overflow:hidden}
  .head{padding:14px 16px;border-bottom:1px solid #f1f5f9;font-weight:1000;color:#0f172a}
  .body{padding:14px 16px}
  .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .field{border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;width:100%}
  label{font-size:12px;font-weight:900;color:#334155}
  .btn{border:none;border-radius:12px;padding:12px 14px;font-weight:1000;cursor:pointer}
  .btnBlue{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff}
  .btnSoft{background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
  .note{font-size:12px;color:#64748b;margin-top:6px}
</style>

<div class="wrap">
  <div class="card">
    <div class="head">+ Create Leadership Rank</div>
    <div class="body">
      @if($errors->any())
        <div style="background:#fef2f2;border:1px solid #ef444433;color:#991b1b;border-radius:12px;padding:10px 12px;font-weight:900;margin-bottom:12px">
          <ul style="margin:0;padding-left:18px">
            @foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach
          </ul>
        </div>
      @endif

      <form method="POST" action="{{ route('admin.leadership.ranks.store') }}" enctype="multipart/form-data">
        @csrf

        <div class="grid">
          <div>
            <label>Key (unique)</label>
            <input class="field" name="key" value="{{ old('key') }}" placeholder="student_leader" required>
          </div>
          <div>
            <label>Name</label>
            <input class="field" name="name" value="{{ old('name') }}" placeholder="স্টুডেন্ট লিডার" required>
          </div>
        </div>

        <div style="margin-top:12px">
          <label>Small Title</label>
          <input class="field" name="display_title" value="{{ old('display_title') }}" placeholder="Tagline under the name">
        </div>

        <div class="grid" style="margin-top:12px">
          <div>
            <label>Update Notice (shown on click)</label>
            <input class="field" name="notice_text" value="{{ old('notice_text') }}" placeholder="আপডেট নোটিশ শীঘ্রই আসছে">
          </div>
          <div>
            <label>Display Image</label>
            <input class="field" type="file" name="display_image" accept="image/*">
            <div class="note">Suggested 1:1 square, max 2MB.</div>
          </div>
        </div>

        <div class="grid" style="margin-top:12px">
          <div>
            <label>Need Verified Members</label>
            <input class="field" type="number" min="0" name="need_verified_members" value="{{ old('need_verified_members',0) }}" required>
          </div>
          <div>
            <label>Count 2nd Level?</label>
            <select class="field" name="include_level2_verified">
              <option value="0" @selected(old('include_level2_verified',0)==0)>No</option>
              <option value="1" @selected(old('include_level2_verified',0)==1)>Yes</option>
            </select>
          </div>
          <div>
            <label>Need 2nd Level Members</label>
            <input class="field" type="number" min="0" name="need_level2_members" value="{{ old('need_level2_members',0) }}">
          </div>
          <div>
            <label>Count 3rd Level?</label>
            <select class="field" name="include_level3_verified">
              <option value="0" @selected(old('include_level3_verified',0)==0)>No</option>
              <option value="1" @selected(old('include_level3_verified',0)==1)>Yes</option>
            </select>
          </div>
          <div>
            <label>Need 3rd Level Members</label>
            <input class="field" type="number" min="0" name="need_level3_members" value="{{ old('need_level3_members',0) }}">
          </div>
          <div>
            <label>Keep Count After Unverify?</label>
            <select class="field" name="keep_count_after_unverify">
              <option value="1" @selected(old('keep_count_after_unverify',1)==1)>Yes</option>
              <option value="0" @selected(old('keep_count_after_unverify',1)==0)>No</option>
            </select>
          </div>
          <div>
            <label>Need Gmail (completed)</label>
            <input class="field" type="number" min="0" name="need_gmail_completed" value="{{ old('need_gmail_completed',0) }}" required>
          </div>
        </div>

        <div class="grid" style="margin-top:12px">
          <div>
            <label>Need Facebook (approved)</label>
            <input class="field" type="number" min="0" name="need_fb_approved" value="{{ old('need_fb_approved',0) }}" required>
          </div>
          <div>
            <label>Reward Amount</label>
            <input class="field" type="number" step="0.01" min="0" name="reward_amount" value="{{ old('reward_amount',0) }}" required>
          </div>
        </div>

        <div class="grid" style="margin-top:12px">
          <div>
            <label>Count Start At</label>
            <input class="field" type="datetime-local" name="count_start_at"
              value="{{ old('count_start_at', now()->format('Y-m-d\\TH:i')) }}">
            <div class="note">এই সময়ের পর থেকে নতুন কাউন্ট হবে।</div>
          </div>
          <div>
            <label>Sort Order</label>
            <input class="field" type="number" min="0" name="sort_order" value="{{ old('sort_order',0) }}">
          </div>
          <div>
            <label>Active?</label>
            <select class="field" name="is_active">
              <option value="1" selected>Yes</option>
              <option value="0">No</option>
            </select>
          </div>
        </div>

        <div style="display:flex;gap:10px;margin-top:14px">
          <button class="btn btnBlue" type="submit">Save</button>
          <a class="btn btnSoft" href="{{ route('admin.leadership.ranks.index') }}">Back</a>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection
