@extends('operations.layout.mainlayout')

@section('content')
<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid card">
            <div class="row mb-2">
                <div class="col-sm-6 card-body">
                    <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">
                        @if(!empty($blogArticle)) Edit Blog Article @else Add Blog Article @endif
                    </h1>
                </div>
                <div class="col-sm-6 card-body text-right">
                    <a href="/operations/whitelabel/blog-article" class="btn btn-outline-secondary shadow-sm">
                        <i class="fa fa-arrow-left mr-1"></i> Return to List
                    </a>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="mx-auto col-md-10">
                    <div class="card">
                        <div class="card-body">
                            <div class="alert alert-danger alert-danger-blog" style="display:none;">
                                <ul></ul>
                            </div>

                            <form method="post" action="/operations/whitelabel/blog-article" enctype="multipart/form-data" id="blog-article-form">
                                <input type="hidden" name="ID" value="@if(!empty($blogArticle->ID)){{$blogArticle->ID}}@endif">

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <p><b>Image</b></p>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text label-color"><i class="fa fa-image"></i></span>
                                            </div>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="image" name="image">
                                                <label class="custom-file-label" for="image">Choose file</label>
                                            </div>
                                        </div>
                                        @if(!empty($blogArticle->IMAGE))
                                            <div class="mt-2 position-relative d-inline-block" id="image-preview-container">
                                                <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/{{$blogArticle->IMAGE}}" style="width:180px;"/>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute remove-image-btn" style="top: 0; right: 0;" data-field="IMAGE" data-id="{{$blogArticle->ID}}">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-md-6">
                                        <p><b>Banner</b></p>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text label-color"><i class="fa fa-image"></i></span>
                                            </div>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="banner" name="banner">
                                                <label class="custom-file-label" for="banner">Choose file</label>
                                            </div>
                                        </div>
                                        @if(!empty($blogArticle->BANNER))
                                            <div class="mt-2 position-relative d-inline-block" id="banner-preview-container">
                                                <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/{{$blogArticle->BANNER}}" style="width:180px;"/>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute remove-image-btn" style="top: 0; right: 0;" data-field="BANNER" data-id="{{$blogArticle->ID}}">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <p><b>Highlight</b></p>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text label-color"><i class="fa fa-image"></i></span>
                                            </div>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="highlight" name="highlight">
                                                <label class="custom-file-label" for="highlight">Choose file</label>
                                            </div>
                                        </div>
                                        @if(!empty($blogArticle->HIGHLIGHT))
                                            <div class="mt-2 position-relative d-inline-block" id="highlight-preview-container">
                                                <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/{{$blogArticle->HIGHLIGHT}}" style="width:180px;"/>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute remove-image-btn" style="top: 0; right: 0;" data-field="HIGHLIGHT" data-id="{{$blogArticle->ID}}">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                    <div class="col-md-6">
                                        <p><b>Highlight 2</b></p>
                                        <div class="input-group">
                                            <div class="input-group-append">
                                                <span class="input-group-text label-color"><i class="fa fa-image"></i></span>
                                            </div>
                                            <div class="custom-file">
                                                <input type="file" class="custom-file-input" id="highlight-2" name="highlight_2">
                                                <label class="custom-file-label" for="highlight-2">Choose file</label>
                                            </div>
                                        </div>
                                        @if(!empty($blogArticle->HIGHLIGHT_2))
                                            <div class="mt-2 position-relative d-inline-block" id="highlight2-preview-container">
                                                <img src="https://s3.eu-west-1.amazonaws.com/blazma.com/{{$blogArticle->HIGHLIGHT_2}}" style="width:180px;"/>
                                                <button type="button" class="btn btn-danger btn-sm position-absolute remove-image-btn" style="top: 0; right: 0;" data-field="HIGHLIGHT_2" data-id="{{$blogArticle->ID}}">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <p><b>Title</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">EN</span>
                                            </div>
                                            <input type="text" class="form-control" name="title_en" value="@if(!empty($blogArticle->TITLE_EN)){{$blogArticle->TITLE_EN}}@endif" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">AR</span>
                                            </div>
                                            <input type="text" class="form-control" name="title_ar" value="@if(!empty($blogArticle->TITLE_AR)){{$blogArticle->TITLE_AR}}@endif" />
                                        </div>
                                    </div>
                                </div>

                                <p><b>Short Description</b></p>
                                <div class="row">
                                    <div class="col">
                                        <div class="input-group mb-3">
                                            <textarea type="text" class="form-control" placeholder="EN" name="short_desc_en">@if(!empty($blogArticle->SHORT_DESCRIPTION_EN)){{$blogArticle->SHORT_DESCRIPTION_EN}}@endif</textarea>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="input-group mb-3">
                                            <textarea style="direction: rtl" type="text" class="form-control" placeholder="AR" name="short_desc_ar">@if(!empty($blogArticle->SHORT_DESCRIPTION_AR)){{$blogArticle->SHORT_DESCRIPTION_AR}}@endif</textarea>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6">
                                        <p><b>Description EN</b></p>
                                        <div class="input-group mb-3">
                                            <textarea id="" class="form-control editor1" rows="3" placeholder="Description EN" name="description_en">@if(!empty($blogArticle->DESCRIPTION_EN)){{$blogArticle->DESCRIPTION_EN}}@endif</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <p><b>Description AR</b></p>
                                        <div class="input-group mb-3">
                                            <textarea id="" style="direction: rtl" class="form-control editor1" rows="3" placeholder="Description AR" name="description_ar">@if(!empty($blogArticle->DESCRIPTION_AR)){{$blogArticle->DESCRIPTION_AR}}@endif</textarea>
                                        </div>
                                    </div>
                                </div>

                                <p><b>Button Description</b></p>
                                <div class="row">
                                    <div class="col">
                                        <div class="input-group mb-3">
                                            <textarea id="" class="form-control editor1" rows="3" placeholder="Button Description EN" name="button_description_en">@if(!empty($blogArticle->SECOND_DESCRIPTION_EN)){{$blogArticle->SECOND_DESCRIPTION_EN}}@endif</textarea>
                                        </div>
                                    </div>
                                    <div class="col">
                                        <div class="input-group mb-3">
                                            <textarea id="" style="direction: rtl" class="form-control editor1" rows="3" placeholder="Button Description AR" name="button_description_ar">@if(!empty($blogArticle->SECOND_DESCRIPTION_AR)){{$blogArticle->SECOND_DESCRIPTION_AR}}@endif</textarea>
                                        </div>
                                    </div>
                                </div>

                                <p><b>Highlight Title</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">EN</span>
                                            </div>
                                            <input type="text" class="form-control" name="highlight_en" value="@if(!empty($blogArticle->HIGHLIGHT_TITLE_EN)){{$blogArticle->HIGHLIGHT_TITLE_EN}}@endif" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">AR</span>
                                            </div>
                                            <input type="text" class="form-control" name="highlight_ar" value="@if(!empty($blogArticle->HIGHLIGHT_TITLE_AR)){{$blogArticle->HIGHLIGHT_TITLE_AR}}@endif" />
                                        </div>
                                    </div>
                                </div>

                                <p><b>Sub Highlight Title</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">EN</span>
                                            </div>
                                            <input type="text" class="form-control" name="sub_highlight_en" value="@if(!empty($blogArticle->SUB_HIGHLIGHT_TITLE_EN)){{$blogArticle->SUB_HIGHLIGHT_TITLE_EN}}@endif" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">AR</span>
                                            </div>
                                            <input type="text" class="form-control" name="sub_highlight_ar" value="@if(!empty($blogArticle->SUB_HIGHLIGHT_TITLE_AR)){{$blogArticle->SUB_HIGHLIGHT_TITLE_AR}}@endif" />
                                        </div>
                                    </div>
                                </div>

                                <p><b>Author</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">EN</span>
                                            </div>
                                            <input type="text" class="form-control" name="author_en" value="@if(!empty($blogArticle->AUTHOR_EN)){{$blogArticle->AUTHOR_EN}}@endif" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">AR</span>
                                            </div>
                                            <input type="text" class="form-control" name="author_ar" value="@if(!empty($blogArticle->AUTHOR_AR)){{$blogArticle->AUTHOR_AR}}@endif" />
                                        </div>
                                    </div>
                                </div>

                                <p><b>Category</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <select class="form-control" name="category_id">
                                            <option value="">Select Category</option>
                                            @foreach($categories as $category)
                                                <option value="{{$category->ID}}" @if(!empty($blogArticle) && $blogArticle->CATEGORY_ID == $category->ID) selected @endif>{{$category->NAME_EN}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <p><b>Tags EN</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <select class="form-control tags" name="tags_en[]" multiple="multiple">
                                            @if(!empty($blogArticle->TAGS_EN))
                                                @foreach(explode(',', $blogArticle->TAGS_EN) as $tag)
                                                    <option value="{{$tag}}" selected>{{$tag}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <p><b>Tags AR</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <select class="form-control tags" name="tags_ar[]" multiple="multiple">
                                            @if(!empty($blogArticle->TAGS_AR))
                                                @foreach(explode(',', $blogArticle->TAGS_AR) as $tag)
                                                    <option value="{{$tag}}" selected>{{$tag}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <p><b>Tests</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-12">
                                        <select class="form-control" name="tests[]" id="tests" multiple="multiple">
                                            @foreach($tests as $test)
                                                <option value="{{$test->ID}}" @if(!empty($selectedTests) && in_array($test->ID, $selectedTests)) selected @endif>{{$test->NAME_EN}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <p><b>Meta Title</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">EN</span>
                                            </div>
                                            <input type="text" class="form-control" name="meta_title_en" value="@if(!empty($blogArticle->META_TITLE_EN)){{$blogArticle->META_TITLE_EN}}@endif" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">AR</span>
                                            </div>
                                            <input type="text" class="form-control" name="meta_title_ar" value="@if(!empty($blogArticle->META_TITLE_AR)){{$blogArticle->META_TITLE_AR}}@endif" />
                                        </div>
                                    </div>
                                </div>

                                <p><b>Meta Keywords</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">EN</span>
                                            </div>
                                            <input type="text" class="form-control" name="meta_keywords_en" value="@if(!empty($blogArticle->META_KEYWORDS_EN)){{$blogArticle->META_KEYWORDS_EN}}@endif" />
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color">AR</span>
                                            </div>
                                            <input type="text" class="form-control" name="meta_keywords_ar" value="@if(!empty($blogArticle->META_KEYWORDS_AR)){{$blogArticle->META_KEYWORDS_AR}}@endif" />
                                        </div>
                                    </div>
                                </div>

                                <p><b>Meta Description</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <textarea class="form-control" placeholder="EN" name="meta_description_en">@if(!empty($blogArticle->META_DESCRIPTION_EN)){{$blogArticle->META_DESCRIPTION_EN}}@endif</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-group mb-3">
                                            <textarea style="direction: rtl" class="form-control" placeholder="AR" name="meta_description_ar">@if(!empty($blogArticle->META_DESCRIPTION_AR)){{$blogArticle->META_DESCRIPTION_AR}}@endif</textarea>
                                        </div>
                                    </div>
                                </div>

                                <p><b>Create Date</b></p>
                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="input-group">
                                            <div class="input-group-prepend">
                                                <span class="input-group-text label-color"><i class="fa fa-calendar"></i></span>
                                            </div>
                                            <input type="datetime-local" class="form-control" name="create_date" id="create_date" value="@if(!empty($blogArticle->CREATED_DATE)){{ date('Y-m-d\TH:i', strtotime($blogArticle->CREATED_DATE)) }}@else{{ date('Y-m-d\TH:i') }}@endif" />
                                        </div>
                                    </div>
                                </div>

                                <div class="row mb-3">
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="active_status" value="1" id="active_status" @if(!empty($blogArticle) && $blogArticle->IS_ACTIVE == 1) checked @endif>
                                            <label class="form-check-label" for="active_status">
                                                Active
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="is_highlighted" value="1" id="is_highlighted" @if(!empty($blogArticle) && $blogArticle->IS_HIGHLIGHTED == 1) checked @endif>
                                            <label class="form-check-label" for="is_highlighted">
                                                Highlighted
                                            </label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary" id="save-blog-btn" style="background: var(--blazma-primary); border-color: var(--blazma-primary);">Save</button>
                                        <a href="/operations/whitelabel/blog-article" class="btn btn-secondary">Cancel</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
@endsection

@section('warehouse_scripts')
<script src="/bower_components/admin-lte/plugins/sweetalert2/sweetalert2.all.min.js"></script>
<script src="/js/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '.editor1',
        plugins: 'advlist autolink lists link image charmap preview anchor searchreplace visualblocks code fullscreen insertdatetime media table code help wordcount',
        toolbar: 'undo redo | formatselect | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | removeformat | help | image',
        images_upload_url: '/operations/whitelabel/blog-article/upload-editor',
        automatic_uploads: true,
        file_picker_types: 'image',
        height: 300
    });

    $('.tags').select2({
        tags: true,
        minimumResultsForSearch: -1
    });

    $('#tests').select2({
        placeholder: 'Select Tests',
        allowClear: true
    });

    $('.custom-file-input').on('change', function() {
        let fileName = $(this).val().split('\\').pop();
        $(this).next('.custom-file-label').addClass("selected").html(fileName);
    });

    $('#blog-article-form').on('submit', function(e) {
        e.preventDefault();
        
        $('.alert-danger-blog').hide().find('ul').empty();
        $('#save-blog-btn').prop('disabled', true).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Saving...');

        tinymce.triggerSave();

        var formData = new FormData(this);

        $.ajax({
            url: $(this).attr('action'),
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.success) {
                    if (response.action === 'update') {
                        $('#save-blog-btn').prop('disabled', false).text('Save');
                        Swal.fire({
                            icon: 'success',
                            title: 'Success',
                            text: 'Blog article updated successfully!',
                            showConfirmButton: false,
                            timer: 1500
                        });
                    } else {
                        window.location.href = response.redirect_url;
                    }
                } else {
                    $('#save-blog-btn').prop('disabled', false).text('Save');
                }
            },
            error: function(xhr) {
                $('#save-blog-btn').prop('disabled', false).text('Save');
                var errors = xhr.responseJSON.errors;
                var errorHtml = '';
                
                if (errors) {
                    $.each(errors, function(key, value) {
                        errorHtml += '<li>' + value[0] + '</li>';
                    });
                } else if (xhr.responseJSON.message) {
                     errorHtml += '<li>' + xhr.responseJSON.message + '</li>';
                } else {
                    errorHtml += '<li>An error occurred. Please try again.</li>';
                }
                
                $('.alert-danger-blog').find('ul').html(errorHtml);
                $('.alert-danger-blog').show();
                $('html, body').animate({ scrollTop: 0 }, 'slow');
            }
        });
    });

    $('.remove-image-btn').on('click', function() {
        var btn = $(this);
        var field = btn.data('field');
        var id = btn.data('id');

        Swal.fire({
            title: 'Are you sure?',
            text: 'This will remove the image permanently.',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: 'var(--blazma-primary)',
            cancelButtonColor: '#6c757d',
            confirmButtonText: 'Yes, remove it!'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '/operations/whitelabel/blog-article/' + id + '/remove-image',
                    type: 'POST',
                    data: { field: field },
                    success: function(response) {
                        if (response.success) {
                            btn.closest('.position-relative').remove();
                            Swal.fire({
                                icon: 'success',
                                title: 'Removed!',
                                text: 'Image has been removed.',
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }
                    },
                    error: function(xhr) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Failed to remove image.'
                        });
                    }
                });
            }
        });
    });
</script>
@endsection