@extends('layouts.admin')

@section('title', $product->exists ? 'Edit Produk' : 'Tambah Produk')
@section('active', 'produk')

@section('content')
<a href="{{ route('admin.produk.index') }}" class="btn btn-light-blue mb-3"><i class="bi bi-arrow-left me-1" aria-hidden="true"></i>Kembali</a>
<div class="card-soft p-4">
  <h2 class="h5 mb-4">{{ $product->exists ? 'Edit Produk: '.$product->name : 'Tambah Produk' }}</h2>
  @if ($errors->any())
    <div class="alert alert-danger" role="alert">
      <div class="fw-semibold mb-1">Data belum bisa disimpan:</div>
      <ul class="mb-0 small">
        @foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach
      </ul>
    </div>
  @endif
  <form action="{{ $product->exists ? route('admin.produk.update', $product) : route('admin.produk.store') }}" method="post" enctype="multipart/form-data" class="row g-3" data-once>
    @csrf
    <input type="hidden" name="inventory_version" value="{{ $product->inventory_version ?? 0 }}">
    @if ($product->exists) @method('PUT') @endif
    <div class="col-md-8">
      <label for="name" class="form-label">Nama produk</label>
      <input id="name" name="name" class="form-control @error('name') is-invalid @enderror" required maxlength="150" value="{{ old('name', $product->name) }}">
      @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4">
      <label for="category_id" class="form-label">Kategori</label>
      <select id="category_id" name="category_id" class="form-select @error('category_id') is-invalid @enderror" required>
        <option value="" disabled @selected(! old('category_id', $product->category_id))>Pilih kategori</option>
        @foreach ($categories as $category)
          <option value="{{ $category->id }}" @selected((int) old('category_id', $product->category_id) === $category->id)>{{ $category->name }}</option>
        @endforeach
      </select>
      @error('category_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4">
      <label for="price" class="form-label">Harga (Rp)</label>
      <input type="number" id="price" name="price" min="1000" max="100000000" step="500" class="form-control @error('price') is-invalid @enderror" required value="{{ old('price', $product->price) }}" inputmode="numeric">
      @error('price')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4">
      <label for="color" class="form-label">Warna</label>
      <input id="color" name="color" class="form-control @error('color') is-invalid @enderror" maxlength="60" placeholder="mis. Hitam" value="{{ old('color', $product->color) }}">
      @error('color')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4">
      <label for="is_active" class="form-label">Status</label>
      @php($aktif = (string) old('is_active', $product->is_active ? '1' : '0'))
      <select id="is_active" name="is_active" class="form-select">
        <option value="1" @selected($aktif === '1')>Aktif (tampil di toko)</option>
        <option value="0" @selected($aktif === '0')>Nonaktif (disembunyikan)</option>
      </select>
    </div>
    <div class="col-md-8">
      <label for="material" class="form-label">Bahan</label>
      <input id="material" name="material" class="form-control @error('material') is-invalid @enderror" maxlength="120" placeholder="mis. Cotton Combed 24s" value="{{ old('material', $product->material) }}">
      @error('material')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-md-4 d-flex align-items-end">
      <div class="form-check mb-2">
        <input type="hidden" name="is_featured" value="0">
        <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" @checked(old('is_featured', $product->is_featured))>
        <label class="form-check-label" for="is_featured">Tampilkan sebagai produk unggulan</label>
      </div>
    </div>
    <div class="col-12">
      <label for="description" class="form-label">Deskripsi</label>
      <textarea id="description" name="description" rows="4" class="form-control @error('description') is-invalid @enderror" maxlength="5000">{{ old('description', $product->description) }}</textarea>
      @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
    </div>
    <div class="col-12">
      <fieldset>
        <legend class="form-label fs-6">Stok per ukuran & warna</legend>
        <p class="text-muted-soft small">Setiap baris adalah satu kombinasi warna dan ukuran. Isi 0 untuk stok habis. Maksimal 40 kombinasi.</p>
        @php($rows = old('variants', $product->exists ? $product->variants->where('is_available',true)->map(fn($v)=>['color'=>$v->color,'size'=>$v->size,'stock'=>$v->stock])->values()->all() : [['color'=>'','size'=>'M','stock'=>0]]))
        <div data-variant-rows>
        @foreach($rows as $i=>$row)
          <div class="variant-edit-row" data-variant-row>
            <div><label class="form-label small" for="variant-color-{{ $i }}">Warna</label><input id="variant-color-{{ $i }}" name="variants[{{ $i }}][color]" class="form-control" value="{{ $row['color'] ?? '' }}" required maxlength="60" placeholder="Mis. Hitam"></div>
            <div><label class="form-label small" for="variant-size-{{ $i }}">Ukuran</label><select id="variant-size-{{ $i }}" name="variants[{{ $i }}][size]" class="form-select" required>@foreach($sizes as $size)<option @selected(($row['size'] ?? '')===$size)>{{ $size }}</option>@endforeach</select></div>
            <div><label class="form-label small" for="variant-stock-{{ $i }}">Stok</label><input id="variant-stock-{{ $i }}" name="variants[{{ $i }}][stock]" class="form-control" type="number" min="0" max="100000" value="{{ $row['stock'] ?? 0 }}" required></div>
            <button type="button" class="btn btn-outline-danger" data-remove-variant aria-label="Hapus kombinasi">Hapus</button>
          </div>
        @endforeach
        </div>
        <button type="button" class="btn btn-light-blue mt-2" data-add-variant><i class="bi bi-plus-lg me-1" aria-hidden="true"></i>Tambah kombinasi</button>
        @error('variants')<div class="text-danger small mt-2">{{ $message }}</div>@enderror
        @error('inventory_version')<div class="alert alert-warning mt-3">{{ $message }} <a href="{{ url()->current() }}">Muat ulang</a></div>@enderror
      </fieldset>
    </div>
    <div class="col-md-6">
      <label for="image" class="form-label">Foto produk</label>
      <input type="file" id="image" name="image" accept="image/jpeg,image/png,image/webp" class="form-control @error('image') is-invalid @enderror" data-preview="#imagePreview" data-max-size="3145728" aria-describedby="image-help">
      @error('image')<div class="invalid-feedback">{{ $message }}</div>@enderror
      <small id="image-help" class="text-muted-soft">JPG/PNG/WEBP, maks 3 MB, rasio 4:3 disarankan.{{ $product->exists ? ' Biarkan kosong untuk mempertahankan foto lama.' : '' }}</small>
    </div>
    <div class="col-md-6 d-flex align-items-end">
      <img id="imagePreview" src="{{ $product->exists ? $product->image_url : asset('assets/img/placeholder.webp') }}" width="120" height="90" class="rounded border" style="object-fit:cover" alt="Pratinjau foto produk">
    </div>
    <div class="col-12">
      <label for="gallery" class="form-label">Galeri foto tambahan (hingga 5 file)</label>
      <input id="gallery" name="gallery[]" type="file" multiple accept="image/jpeg,image/png,image/webp" class="form-control" data-gallery-preview="#newGalleryPreview">
      <p class="form-text">Maksimal 5 foto tambahan; pilih beberapa file sekaligus, masing-masing 3 MB / 6000×6000 px. Tambahkan foto depan, belakang, detail bahan, dan model yang relevan. Tidak perlu mengganti foto utama.</p>
      <div id="newGalleryPreview" class="gallery-admin-grid mt-2"></div>
      @error('gallery')<div class="text-danger">{{ $message }}</div>@enderror
      <div class="gallery-admin-grid mt-3">@foreach($product->images as $img)<label class="gallery-admin-card"><img src="{{ $img->url }}" alt="{{ $product->name }} — foto galeri" loading="lazy"><span><input type="checkbox" name="remove_images[]" value="{{ $img->id }}"> Hapus foto ini</span></label>@endforeach</div>
    </div>
    <div class="col-12 d-flex flex-wrap gap-2">
      <button type="submit" class="btn btn-gradient" data-loading-text="Menyimpan..."><i class="bi bi-check2 me-1" aria-hidden="true"></i>Simpan</button>
      <a href="{{ route('admin.produk.index') }}" class="btn btn-light-blue">Batal</a>
    </div>
  </form>
</div>
@endsection