@extends('layouts.admin')
@section('page-title','Bulk Upload')

@section('content')

<div class="grid2" style="align-items:start">

  {{-- LEFT: UPLOAD ZONE --}}
  <div>
    {{-- CSV UPLOAD --}}
    <div class="card" style="margin-bottom:20px">
      <div class="card-title">📊 Step 1 — Upload CSV</div>
      <p style="font-size:13px;color:var(--ink2);margin-bottom:20px">
        Upload a CSV file with product data. Each row becomes a product in your catalogue.
      </p>

      <form method="POST" action="{{ route('admin.bulk.csv') }}" enctype="multipart/form-data" id="csvForm">
        @csrf
        <div class="upload-zone" id="csvZone"
             onclick="document.getElementById('csvFile').click()"
             ondragover="event.preventDefault();this.classList.add('drag')"
             ondragleave="this.classList.remove('drag')"
             ondrop="handleCsvDrop(event)">
          <div style="font-size:48px;margin-bottom:12px">📊</div>
          <div style="font-family:var(--font-d);font-size:18px;font-weight:600;margin-bottom:6px" id="csvLabel">Drop CSV file here</div>
          <div style="font-size:13px;color:var(--ink2)">or click to browse · Max 10 MB</div>
        </div>
        <input type="file" id="csvFile" name="csv_file" accept=".csv,.txt" style="display:none"
               onchange="document.getElementById('csvLabel').textContent=this.files[0].name;this.form.submit()">
        @error('csv_file')<div class="invalid-feedback" style="display:block;margin-top:8px">{{ $message }}</div>@enderror
      </form>

      <div style="margin-top:16px;padding:14px;background:var(--surface2);border-radius:8px;font-size:12px;color:var(--ink2)">
        <strong style="color:var(--ink)">Required CSV columns:</strong><br>
        <code>name, category, price, cost_price, stock</code><br>
        <strong style="color:var(--ink);margin-top:6px;display:block">Optional columns:</strong><br>
        <code>description, badge, old_price</code>
      </div>

      <button type="button" class="btn btn-ghost" style="margin-top:12px;width:100%;justify-content:center" onclick="downloadTemplate()">
        ⬇️ Download CSV Template
      </button>
    </div>

    {{-- IMAGE UPLOAD --}}
    <div class="card">
      <div class="card-title">🖼️ Step 2 — Upload Images (Optional)</div>
      <p style="font-size:13px;color:var(--ink2);margin-bottom:16px">
        Name each image after the product slug (e.g. <code>airpods-ultra.jpg</code>).
        Images are matched automatically during import.
      </p>

      <div class="upload-zone" id="imgZone"
           onclick="document.getElementById('imgFiles').click()"
           ondragover="event.preventDefault();this.classList.add('drag')"
           ondragleave="this.classList.remove('drag')"
           ondrop="handleImgDrop(event)">
        <div style="font-size:48px;margin-bottom:12px">🖼️</div>
        <div style="font-family:var(--font-d);font-size:18px;font-weight:600;margin-bottom:6px">Drop images here</div>
        <div style="font-size:13px;color:var(--ink2)">JPG, PNG, WebP · Multiple files OK · Max 5 MB each</div>
      </div>
      <input type="file" id="imgFiles" accept="image/*" multiple style="display:none" onchange="handleImageFiles(this.files)">

      <div class="upload-preview" id="imgPreview"></div>

      <div id="imgUploadStatus" style="display:none;margin-top:12px;padding:10px 14px;border-radius:8px;background:var(--green-bg);color:var(--green);font-size:13px;font-weight:600"></div>
    </div>
  </div>

  {{-- RIGHT: MANUAL ADD --}}
  <div class="card">
    <div class="card-title">➕ Add Single Product</div>
    <form method="POST" action="{{ route('admin.products.store') }}" enctype="multipart/form-data">
      @csrf
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Product Name *</label>
          <input type="text" name="name" class="form-input @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
          @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
        </div>
        <div class="form-group">
          <label class="form-label">Category *</label>
          <select name="category" class="form-select">
            @foreach(['electronics','fashion','home','food'] as $cat)
              <option value="{{ $cat }}" {{ old('category')===$cat?'selected':'' }}>{{ ucfirst($cat) }}</option>
            @endforeach
          </select>
        </div>
      </div>
      <div class="form-row3">
        <div class="form-group">
          <label class="form-label">Sale Price ($) *</label>
          <input type="number" name="price" class="form-input @error('price') is-invalid @enderror" value="{{ old('price') }}" step="0.01" min="0" required>
        </div>
        <div class="form-group">
          <label class="form-label">Cost Price ($) *</label>
          <input type="number" name="cost_price" class="form-input @error('cost_price') is-invalid @enderror" value="{{ old('cost_price') }}" step="0.01" min="0" required>
        </div>
        <div class="form-group">
          <label class="form-label">Stock Qty *</label>
          <input type="number" name="stock" class="form-input @error('stock') is-invalid @enderror" value="{{ old('stock',0) }}" min="0" required>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Old Price ($)</label>
          <input type="number" name="old_price" class="form-input" value="{{ old('old_price') }}" step="0.01" min="0">
        </div>
        <div class="form-group">
          <label class="form-label">Low-Stock Alert At</label>
          <input type="number" name="low_stock_threshold" class="form-input" value="{{ old('low_stock_threshold',10) }}" min="1">
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label class="form-label">Badge</label>
          <input type="text" name="badge" class="form-input" value="{{ old('badge') }}" placeholder="New, Sale, Popular…">
        </div>
        <div class="form-group">
          <label class="form-label">Emoji Icon</label>
          <input type="text" name="emoji" class="form-input" value="{{ old('emoji','📦') }}" maxlength="4">
        </div>
      </div>
      <div class="form-group">
        <label class="form-label">Description</label>
        <textarea name="description" class="form-textarea">{{ old('description') }}</textarea>
      </div>
      <div class="form-group">
        <label class="form-label">Product Image</label>
        <input type="file" name="image" class="form-input" accept="image/*" style="padding:6px">
      </div>
      <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center">Add Product</button>
    </form>
  </div>

</div>
@endsection

@push('scripts')
<script>
// Image drag-drop
function handleImgDrop(e) {
  e.preventDefault();
  e.currentTarget.classList.remove('drag');
  handleImageFiles(e.dataTransfer.files);
}
function handleImageFiles(files) {
  const preview = document.getElementById('imgPreview');
  const fd = new FormData();
  let count = 0;
  Array.from(files).forEach(file => {
    if (!file.type.startsWith('image/')) return;
    fd.append('images[]', file);
    count++;
    const reader = new FileReader();
    reader.onload = e => {
      const div = document.createElement('div');
      div.className = 'preview-item';
      div.innerHTML = `<img src="${e.target.result}" alt="">`;
      preview.appendChild(div);
    };
    reader.readAsDataURL(file);
  });
  if (!count) return;

  fd.append('_token', document.querySelector('meta[name=csrf-token]').content);
  fetch('{{ route("admin.bulk.images") }}', { method:'POST', body:fd })
    .then(r => r.json())
    .then(d => {
      const el = document.getElementById('imgUploadStatus');
      el.style.display = 'block';
      el.textContent = `✅ ${d.uploaded} image(s) uploaded and stored for import.`;
    })
    .catch(() => alert('Image upload failed. Please try again.'));
}

// CSV drop without submit (just set filename)
function handleCsvDrop(e) {
  e.preventDefault();
  e.currentTarget.classList.remove('drag');
  const file = e.dataTransfer.files[0];
  if (!file || !file.name.endsWith('.csv')) { alert('Please drop a .csv file'); return; }
  const dt = new DataTransfer();
  dt.items.add(file);
  document.getElementById('csvFile').files = dt.files;
  document.getElementById('csvLabel').textContent = file.name;
  document.getElementById('csvForm').submit();
}

// Template download
function downloadTemplate() {
  const csv = [
    'name,category,price,cost_price,stock,description,badge,old_price',
    'Smart Watch,electronics,89.99,32.00,50,Fitness tracker with heart rate monitor,New,',
    'Cotton T-Shirt,fashion,24.99,8.00,120,Premium 100% cotton basic tee,,',
    'Aromatherapy Set,home,38.00,12.00,30,Essential oils and diffuser set,Popular,',
    'Organic Coffee,food,15.00,5.00,80,Single-origin arabica 250g,Organic,',
  ].join('\n');
  const a = document.createElement('a');
  a.href = 'data:text/csv;charset=utf-8,' + encodeURIComponent(csv);
  a.download = 'shopwave-products-template.csv';
  a.click();
}
</script>
@endpush