@extends('layouts.landing')

@section('title', 'Add Terms of use')

@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>Add Terms of use</h5>
                <div class="row">
                    <div class="col-12">
                        <form class="pb-4" action="{{route('account.save-terms')}}" method="POST" >
                            @csrf
                            <div class="mt-2 pt-2 mb-3">
                                <div class="form-group">
                                    <div class="form-check form-switch" style="margin-left: 2rem">
                                        <input type="hidden" name="terms_status" id="terms_status" value="{{@$tenant_setting->terms_status}}">
                                        <input type="checkbox" name="terms_check" class="form-check-input" onclick="enableTerms('terms_status', 'terms_label', this)"  {{@$tenant_setting->terms_status == 1 ? 'checked' : ''}}>
                                        <label for="terms_status" id="terms_label" class="form-check-label text-dark">{{@$tenant_setting->terms_status ? 'Enabled' : 'Enable'}}</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="form-label mb-1">
                                        Terms title
                                    </label>
                                    <input type="text" id="title" name="terms_title" class="form-control" placeholder="Terms of use" value="{{@$tenant_setting->terms_title}}">
                                </div>
                                <div class="form-group">
                                    <label class="form-label mb-1">
                                        Terms Description
                                    </label>
                                    <textarea name="terms_content" rows="10" id="content" class="form-control">{{@$tenant_setting->terms_content}}</textarea>
                                </div>

                                <div class="form-group mt-4">
                                    <button type="submit" name="submit" {{@$tenant_setting->terms_title ? '' : 'disabled'}}  id="createTermsBtn" onclick="this.classList.toggle('button--loading')" class="button_load btn custom-btn">
                                        <span class="button__text"><i class="mdi mdi-check"></i> Save</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </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 title = document.getElementById('title');
    const createTermsBtn = document.getElementById('createTermsBtn');

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

    ClassicEditor
    .create( document.querySelector( '#content' ) )
    .catch( error => {
        console.error( error );
    } );

    function enableTerms(divId, label, event){
    if(event.checked == true){
        $("#"+ divId).val(1);
        $("#"+ label).html('Enabled');
    }else{
        $("#"+ divId).val(0);
        $("#"+ label).html('Enable');
    }
}
</script>
@endsection