@extends('backend.template.layouts.template-base')
@section('title')
    Meta Tags | {{ config('setting.website_name') ?: config('app.name') }}
@endsection
@section('content')
    <section>
        <div class="row">
            <div class="col-lg-3">
                <ul class="list-group">
                    @foreach ($pages as $page)
                        <a href="{{ route('backend.template.metatags.index', $page) }}">
                            <li class="list-group-item d-flex align-items-center {{ request()->routeIs('backend.template.metatags.index') && request()->route('page') === $page ? 'active' : '' }}">
                                <i class="bx bx-tag-alt me-2"></i>
                                <strong>{{ ucwords(str_replace(['_' , '-'], ' ', $page)) }} Page</strong>
                            </li>
                        </a>
                    @endforeach
                </ul>
            </div>

            <div class="col-lg-9">
                <form id="meta-tags" action="{{ route('backend.template.metatags.store', $meta->page ?? request()->route('page')) }}" method="post"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="card">
                        <div class="card-header align-items-center d-flex">
                            <h4 class="card-title mb-0 flex-grow-1">{{ ucwords(str_replace(['_' , '-'], ' ', ($meta->page ?? request()->route('page')) )) }} Page - Meta Tag</h4>
                        </div><!-- end card header -->
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label for="title">Meta Title</label>
                                    <input type="text" class="form-control" placeholder=""
                                        name="title" autocomplete="off"
                                        value="{{ $meta ? $meta->title : '' }}">
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="description">Meta Description</label>
                                    <textarea class="form-control" rows="2" placeholder="" name="description"
                                        autocomplete="off">{{ $meta ? $meta->description : '' }}</textarea>
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="keyword">Meta Keyword</label>
                                    <input type="text" class="form-control" rows="2" placeholder=""
                                        name="keyword" autocomplete="off"
                                        value="{{ $meta ? $meta->keyword : '' }}">
                                </div>
                                <div class="col-md-12 mb-3">
                                    <label for="others">Other Script Tag</label>
                                    <textarea class="form-control" rows="6" placeholder="" name="others"
                                        autocomplete="off">{{ $meta ? $meta->others : '' }}</textarea>
                                    <label class="text-danger">Note: It should be only
                                        script tag </label>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-xxl-3 mt-3 col-md-6">
                                    <button type="submit" class="btn btn-success btn-label right ms-auto"><i
                                            class="bx bx-right-arrow-alt label-icon align-middle fs-16 ms-2"></i>Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection
@section('scripts')
    <script>
        $(document).ready(function() {
            $("#meta-tags").validate({
                rules: {
                    title: {
                        maxlength: 100,
                    },
                    keyword: {
                        maxlength: 300,
                    },
                    description: {
                        maxlength: 200,
                    },
                },
                messages: {
                    title: {
                        maxlength: "Good length - a meta title should be between 50-60 characters"
                    },
                    keyword: {
                        maxlength: "Good length - a meta keyword should keep under 200 characters"
                    },
                    description: {
                        maxlength: "Good length - a meta description should be between 70 - 155 characters"
                    },
                },
                highlight: function(element) {
                    $(element).closest('.form-group').addClass('has-error');
                },
                unhighlight: function(element) {
                    $(element).closest('.form-group').removeClass('has-error');
                }
            });
        });
    </script>
@endsection