{{-- resources/views/admin/categories/create.blade.php --}}
@extends('admin.layouts.app')

@php
  $pageTitle = $pageTitle ?? 'Add Category';
@endphp

@section('panel')

@if ($errors->any())
  <div class="alert alert--danger mb-3">
    <strong class="d-block mb-2">Fix the errors below</strong>
    <ul class="mb-0">
      @foreach ($errors->all() as $e)
        <li>{{ $e }}</li>
      @endforeach
    </ul>
  </div>
@endif

<div class="row">
  <div class="col-12">
    <div class="card b-radius--10">
      <div class="card-body">
        <form method="POST" action="{{ route('admin.categories.store') }}" enctype="multipart/form-data">
          @csrf

          <div class="row">

            <div class="col-lg-6">
              <div class="form-group">
                <label class="form-label">Category Name <span class="text-danger">*</span></label>
                <input type="text"
                       name="name"
                       value="{{ old('name') }}"
                       class="form-control @error('name') is-invalid @enderror"
                       required>

                @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror

                <small class="text-muted d-block mt-1">
                  Slug will be auto-generated from name.
                </small>
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group">
                <label class="form-label">Serial Number <span class="text-danger">*</span></label>
                <input type="number"
                       name="serial"
                       value="{{ old('serial', $nextSerial ?? 999) }}"
                       class="form-control @error('serial') is-invalid @enderror"
                       min="1"
                       required>

                @error('serial') <div class="invalid-feedback">{{ $message }}</div> @enderror

                <small class="text-muted d-block mt-1">
                  Lower number will show first. Example: 1, 2, 3...
                </small>
              </div>
            </div>

            <div class="col-lg-12">
              <div class="form-group">
                <label class="form-label">Category Photo</label>
                <input type="file"
                       name="photo"
                       class="form-control @error('photo') is-invalid @enderror"
                       accept=".jpg,.jpeg,.png,.webp"
                       id="categoryPhotoInput">

                @error('photo') <div class="invalid-feedback">{{ $message }}</div> @enderror

                <div class="mt-2 d-none" id="previewBox">
                  <img id="previewImg"
                       class="rounded w-100"
                       style="max-height:260px;object-fit:cover;border:1px solid #e5e7eb;">
                </div>
              </div>
            </div>

            <div class="col-12">
              <button type="submit" class="btn btn--primary h-45 w-100">
                <i class="las la-save me-1"></i> Save
              </button>
            </div>

          </div>
        </form>
      </div>
    </div>
  </div>
</div>

@endsection

@push('breadcrumb-plugins')
  <a href="{{ route('admin.categories.index') }}" class="btn btn-outline--primary btn-sm">
    <i class="las la-arrow-left"></i> Back
  </a>
@endpush

@push('script')
<script>
(function(){
  const input = document.getElementById('categoryPhotoInput');
  const box = document.getElementById('previewBox');
  const img = document.getElementById('previewImg');

  if(!input || !box || !img) return;

  input.addEventListener('change', function(){
    const file = this.files && this.files[0];

    if(!file){
      box.classList.add('d-none');
      img.removeAttribute('src');
      return;
    }

    img.src = URL.createObjectURL(file);
    box.classList.remove('d-none');
  });
})();
</script>
@endpush