@extends('layout.admin')

@section('content')
<div class="mx-auto px-2 sm:px-3 md:px-4 max-w-3xl">

  {{-- breadcrumb + heading (কম স্পেস) --}}
  <div class="flex items-center justify-between gap-2 flex-wrap mb-2 mt-0.5">
    <div class="flex items-center gap-1.5 text-[13px] text-gray-500">
      <a href="{{ route('admin.pd-categories.index') }}" class="hover:text-gray-700 inline-flex items-center">
        <i class="fa-solid fa-layer-group text-[12px]"></i>
        <span class="ml-1">Categories</span>
      </a>
      <span class="mx-1">/</span>
      <span class="text-gray-700 font-medium">Edit</span>
    </div>
    <a href="{{ route('admin.pd-categories.index') }}" class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 px-3 py-1.5 hover:bg-gray-50 text-sm">
      <i class="fa-solid fa-arrow-left text-[12px]"></i>
      Back
    </a>
  </div>

  {{-- errors --}}
  @if ($errors->any())
    <div class="mb-2 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-rose-800 text-sm">
      <div class="font-semibold mb-1"><i class="fa-solid fa-triangle-exclamation mr-1.5"></i> Please fix:</div>
      <ul class="list-disc pl-4 space-y-0.5">
        @foreach ($errors->all() as $error)
          <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
  @endif

  {{-- card --}}
  <div class="rounded-xl bg-white shadow-sm border border-gray-100">
    <div class="px-3 py-2.5 border-b border-gray-100">
      <h1 class="text-[18px] font-semibold tracking-tight leading-6">Edit Category</h1>
      <p class="text-[12px] text-gray-500 mt-0.5">নাম আপডেট করুন, ছবি রিপ্লেস করতে চাইলে নতুন ফাইল দিন, স্ট্যাটাস সেভ করুন।</p>
    </div>

    <form action="{{ route('admin.pd-categories.update',$category->id) }}" method="POST" enctype="multipart/form-data" class="p-3 grid gap-3">
      @csrf

      {{-- Name --}}
      <div class="grid gap-1.5">
        <label for="name" class="text-sm font-medium text-gray-700">Name <span class="text-rose-500">*</span></label>
        <input
          id="name"
          type="text"
          name="name"
          value="{{ old('name',$category->name) }}"
          required
          placeholder="e.g. Mobile Accessories"
          class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-[15px]"
        />
      </div>

      {{-- Replace Photo (drag & drop) --}}
      <div class="grid gap-1.5">
        <label class="text-sm font-medium text-gray-700">Replace Photo</label>

        <div class="flex items-center gap-3">
          @if($category->photo)
            <img src="{{ asset($category->photo) }}" alt="current" class="w-14 h-14 rounded-md object-cover border border-gray-200">
          @endif

          <div class="flex-1">
            <div
              id="dropzone"
              class="relative rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 px-3 py-4 text-center transition hover:bg-gray-100"
            >
              <input id="photo" name="photo" type="file" accept="image/*" class="absolute inset-0 opacity-0 cursor-pointer w-full h-full" />
              <div class="pointer-events-none">
                <i class="fa-regular fa-image text-2xl"></i>
                <div class="mt-1 text-sm text-gray-600">Click to upload or drag & drop</div>
                <div class="text-[11px] text-gray-500">jpg/jpeg/png/webp, max 2MB</div>
              </div>
            </div>

            {{-- New preview --}}
            <div id="previewWrap" class="hidden items-center gap-2 mt-2">
              <img id="previewImg" src="" alt="preview" class="w-14 h-14 rounded-md object-cover border border-gray-200" />
              <button type="button" id="removePhoto" class="inline-flex items-center gap-1.5 rounded-md border border-gray-200 px-3 py-1.5 hover:bg-gray-50 text-sm">
                <i class="fa-solid fa-xmark text-[12px]"></i>
                Remove
              </button>
            </div>
          </div>
        </div>
      </div>

      {{-- Status --}}
      <div class="flex items-center gap-2">
        <input id="status" type="checkbox" name="status" value="1" {{ $category->status ? 'checked' : '' }} class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
        <label for="status" class="text-sm text-gray-700">Active</label>
      </div>

      {{-- Actions --}}
      <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 pt-1">
        <button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-indigo-600 bg-indigo-600 px-3.5 py-2 text-white hover:bg-indigo-700 text-sm">
          <i class="fa-solid fa-floppy-disk text-[12px]"></i>
          Update
        </button>

        <a href="{{ route('admin.pd-categories.index') }}" class="inline-flex items-center justify-center gap-1.5 rounded-lg border border-gray-200 px-3.5 py-2 hover:bg-gray-50 text-sm">
          <i class="fa-solid fa-list text-[12px]"></i>
          Back to List
        </a>
      </div>
    </form>
  </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const input = document.getElementById('photo');
  const dropzone = document.getElementById('dropzone');
  const previewWrap = document.getElementById('previewWrap');
  const previewImg = document.getElementById('previewImg');
  const removeBtn = document.getElementById('removePhoto');

  const showPreview = (file) => {
    if (!file) return;
    const url = URL.createObjectURL(file);
    previewImg.src = url;
    previewWrap.classList.remove('hidden');
  };

  input?.addEventListener('change', (e) => {
    const file = e.target.files?.[0];
    showPreview(file);
  });

  ;['dragenter','dragover'].forEach(evt => {
    dropzone?.addEventListener(evt, (e) => {
      e.preventDefault(); e.stopPropagation();
      dropzone.classList.add('bg-gray-100');
    }, false);
  });
  ;['dragleave','drop'].forEach(evt => {
    dropzone?.addEventListener(evt, (e) => {
      e.preventDefault(); e.stopPropagation();
      dropzone.classList.remove('bg-gray-100');
    }, false);
  });
  dropzone?.addEventListener('drop', (e) => {
    const dt = e.dataTransfer;
    const file = dt?.files?.[0];
    if (file) {
      input.files = dt.files; // attach for form submit
      showPreview(file);
    }
  });

  removeBtn?.addEventListener('click', () => {
    input.value = '';
    previewImg.src = '';
    previewWrap.classList.add('hidden');
  });
});
</script>
@endpush
@endsection