@extends('layouts.landing')

@section('title', 'Create New Pages')

@section('content')
<div class="row">
    <div class="col-12 col-xxl-4 col-xl-4 col-lg-4">
        @include('elements.settings-menu')
    </div>
    <div class="col-12 col-xxl-8 col-xl-8 col-lg-8">
        <div class="card w-100 border-0 p-0 bg-white shadow-xss rounded-xxl">
            <div class="card-body p-4">
                <h5>Create a new page</h5>
                <div class="row">
                    <div class="col-12 col-xl-6 col-lg-6">
                        <form class="pb-4" action="{{route('account.save-new-page')}}" method="POST" >
                            @csrf
                            <div class="mt-2 pt-2 mb-3">
                                <div class="form-group">
                                    <label class="form-label mb-1">
                                        Page title
                                    </label>
                                    <input type="text" id="name" name="name" class="form-control">
                                </div>
                                <div class="form-group mt-4">
                                    <button type="submit" name="submit" disabled id="createPageBtn" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                        <span class="button__text"><i class="mdi mdi-plus"></i> Create</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="mt-4  pb-3 mb-3" data-list='{"valueNames": ["item-name"], "page": 5, "pagination": {"paginationClass": "list-pagination"}}' id="contactsList">
                            <div class="card-header">
                                <h5>All Pages</h5>
                            </div>
                            <div class="card-header">
                                <div class="row ">
                                    <div class="col">
                                        <form>
                                            <div class="input-group input-group-flush input-group-merge input-group-reverse">
                                            <input class="form-control list-search" type="search" placeholder="Search pages">
                                            <span class="input-group-text">
                                                <i class="fe fe-search"></i>
                                            </span>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                @if(count($pages) > 0)
                                    <ul class="list-group list-group-lg list-group-flush list my-n4">
                                        @foreach($pages as $page)
                                            <li class="list-group-item">
                                                <div class="row ">
                                                    <div class="col">
                                                        <h6 class="mb-1 item-name">
                                                            <a href="{{route('page-template', $page->slug)}}" target="_blank" class="text-color">{{$page->name}} <i class="feather-arrow-up-right"></i></a>
                                                        </h6>
                                                    </div>
                                                    <div class="col-auto">
                                                        <div class="d-flex">
                                                            <form id="publishPage">
                                                                <div class="form-check form-switch mr-4">
                                                                    <input type="hidden" name="is_active" id="is_active">
                                                                    <input type="checkbox" name="publish" class="form-check-input" onclick="publishPage('is_active', 'active_label', '{{$page->id}}', this)"  {{$page->is_active == 1 ? 'checked' : ''}}>
                                                                    <label for="is_active" id="active_label" class="form-check-label text-dark">{{$page->is_active == 1 ? 'Published' : 'Publish'}}</label>
                                                                </div>
                                                            </form>
                                                            <form action="/account/settings/page/create-page/delete/{{$page->id}}" method="POST">
                                                                {{ csrf_field() }}
                                                                {{ method_field('DELETE') }}
                                                                <button type="submit" name="submit" onclick="return deleteFunction();" class="text-danger mr-4">
                                                                    <i class="mdi mdi-delete mr-2"></i>
                                                                </button>
                                                            </form>
                                                            <div class="dropdown custom-drop">
                                                                <a class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                                    <i class="fe fe-more-vertical"></i>
                                                                </a>
                                                                <div class="dropdown-menu custom-dropdown dropdown-menu-end p-4 rounded-3 border-0 shadow-xss">
                                                                    <div class="card-body p-0 d-flex">
                                                                        <i class="mdi mdi-pencil text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                                        <a href="#!" onclick="editPage('{{$page->name}}', '{{$page->id}}')">
                                                                            <h6 class="fw-600 text-grey-500 mt-1 me-4 setting">Edit</h6>
                                                                        </a>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        @endforeach
                                    </ul>
                                    @else
                                    <div class="text-center">
                                        <p>You haven't created any page</p>
                                    </div>
                                @endif
                            </div>
                            <div class="row g-0">
                                <ul class="col list-pagination-prev pagination pagination-tabs justify-content-start">
                                    <li class="page-item">
                                        <a class="page-link" href="#">
                                        <i class="fe fe-arrow-left me-1"></i> Prev
                                        </a>
                                    </li>
                                </ul>
                                <ul class="col list-pagination pagination pagination-tabs justify-content-center"></ul>
                                <ul class="col list-pagination-next pagination pagination-tabs justify-content-end">
                                    <li class="page-item">
                                        <a class="page-link" href="#">
                                        Next <i class="fe fe-arrow-right ms-1"></i>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('elements.edit-page')
<script>
    function deleteFunction() {
        if(!confirm("Are you sure you want to delete this page?"))
        event.preventDefault();
    }
    const name = document.getElementById('name');
    const createPageBtn = document.getElementById('createPageBtn');

    const enableCreateBtn = () => {
            createPageBtn.disabled = !(
                name.value
            )
    }
    name.addEventListener('change', enableCreateBtn);

    function publishPage(divId, label, pageId, event){
        if(event.checked == true){
            $("#"+ divId).val(1);
            $("#"+ label).html('Published');
            var is_active = 1;
            $.ajax({
                type:'POST',
                url: "/account/settings/page/create-page/update/" + pageId,
                data:{
                    "_token": "{{ csrf_token() }}",
                    is_active:is_active,
                },
                success:function(data){
                    toastr.success("Page published", "", defaultSetting)
                },
                error: function(error) {
                    toastr.error("There was a problem publishing this page", "", defaultSetting)
                }
            });
        }else{
            $("#"+ divId).val(0);
            $("#"+ label).html('Publish');
            var is_active = 0;
            $.ajax({
                type:'POST',
                url: "/account/settings/page/create-page/update/" + pageId,
                data:{
                    "_token": "{{ csrf_token() }}",
                    is_active:is_active,
                },
                success:function(data){
                    toastr.success("Page unpublished", "", defaultSetting)
                },
                error: function(error) {
                    toastr.error("There was a problem unpublishing this page", "", defaultSetting)
                }
            });
        }
    }

    function editPage(name, pageId) {
        document.getElementById('name_field').value = name;
        document.getElementById('page-id').value = pageId;

        $('#editPage').modal('show');
    }
</script>
@endsection