@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 Modules</h5>
      </div>
      <div class="card-body">
     <form action="{{ route('admin.create_modules_post') }}" method="POST" enctype="multipart/form-data">
    @csrf

    <!-- Select Project Dropdown -->
    <div class="mb-3">
        <label for="project_id" class="form-label">Select Project</label>
        <select class="form-control" id="project_id" name="projectId" required>
            <option value="">-- Select a project --</option>
            @foreach($projects as $project)
                <option value="{{ $project->id }}" {{ old('project_id') == $project->id ? 'selected' : '' }}>
                    {{ $project->project_name }}
                </option>
            @endforeach
        </select>
        @error('project_id')
            <small class="text-danger">{{ $message }}</small>
        @enderror
    </div>

  <!-- Module Name -->
<div class="mb-3">
    <label for="moduleName" class="form-label">Module Name</label>
    <input type="text" class="form-control" id="moduleName" name="moduleName" value="{{ old('moduleName') }}" required>
    @error('moduleName')
        <small class="text-danger">{{ $message }}</small>
    @enderror
</div>


    <!-- UI Screen Upload -->
    <div class="mb-3">
        <label for="productLogo" class="form-label">Upload UI Screen</label>
        <input type="file" class="form-control" id="productLogo" name="projectScreen" accept="image/*" required>
        <small class="form-text text-muted">Accepted formats: JPG, PNG, SVG</small>
        @error('productLogo')
            <small class="text-danger">{{ $message }}</small>
        @enderror
    </div>

    <!-- Submit Button -->
    <button type="submit" class="btn btn-success">Create Module</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