@extends('layouts.layout')
@section('title') Stwórz post @stop
@section('content')
<style>
        .language-tab {
            cursor: pointer;
            padding: 10px 15px;
            border-radius: 4px 4px 0 0;
            margin-right: 5px;
        }

        .language-tab.active {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            border-bottom: none;
        }

        .form-section {
            background-color: #f8f9fa;
            border-radius: 0.375rem;
            padding: 20px;
            margin-bottom: 20px;
        }

        .note-editor .note-toolbar {
            background-color: #f8f9fa !important;
        }

        .form-label {
            font-weight: 500;
        }

        .preview-image {
            max-height: 150px;
            margin-top: 10px;
            border-radius: 4px;
            border: 1px solid #dee2e6;
        }

        .file-input-wrapper {
            position: relative;
            overflow: hidden;
            display: inline-block;
        }

        .file-input-wrapper input[type=file] {
            font-size: 100px;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }

        .file-input-button {
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
        }
</style>
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-10">
            <!-- Alert for errors -->
            <div id="errors-container" class="alert alert-danger mt-3 d-none">
                <ul id="errors-list">
                </ul>
            </div>

            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white py-3">
                    <h4 class="mb-0"><i class="fas fa-edit me-2"></i>Stwórz post</h4>
                </div>
                <div class="card-body p-4">
                    <form method="post" action="" enctype="multipart/form-data" id="blogPostForm">
                        @csrf

                        <!-- Language tabs -->
                        <div class="d-flex ">
                            <div class="language-tab active" data-lang="pl">
                                <i class="fas fa-language me-1"></i> Polski
                            </div>
                            <div class="language-tab" data-lang="en">
                                <i class="fas fa-language me-1"></i> English
                            </div>
                        </div>

                        <!-- Basic Information -->
                        <div class="form-section mb-4">
                            <h5 class="mb-3"><i class="fas fa-info-circle me-2"></i>Informacje podstawowe</h5>

                            <!-- Category -->
                            <div class="mb-3">
                                <label for="category_id" class="form-label">Kategoria</label>
                                <select name="category_id" id="category_id" class="form-select">
                                    @foreach ($categories as $id => $category_name)
                                    <option value="{{ $id }}">{{ $category_name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <!-- Author -->
                            <div class="mb-3">
                                <label for="author" class="form-label">Autor</label>
                                <input type="text" name="author" id="author" class="form-control" placeholder="Wpisz imię i nazwisko autora">
                            </div>
                        </div>

                        <!-- Polish Content -->
                        <div class="content-section pl-content">
                            <div class="form-section mb-4">
                                <h5 class="mb-3"><i class="fas fa-file-alt me-2"></i>Treść po Polsku</h5>

                                <!-- Title PL -->
                                <div class="mb-3">
                                    <label for="title" class="form-label">Tytuł</label>
                                    <input type="text" name="title" id="title" class="form-control" placeholder="Wpisz tytuł postu">
                                </div>

                                <!-- Content PL -->
                                <div class="mb-3">
                                    <label for="text" class="form-label">Tekst</label>
                                    <textarea class="summernote" name="text" id="text" data-lang="pl"></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- English Content -->
                        <div class="content-section en-content" style="display: none;">
                            <div class="form-section mb-4">
                                <h5 class="mb-3"><i class="fas fa-file-alt me-2"></i>Treść po Angielsku</h5>

                                <!-- Title EN -->
                                <div class="mb-3">
                                    <label for="title_en" class="form-label">Tytuł po Angielsku</label>
                                    <input type="text" name="title_en" id="title_en" class="form-control" placeholder="Enter post title">
                                </div>

                                <!-- Content EN -->
                                <div class="mb-3">
                                    <label for="text_en" class="form-label">Tekst po Angielsku</label>
                                    <textarea class="summernote" name="text_en" id="text_en" data-lang="en"></textarea>
                                </div>
                            </div>
                        </div>

                        <!-- Images -->
                        <div class="form-section mb-4">
                            <h5 class="mb-3"><i class="fas fa-images me-2"></i>Zdjęcia</h5>

                            <div class="row">
                                <!-- Thumbnail Image -->
                                <div class="col-md-6 mb-3">
                                    <label for="thumbnail_photo_file" class="form-label">Miniaturka</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-image"></i></span>
                                        <input type="file" name="thumbnail_photo_file" id="thumbnail_photo_file" class="form-control" accept="image/png, image/jpeg" onchange="previewImage(this, 'thumbnailPreview')">
                                    </div>
                                    <img id="thumbnailPreview" class="preview-image d-none" alt="Podgląd miniatury">
                                </div>

                                <!-- Author Image -->
                                <div class="col-md-6 mb-3">
                                    <label for="author_photo_file" class="form-label">Zdjęcie autora</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                        <input type="file" name="author_photo_file" id="author_photo_file" class="form-control" accept="image/png, image/jpeg" onchange="previewImage(this, 'authorPreview')">
                                    </div>
                                    <img id="authorPreview" class="preview-image d-none" alt="Podgląd zdjęcia autora">
                                </div>
                            </div>
                        </div>

                        <!-- Submit Button -->
                        <div class="text-center mt-4">
                            <button type="submit" class="btn btn-primary btn-lg px-5">
                                <i class="fas fa-save me-2"></i>Zapisz post
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        // Initialize Summernote
        $('.summernote').each(function() {
            $(this).summernote({
                height: 300,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'strikethrough', 'clear']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],
                    ['view', ['fullscreen', 'codeview', 'help']]
                ],
                placeholder: 'Wpisz treść postu...',
                callbacks: {
                    onBlur: function() {
                        var lang = $(this).data('lang');
                        var sHTML = $(this).summernote('code');
                        // We can save content to hidden field here if needed
                        // console.log('Content for ' + lang + ' saved');
                    }
                }
            });
        });

        // Language tab switching
        $('.language-tab').on('click', function() {
            var lang = $(this).data('lang');

            // Update active tab
            $('.language-tab').removeClass('active');
            $(this).addClass('active');

            // Show corresponding content
            $('.content-section').hide();
            $('.' + lang + '-content').show();
        });

        // Form validation
        $('#blogPostForm').on('submit', function(e) {
            let errors = [];

            // Check required fields
            if ($('#title').val().trim() === '') {
                errors.push('Tytuł po Polsku jest wymagany');
            }

            if ($('#text').summernote('isEmpty')) {
                errors.push('Tekst po Polsku jest wymagany');
            }

            if ($('#author').val().trim() === '') {
                errors.push('Autor jest wymagany');
            }

            // Display errors if any
            if (errors.length > 0) {
                e.preventDefault();

                const errorsList = $('#errors-list');
                errorsList.empty();

                errors.forEach(function(error) {
                    errorsList.append('<li>' + error + '</li>');
                });

                $('#errors-container').removeClass('d-none');

                // Scroll to errors
                $('html, body').animate({
                    scrollTop: $('#errors-container').offset().top - 100
                }, 500);
            }
        });
    });

    // Image preview function
    function previewImage(input, previewId) {
        const preview = document.getElementById(previewId);

        if (input.files && input.files[0]) {
            const reader = new FileReader();

            reader.onload = function(e) {
                preview.src = e.target.result;
                preview.classList.remove('d-none');
            }

            reader.readAsDataURL(input.files[0]);
        } else {
            preview.classList.add('d-none');
        }
    }
</script>
@stop