@extends('cms.layout')

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

@section('cms')
<form method="post" action="{{ route('cms.practice-areas.store') }}" novalidate enctype="multipart/form-data">
  @csrf
  <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') }}" maxlength="100" required>
            @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <small class="form-text text-muted">Max 100 chars. Slug will be generated automatically, you can edit it.</small>
          </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') }}" 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') }}" 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
            <small class="form-text text-muted">Use any Font Awesome class (AdminLTE ships FA). <a href="https://fontawesome.com/search?o=r&m=free" target="_blank">Browse icons</a>.</small>
            <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') }}" placeholder="https://...">
              @error('image_url')<div class="invalid-feedback">{{ $message }}</div>@enderror
              <small class="form-text text-muted">You can paste a URL or upload a file below.</small>
            </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') }}" 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 d-none">
                <div class="small text-muted mb-2">Preview</div>
                <img id="imagePreview" src="#" 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') }}</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') }}</textarea>
            @error('description')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <small class="form-text text-muted">Rich text supported.</small>
          </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', 0) }}" min="0" step="1">
            @error('display_order')<div class="invalid-feedback">{{ $message }}</div>@enderror
            <small class="form-text text-muted">Lower numbers appear first.</small>
          </div>

          <div class="custom-control custom-switch mb-3">
            <input class="custom-control-input" type="checkbox" name="active" value="1" id="active" {{ old('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')
  {{-- TinyMCE via CDN for rich text --}}
  <script src="https://cdn.jsdelivr.net/npm/tinymce@6.8.3/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    // Slugify helper
    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 = false;
    if (slugInput) {
      slugInput.addEventListener('input', () => { slugDirty = true; });
    }
    if (nameInput && slugInput) {
      nameInput.addEventListener('input', (e) => {
        if (!slugDirty || !slugInput.value) {
          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);
    }

    // Init TinyMCE
    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: prefer upload, fallback to URL
    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