@extends('backend.layouts.app')

@section('content')

@if ($errors->any())
<div class="alert alert-danger">
    <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif


<form class="needs-validation" id="myForm" action="{{ $action }}" method="POST" enctype="multipart/form-data" novalidate>
    {{ csrf_field() }}
    @if (isset($method))
    @method('PUT')
    @endif

<div class="row">
    <!-- Left Column (col-9) -->
    <div class="col-lg-9">
        <div class="card mb-5">
            <div class="card-body">
                <ul class="nav nav-tabs nav-line-tabs mb-5 fs-6">
                    @foreach ($langs as $key => $lang)
                        <li class="nav-item">
                            <a class="nav-link cmp-links {{$key == 0 ? 'active' : ''}}" data-lang="{{$lang->name}}" data-key="{{$key}}" data-bs-toggle="tab" href="#kt_tab_pane_{{$lang->name}}">
                                {{$lang->name}}
                            </a>
                        </li>
                    @endforeach
                </ul>

                <div class="tab-content" id="myTabContent">
                    @foreach ($langs as $key => $lang)
                        <div class="tab-pane fade show {{ $key == 0 ? 'active' : '' }}" id="kt_tab_pane_{{ $lang->name }}" role="tabpanel">
                            <input type="hidden" name="data[{{ $lang->name }}][lang]" value="{{ $lang->name }}">

                            <div class="card mb-4">
                                <div class="card-header"><strong>{{ translate('Main Info') }}</strong></div>
                                <div class="card-body row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">{{ translate('Title') }}</label>
                                        <input type="text" class="form-control" name="data[{{$lang->name}}][title]" id="title_{{$lang->name}}" value="{{ old("data.{$lang->name}.title", $data[$lang->name]->title ?? '') }}" onkeyup="generateSlug('{{$lang->name}}')">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">{{ translate('Slug') }}</label>
                                        <input type="text" class="form-control" name="data[{{$lang->name}}][slug]" id="slug_{{$lang->name}}" value="{{ old("data.{$lang->name}.slug", $data[$lang->name]->slug ?? '') }}">
                                    </div>

                                    <div class="col-md-8 mb-3">
                                        <label class="form-label">{{ translate('Description') }}</label>
                                        <textarea class="form-control text-editor" name="data[{{$lang->name}}][description]" id="description_{{$lang->name}}">{{ old("data.{$lang->name}.description", $data[$lang->name]->description ?? '') }}</textarea>
                                    </div>

                                    <div class="col-md-4 mb-3">
                                        <label class="form-label">{{ translate('Short Description') }}</label>
                                        <textarea class="form-control" name="data[{{$lang->name}}][short_description]" id="short_description_{{$lang->name}}">{{ old("data.{$lang->name}.short_description", $data[$lang->name]->short_description ?? '') }}</textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="card mb-4">
                                <div class="card-header"><strong>{{ translate('Meta Info') }}</strong></div>
                                <div class="card-body row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">{{ translate('Meta Title') }}</label>
                                        <input type="text" class="form-control" name="data[{{$lang->name}}][meta_title]" value="{{ old("data.{$lang->name}.meta_title", $data[$lang->name]->meta_title ?? '') }}">
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">{{ translate('Meta Description') }}</label>
                                        <textarea class="form-control" name="data[{{$lang->name}}][meta_description]">{{ old("data.{$lang->name}.meta_description", $data[$lang->name]->meta_description ?? '') }}</textarea>
                                    </div>

                                    <div class="col-12 mb-3">
                                        <label class="form-label">{{ translate('Meta Keywords') }}</label>
                                        <input type="text" class="form-control tagify-input" name="data[{{$lang->name}}][meta_keywords]" value="{{ old("data.{$lang->name}.meta_keywords", $data[$lang->name]->meta_keywords ?? '') }}">
                                    </div>

                                    <div class="col-12 mb-3">
                                        <label class="form-label">{{ translate('Meta Image') }}</label>
                                        <input type="file" class="form-control" name="meta_img">
                                        @if(isset($method) && $method == 'PUT' && $Blog->meta_img)
                                            <img src="{{ asset($Blog->meta_img) }}" width="80" height="80" class="mt-2">
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </div>
    </div>

    <!-- Right Column (col-3) -->
    <div class="col-lg-3">
        <div class="card mb-4">
            <div class="card-header"><strong>{{ translate('Category') }}</strong></div>
            <div class="card-body">
                <select class="form-control" name="category_id">
                    <option value="">{{ translate('Select Category') }}</option>
                    @foreach($categories as $category)
                        <option value="{{ $category->id }}" {{ old('category_id', $Blog->category_id ?? '') == $category->id ? 'selected' : '' }}>
                            {{ $category->blog_category_translations->where('lang', $lang->name)->first()->name ?? '-' }}
                        </option>
                    @endforeach
                </select>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header"><strong>{{ translate('Status') }}</strong></div>
            <div class="card-body">
                <select class="form-control" name="status" required>
                    <option value="">{{ translate('Select Status') }}</option>
                    <option value="1" {{ old('status', $Blog->status ?? '') == '1' ? 'selected' : '' }}>{{ translate('Active') }}</option>
                    <option value="0" {{ old('status', $Blog->status ?? '') == '0' ? 'selected' : '' }}>{{ translate('Inactive') }}</option>
                </select>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header"><strong>{{ translate('Banner Image') }}</strong></div>
            <div class="card-body">
                <input type="file" class="form-control" name="banner">
                @if(isset($method) && $method == 'PUT' && $Blog->banner)
                    <img src="{{ asset($Blog->banner) }}" width="80" height="80" class="mt-2">
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Submit Button -->
<div class="text-center mt-4">
    <button class="btn btn-primary" id="submitBtn" type="submit">{{ translate('Submit form') }}</button>
</div>

</form>




<script>

document.addEventListener("DOMContentLoaded", function () {
        const inputs = document.querySelectorAll(".tagify-input");

        inputs.forEach(input => {
            // Initialize Tagify
            new Tagify(input);
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        tinymce.init({
            selector: '.text-editor',
            height: 300,
            plugins: 'lists link image code table',
            toolbar: 'undo redo | formatselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | link image | code',
            menubar: false,
            branding: false
        });
    });



    function generateSlug(language) {
        let title = document.getElementById('title_' + language).value;

        let slug = title
            .toLowerCase()
            .replace(/[^\w\sأ-يء-ى]/g, '')
            .replace(/[\s_-]+/g, '_')
            .replace(/^-+|-+$/g, '');

        document.getElementById('slug_' + language).value = slug;
    }



    document.getElementById('submitBtn').addEventListener('click', function(event) {
        var form = document.getElementById('myForm');
        if (!form.checkValidity()) {
            event.preventDefault();
            form.classList.add('was-validated');
            return;
        }

        var submitBtn = document.getElementById('submitBtn');
        submitBtn.disabled = true;
        submitBtn.innerHTML = 'Loading...';

        setTimeout(function() {
            form.submit();
        }, 1000);

        event.preventDefault();
    });

</script>




@endsection