@extends('superadmin.layout.main')

@section('header-js')
    <script src="{{ asset('/assets/ckeditor/ckeditor.js') }}"></script>
    <style>
        .card-header {
            background-color: #e0e0e0;
        }
    </style>
@endsection

<!-- Page header -->
@section('page-header')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <!-- Page pre-title -->
                    {{-- <div class="page-pretitle">
                        Manage
                    </div> --}}
                    <h2 class="page-title">
                        {{ $page['pageTitle'] }}
                    </h2>
                </div>
                <!-- Page title actions -->
                <div class="col-auto ms-auto d-print-none">
                    <div class="btn-list">
                        <span class="d-none d-sm-inline">
                            <a href="{{ route('admin.dashboard') }}" class="btn btn-primary">
                                {!! $GO_BACK !!} Go Back
                            </a>
                        </span>

                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- main container -->
@section('main-container')
    <form id="form-id" action="#" method="post" enctype="multipart/form-data">
        @csrf
        <!-- General Add -->
        <div class="row row-deck row-cards">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            General
                        </h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="hidden" name="view" value="pages.dynamic.index">
                                        <input type="hidden" name="is_custom_page"
                                            value="{{ App\Templates\I_STATUS::YES }}">
                                        <input type="hidden" name="item_type" value="{{ $page['itemTypeNo'] }}">

                                        <div class="mb-3">
                                            <label class="form-label required">{{ $page['itemTypeNo'] != App\Templates\I_MODULE::BLOG_ITEM ? 'Main Title' : 'Title' }}</label>
                                            <input type="text" class="form-control" id="menuName" name="card_heading"
                                                placeholder="Home page card title" required="required"
                                                oninput="generateSlug()">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Homepage Card Content</label>
                                            <input type="text" class="form-control" id="cardContent" name="name" placeholder="Check your IP Address by using this tool"
                                                value="{{ $item->card_content?? false }}">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label required">Header Menu</label>
                                            <input type="text" class="form-control" name="name"
                                                placeholder="Header menu" id="headerMenu" required="required">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label required">Slug / URL</label>
                                            <input type="text" class="form-control" id="url" name="url"
                                                placeholder="Slug / URL" required="required">
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <!-- Form with Image Input -->
                                                <div class="file-input-wrapper mb-3">

                                                    <label
                                                        class="form-label">{{ isset($page['itemTypeNo']) && $page['itemTypeNo'] == App\Templates\I_MODULE::BLOG_ITEM ? 'Thumbnail' : 'Icon' }}
                                                        Image:</label>
                                                    <input type="file" class="form-control" name="icon_image"
                                                        accept="image/*" onchange="previewImage(event, 'iconPreview')">
                                                </div>
                                                <!-- Image Preview Section -->
                                                <div class="image-preview-container previewContainer">
                                                    @php
                                                        $imageName =
                                                            isset($page['itemTypeNo']) &&
                                                            $page['itemTypeNo'] == App\Templates\I_MODULE::BLOG_ITEM
                                                                ? '150x150.svg'
                                                                : '50x50.svg';
                                                    @endphp
                                                    <img class="imagePreview" id="iconPreview"
                                                        src="{{ asset('assets/images/' . $imageName) }}" alt="Icon Preview" />
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <!-- Form with Image Input -->
                                                <div class="file-input-wrapper mb-3">
                                                    <label class="form-label">Cover Image:</label>
                                                    <input type="file" class="form-control" name="cover_image"
                                                        accept="image/*" onchange="previewImage(event, 'coverPreview')">
                                                </div>
                                                <!-- Image Preview Section -->
                                                <div class="image-preview-container previewContainer">
                                                    <img class="imagePreview" id="coverPreview"
                                                        src="{{ $GLOBAL_COVER_IMAGE? Storage::url($GLOBAL_COVER_IMAGE): asset('assets/images/1400x300.svg') }}"
                                                        alt="Cover Preview" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>

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

        <!-- SEO Update -->
        <div class="row row-deck row-cards mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            SEO
                        </h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3">
                                            <label class="form-label">Page Title (SEO)</label>
                                            <input type="text" id="pageTitle" class="form-control" name="page_title"
                                                placeholder="Page title i.e Text Converter">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Meta Title (SEO)</label>
                                            <input type="text" id="metaTitle" class="form-control" name="meta_title"
                                                placeholder="Meta title i.e Convert your text case from lowercase to uppercase">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Meta Description (SEO)</label>
                                            <input type="text" class="form-control" name="meta_title"
                                                placeholder="Meta description i.e Convert your text case from lowercase to uppercase, sentance to lowercase, uppercase to capitalize and capitalize to sentance case.">
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Meta Keywords (SEO)</label>
                                            <input type="text" class="form-control" name="keyword"
                                                placeholder="Meta keywords i.e textconverter, caseconverter, lowercase, uppercase">
                                        </div>

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

        <!-- Content Update -->
        <div class="row row-deck row-cards mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            Content
                        </h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-5">

                            <div class="col-md-12 mt-3 mb-3">
                                <div class="row">
                                    <div class="col-md-12 mt-3">
                                        <div class="mb-3 editor-container">
                                            <label class="form-label">Main Content<span
                                                    class="form-label-description char-count"></span></label>
                                            <textarea class="form-control ck-edit" name="content_main" rows="6" placeholder="Main content.."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3 editor-container">
                                            <label class="form-label">Before Main Content<span
                                                    class="form-label-description char-count"></span></label>
                                            <textarea class="form-control ck-edit" name="content_before" rows="6"
                                                placeholder="Content before main content.."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="mb-3 editor-container">
                                            <label class="form-label">After Main Content<span
                                                    class="form-label-description char-count"></span></label>
                                            <textarea class="form-control ck-edit" name="content_after" rows="6"
                                                placeholder="Content after main content.."></textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>

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


        <!-- Visibility Update -->
        <div class="row row-deck row-cards mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            Visibility
                        </h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">

                                        <div class="mb-3">
                                            <div class="form-label">Visibility</div>
                                            <div>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="show_in_header">
                                                    <span class="form-check-label">Show in Header</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox" name="show_in_home">
                                                    <span class="form-check-label">Show in Home</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="show_in_popular">
                                                    <span class="form-check-label">Show in Popular</span>
                                                </label>
                                                <label class="form-check form-check-inline">
                                                    <input class="form-check-input" type="checkbox"
                                                        name="show_in_most_view">
                                                    <span class="form-check-label">Show in Most View</span>
                                                </label>

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

        <!-- Movement -->
        <div class="row row-deck row-cards mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            Movement
                        </h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">

                                        <div class="mb-3">
                                            <div class="form-label">Category</div>
                                            <select name="category_id" class="form-select">
                                                @foreach ($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>

                                        <div class="mb-3">
                                            <div class="form-label">Parent Menu</div>
                                            <select class="form-select" name="parent_id">
                                                <option value="">Select Parent Menu</option>
                                                @foreach ($modules as $navitem)
                                                    <option value="{{ $navitem->id }}">
                                                        {{ $navitem->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>

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

        <!-- Order Update -->
        <div class="row row-deck row-cards mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            Order
                        </h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="row">
                                            <div class="col">
                                                <div class="mb-3">
                                                    <div class="form-label">Home/Menu Order</div>
                                                    <select class="form-select" name="order">
                                                        @for ($i = 0; $i <= 20; $i++)
                                                            <option value="{{ $i }}">{{ $i }}
                                                            </option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="mb-3">
                                                    <div class="form-label">Siderbar Most View Order
                                                    </div>
                                                    <select class="form-select" name="most_view_order">
                                                        @for ($i = 0; $i <= 20; $i++)
                                                            <option value="{{ $i }}">{{ $i }}
                                                            </option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="col">
                                                <div class="mb-3">
                                                    <div class="form-label">Siderbar Popular Order
                                                    </div>
                                                    <select class="form-select" name="popular_order">
                                                        @for ($i = 0; $i <= 20; $i++)
                                                            <option value="{{ $i }}">{{ $i }}
                                                            </option>
                                                        @endfor
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

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

                        <div class="row mt-3">
                            <div class="col-sm-2">
                                <button type="submit" action="add" url="{{ route('admin.tools.save') }}"
                                    class="btn btn-success form_submit">
                                    {!! $CHECK !!}
                                    Submit </button>
                            </div>
                        </div>

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

        <!-- Custom Header & Footer -->
        {{-- <div class="row row-deck row-cards mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h2 class="card-title">
                            Custom Header & Footer
                        </h2>
                    </div>
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-md-12">
                                <div class="row">
                                    <div class="col-md-12">


                                        <div class="mb-3">
                                            <label class="form-label">Custom Meta Tags</label>
                                            <textarea rows="10" class="form-control" name="custom_meta_tags"
                                                placeholder='<meta name="custom" content="tag" />'>{{ old('custom_meta_tags') }}</textarea>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Custom Header</label>
                                            <textarea rows="10" class="form-control" name="custom_header"
                                                placeholder="Custom header JS or CSS i.e {{ $JS_CSS_PLACEHOLDER }}">{{ old('custom_header') }}</textarea>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Custom Footer</label>
                                            <textarea rows="10" class="form-control" name="custom_footer"
                                                placeholder="Custom footer JS or CSS i.e {{ $JS_CSS_PLACEHOLDER }}">{{ old('custom_footer') }}</textarea>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div> --}}

    </form>
@endsection

@section('script')
<script>
    document.querySelectorAll('.ck-edit').forEach(function (element) {
        CKEDITOR.replace(element, {
            toolbar: [
                { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] },
                { name: 'paragraph', items: ['NumberedList', 'BulletedList'] },
                { name: 'links', items: ['Link', 'Unlink'] },
                { name: 'clipboard', items: ['Undo', 'Redo'] },
                { name: 'styles', items: ['Format'] },
            ],
            removePlugins: 'elementspath',
            resize_enabled: false
        });
    });
</script>
@endsection