@extends('layouts.admin')
@section('title', 'New Product')

@section('content')

<div style="display:flex;align-items:center;gap:.75rem;margin-bottom:1.5rem">
  <a href="{{ route('admin.products.index') }}" class="btn btn-secondary btn-sm"><svg width="14" height="14" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="flex-shrink:0"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg> Products</a>
</div>

<div style="max-width:700px">
  <div class="card" style="padding:1.75rem">
    <div style="margin-bottom:1.5rem">
      <h2 style="font-size:1.1rem;font-weight:700;color:var(--foreground);margin:0 0 .25rem">Create Product</h2>
      <p style="font-size:.875rem;color:var(--muted-foreground);margin:0">Add a new product to your catalogue.</p>
    </div>

    <form method="POST" action="{{ route('admin.products.store') }}" enctype="multipart/form-data"
          style="display:flex;flex-direction:column;gap:1.125rem">
      @csrf

      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">
        <div style="grid-column:1/-1">
          <label>Product Name</label>
          <input type="text" name="name" value="{{ old('name') }}" required
            placeholder="e.g. Hosting Manager Pro" class="input">
        </div>

        <div>
          <label>Type</label>
          <select name="type" class="select">
            @foreach(['software','plugin','module','theme','api','website','script','desktop','saas'] as $t)
            <option value="{{ $t }}" @selected(old('type')===$t)>{{ ucfirst($t) }}</option>
            @endforeach
          </select>
        </div>

        <div>
          <label>Version</label>
          <input type="text" name="version" value="{{ old('version','1.0.0') }}" required class="input">
        </div>

        {{-- Pricing section --}}
        <div style="grid-column:1/-1;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">
          <div style="padding:.625rem 1rem;background:var(--muted);border-bottom:1px solid var(--border);
            font-size:.75rem;font-weight:700;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em">
            Pricing by License Type
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:0">

            {{-- Regular --}}
            <div style="padding:.875rem 1rem;border-right:1px solid var(--border)" id="panel-regular">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.625rem">
                <div style="display:flex;align-items:center;gap:.5rem">
                  <span style="font-size:.8rem;font-weight:600;padding:.15rem .5rem;border-radius:.35rem;
                    background:var(--muted);border:1px solid var(--border);color:var(--foreground)">Regular</span>
                  <span style="font-size:.8125rem;color:var(--muted-foreground)">Single domain</span>
                </div>
                {{-- Toggle --}}
                <label class="lt-toggle" title="Enable / disable Regular license">
                  <input type="hidden" name="regular_enabled" value="0">
                  <input type="checkbox" name="regular_enabled" value="1"
                    @checked(old('regular_enabled', true))
                    onchange="toggleLicensePanel('regular', this.checked)">
                  <span class="lt-track"><span class="lt-thumb"></span></span>
                </label>
              </div>
              <div id="fields-regular">
                <label style="font-size:.8rem;font-weight:500;color:var(--muted-foreground);margin-bottom:.3rem">
                  Price ({{ $defaultCurrency }}) *
                </label>
                <input type="number" name="price" value="{{ old('price','0') }}"
                  step="0.01" min="0" class="input" placeholder="0.00">
              </div>
            </div>

            {{-- Extended --}}
            <div style="padding:.875rem 1rem" id="panel-extended">
              <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.625rem">
                <div style="display:flex;align-items:center;gap:.5rem">
                  <span style="font-size:.8rem;font-weight:600;padding:.15rem .5rem;border-radius:.35rem;
                    background:var(--foreground);color:var(--background)">Extended</span>
                  <span style="font-size:.8125rem;color:var(--muted-foreground)">Unlimited</span>
                </div>
                {{-- Toggle --}}
                <label class="lt-toggle" title="Enable / disable Extended license">
                  <input type="hidden" name="extended_enabled" value="0">
                  <input type="checkbox" name="extended_enabled" value="1"
                    @checked(old('extended_enabled', false))
                    onchange="toggleLicensePanel('extended', this.checked)">
                  <span class="lt-track"><span class="lt-thumb"></span></span>
                </label>
              </div>
              <div id="fields-extended" style="{{ old('extended_enabled') ? '' : 'opacity:.45;pointer-events:none' }}">
                <label style="font-size:.8rem;font-weight:500;color:var(--muted-foreground);margin-bottom:.3rem">
                  Price ({{ $defaultCurrency }})
                </label>
                <input type="number" name="price_extended" value="{{ old('price_extended') }}"
                  step="0.01" min="0" class="input" placeholder="Blank = same as Regular">
              </div>
            </div>

          </div>
        </div>

        <div>
          <label>Max Activations <span style="font-weight:400;color:var(--muted-foreground)">(blank = unlimited)</span></label>
          <input type="number" name="max_activations" value="{{ old('max_activations') }}" min="1" class="input">
        </div>

        <div>
          <label>Update Channel</label>
          <select name="update_channel" class="select">
            <option value="stable">Stable</option>
            <option value="beta">Beta</option>
            <option value="rc">Release Candidate</option>
          </select>
        </div>

        <div style="grid-column:1/-1">
          <label>Short Description</label>
          <input type="text" name="short_description" value="{{ old('short_description') }}" maxlength="500" class="input">
        </div>

        <div style="grid-column:1/-1">
          <label>Full Description</label>
          <textarea name="description" rows="4" class="input" style="resize:vertical">{{ old('description') }}</textarea>
        </div>

        <div style="grid-column:1/-1">
          <label style="margin-bottom:.75rem">Options</label>
          <div style="display:flex;flex-wrap:wrap;gap:1rem">
            @foreach([
              ['name'=>'is_active',               'label'=>'Active (visible to customers)', 'default'=>true],
              ['name'=>'is_featured',             'label'=>'Featured',                      'default'=>false],
              ['name'=>'allow_domain_activation', 'label'=>'Allow domain activation',       'default'=>true],
              ['name'=>'allow_ip_activation',     'label'=>'Allow IP activation',           'default'=>false],
              ['name'=>'require_device_fingerprint','label'=>'Require device fingerprint',  'default'=>false],
            ] as $opt)
            <label style="display:flex;align-items:center;gap:.5rem;font-size:.875rem;
              color:var(--muted-foreground);cursor:pointer;margin:0">
              <input type="checkbox" name="{{ $opt['name'] }}" value="1"
                @checked(old($opt['name'], $opt['default']))
                style="accent-color:#6366f1;width:15px;height:15px">
              {{ $opt['label'] }}
            </label>
            @endforeach
          </div>
        </div>

        {{-- Product Image --}}
        <div style="grid-column:1/-1">
          <label>Product Image <span style="font-weight:400;color:var(--muted-foreground)">(optional — jpg, png, webp)</span></label>
          <input type="file" name="image" accept="image/*" class="input" style="padding:.45rem .75rem">
        </div>

      </div>{{-- /grid --}}

      {{-- ── Initial Release ──────────────────────────────────────────────────── --}}
      <div style="border:1px solid var(--border);border-radius:var(--radius);overflow:hidden">

        {{-- Header --}}
        <div style="display:flex;align-items:center;justify-content:space-between;
                    padding:.625rem 1rem;background:var(--muted);border-bottom:1px solid var(--border)">
          <div>
            <span style="font-size:.75rem;font-weight:700;text-transform:uppercase;
                         letter-spacing:.06em;color:var(--muted-foreground)">
              Initial Product Release
            </span>
            <span style="font-size:.75rem;color:var(--muted-foreground);margin-left:.5rem">
              — optional, can be added later from the product page
            </span>
          </div>
          <label style="display:flex;align-items:center;gap:.5rem;font-size:.8rem;
                         color:var(--muted-foreground);cursor:pointer;margin:0">
            <input type="checkbox" id="toggle-release" onchange="toggleRelease(this.checked)"
              style="accent-color:var(--foreground);width:14px;height:14px">
            Upload now
          </label>
        </div>

        {{-- Release fields (hidden until toggled) --}}
        <div id="release-fields" style="display:none;padding:1rem;display:none">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem">

            <div style="grid-column:1/-1">
              <label>
                Product File
                <span style="font-weight:400;color:var(--muted-foreground)">
                  (zip, exe, tar.gz … max 512 MB)
                </span>
              </label>
              <input type="file" name="release_file" id="release_file" class="input"
                     style="padding:.45rem .75rem" onchange="fileChosen(this)">
              <p id="file-info" style="font-size:.75rem;color:var(--muted-foreground);margin-top:.3rem;display:none"></p>
            </div>

            <div>
              <label>Release Channel</label>
              <select name="release_channel" class="select">
                <option value="stable" selected>Stable</option>
                <option value="beta">Beta</option>
                <option value="rc">Release Candidate</option>
              </select>
            </div>

            <div>
              <label>Changelog <span style="font-weight:400;color:var(--muted-foreground)">(optional)</span></label>
              <textarea name="release_changelog" rows="2" class="input"
                        style="resize:vertical"
                        placeholder="What's new in this release…"></textarea>
            </div>

          </div>
        </div>

      </div>{{-- /initial release --}}

      @if($errors->has('release_file'))
        <div style="color:#dc2626;font-size:.8125rem">{{ $errors->first('release_file') }}</div>
      @endif

      <button type="submit" class="btn btn-primary" style="justify-content:center;padding:.75rem">
        Create Product
      </button>
    </form>
  </div>
</div>

<style>
.lt-toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer}
.lt-toggle input{position:absolute;opacity:0;width:0;height:0}
.lt-track{width:2.25rem;height:1.25rem;border-radius:9999px;background:var(--border);
  border:1px solid var(--border);position:relative;transition:background .2s;flex-shrink:0}
.lt-toggle input:checked ~ .lt-track{background:var(--foreground);border-color:var(--foreground)}
.lt-thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--background);box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.lt-toggle input:checked ~ .lt-track .lt-thumb{transform:translateX(1rem)}
</style>
<script>
function toggleLicensePanel(type, enabled) {
  var fields = document.getElementById('fields-' + type);
  if (fields) {
    fields.style.opacity       = enabled ? '1'    : '.45';
    fields.style.pointerEvents = enabled ? 'auto' : 'none';
  }
}

function toggleRelease(enabled) {
  var panel = document.getElementById('release-fields');
  var fileInput = document.getElementById('release_file');
  panel.style.display = enabled ? 'block' : 'none';
  // Clear file when hiding so it isn't accidentally submitted
  if (!enabled && fileInput) fileInput.value = '';
}

function fileChosen(input) {
  var info = document.getElementById('file-info');
  if (input.files && input.files[0]) {
    var f    = input.files[0];
    var size = f.size > 1048576
      ? (f.size / 1048576).toFixed(1) + ' MB'
      : (f.size / 1024).toFixed(0) + ' KB';
    info.textContent = f.name + '  (' + size + ')';
    info.style.display = 'block';
  } else {
    info.style.display = 'none';
  }
}

document.addEventListener('DOMContentLoaded', function() {
  ['regular','extended'].forEach(function(t) {
    var cb = document.querySelector('input[name="' + t + '_enabled"][type="checkbox"]');
    if (cb) toggleLicensePanel(t, cb.checked);
  });

  // Re-open release section if validation failed with a file error
  @if($errors->has('release_file') || old('release_channel'))
    document.getElementById('toggle-release').checked = true;
    toggleRelease(true);
  @endif
});
</script>
@endsection
