@extends('admin.layouts.app')

@php
  $pageTitle = $pageTitle ?? 'Edit Certificate';
@endphp

@section('panel')

<div class="row">
  <div class="col-12">
    <div class="card b-radius--10">
      <div class="card-body">
        <form method="POST" action="{{ route('admin.certificates.update', $item->id) }}" enctype="multipart/form-data">
          @csrf
          @method('PUT')

          <div class="row">

            <div class="col-lg-6">
              <div class="form-group">
                <label class="form-label">Title <span class="text-danger">*</span></label>
                <input type="text" name="title" value="{{ old('title', $item->title) }}" class="form-control @error('title') is-invalid @enderror" required>
                @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror
              </div>
            </div>

            <div class="col-lg-3 col-md-6">
              <div class="form-group">
                <label class="form-label">Sort</label>
                <input type="number" name="sort_order" value="{{ old('sort_order', $item->sort_order) }}" class="form-control @error('sort_order') is-invalid @enderror" min="0">
                @error('sort_order') <div class="invalid-feedback">{{ $message }}</div> @enderror
              </div>
            </div>

            <div class="col-lg-3 col-md-6">
              <div class="form-group">
                <label class="form-label d-block">Status</label>
                <div class="form-check form-switch">
                  <input class="form-check-input" type="checkbox" id="activeSwitch" name="is_active" value="1" {{ old('is_active', $item->is_active) ? 'checked' : '' }}>
                  <label class="form-check-label" for="activeSwitch">Active</label>
                </div>
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group">
                <label class="form-label">Current Image</label>
                <div class="border rounded p-2" style="background:#f7f8fa;">
                  @if($item->image_path)
                    <img src="{{ asset($item->image_path) }}" alt="image" class="rounded w-100" style="max-height:260px;object-fit:cover;">
                  @else
                    <div class="text-muted text-center py-5">No image</div>
                  @endif
                </div>
              </div>
            </div>

            <div class="col-lg-6">
              <div class="form-group">
                <label class="form-label">Replace Image</label>
                <input type="file" name="image" class="form-control @error('image') is-invalid @enderror" accept=".jpg,.jpeg,.png,.webp" id="certImageInput">
                @error('image') <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> Update
              </button>
            </div>

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

@endsection

@push('breadcrumb-plugins')
  <a href="{{ route('admin.certificates.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('certImageInput');
  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