@extends('template.layouts.template-base')
@section('title', 'Add Blog')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>
<style>
  .page-content{
    background-color:#F0F4F8!important;
    padding: 80px 10px;
  }
</style>
@endsection

@section('content')
<section class="product-page add-service">
  <!-- Header -->
  <div class="page-header">
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col">
                <div class="page-title">
                    <a href="{{ route('backend.blog-list.index') }}"> Blog / <span class="breadcrumb-link">Add Blog</span></a>
                </div>
            </div>
            <div class="col-auto cate-top-btns">
                {{-- <div class="position-relative">
                    <div class="custom-dropdown product-lang">
                        <button class="dropdown-btn langu-drpdwn" type="button">
                            English
                            <span class="caret"><i class="ri-arrow-down-s-fill"></i></span>
                        </button>
                        <ul class="dropdown-menu-custom">
                            <li class="active">English</li>
                            <li>Tamil</li>
                        </ul>
                    </div>
                </div> --}}
            </div>
        </div>
    </div>
  </div>

  <!-- Main Container -->
  <div class="container">
    <form id="addBlogForm" method="POST" action="{{ route('backend.blog-list.store') }}" enctype="multipart/form-data">
    @csrf
      <!-- Section 1: Blog -->
      <div class="add-product-section">
        <h2 class="section-title">Blog</h2>

        <div class="row">
          <!-- Category Name (single select) -->
          <div class="col-lg-4">
            <label>Category Name<span class="required">*</span></label>
            <div class="custom-dropdown">
              <select name="blog_category_id" class="dropdown-btn">
                <option value="">Select Category</option>
                @foreach($categories as $category)
                  <option value="{{ $category->id }}"
                          {{ old('blog_category_id') == $category->id ? 'selected' : '' }}>
                    {{ $category->category_name_en }}
                  </option>
                @endforeach
              </select>
            </div>
          </div>

          <div class="col-lg-4">
            <label>Blog Title<span class="required">*</span></label>
            <input type="text" name="title_en" placeholder="Enter Blog Title" value="{{ old('title_en') }}" />
          </div>

          <div class="col-lg-4">
            <label>Blog Status <span class="required">*</span></label>
            <div class="radio-group">
              <label class="radio-label">
                <input type="radio" name="status" value="1" {{ old('status', '1') == '1' ? 'checked' : '' }} />
                <span>Active</span>
              </label>
              <label class="radio-label">
                <input type="radio" name="status" value="0" {{ old('status') == '0' ? 'checked' : '' }} />
                <span>Inactive</span>
              </label>
            </div>
            <div class="form-check mt-2">
              <input type="hidden" name="is_default" value="0">
              <input class="form-check-input" type="checkbox" name="is_default" id="blogIsDefault"
                     value="1" {{ old('is_default') == '1' ? 'checked' : '' }}>
              <label class="form-check-label" for="blogIsDefault">Set as Default Blog</label>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-4">
            <div class="time-block">
              <div class="tab-content" id="date-range">
                <div class="date-input-group">
                  <div class="date-field">
                    <label>Post On</label>
                    <input type="text" name="posted_on" id="from-date" placeholder="Select Date" readonly
                           value="{{ old('posted_on') }}" />
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="col-lg-4">
            <div class="time-block">
              <label>Slug Name</label>
              <input type="text" name="slug" placeholder="Enter Slug Name" value="{{ old('slug') }}" />
            </div>
          </div>

          <div class="col-lg-4"></div>
        </div>

        <div class="row">
          <div class="col-lg-12">
            <label>Blog Description English <span class="required">*</span></label>
            <textarea id="product-description" name="description_en" rows="5" placeholder="Type Here">{{ old('description_en') }}</textarea>
          </div>
        </div>

        <div class="row">
          <div class="col-lg-12">
            <label>Blog Description Tamil</label>
            <textarea id="product-description-ta" name="description_tamil" rows="5" placeholder="Type Here">{{ old('description_tamil') }}</textarea>
          </div>
        </div>
      </div>

      <!-- Blog Media -->
      <div class="add-product-section">
        <h2 class="section-title">Blog Media</h2>
        <div class="row mb-0">
          <div class="col-lg-5">
            <label>Blog Thumbnail Image <span class="required">*</span>
              <span class="small-txt">(97px*97px)</span></label>
          </div>
          <div class="col-lg-4">
            <label>Blog Video</label>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-4">
            <div class="image-upload-box-2">
              <input type="file" name="thumbnail_image" id="productImage" hidden>
              <label for="productImage" class="upload-label">
                <div class="upload-content">
                  <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}" class="add-img" alt="Images">
                  <div class="upload-text">Choose a file or drag and drop it here</div>
                  <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                </div>
              </label>
            </div>
          </div>
          <div class="col-lg-1"></div>
          <div class="col-lg-4">
            <input type="text" name="video_url" placeholder="Blog Video URL Here" value="{{ old('video_url') }}" />
          </div>
        </div>

        <div class="row">
          <label>Gallery Image <span class="small-txt">(402px*260px)</span></label>
          <div class="col-lg-4">
            <div class="image-upload-box-2">
              <input type="file" name="gallery_images[]" id="galleryImage1" hidden>
              <label for="galleryImage1" class="upload-label">
                <div class="upload-content">
                  <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}" class="add-img" alt="Images">
                  <div class="upload-text">Choose a file or drag and drop it here</div>
                  <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                </div>
              </label>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="image-upload-box-2">
              <input type="file" name="gallery_images[]" id="galleryImage2" hidden>
              <label for="galleryImage2" class="upload-label">
                <div class="upload-content">
                  <img src="{{ asset('assets/template/images/svg/gallery-add.png') }}" class="add-img" alt="Images">
                  <div class="upload-text">Choose a file or drag and drop it here</div>
                  <div class="file-info">JPG, PNG or JPEG (Max 1 MB)</div>
                </div>
              </label>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="image-upload-box-2 add-more-sec">
              <input type="file" name="gallery_images[]" id="clientImage" hidden multiple>
              <label for="clientImage" class="upload-label">
                <div class="upload-content">
                  <i class="ri-add-circle-fill"></i>
                  <div class="upload-text">Add More Image</div>
                </div>
              </label>
            </div>
          </div>
        </div>
      </div>

      <!-- SEO Meta Configuration -->
      <div class="add-product-section">
        <h2 class="section-title">SEO Meta Configuration</h2>
        <div id="size-variations-container">
          <div class="size-variation blog-add-page">
            <div class="row">
              <div class="col-lg-6">
                <label>Meta Title <span class="required">*</span></label><br>
                <input type="text" name="meta_title" placeholder="Enter Meta Title" value="{{ old('meta_title') }}" />
              </div>
              <div class="col-lg-6">
                <label>Meta Keywords<span class="required">*</span></label><br>
                <input type="text" name="meta_keywords" placeholder="Enter Meta Keywords" value="{{ old('meta_keywords') }}" />
              </div>
            </div>
            <div class="row mb-0">
              <div class="col-lg-12">
                <label>Meta Description</label><br>
                <textarea rows="8" placeholder="Type Here" class="meta-description" name="meta_description">{{ old('meta_description') }}</textarea>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Action Buttons -->
      <div class="action-buttons">
        <a href="{{ route('backend.blog-list.index') }}" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-primary">Add Blog</button>
      </div>
    </form>
  </div>
</section>
@endsection

@section('scripts')
<link href="https://unpkg.com/@yaireo/tagify/dist/tagify.css" rel="stylesheet">
<script src="https://unpkg.com/@yaireo/tagify"></script>
<script>
    const editorConfig = {
        height: 150,
        toolbar: [
            { name: "styles",      items: ["Format"] },
            { name: "basicstyles", items: ["Bold", "Italic", "Underline"] },
            { name: "paragraph",   items: ["JustifyLeft", "JustifyCenter", "JustifyRight"] },
            { name: "insert",      items: ["NumberedList", "BulletedList"] },
        ],
    };
    CKEDITOR.replace("product-description", editorConfig);
    CKEDITOR.replace("product-description-ta", editorConfig);
</script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script>
    flatpickr("#from-date", {
        dateFormat: "d M, Y",
        defaultDate: new Date(),
        onChange: function (selectedDates, dateStr) {
            console.log("From Date selected:", dateStr);
        },
    });
</script>
<script>
    $(function () {
        const $form = $('#addBlogForm');
        const $categoryInput = $("select[name='blog_category_id']");

        $.validator.addMethod('imageExtension', function (value, element) {
            if (this.optional(element)) {
                return true;
            }
            return /\.(jpg|jpeg|png)$/i.test(value);
        }, 'Please upload a JPG, JPEG, or PNG file.');

        $.validator.addMethod('filesize', function (value, element, param) {
            if (this.optional(element) || !element.files.length) {
                return true;
            }
            return element.files[0].size <= param;
        }, 'File size must not exceed 1 MB.');

        $form.validate({
            ignore: [],
            rules: {
                blog_category_id: {
                    required: true
                },
                title_en: {
                    required: true
                },
                status: {
                    required: true
                },
                description_en: {
                    required: function () {
                        const editor = CKEDITOR.instances['product-description'];
                        if (editor) {
                            editor.updateElement();
                        }
                        return true;
                    }
                },
                thumbnail_image: {
                    required: true,
                    imageExtension: true,
                    filesize: 1048576
                },
                video_url: {
                    url: true
                },
                meta_title: {
                    required: true
                },
                meta_keywords: {
                    required: true
                }
            },
            messages: {
                blog_category_id: {
                    required: 'Please select a category.'
                },
                title_en: {
                    required: 'Blog title is required.'
                },
                status: {
                    required: 'Please select blog status.'
                },
                description_en: {
                    required: 'Blog description is required.'
                },
                thumbnail_image: {
                    required: 'Blog thumbnail image is required.'
                },
                video_url: {
                    url: 'Please enter a valid URL.'
                },
                meta_title: {
                    required: 'Meta title is required.'
                },
                meta_keywords: {
                    required: 'Meta keywords are required.'
                }
            },
            errorClass: 'text-danger small mt-1',
            errorElement: 'div',
            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            },
            errorPlacement: function (error, element) {
                if (element.attr('name') === 'status') {
                    error.insertAfter(element.closest('.radio-group'));
                    return;
                }

                if (element.attr('name') === 'description_en') {
                    error.insertAfter($('#cke_product-description'));
                    return;
                }

                if (element.attr('name') === 'thumbnail_image') {
                    error.insertAfter(element.closest('.image-upload-box-2'));
                    return;
                }

                error.insertAfter(element);
            },
            submitHandler: function (form) {
                Object.values(CKEDITOR.instances).forEach(function (editor) {
                    editor.updateElement();
                });
                form.submit();
            }
        });

        $categoryInput.on('change', function () {
            $(this).valid();
        });

        $("input[name='thumbnail_image']").on('change', function () {
            $(this).valid();
        });

        const editor = CKEDITOR.instances['product-description'];
        if (editor) {
            editor.on('change', function () {
                editor.updateElement();
                $("textarea[name='description_en']").valid();
            });
        }
    });
</script>
@endsection