@extends('layout.master')

@section('title', 'Tetapan Footer')

@section('content')

<div class="page-header">
    <h5 class="page-title">Tetapan Footer</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Web</li>
            <li class="breadcrumb-item active">Tetapan Footer</li>
        </ol>
    </nav>
</div>

<section class="section">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-body">
                    <form action="javascript:void(0)" class="form-horizontal" method="POST" id="form">
                        @csrf
                        <input name="footer" type="hidden" id="footer">
                          <div id="editor">
                            <p></p>
                          </div>
                        <br>
                        <div class="text-center">
                            <button class="btn btn-primary" type="submit">Simpan</button>
                            <a href="{{ route('laman_utama') }}" class="btn btn-outline-danger">Batal</a>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>
</section>
@endsection

@section('js')
<script type="text/javascript">

    toolbarOptions = [
        ['undo' , 'redo' ],
        [{ size: [ 'small', false, 'large', 'huge' ]}],
        ['bold', 'italic', 'underline'],
        [{list: 'bullet'}],
        [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }]
    ];

    var icons = Quill.import("ui/icons");
    icons["undo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
    <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
    </svg>`;
    icons["redo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon>
    <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path>
    </svg>`;

    var quill = new Quill('#editor', {
        modules: {
            toolbar: toolbarOptions
        },
        theme: 'snow'
    });

    quill.history.undo();
    quill.setContents({!! $footer !!});

    $("#form").submit(function(e) {
        $("#footer").val(JSON.stringify(quill.getContents()));

        e.preventDefault();
        var formData = new FormData(this);
        $.ajax({
            type:'POST',
            url: "{{ route('pengurusan_web.footer_store') }}",
            data: formData,
            cache:false,
            contentType: false,
            processData: false,
            success: (data) => {

                Swal.fire({
                    icon: 'success',
                    text: 'Kandungan Footer Telah Berjaya Diubah',
                    showConfirmButton: true,
                }).then(function() { 
                   location.reload();
                })
            },
            error: function(data){
                console.log(data);
            }
        });
    });
</script>
@endsection