@extends('layout.admin')

@section('content')
<style>
  :root{
    --pri:#0B5D1E;
    --pri2:#0F7A2E;
    --ink:#0f172a;
    --muted:#6b7280;
    --card:#ffffff;
    --ring: color-mix(in oklab, var(--pri) 35%, #fff);
  }

  .wrap{max-width:1100px;margin:0 auto;padding:8px;}
  .hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px;}
  .ttl{font-weight:900;color:var(--ink);font-size:clamp(18px,3.2vw,22px);}
  .chip{padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;
        background:linear-gradient(90deg,var(--pri),var(--pri2));}

  .card{background:var(--card);border:1px solid #e8eef0;border-radius:14px;overflow:hidden;
        box-shadow:0 10px 24px rgba(0,0,0,.06);}
  .cardHdr{padding:10px 12px;color:#fff;font-weight:900;display:flex;align-items:center;gap:8px;
        background:linear-gradient(90deg,var(--pri),var(--pri2));}
  .cardBody{padding:12px;background:linear-gradient(180deg,#ffffff,#fbfdfc);}

  .grid{display:grid;grid-template-columns:1fr;gap:8px;}
  @media (min-width:780px){ .grid-2{grid-template-columns:1fr 1fr;} }

  .lbl{font-weight:700;color:var(--ink);font-size:13px;margin-bottom:4px;display:block}
  .hint{font-size:12px;color:var(--muted);margin-top:2px}
  .inp,.sel,.txa{
    width:100%;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:var(--ink);
    padding:8px 10px;font-size:14px;outline:none;transition:.15s;
  }
  .txa{min-height:100px;resize:vertical}
  .inp:focus,.sel:focus,.txa:focus{border-color:var(--pri);box-shadow:0 0 0 3px var(--ring);}
  #sms_body.txa{min-height:400px;font-family:monospace;font-size:13px;white-space:pre-wrap;}

  .fileRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .thumb{width:90px;height:90px;border-radius:10px;object-fit:cover;border:1px solid #e5e7eb;background:#f8fafc;}

  .toolbar{display:flex;gap:8px;justify-content:flex-end;margin-top:6px;flex-wrap:wrap}
  .btn{border:0;border-radius:10px;padding:8px 12px;font-weight:800;cursor:pointer;transition:.15s;font-size:14px;}
  .btnGhost{background:#fff;color:var(--pri);border:2px solid color-mix(in oklab,var(--pri) 28%, #e2e8f0);}
  .btnPri{color:#fff;background:linear-gradient(90deg,var(--pri),var(--pri2));}

  .err{margin-bottom:10px;border-radius:10px;padding:8px;background:#fff1f2;border:1px solid #fecaca;}
  .err h4{margin:0 0 4px;color:#991b1b;font-weight:900}
  .err ul{margin:0;padding-left:16px;color:#7f1d1d;font-size:13px}
</style>

<div class="wrap">

  <div class="hdr">
    <div class="ttl">Create Service</div>
    <span class="chip">Admin</span>
  </div>

  @if($errors->any())
    <div class="err">
      <h4>Please fix the following</h4>
      <ul>
        @foreach ($errors->all() as $e)
          <li>{{ $e }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  <div class="card">
    <div class="cardHdr">
      <i class="fas fa-layer-group"></i> <span>New Service</span>
    </div>

    <div class="cardBody">
      <form method="POST"
            action="{{ route('admin.dg_services.store') }}"
            enctype="multipart/form-data"
            class="grid">
        @csrf

        {{-- Title --}}
        <div>
          <label class="lbl">Title</label>
          <input class="inp" type="text" name="title"
                 placeholder="CAPCUT Premium (1 Month)" required>
        </div>

        {{-- Photo --}}
        <div>
          <label class="lbl">Cover Photo</label>
          <div class="fileRow">
            <img id="preview" class="thumb">
            <input class="inp" type="file" name="photo"
                   accept="image/*" required onchange="previewImg(event)">
          </div>
        </div>

        {{-- Description --}}
        <div>
          <label class="lbl">Short Description</label>
          <textarea class="txa" name="description"
                    placeholder="সংক্ষেপে লিখুন (optional)"></textarea>
        </div>

        {{-- Price & Cashback --}}
        <div class="grid grid-2">
          <div>
            <label class="lbl">Price</label>
            <input class="inp" type="number" step="0.01"
                   name="price" placeholder="499.00" required>
          </div>
          <div>
            <label class="lbl">Cashback</label>
            <input class="inp" type="number" step="0.01"
                   name="cashback" placeholder="20.00">
          </div>
        </div>

        {{-- Validity & Status --}}
        <div class="grid grid-2">
          <div>
            <label class="lbl">Validity</label>
            <input class="inp" type="text"
                   name="validity" placeholder="30 Days">
          </div>
          <div>
            <label class="lbl">Status</label>
            <select class="sel" name="status">
              <option value="on" selected>ON</option>
              <option value="off">OFF</option>
            </select>
          </div>
        </div>

        {{-- 🔥 Upline Commissions --}}
        <div>
          <label class="lbl">Upline Commission (Level wise)</label>

          @php
            $commissions = old('upline_commissions', [0.50]);
          @endphp

          <div id="commissionWrap" class="grid grid-2">
            @foreach($commissions as $i => $val)
              <div class="commission-row">
                <div class="fileRow">
                  <span class="chip">Level {{ $i+1 }}</span>
                  <input type="number" step="0.01" min="0"
                         name="upline_commissions[]"
                         value="{{ $val }}" class="inp">
                  <button type="button"
                          class="btn btnGhost btn-remove">✕</button>
                </div>
              </div>
            @endforeach
          </div>

          <button type="button" id="addCommission"
                  class="btn btnGhost mt-2">+ Add Level</button>

          <div class="hint">0 দিলে ঐ লেভেলে কমিশন যাবে না</div>
        </div>

        {{-- Email Body --}}
        <div>
          <label class="lbl">Email Body (HTML বা Plain Text)</label>
          <textarea id="sms_body" class="txa" name="sms_body" required></textarea>
          <div class="hint">HTML দিলে HTML যাবে, না হলে Plain Text ইমেইল যাবে</div>
        </div>

        {{-- Actions --}}
        <div class="toolbar">
          <a href="{{ route('admin.dg_services.index') }}"
             class="btn btnGhost">Cancel</a>
          <button class="btn btnPri" type="submit">Save Service</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
function previewImg(e){
  const file = e.target.files[0];
  if(!file) return;
  const r = new FileReader();
  r.onload = ev => document.getElementById('preview').src = ev.target.result;
  r.readAsDataURL(file);
}

(function(){
  const wrap = document.getElementById('commissionWrap');
  const add  = document.getElementById('addCommission');

  function renumber(){
    wrap.querySelectorAll('.commission-row').forEach((row,i)=>{
      row.querySelector('.chip').innerText = 'Level ' + (i+1);
    });
  }

  wrap.addEventListener('click', e=>{
    if(e.target.classList.contains('btn-remove')){
      e.target.closest('.commission-row').remove();
      renumber();
    }
  });

  add.addEventListener('click', ()=>{
    const d = document.createElement('div');
    d.className = 'commission-row';
    d.innerHTML = `
      <div class="fileRow">
        <span class="chip">Level X</span>
        <input type="number" step="0.01" min="0"
               name="upline_commissions[]" value="0" class="inp">
        <button type="button"
                class="btn btnGhost btn-remove">✕</button>
      </div>`;
    wrap.appendChild(d);
    renumber();
  });

  renumber();
})();
</script>
@endsection