@extends('admin.layouts.master')

@section('title','branch Page')

@section('content')
    <div class="container-fluid">
        <div class="row justify-content-center p-10 m-t-15">
            <div class="col-12">
                <form class="leadForm_wizard" action="{{$blog->id > 0 ? route('admin.blogs.update', $blog) : route('admin.blogs.store')}}" method="POST" enctype="multipart/form-data">
                    @csrf
                    @if($blog->id > 0)
                        @method('PUT')
                    @endif

                    <h4>Create New Blog</h4>

                    <div class="row">
                        <div class="col-6 form-group">
                            <label for="title_en">Title English</label>
                            <input type="text" required name="title_en" class="form-control" id="title_en" value="{{$blog->title_en}}" placeholder="Title">
                        </div>

                        <div class="col-6 form-group">
                            <label for="title_ar">Title Arabic</label>
                            <input type="text" required name="title_ar" class="form-control" id="title_ar" value="{{$blog->title_ar}}" placeholder="Title">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6 form-group">
                            <label for="image">Image</label>
                            @if($blog->image && $blog->image->url)
                                <img class="d-block col-4 my-2" src="{{ $blog->image->full_url }}">
                            @endif
                            <input type="file" {{$blog->image ? '' : 'required'}} name="image" class="form-control" id="image" value="">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6 form-group">
                            <label for="meta_en">English Meta</label>
                            <input type="text" name="meta_en" class="form-control" id="meta_en" value="{{ $blog->image->meta_en ?? '' }}" placeholder="Image English Meta">
                        </div>

                        <div class="col-6 form-group">
                            <label for="meta_ar">Arabic Meta</label>
                            <input type="text" name="meta_ar" class="form-control" id="meta_ar" value="{{ $blog->image->meta_ar ?? '' }}" placeholder="Image Arabic Meta">
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6 form-group">
                            <label for="content_en">Content English</label>
                            <textarea name="content_en" class="form-control editor ckeditor" id="content_en" cols="30" rows="10">{{$blog->content_en}}</textarea>
                        </div>

                        <div class="col-6 form-group">
                            <label for="content_ar">Content Arabic</label>
                            <textarea name="content_ar" class="form-control editor ckeditor" id="content_ar" cols="30" rows="10">{{$blog->content_ar}}</textarea>
                        </div>
                    </div>

                   @php
    $defaultBlogTags = [
        'Investment & Markets',
        'Projects & Opportunities',
        'Areas & Cities',
        'Real Estate Guide',
        'Future of Real Estate',
    ];

    $currentTags = $blog->tags->pluck('name')->toArray();
@endphp

<div class="row">
    <div class="col-12 form-group">
        <label for="blogTagsInput">Tags</label>

        <input type="text"
               data-role="tagsinput"
               name="tags"
               id="blogTagsInput"
               class="form-control"
               value="{{ old('tags', implode(',', $currentTags)) }}">

        <div class="mt-3">
            <strong>Ready Tags:</strong>

            <div class="mt-2">
                @foreach($defaultBlogTags as $tag)
                    <button type="button"
                            class="btn btn-sm btn-outline-success add-blog-tag my-1"
                            data-tag="{{ $tag }}">
                        {{ $tag }}
                    </button>
                @endforeach
            </div>
        </div>
    </div>
</div>

                    @if(!empty($blog))
                        @seoForm($blog)
                    @endif

                    <button type="submit" class="btn btn-primary">Save</button>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script>
document.addEventListener('click', function(e){
    if(!e.target.classList.contains('add-blog-tag')) return;

    const tag = e.target.dataset.tag;
    const input = document.getElementById('blogTagsInput');

    if(!input) return;

    let tags = input.value
        .split(',')
        .map(t => t.trim())
        .filter(Boolean);

    if(!tags.includes(tag)){
        tags.push(tag);
    }

    input.value = tags.join(',');

    if (window.jQuery && typeof $(input).tagsinput === 'function') {
        $(input).tagsinput('removeAll');
        tags.forEach(t => $(input).tagsinput('add', t));
    }
});
</script>

@include('admin.layouts.js.sweetalert')

@if(count($errors))
    @include('admin.layouts.js.old')
@endif

@isset($blog)
    @include('admin.layouts.js.values', ['values' => $blog])
@endisset
@endsection