@extends('backend.layouts.app')
<style>
    #description {
        height: 500px;
    }
</style>
@section('content')
<h4 class="py-3 mb-4">
    @lang('messages.blog.update_blog')
</h4>

<div class="card mb-6 p-10">
    <form id="blog_add" method="POST" action="{{ route('blog.update', $id_encrypted) }}" class="row g-5" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="card-body">
            @if(session('success'))
                <div class="alert alert-success">
                    <strong>Good Job!</strong> {{ session('success') }}
                </div>
            @endif
            @if(session('error'))
                <div class="alert alert-error">
                    <strong>Alert!</strong> {{ session('error') }}
                </div>
            @endif
            <div class="row">
                <div class="col-md-6 d-flex align-items-sm-center gap-6">
                    <img src="{{ asset('storage/blog/'.$blog->featured_image) }}" alt="logo" class="d-block w-px-200 h-px-200 rounded" id="featured_image_show">
                    <div class="button-wrapper">
                        <label for="featured_image" class="btn btn-sm btn-primary me-3 mb-4 waves-effect waves-light" tabindex="0">
                            <span class="d-none d-sm-block">@lang('messages.talent.upload_image')</span>
                            <i class="ri-upload-2-line d-block d-sm-none"></i>
                            <input type="file" id="featured_image" name="featured_image" class="account-file-input" hidden accept="image/png, image/jpeg">
                        </label>
                        <span class="form-floating-focused"></span>
                    </div>
                </div>
                <div class="col-md-6 align-items-sm-center gap-6">
                    <div class="row">
                        <div class="col-md-12 ">
                            <div class="input-group input-group-floating">
                                <div class="form-floating form-floating-outline">
                                    <input type="text" class="form-control" value="{{ $blog->title }}" placeholder="@lang('messages.blog.title')" id="title" name="title" aria-label="title" aria-describedby="title">
                                    <label for="title">@lang('messages.blog.title')</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mt-3">
                            <div class="input-group input-group-floating">
                                <div class="form-floating form-floating-outline">
                                    <input type="text" class="form-control" value="{{ $blog->slug }}" placeholder="@lang('messages.blog.slug')" id="slug" name="slug" aria-label="slug" aria-describedby="slug">
                                    <label for="slug">@lang('messages.blog.slug')</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mt-3">
                            <div class="form-floating form-floating-outline">
                                <select id="status" name="status" class="form-select">
                                    <option value="draft" @if($blog->status == 'draft') selected @endif>@lang('messages.blog.draft')</option>
                                    <option value="published" @if($blog->status == 'published') selected @endif>@lang('messages.blog.published')</option>
                                    <option value="archived" @if($blog->status == 'archived') selected @endif>@lang('messages.blog.archived')</option>
                                </select>
                                <label for="status">@lang('messages.blog.status')</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-1 g-5">
                <div class="col-md-12">
                    <span>@lang('messages.blog.description')</span>
                    <textarea id="description" name="description">
                        {{ $blog->description}}
                    </textarea>
                </div>
            </div>
        </div>
        <div class="card-body pt-0">
            <div class="mt-6">
                <button type="submit" class="btn btn-primary me-3 waves-effect waves-light">@lang('messages.blog.save')</button>
                <button type="reset" class="btn btn-outline-secondary waves-effect">@lang('messages.blog.reset')</button>
            </div>
        </div>
    <form>
</div>
@endsection

@section('footer_scripts')
<script>
    $('#description').summernote({
        height: 500, // Set editor height
        minHeight: null, // Set minimum height of editor
        maxHeight: null, // Set maximum height of editor
        focus: true // Set focus to editable area after initializing summernote
    });
    $('[data-toggle="tooltip"]').tooltip();
    // initSample();
    // "use strict";
    // var description = new Quill("#description", {bounds: "#description", placeholder: "Type Something...", modules: {formula: true, toolbar: [[{font: []}, { 'header': [1, 2, 3, 4, 5, 6, false] }],  [{ 'align': [] }], ["bold", "italic", "underline", "strike"], [{color: []}, {background: []}], [{script: "super"}, {script: "sub"}], ["blockquote", "code-block"], [{list: "ordered"}, {list: "bullet"}, {indent: "-1"}, {indent: "+1"}], [{direction: "rtl"}], ["link", "image", "video", "formula"], ["clean"]]}, theme: "snow"});

    // description.root.innerHTML = `{!! addslashes($blog->description) !!}`;

    // Blog featured image
    document.getElementById('featured_image').addEventListener('change', function(event) {
        handleImageUpload(event, 'featured_image_show');
    });

    // Function to handle image upload for each image input
    function handleImageUpload(event, imageId) {
        var uploadedImage = document.getElementById(imageId);
        var file = event.target.files[0];
        var reader = new FileReader();

        // Ensure file is selected
        if (file) {
            // Read the file as a data URL
            reader.readAsDataURL(file);
        }

        // Set the image source when file reading is completed
        reader.onloadend = function() {
            uploadedImage.src = reader.result;
        };
    }

    setTimeout(() => {
        $(".alert").hide();
    }, 3000);

    $(document).ready(function() {
        $("#slug").on("blur", function() {
            var string = $(this).val();
            if(!string)
                string = $("#title").val();
            $(this).val(string.replace(/\s+/g, '-').toLowerCase());
        })

        $("#title").on("blur", function() {
            $("#slug").trigger("blur");
        })


        /* $("#blog_add").submit(function(e) {
            e.preventDefault();
        }).validate({
            rules: {
                title: {
                    required: true,
                },
                slug: {
                    required: true,
                },
                description: {
                    required: true,
                },
                status: {
                    required: true,
                }
            },

            errorElement: 'span',
            submitHandler: function(form) {
                var formData = new FormData(form);
                formData.append('description', description.root.innerHTML);

                $.ajax({
                    url: $(form).attr('action'),
                    data: formData,
                    type: 'POST',
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function(data) {
                        if (data.status) {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'success',
                            });
                            setTimeout(() => {
                                location.href = data.url;
                            }, 3000);
                        } else {
                            Swal.fire({
                                title: data.title,
                                text: data.message,
                                icon: 'error',
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                            var jsonResponse = JSON.parse(xhr.responseText);
                            var locale = '{{ app()->getLocale() }}'; // Get the current application locale

                            if (locale == 'en') {
                                // English error messages
                                var errorMessage = "Validation failed";
                            } else if (locale == 'ro') {
                                // Romanian error messages
                                errorMessage = "Validarea a eșuat";
                            } else if (locale == 'ar') {
                                // Arabic error messages
                                errorMessage = "فشل التحقق من الصحة";
                            } else {
                                // Default to English
                                // errorMessage += Object.values(errors).join(", ");
                            }
                            if (jsonResponse.errors) {
                                errorMessage += ":<br> ";
                                errorMessage += Object.values(jsonResponse.errors).join(
                                    "<br>");
                                Swal.fire('', errorMessage, 'error')
                            }
                        }
                });
                return false;
            }
        }); */

    });
</script>
@endsection