@extends('backend.layouts.app')
@section('title', $title)
@section('content')

    <x-back-button :route="route('admin.blogs.index')">Back to blogs</x-back-button>


    <form action="{{ route('admin.blogs.store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            {{ $title }}
                        </h5>
                    </div>
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col-6">
                                <label for="image" class="form-label">Blog image <span
                                        class="text-danger">*</span></label>
                                <input type="file" name="image" id="image"
                                       class="form-control @error('image') is-invalid @enderror"
                                       onchange="previewImage(event)">
                                @error('image')
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                            <div class="col-1">
                                <img src="{{ asset('default-images/placeholder.png') }}" id="product-img"
                                     width="100%" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                <div class="col">
                                    <label class="form-label" for="title_{{ $localeCode }}">Name <span
                                            class="text-capitalize">{{ $properties['native'] }}</span> <span
                                            class="text-danger">*</span></label>
                                    <input dir="{{ $localeCode == "ar" ? 'rtl' : 'ltr' }}"
                                           class="form-control @error("title_$localeCode") is-invalid @enderror"
                                           type="text" id="title_{{ $localeCode }}" name="title_{{ $localeCode }}"
                                           value="{{ old('title_' . $localeCode) }}" required/>
                                    @error("title_$localeCode")
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        </div>
                        <div class="form-group row mb-3">
                            @foreach(LaravelLocalization::getSupportedLocales() as $localeCode => $properties)
                                <div class="col">
                                    <label class="form-label" for="description_{{ $localeCode }}">Description
                                        <span class="text-capitalize">{{ $properties['native'] }}</span>
                                        <span class="text-danger">*</span>
                                    </label>
                                    <textarea dir="{{ $localeCode == 'ar' ? 'rtl' : 'ltr' }}"
                                              class="form-control @error("description_$localeCode") is-invalid @enderror"
                                              id="description_{{ $localeCode }}"
                                              name="description_{{ $localeCode }}"
                                              required>{{ old('description_' . $localeCode) }}</textarea>
                                    @error("description_$localeCode")
                                    <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label">Tags <span class="text-danger">*</span></label>
                                <select name="tags[]" id="tags"
                                        class="select2 form-control @error('tags') is-invalid @enderror select2-multiple"
                                        data-toggle="select2"
                                        multiple="multiple" data-placeholder="Choose tags...">
                                    @foreach($tags as $key => $tag)
                                        <option value="{{  $tag->id }}">{{ $tag->name }}</option>
                                    @endforeach
                                </select>
                                @error('tags')
                                <span class="text-danger">
                                    {{ $message }}
                                </span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group row mb-3">
                            <div class="col">
                                <label class="form-label">Published Date <span class="text-danger">*</span></label>
                                <input type="date" name="published_date" id="published_date"
                                       class="form-control @error('published_date') is-invalid @enderror"
                                       value="{{ old('published_date') }}">
                                @error('published_date')
                                <span class="text-danger">
            {{ $message }}
        </span>
                                @enderror
                            </div>
                            <div class="col">
                                <label class="form-label" for="is_published">Published</label>
                                <div class='form-check form-switch'>
                                    <input class='form-check-input @error('is_published') is-invalid @enderror'
                                           type='checkbox' id='is_published' name="is_published"
                                           style="width: 50px; height: 30px;" @checked((bool)old('is_published')===true) />
                                </div>
                                @error("is_published")
                                <span class="text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <div class="form-group row mb-3">
                    <div class="col">
                        <button type="submit" class="btn btn-primary" onclick="loadingBtn(this)">Submit</button>
                    </div>
                </div>
            </div>
        </div>

    </form>
@endsection

@section('script')
    <script>
        function previewImage(event) {
            const output = document.getElementById('product-img');
            output.src = URL.createObjectURL(event.target.files[0]);
        }

    </script>
@endsection