@include('header')
<section class="body-section">
  <div class="content-width-container split-view">
    @include('left-split-view')
    <div class="primary-content-container">      
      <div class="generate-flux-image-container">
        <div class="form-wrapper">
            <h2 class="form-title">Flux Image Generator</h2>
            <p class="form-subtitle">Create stunning AI-generated images</p>

            <form method="POST" enctype="multipart/form-data" action="{{ route('ai.image.generate') }}" id="generate-ai-image">
                @csrf
                <div class="form-group">
                    <label for="email">Email Address</label>
                    <input type="email" id="email" name="email" 
                        value="{{ old('email', auth()->user()->email) }}" 
                        placeholder="your@email.com" 
                        class="form-input @error('email') is-form-data-invalid @enderror">
                    @error('email')
                        <span class="invalid-input-error-message">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="image_prompt">Image Prompt</label>
                    <textarea id="image_prompt" name="image_prompt" rows="3"
                            placeholder="Describe the image you want to generate..."
                            class="form-textarea @error('image_prompt') is-form-data-invalid @enderror">{{ old('image_prompt') }}</textarea>
                    @error('image_prompt')
                        <span class="invalid-input-error-message">{{ $message }}</span>
                    @enderror
                </div>

                <button type="submit" class="form-button">Generate Image</button>
            </form>

            <!-- Pop-up Modal -->
            <div id="imageModal" class="flux-image-modal hidden">
                <div class="modal-content">
                    <a id="download-image" href="#" download class="download-btn">Download Image</a>
                    <span class="close-image-modal">&times;</span>
                    <img id="generated-image" src="" alt="Generated Image" style="max-width: 100%; height: auto;">
                </div>
            </div>
            @if(session('success'))
                <div class="alert-success">{{ session('success') }}</div>
            @endif
        </div>
      </div>
    </div>
  </div>
</section>
@include('footer')