@extends('admin.layout')

@section('content')

<section class="py-5 bg-light">
  <div class="container">
    <div class="card shadow-sm">
      <div class="card-header bg-primary text-white">
        <h5 class="mb-0">Create Product</h5>
      </div>
      <div class="card-body">
        <form action="{{ route('admin.create_project_post') }}" method="POST" enctype="multipart/form-data">
          @csrf

          <!-- Product Name -->
          <div class="mb-3">
            <label for="productName" class="form-label">Product Name:</label>
            <input type="text" class="form-control" id="productName" name="productName" value="{{ old('productName') }}" required>
          </div>

          <!-- Product Logo Upload -->
          <div class="mb-3">
            <label for="productLogo" class="form-label">Upload Product Logo:</label>
            <input type="file" class="form-control" id="productLogo" name="productLogo" accept="image/*" required>
            <small class="form-text text-muted">Accepted formats: JPG, PNG, SVG</small>
          </div>

          <!-- Short Description -->
          <div class="mb-3">
            <label for="shortDesc" class="form-label">Short Description (Max 25 sentences):</label>
            <textarea class="form-control" id="shortDesc" name="shortDesc" rows="4" required>{{ old('shortDesc') }}</textarea>
            <small id="sentenceCounter" class="text-muted">0 / 25 sentences</small>
          </div>

          <!-- Submit Button -->
          <button type="submit" class="btn btn-success">Create Product</button>
        </form>

        <!-- Success Message -->
        @if(session('success'))
        <div class="alert alert-success mt-4">
          ✅ {{ session('success') }}
        </div>
        @endif
      </div>
    </div>
  </div>
</section>

<script>
  // Sentence counter
  const textarea = document.getElementById('shortDesc');
  const sentenceCounter = document.getElementById('sentenceCounter');

  textarea.addEventListener('input', () => {
    const sentenceCount = textarea.value.split(/[.!?]+/).filter(Boolean).length;
    sentenceCounter.textContent = `${sentenceCount} / 25 sentences`;
    textarea.setCustomValidity(sentenceCount > 25 ? "Maximum 25 sentences allowed." : "");
  });
</script>





@endsection