@extends('layouts.app')

@section('content')
    <div class="container my-5">


        <!-- Notification Messages -->
        <div class="container-fluid pt-4 px-4">
            @if (session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert"
                    style="font-size: 18px; padding: 20px; border-left: 6px solid #be3a83; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <i class="fa fa-check-circle me-2" style="font-size: 24px;"></i>
                    <strong>Success!</strong> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
                        style="position: absolute; right: 20px; top: 20px;"></button>
                </div>
            @endif

            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert"
                    style="font-size: 18px; padding: 20px; border-left: 6px solid #dc3545; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
                    <i class="fa fa-exclamation-circle me-2" style="font-size: 24px;"></i>
                    <strong>Error!</strong> {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"
                        style="position: absolute; right: 20px; top: 20px;"></button>
                </div>
            @endif
        </div>



        <div class="card shadow-lg rounded-lg">
            <div class="card-header bg-secondary text-white">
                <h2 class="h4">Add New Article</h2>
            </div>
            <div class="card-body">
                <form id="articleForm" action="{{ route('articles.add-article') }}" method="POST"
                    enctype="multipart/form-data">
                    @csrf

                    <!-- Article Title -->
                    <div class="form-group">
                        <label for="article_title">Post Title*</label>
                        <input type="text" class="form-control @error('article_title') is-invalid @enderror"
                            id="article_title" name="article_title" value="{{ old('article_title') }}" required>
                        @error('article_title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Headline Checkbox -->
                    <div class="form-group">
                        <label for="headline">Is it a Headline?</label>
                        <input type="checkbox" id="headline" name="headline" value="yes"
                            {{ old('headline') == 'yes' ? 'checked' : '' }}>
                        @error('headline')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Article Photo -->
                    <div class="form-group">
                        <label for="article_photo">Article Photo*</label>
                        <input type="file" class="form-control @error('article_photo') is-invalid @enderror"
                            id="article_photo" name="article_photo" onchange="validateArticleImage(event)" accept="image/*">
                        <p class="small text-muted mt-2">Accepted formats: JPG, PNG, GIF (Upload Max size: 300*300px)</p>
                        @error('article_photo')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <div id="article-photo-preview" class="mt-2"></div>
                    </div>

                    <!-- Article PDF -->
                    <div class="form-group">
                        <label for="pdf_file">Article PDF</label>
                        <input type="file" class="form-control @error('pdf_file') is-invalid @enderror" id="pdf_file"
                            name="pdf_file" accept="application/pdf">
                        <p class="small text-muted mt-2">Accepted formats: PDF (Max size: 10MB)</p>
                        @error('pdf_file')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Article Category -->
                    <div class="form-group">
                        <label for="article_category_id">Article Category*</label>
                        <select class="form-control @error('article_category_id') is-invalid @enderror"
                            id="article_category_id" name="article_category_id" required>
                            <option value="">Select Category</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}"
                                    {{ old('article_category_id') == $category->id ? 'selected' : '' }}>
                                    {{ $category->category_name }}
                                </option>
                            @endforeach
                        </select>
                        @error('article_category_id')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Article Description -->
                    <div class="form-group">
                        <label for="article_description">Description</label>
                        <textarea class="form-control @error('article_description') is-invalid @enderror" id="article_description"
                            name="article_description" rows="5" required>{{ old('article_description') }}</textarea>
                        @error('article_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" class="btn btn-primary w-15 mt-3">
                        Submit
                    </button>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/6.8.2/tinymce.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            tinymce.init({
                selector: '#article_description',
                plugins: 'lists link image table code help wordcount',
                toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
                menubar: false,
                height: 200,
                setup: function(editor) {
                    editor.on('change', function() {
                        tinymce
                            .triggerSave(); // Ensures TinyMCE updates the underlying textarea
                    });
                }
            });
            document.getElementById('articleForm').addEventListener('submit', function() {
                tinymce.triggerSave();
            });

        });
    </script>
    <script>
        // Auto dismiss alerts after 5 seconds
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(function() {
                var alerts = document.querySelectorAll('.alert');
                alerts.forEach(function(alert) {
                    var bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                });
            }, 5000);
        });
    </script>


    <script>
        function validateArticleImage(event) {
            const file = event.target.files[0];
            if (!file) return;

            const img = new Image();
            const reader = new FileReader();

            reader.onload = function(e) {
                img.onload = function() {
                    if (img.width === 300 && img.height === 300) {
                        document.getElementById('article-photo-preview').innerHTML = `
                    <p class="text-success">✅ Image is valid (300x300px)</p>
                    <img src="${e.target.result}" alt="Preview" style="max-width:300px;" class="mt-2 rounded border" />
                `;
                    } else {
                        alert(`❌ Image must be exactly 300x300 pixels. Yours is ${img.width}x${img.height}px.`);
                        event.target.value = "";
                        document.getElementById('article-photo-preview').innerHTML = "";
                    }
                };
                img.src = e.target.result;
            };

            reader.readAsDataURL(file);
        }
    </script>
@endsection