@extends('crm.master')

@section('title', isset($category) ? 'Edit Category' : 'New Category')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">

  <!-- Page Header -->
  <div class="row mb-6">
    <div class="col-12">
      <div class="d-flex align-items-center justify-content-between">
        <div>
          <h4 class="mb-1">{{ isset($category) ? 'Edit Category' : 'New Category' }}</h4>
          <p class="text-muted mb-0">{{ isset($category) ? 'Update category details' : 'Create a new inventory category' }}</p>
        </div>
        <a href="{{ route('crm.categories.index') }}" class="btn btn-label-secondary">
          <i class="icon-base ti tabler-arrow-left me-2 icon-14px"></i> Back
        </a>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-8">
      <div class="card mb-6">
        <div class="card-body">
          @include('crm.components.alerts')

          <form
            action="{{ isset($category) ? route('crm.categories.update', $category->hash_id) : route('crm.categories.store') }}"
            id="crud-form"
            method="POST"
            enctype="multipart/form-data">
            @csrf
            @if(isset($category))
              @method('PUT')
            @endif

            <div class="row">

              <!-- Category Name -->
              <div class="col-12 mb-4">
                <label for="name" class="form-label">Category Name <span class="text-danger">*</span></label>
                <input
                  type="text"
                  class="form-control @error('name') is-invalid @enderror"
                  id="name"
                  name="name"
                  placeholder="Enter category name"
                  value="{{ old('name', $category->name ?? '') }}"
                  required />
                @error('name')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Category Image -->
              <div class="col-12 mb-4">
                <label class="form-label">Category Image</label>
                <div>
                  @if(isset($category) && $category->image)
                    <div class="mb-2">
                      <img src="{{ asset('storage/categories/' . $category->image) }}"
                           class="rounded" width="80" height="80"
                           style="object-fit:cover;" alt="Current image">
                      <p class="text-muted small mt-1">Current image. Upload a new one to replace it.</p>
                    </div>
                  @endif
                  <input
                    type="file"
                    class="form-control @error('image') is-invalid @enderror"
                    id="image"
                    name="image"
                    accept="image/*" />
                  <div class="form-text">Image used when grid category layout is applied. Max 2MB.</div>
                  @error('image')
                    <span class="invalid-feedback">{{ $message }}</span>
                  @enderror
                </div>
              </div>

              <!-- Description -->
              <div class="col-12 mb-4">
                <label for="description" class="form-label">Description</label>
                <textarea
                  class="form-control @error('description') is-invalid @enderror"
                  id="description"
                  name="description"
                  rows="3"
                  placeholder="Optional description">{{ old('description', $category->description ?? '') }}</textarea>
                @error('description')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Weight -->
              <div class="col-md-4 mb-4">
                <label for="weight" class="form-label">Weight</label>
                <input
                  type="number"
                  class="form-control @error('weight') is-invalid @enderror"
                  id="weight"
                  name="weight"
                  min="0"
                  value="{{ old('weight', $category->weight ?? 0) }}" />
                <div class="form-text">Higher number = displayed first. 0 for default.</div>
                @error('weight')
                  <span class="invalid-feedback">{{ $message }}</span>
                @enderror
              </div>

              <!-- Status -->
              <div class="col-md-4 mb-4">
                <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                <select
                  class="form-select @error('status') is-invalid @enderror"
                  id="status"
                  name="status"
                  required>
                  <option value="active"   {{ old('status', $category->status ?? 'active') === 'active'   ? 'selected' : '' }}>Active</option>
                  <option value="hidden"   {{ old('status', $category->status ?? '') === 'hidden'   ? 'selected' : '' }}>Hidden</option>
                  <option value="archived" {{ old('status', $category->status ?? '') === 'archived' ? 'selected' : '' }}>Archived</option>
                </select>
                @error('status')
                  <span class="invalid-feedback d-block">{{ $message }}</span>
                @enderror
              </div>

              <!-- Color -->
              <div class="col-md-4 mb-4">
                <label for="color" class="form-label">Color</label>
                <select
                  class="form-select @error('color') is-invalid @enderror"
                  id="color"
                  name="color">
                  @php
                    $colors = [
                      'none'    => 'None',
                      'red'     => 'Red',
                      'orange'  => 'Orange',
                      'yellow'  => 'Yellow',
                      'green'   => 'Green',
                      'teal'    => 'Teal',
                      'sky'     => 'Sky',
                      'blue'    => 'Blue',
                      'violet'  => 'Violet',
                      'fuchsia' => 'Fuchsia',
                      'pink'    => 'Pink',
                      'gray'    => 'Gray',
                    ];
                    $colorHex = [
                      'red'=>'#ef4444','orange'=>'#f97316','yellow'=>'#eab308',
                      'green'=>'#22c55e','teal'=>'#14b8a6','sky'=>'#0ea5e9',
                      'blue'=>'#3b82f6','violet'=>'#8b5cf6','fuchsia'=>'#d946ef',
                      'pink'=>'#ec4899','gray'=>'#6b7280',
                    ];
                    $selectedColor = old('color', $category->color ?? 'none');
                  @endphp
                  @foreach($colors as $val => $label)
                    <option value="{{ $val }}" {{ $selectedColor === $val ? 'selected' : '' }}>
                      {{ $label }}
                    </option>
                  @endforeach
                </select>
                <div class="mt-2">
                  <span id="color-preview" style="display:inline-block;width:16px;height:16px;border-radius:50%;vertical-align:middle;border:1px solid #ccc;"></span>
                  <span id="color-preview-label" class="ms-1 small text-muted"></span>
                </div>
                @error('color')
                  <span class="invalid-feedback d-block">{{ $message }}</span>
                @enderror
              </div>

            </div>

            <!-- Submit -->
            <div class="mt-2">
              <button type="button" id="add-edit-page-sbt-btn" class="btn btn-primary">
                <i class="icon-base ti tabler-check me-2 icon-14px"></i>
                {{ isset($category) ? 'Update Category' : 'Create' }}
              </button>
              <a href="{{ route('crm.categories.index') }}" class="btn btn-label-secondary ms-2">
                <i class="icon-base ti tabler-x me-2 icon-14px"></i>
                Cancel
              </a>
            </div>

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

</div>
@endsection

@section('page-script')
<script>
  const colorHex = {
    none:'', red:'#ef4444', orange:'#f97316', yellow:'#eab308',
    green:'#22c55e', teal:'#14b8a6', sky:'#0ea5e9', blue:'#3b82f6',
    violet:'#8b5cf6', fuchsia:'#d946ef', pink:'#ec4899', gray:'#6b7280'
  };

  function updateColorPreview(val) {
    const preview = document.getElementById('color-preview');
    const label   = document.getElementById('color-preview-label');
    if (val && val !== 'none' && colorHex[val]) {
      preview.style.background = colorHex[val];
      preview.style.display = 'inline-block';
      label.textContent = val.charAt(0).toUpperCase() + val.slice(1);
    } else {
      preview.style.background = 'transparent';
      label.textContent = '';
    }
  }

  document.getElementById('color').addEventListener('change', function () {
    updateColorPreview(this.value);
  });

  // Init on page load
  updateColorPreview(document.getElementById('color').value);

  $(document).ready(function () {
    $('#add-edit-page-sbt-btn').click(function () {
      var validator = $('#crud-form').validate();
      if (validator.form() != false) {
        $('#crud-form')[0].submit();
      }
    });
  });
</script>
@endsection