@extends('layout.master')

@section('title', 'Laman Utama')


@section('content')

<div class="page-header">
    <h5 class="page-title">Peringatan Pengguna Tidak Aktif</h5>
    <nav>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">Laman Utama</a></li>
            <li class="breadcrumb-item">Pengurusan Pengguna</li>
            <li class="breadcrumb-item active">Peringatan Pengguna Tidak Aktif</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
                        <div class="row mb-3">
                            <label for="name" class="col-sm-2 col-form-label">Subjek</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" name="subjek" value="{{ $result['subjek'] }}">
                            </div>
                        </div>
                        <div class="row mb-3">
                            <label for="name" class="col-sm-2 col-form-label">Mesej</label>
                            <div class="col-sm-10">
                                <div id="editor">{!! $result['mesej'] !!}</div>
                                <textarea name="mesej" id="mesej" style="display:none;"></textarea>
                            </div>
                        </div>
                        <br>
                        <br>
                        <div class="text-center">
                            <button class="btn btn-primary mx-1" type="submit">Simpan</button>
                            <a class="btn btn-outline-danger mx-1" href="{{ route("pengurusan_pengguna.tidak_aktif") }}">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'
        }]
    ];

    const 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>`;

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

    $("#form").submit(function(e) {
        const textarea = document.querySelector('#editor').nextElementSibling;
        textarea.value = quill.root.innerHTML;

        e.preventDefault();
        const formData = new FormData(this);
        $.ajax({
            type: 'POST',
            url: "{{ route('pengurusan_pengguna.tidak_aktif_store') }}",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: (data) => {
                Swal.fire({
                    icon: 'success',
                    text: 'Peringatan Telah Berjaya Dikemaskini',
                    showConfirmButton: true,
                }).then(function() {
                    location.reload();
                })
            },
            error: (e) => {
                console.log(e); 
            }
        });
    });
</script>
@endsection