@extends('layouts.admin.index')

@section('content')
    <div class="page-header page-header-light shadow">
        <div class="page-header-content d-lg-flex">
            <div class="d-flex">
                <h4 class="page-title mb-0">
                    Home - <span class="fw-normal">SEO Settings</span>
                </h4>

                <a href="#page_header"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>

        <div class="page-header-content d-lg-flex border-top">
            <div class="d-flex">
                <div class="breadcrumb py-2">
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item"><i class="ph-house"></i></a>
                    <a href="{{ route('admin.dashboard') }}" class="breadcrumb-item">Settings</a>
                    <span class="breadcrumb-item active">SEO</span>
                </div>

                <a href="#breadcrumb_elements"
                    class="btn btn-light align-self-center collapsed d-lg-none border-transparent rounded-pill p-0 ms-auto"
                    data-bs-toggle="collapse">
                    <i class="ph-caret-down collapsible-indicator ph-sm m-1"></i>
                </a>
            </div>
        </div>
    </div>

    <div class="content">

        @include('error-success')

        <div class="card">
            <div class="card-body border-top">
                <form id="add-category-form" action="{{ $data['url'] }}" enctype="multipart/form-data" method="POST">
                    {!! csrf_field() !!}

                    {{-- <input type="hidden" id="page-slug-hidden" name="page_slug" value="home"> --}}

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">Page:</label>
                        <div class="col-lg-9">
                            {{ Form::select('page_slug', $data['pages'], 'S', ['class' => 'form-select', 'id' => 'page-slug']) }}
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">Meta Title:</label>
                        <div class="col-lg-9">
                            <input type="text" name="meta_title" id="meta-title"
                                value="{{ $data['home_page_data']['meta_title'] ?? '' }}" class="form-control"
                                placeholder="Enter meta title">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">Meta Description:</label>
                        <div class="col-lg-9">
                            <textarea rows="3" cols="3" class="form-control" name="meta_description" id="meta-description"
                                placeholder="Enter meta description">{{ $data['home_page_data']['meta_title'] ?? '' }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">Meta Keyword:</label>
                        <div class="col-lg-9">
                            <textarea rows="3" cols="3" class="form-control" name="meta_keyword" id="meta-keyword"
                                placeholder="Enter meta keyword">{{ $data['home_page_data']['meta_keyword'] ?? '' }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">OG Title:</label>
                        <div class="col-lg-9">
                            <input type="text" name="og_title" id="og-title"
                                value="{{ $data['home_page_data']['og_title'] ?? '' }}" class="form-control"
                                placeholder="Enter og title">
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">OG Meta Description:</label>
                        <div class="col-lg-9">
                            <textarea rows="3" cols="3" class="form-control" name="og_meta_description" id="og-meta-description"
                                placeholder="Enter og meta description">{{ $data['home_page_data']['og_meta_description'] ?? '' }}</textarea>
                        </div>
                    </div>

                    <div class="row mb-3">
                        <label class="col-lg-3 col-form-label">OG Image:</label>
                        <div class="col-lg-9">
                            <input type="file" name="og_image" class="form-control">
                            <div class="form-text text-muted">Accepted formats: gif, png, jpg. Max file size 2Mb</div>
                        </div>
                    </div>

                    <div class="row mb-3" id="og-image-preview"
                        style="display: {{ !empty($data['home_page_data']['og_image']) ? 'flex' : 'none' }}">
                        <label class="col-lg-3 col-form-label"></label>
                        <div class="col-lg-9">
                            <div class="row">
                                <div class="col-sm-6 col-xl-3">
                                    <div class="card">
                                        <div class="card-img-actions mx-1 mt-1">
                                            <img class="card-img img-fluid" id="og-image-preview-tag"
                                                src="{{ $data['home_page_data']['og_image'] ?? '' }}" alt="">
                                            <div class="card-img-actions-overlay card-img">
                                                <a href="{{ $data['home_page_data']['og_image'] ?? '' }}"
                                                    id="og-image-preview-overlay"
                                                    class="btn btn-outline-white btn-icon rounded-pill"
                                                    data-bs-popup="lightbox" data-gallery="gallery1">
                                                    <i class="ph-plus"></i>
                                                </a>
                                                <a href="#"
                                                    class="btn btn-outline-white btn-icon rounded-pill ms-2">
                                                    <i class="ph-link"></i>
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="text-end">
                        <button type="submit" class="btn btn-primary">Submit <i
                                class="ph-paper-plane-tilt ms-2"></i></button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {
            $("#page-slug").on('click', function() {
                const pageSlug = $(this).val();

                //$("#page-slug-hidden").val(pageSlug);

                $.ajax({
                    url: "{{ route('get.seo.details') }}",
                    type: 'GET',
                    dataType: 'JSON',
                    data: {
                        page_slug: pageSlug,
                        _token: token
                    },
                    success: function(response, textStatus, jqXHR) {
                        $("#meta-title").val(response?.data?.meta_title);
                        $("#meta-description").val(response?.data?.meta_description);
                        $("#meta-keyword").val(response?.data?.meta_keyword);
                        $("#og-title").val(response?.data?.og_title);
                        $("#og-meta-description").val(response?.data?.og_meta_description);

                        $("#og-image-preview-tag").attr('src', response?.data
                            ?.og_image);
                        $("#og-image-preview-overlay").attr('href', response?.data
                            ?.og_image);

                        if (response?.data
                            ?.og_image) {
                            $("#og-image-preview").css("display", "flex");
                        } else {
                            $("#og-image-preview").css("display", "none");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {

                    }
                });
            });
        });
    </script>
@endsection