@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">
            <div class="row g-2 align-items-center">
                <div class="col-sm-2">

                    <a href="{{ route('admin.tools.list') }}" class="btn btn-primary">
                        {!! $GO_BACK !!}
                        Go Back
                    </a>
                </div>
                <div class="col-sm-10">
                    <h2 class="page-title">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                            stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-edit">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1" />
                            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z" />
                            <path d="M16 5l3 3" />
                        </svg>
                        Edit {{ $item->card_heading }}
                    </h2>
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- main container -->
@section('main-container')
<form action="{{url('admin/tools/update')}}" method="post" enctype="multipart/form-data">
    @csrf
    <input type="hidden" name="id" value="{{$item->id}}">

    <!-- General Update -->
    <div class="row row-deck row-cards">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h2 class="card-title">
                        General Update
                    </h2>
                </div>
                <div class="card-body">
                    <div class="row g-5">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label required">{{$item->item_type != 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" value="{{ $item->card_heading }}"
                                            required="required"  oninput="generateSlug()">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label required">Header Menu</label>
                                        <input type="text" class="form-control" id="headerMenu" name="name" placeholder="Header menu"
                                            value="{{ $item->name }}" required="required">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Homepage Card Content</label>
                                        <input type="text" class="form-control" id="cardContent" name="card_content" placeholder="Check your IP Address by using this tool"
                                            value="{{ $item->card_content }}">
                                    </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" value="{{ $item->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">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">
                                                <img class="imagePreview" id="iconPreview" src="{{ $item->icon_image? Storage::url($item->icon_image) : asset('assets/images/50x50.svg')}}" 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="{{ $item->cover_image ? Storage::url($item->cover_image) : Storage::url($GLOBAL_COVER_IMAGE)}}" 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 Update
                    </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" value="{{ $item->page_title }}">
                                    </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" value="{{ $item->meta_title }}">
                                    </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" value="{{ $item->meta_description }}">
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label">Meta Keywords (SEO)</label>
                                        <input type="text" class="form-control" name="keyword"
                                            placeholder="Meta keywords" value="{{ $item->keyword }}">
                                    </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 Update
                    </h2>
                </div>
                <div class="card-body">
                    <div class="row g-5">
                        <div class="col-md-12">
                            <div class="row">
                                <div class="col-md-12">
                                    
                                    @if($item->is_custom_page)
                                    <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..">{!! $item->content_main !!}</textarea>
                                    </div>
                                    @endif

                                    <div class="mb-3 editor-container">
                                        <label class="form-label">Before {{$item->is_custom_page? "Main" : false}} Content <span class="form-label-description char-count"></span></label>
                                        <textarea class="form-control ck-edit" name="content_before" rows="6" placeholder="Content before..">{!! $item->content_before !!}</textarea>
                                    </div>

                                    <div class="mb-3 editor-container">
                                        <label class="form-label">After {{$item->is_custom_page? "Main" : false}} Content 
                                            <span class="form-label-description char-count"></span></label>
                                        <textarea class="form-control ck-edit" name="content_after" rows="6" placeholder="Content after..">{!! $item->content_after !!}</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 Update
                    </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"
                                                    {{ $item->show_in_header ? 'checked' : false }}>
                                                <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"
                                                    {{ $item->show_in_home ? 'checked' : false }}>
                                                <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"
                                                    {{ $item->show_in_popular ? 'checked' : false }}>
                                                <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"
                                                    {{ $item->show_in_most_view ? 'checked' : false }}>
                                                <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 class="form-select" name="category_id">
                                            @foreach ($categories as $category)
                                                <option value="{{ $category->id }}" {{$item->category_id == $category->id? "selected" : false }} >{{ $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 ($navitems as $navitem)
                                                <option value="{{ $navitem->id }}"
                                                    {{ $navitem->id == $item->parent_id ? 'selected' : false }}>
                                                    {{ $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 Update
                    </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 }}"
                                                            {{ $item->order == $i ? 'selected' : false }}>
                                                            {{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="mb-3">
                                                <div class="form-label">Sidebar Most View Order
                                                </div>
                                                <select class="form-select" name="most_view_order">
                                                    @for ($i = 0; $i <= 20; $i++)
                                                        <option value="{{ $i }}"
                                                            {{ $item->most_view_order == $i ? 'selected' : false }}>
                                                            {{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col">
                                            <div class="mb-3">
                                                <div class="form-label">Sidebar Popular Order
                                                </div>
                                                <select class="form-select" name="sidebar_order">
                                                    @for ($i = 0; $i <= 20; $i++)
                                                        <option value="{{ $i }}"
                                                            {{ $item->popular_order == $i ? 'selected' : false }}>
                                                            {{ $i }}</option>
                                                    @endfor
                                                </select>
                                            </div>
                                        </div>
                                    </div>

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

                    <div class="row mt-3">
                        <div class="col-sm-2">
                            <button type="submit" class="btn btn-success"> 
                                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-circle-check"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" /></svg>
                                 Update </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="Custom meta tags">{{$item->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 or whatever">{{$item->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 or whatever">{{ $item->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