@extends('admin.layouts.master')

@section('content')
    <div class="page-wrapper page-settings">
        <div class="content">
            <div class="content-page-header content-page-headersplit">
                <h5>Settings</h5>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body flex-column-blk">

                            <div class="tab-sets">
                                <div class="tab-contents-sets">
                                    <ul class="nav">
                                        <li>
                                            <a href="{{route('admin.settings')}}">Email</a>
                                        </li>
                                        <li>
                                            <a href="{{route('admin.paymentpage')}}">Payment</a>
                                        </li>
                                        <li>
                                            <a href="{{route('admin.generalpage')}}">General</a>
                                        </li>
                                        <li>
                                            <a href="{{route('admin.featuredpage')}}">Featured Ads</a>
                                        </li>
                                        <li>
                                            <a href="{{route('admin.promopage')}}">Promotional Ads</a>
                                        </li>
                                        <li>
                                            <a class="active" href="{{route('admin.cmspage')}}">CMS Settings</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-12">
                                    <div class="tab-content p-0">

                                        

                                        <div class="tab-pane p-0 container active" id="cms">
                                            <div class="card-wrapper">
                                                <div class="card-border">
                                                    <div class="header-blk">
                                                        <div class="blk-start">
                                                            <img src="assets/img/settings-template-icon.svg" alt="">
                                                            <div>
                                                                <h4>CMS Settings</h4>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="body-blk">
                                                        <div class="row">
                                                            @foreach ($cmssettings as $setting)
                                                                <div class="col-lg-6 col-12">
                                                                    <div class="card-border card-template flex-card">
                                                                        <div class="card-start">
                                                                            <div class="icon-blk align-center">
                                                                                <span class="material-symbols-outlined">lock
                                                                                </span>
                                                                            </div>
                                                                            <div>
                                                                                <h4>{{ $setting->title }}</h4>
                                                                                <p>Last Changed {{ $setting->updated_at }}</p>
                                                                            </div>
                                                                        </div>
                                                                        <div class="card-end ms-0 ms-md-auto">
                                                                            <div class="table-actions d-flex gap-10">
                                                                                <a class="cms-edit edit-table me-1" data-id="{{ $setting->id }}" data-bs-toggle="modal" data-bs-target="#edit-cms">
                                                                                    <i class="fa-regular fa-pen-to-square"></i>
                                                                                </a>
                                                                                <a class="cmsdel delete-table" data-id="{{ $setting->id }}" data-bs-toggle="modal" data-bs-target="#delete-cms">
                                                                                    <i class="fa-regular fa-trash-can"></i>
                                                                                </a>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endforeach                                                            
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    

    <!-- Edit CMS-->
    <div class="modal fade" id="edit-cms" aria-labelledby="exampleModalLabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabelcms"> </h5>
                    <button class="btn-close close-modal" data-bs-dismiss="modal" type="button" aria-label="Close">
                        <i class="fe fe-x"></i>
                    </button>
                </div>
                <form action="{{ url('cmssettings/cmsupdate') }}" method="POST" id="cmssettings-form">
                    @csrf
                    <div class="modal-body py-0">
                        <div class="row">
                            <div class="col-lg-12 col-12">
                                <div class="form-set">
                                    <label>Title <span class="mandatory">*</span></label>
                                    <input class="form-control" id="cmstitle" name="cmstitle" type="text" value={{ old('cmstitle', $setting->title) }} placeholder="Enter title">
                                    @error('cmstitle')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>

                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-set">
                                    <label>Description <span class="mandatory">*</span></label>
                                    <textarea id="editorcms" name="description" rows="10" cols="50">{{ $setting->description }}</textarea>
                                    @error('description')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <input class="form-control" id="cmsid" name="cmsid" type="number" hidden>
                                </div>

                                <div class="form-set">
                                    <label>Short Description (Meta Tags)<span class="mandatory">*</span></label>
                                    <textarea class="form-control" rows="10" cols="50" name="short_description" id="short_description" rows="3" placeholder="Description"></textarea>
                                    <span>More information <a href="javascript:void(0);" id="infoPopoverDesc">here</a></span>
                                    @error('short_description')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                    <a href="javascript:void(0);" id="popoverContentDesc" data-bs-toggle="popover" data-bs-html="true" 
           data-bs-content="Meta descriptions can be any length, but Google generally truncates snippets to <code>~155–160 characters.</code>  It's best to keep meta descriptions long enough that they're sufficiently descriptive, so we recommend descriptions between <code>~155–160 characters.</code> Keep in mind that the 'optimal' length will vary depending on the situation, and your primary goal should be to provide value and drive clicks" 
           style="cursor: pointer;" data-bs-original-title="Meta Description"></a>
                                </div>

                                <div class="form-set">
                                    <label>Keywords (Meta Tags)</label>
                                    <div class="tags-input" id="tags-input">
                                    <input type="text" id="tag-input" placeholder="Add a tag" value="">
                                    </div>
                                    <input type="hidden" name="keywords" id="keywords" value="">
                                    <span>Example: <code>{page.text}</code>. Press Enter to add a tag. More information <a href="javascript:void(0);" id="infoPopoverKeywords">here</a></span>
                                    <a href="javascript:void(0);" id="popoverContentKeywords" data-bs-toggle="popover" data-bs-html="true" 
           data-bs-content="A series of keywords you deem relevant to the page in question. This tag has no effect for some search engines. There is no official limit on the number of meta keywords you can have. Each search engine sets their own rules. However, it is a good practice to have less than 10% of the total words of a page. If for example your page has 300 words it is better to have <code>maximum 30 words</code> in your meta keyword tag. Otherwise could be considered overstuffing." 
           style="cursor: pointer;" data-bs-original-title="Meta Keywords"></a>
                                    
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer pt-0">
                            <button id="updatebutton" type="submit"class="btn btn-submit">save changes</button>
                            <button class="btn btn-cancel" data-bs-dismiss="modal" type="button">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!-- /Edit CMS -->

    <!-- Delete CMS-->
    <div class="modal fade" id="delete-cms" aria-labelledby="exampleModalLabel" aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Delete Template</h5>
                    <button class="btn-close close-modal" data-bs-dismiss="modal" type="button" aria-label="Close">
                        <i class="fe fe-x"></i>
                    </button>
                </div>
                <div class="modal-body py-0">
                    <div class="del-modal">
                        <p>Are you sure want to Delete?</p>
                    </div>
                </div>
                <input class="form-control" id="cmsdeleteid" name="cmsdeleteid" type="number" hidden>
                <div class="modal-footer">
                    <button class="btn btn-cancel" data-bs-dismiss="modal" type="button">Cancel</button>
                    <button class="btn btn-submit" id="confirmdelete">Yes</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /Delete CMS-->
    <style>
        .tags-input {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid #ced4da;
            padding: 5px;
            border-radius: 4px;
        }

        .tags-input input {
            border: none;
            flex: 1;
            padding: 5px;
            min-width: 120px;
        }

        .tags-input .tag {
            display: flex;
            align-items: center;
            background-color: #007bff;
            color: white;
            padding: 5px;
            margin: 2px;
            border-radius: 4px;
        }

        .tags-input .tag .remove-tag {
            margin-left: 5px;
            cursor: pointer;
        }
    </style>
@endsection