@extends('layout._default')

@section('body-con')
   
@section('title')
    Static Page Content
@endsection 
  
    <div class="card">
        <div class="card-header border-0 pt-6">

            <!--begin::Card toolbar-->
            <div class="card-toolbar">
                @if(Auth::user()->hasPermission('can_add_static_content'))
                <!--begin::Toolbar-->
                <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                    <!--begin::Add user-->
                    <button type="button" class="btn btn-primary" onclick="addRecord()">
                        {!! getIcon('plus', 'fs-2', '', 'i') !!}
                        Add Static Page
                    </button>
                    <!--end::Add user-->
                </div>
                @endif
                <!--end::Toolbar-->

                <!--begin::Modal-->

                <!--end::Modal-->
            </div>
            <!--end::Card toolbar-->
        </div>
        <!--end::Card header-->
        <div class="card-body py-4">

            {{-- <div class="card-title">
                <!--begin::Search-->
                <div class="d-flex align-items-center position-relative my-1">
                    {!! getIcon('magnifier', 'fs-3 position-absolute ms-5') !!}
                    <input type="text" data-kt-user-table-filter="search" class="form-control form-control-solid w-250px ps-13" placeholder="Search user" id="mySearchInput"/>
                </div>
                <!--end::Search-->
            </div> --}}
            {{-- <div class="text-end my-1 d-flex flex-wrap">
                <div class="form-group p-1">
                    <select name="" id="status" class="form-control form-control-solid w-200px ps-13" onchange="filterData()">
                        <option value="">Status</option>
                        <option value="pending">Pending</option>
                        <option value="paid">Paid</option>
                        <option value="refunded">Refunded</option>
                    </select>
                </div>
            </div> --}}
            <!--begin::Table-->
            <div class="table-responsive">
                <table class="table align-middle table-row-dashed fs-6 gy-5 dataTable no-footer text-gray-600 fw-semibold">
                    <thead>
                        <tr>
                            <th class="align-items-center">Type</th>
                            <th class="align-items-center">Content</th>
                            <th class="text-end">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($contents as $value)
                            <tr>
                                <td>{{ $value->type }}</td>
                                <td>{!! $value->content !!}</td>
                                <td class="text-end">
                                    @if(Auth::user()->hasPermission('can_edit_static_content'))
                                    <a href="javascript:void(0)" onclick="editcontent({{$value->id}})" title="Edit Content"><i class="ki-duotone ki-message-edit" style="font-size:22px">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        </i>
                                    </a>
                                    @endif
                                    @if(Auth::user()->hasPermission('can_delete_static_content'))
                                    <a href="javascript:void(0)" title="Delete"><i class="ki-duotone ki-cross-square" style="font-size:22px" onclick="deleteContent({{$value->id}})">
                                        <span class="path1"></span>
                                        <span class="path2"></span>
                                        </i>
                                    </a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
                
               
            </div>
            <div>
                {{ $contents->links() }}
            </div>
            <!--end::Table-->
        </div>
    </div>

    @include('livewire.static-page.add-page')
    @include('livewire.static-page.edit-page-modal')

@endsection

@push('scripts')
<script src="https://cdn.tiny.cloud/1/{{env("TINYMCE_KEY")}}/tinymce/7/tinymce.min.js" referrerpolicy="origin"></script>

<script>
    function addRecord()
    {
        tinymce.remove();
        tinymce.init({
            selector: '#content',
            plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
            toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
        });
        $("#kt_modal_add_page").modal('show');
    }
     function editcontent(id)
    {
        $.ajax({
            type: "GET",
            url: "/admin/static-pages/"+id+"/edit",
            success: function(response)
            {
                if(response.status == 1)
                {
                    $("#edit-user-body").empty();
                    $("#edit-user-body").append(response.data);
                    tinymce.remove();
                    tinymce.init({
                        selector: '#edit_content',
                        plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount',
                        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat',
                    });
                    $("#kt_modal_edit_user").modal("show");

                }
                
            }
        })
    }

    $("#add-user-submit-btn").click(async function(e) {
        e.preventDefault();
        var type = $("#type").val();
        var content = $("#content").val();
        var error = false;

        $(".text-danger").text('');
        if(type == '')
        {
            $("#type_error").text('Type Is Required');
            error = true;
        }
        // if(content == '')
        // {
        //     $("#content_error").text('Content Is Required');
        //     error = true;
        // }
    
        if(error)
        {
            return false;
        }

        
        $('#kt_modal_add_page_form').submit();
    });

    $(document).on("click", "#edit-user-submit-btn", async function(e) {
        var type = $("#edit_type").val();
        var content = $("#edit_content").val();
        var error = false;

        $(".text-danger").text('');
        if(type == '')
        {
            $("#edit_type_error").text('Type Is Required');
            error = true;
        }
        // if(content == '')
        // {
        //     $("#edit_content_error").text('Content Is Required');
        //     error = true;
        // }
    
        if(error)
        {
            return false;
        }

        $('#kt_modal_edit_user_form').submit();

    });

    function deleteContent(id)
    {
        var url = "/admin/static-pages/"+id+"/delete";
            Swal.fire({
                html: `Are You Sure You Want To Delete This ? `,
                icon: "info",
                buttonsStyling: false,
                showCancelButton: true,
                confirmButtonText: "Confirm!",
                cancelButtonText: 'Nope, cancel it',
                customClass: {
                    confirmButton: "btn btn-primary",
                    cancelButton: 'btn btn-danger'
                }
            }).then((result) => {
                if (result.isConfirmed) {
                    window.location.href = url;
                }
            });
    }


</script>
@endpush