@extends('cms.layout')

@section('content_header')
  <h1 class="mb-0">Edit Practice Area</h1>
@endsection

@section('cms')
<form method="post" action="{{ route('cms.practice-areas.update',$item) }}" novalidate enctype="multipart/form-data">
  @csrf @method('PUT')
  <div class="row">
    <div class="col-lg-8">
      <div class="card shadow-sm mb-3">
        <div class="card-body">
          <div class="form-group mb-3">
            <label class="form-label">Name</label>
            <input name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name', $item->name) }}" maxlength="100" required>
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>

          <div class="form-group mb-3">
            <label class="form-label">Slug</label>
            <div class="input-group">
              <span class="input-group-text text-muted">/practice/</span>
              <input name="slug" id="slug" class="form-control @error('slug') is-invalid @enderror" value="{{ old('slug', $item->slug) }}" placeholder="auto-generated">
            </div>
            @error('slug')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
          </div>

          <div class="form-group mb-3">
            <label class="form-label">Icon</label>
            <div class="input-group align-items-center">
              <input name="icon" id="icon" class="form-control @error('icon') is-invalid @enderror" value="{{ old('icon', $item->icon) }}" list="iconList" placeholder="e.g. fas fa-gavel">
              <span class="input-group-text bg-white"><i id="iconPreview" class="text-secondary"></i></span>
            </div>
            @error('icon')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            <datalist id="iconList">
              <option value="fas fa-gavel"></option>
              <option value="fas fa-scale-balanced"></option>
              <option value="fas fa-file-contract"></option>
              <option value="fas fa-shield-alt"></option>
              <option value="fas fa-handshake"></option>
              <option value="fas fa-briefcase"></option>
              <option value="fas fa-balance-scale"></option>
            </datalist>
          </div>

          <div class="row g-3 mb-3">
            <div class="col-md-8">
              <label class="form-label">Header Image URL</label>
              <input type="url" name="image_url" class="form-control @error('image_url') is-invalid @enderror" value="{{ old('image_url', $item->image_url) }}" placeholder="https://...">
              @error('image_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-md-4">
              <label class="form-label">Upload Image</label>
              <input type="file" name="image_upload" class="form-control @error('image_upload') is-invalid @enderror" accept="image/*">
              @error('image_upload')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-12">
              <label class="form-label">Image Alt Text</label>
              <input type="text" name="image_alt" class="form-control @error('image_alt') is-invalid @enderror" value="{{ old('image_alt', $item->image_alt) }}" maxlength="150" placeholder="Short description for accessibility & SEO">
              @error('image_alt')<div class="invalid-feedback">{{ $message }}</div>@enderror
            </div>
            <div class="col-12">
              <div id="imagePreviewWrap" class="border rounded p-3 {{ $item->image_url ? '' : 'd-none' }}">
                <div class="small text-muted mb-2">Preview</div>
                <img id="imagePreview" src="{{ $item->image_url }}" alt="Preview" class="img-fluid rounded" style="max-height:260px;object-fit:cover">
              </div>
            </div>
          </div>

          <div class="form-group mb-3">
            <label class="form-label">Excerpt</label>
            <textarea name="excerpt" id="excerpt" class="form-control @error('excerpt') is-invalid @enderror" rows="2" maxlength="160">{{ old('excerpt', $item->excerpt) }}</textarea>
            @error('excerpt')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <div class="d-flex justify-content-between mt-1">
              <small class="text-muted">Short summary (used on cards/SEO).</small>
              <small id="excerptCount" class="text-muted">0/160</small>
            </div>
          </div>

          <div class="form-group mb-0">
            <label class="form-label">Description</label>
            <textarea name="description" id="description" class="form-control @error('description') is-invalid @enderror" rows="10">{{ old('description', $item->description) }}</textarea>
            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      <div class="card shadow-sm mb-3">
        <div class="card-body">
          <div class="form-group mb-3">
            <label class="form-label">Display Order</label>
            <input type="number" name="display_order" class="form-control @error('display_order') is-invalid @enderror" value="{{ old('display_order', $item->display_order) }}" min="0" step="1">
            @error('display_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
          </div>

          <div class="custom-control custom-switch mb-3">
            <input class="custom-control-input" type="checkbox" name="active" value="1" id="active" {{ old('active', $item->active) ? 'checked' : '' }}>
            <label class="custom-control-label" for="active">Active</label>
          </div>

          <div class="d-grid gap-2">
            <button class="btn btn-primary">Save</button>
            <a href="{{ route('cms.practice-areas.index') }}" class="btn btn-outline-secondary">Cancel</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

@section('js')
  <script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    function slugify(text){
      return text.toString().normalize('NFKD').replace(/[\u0300-\u036f]/g,'').toLowerCase().replace(/[^a-z0-9\s-]/g, '').trim().replace(/[\s-]+/g, '-').replace(/-+/g, '-');
    }
    const nameInput = document.querySelector('input[name="name"]');
    const slugInput = document.getElementById('slug');
    const iconInput = document.getElementById('icon');
    const iconPreview = document.getElementById('iconPreview');
    const excerpt = document.getElementById('excerpt');
    const excerptCount = document.getElementById('excerptCount');

    let slugDirty = !!(slugInput && slugInput.value);
    if (slugInput) { slugInput.addEventListener('input', () => { slugDirty = true; }); }
    if (nameInput && slugInput) {
      nameInput.addEventListener('input', (e) => {
        if (!slugDirty) { slugInput.value = slugify(e.target.value); }
      });
    }
    function updateIconPreview(){ iconPreview.className = (iconInput.value || '').trim() + ' fa-2x'; if (!iconInput.value) iconPreview.classList.add('text-secondary'); }
    if (iconInput && iconPreview){ updateIconPreview(); iconInput.addEventListener('input', updateIconPreview); iconInput.addEventListener('change', updateIconPreview); }
    function updateCounter(){ const val = excerpt.value || ''; excerptCount.textContent = `${val.length}/160`; }
    if (excerpt && excerptCount){ updateCounter(); excerpt.addEventListener('input', updateCounter); }

    tinymce.init({
      selector: '#description', menubar: false, plugins: 'lists link autolink code', toolbar: 'bold italic underline | bullist numlist | link | removeformat | code', branding: false, height: 320, content_style: 'body{font-family:Inter, Roboto, sans-serif; font-size:14px}', link_default_target: '_blank', convert_urls: false,
    });

  // Image preview
  const imgUrl = document.querySelector('input[name="image_url"]');
  const imgFile = document.querySelector('input[name="image_upload"]');
  const wrap = document.getElementById('imagePreviewWrap');
  const img = document.getElementById('imagePreview');
  function showPreview(src){ if(!src){wrap.classList.add('d-none'); return;} img.src = src; wrap.classList.remove('d-none'); }
  if (imgUrl){ imgUrl.addEventListener('input', () => showPreview(imgUrl.value)); }
  if (imgFile){ imgFile.addEventListener('change', (e) => { const f = e.target.files && e.target.files[0]; if (!f) return; const reader = new FileReader(); reader.onload = ev => showPreview(ev.target.result); reader.readAsDataURL(f); }); }
  </script>
@endsection
@endsection