@extends('layouts.master')

@section('title', 'Manajemen Respon Pesan')

@section('style-plugins')
<link rel="stylesheet" href="{{ asset('assets/plugins/emoji/dist/style.css') }}">
@endsection

@section('style-custom')
<style>
    .card-scrollable {
        height: 70vh;
        overflow: auto;
    }
    .keyword-link {
        cursor: pointer;
        color: #adb5bd;
    }
    .keyword-active {
        color: white;
    }
    .keyword-link:hover {
        color: white;
    }
</style>
@endsection

@section('header', 'Manajemen Respon Pesan')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Keywords</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-default btn-sm" id="btn-refresh">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body card-scrollable" id="card-keyword">
                    @foreach (App\Models\TemplatePesan::where('layanan','wna')->orderBy('nama_tahapan','asc')->get() as $template)
                    <div class="template-link" data-id="{{ $template->id }}">
                        <strong>
                            <span>
                                <i class="fas fa-key mr-1"></i> {{ trim($template->nama_tahapan) }}
                            </span>
                        </strong>
                        <i>{{ $template->param }}</i>
                        <p class="text-muted">
                            {{ $template->subject }}
                        </p>
                    </div>
                    <hr/>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card card-outline card-success">
                <div class="card-header">
                    <h3 class="card-title">Tambah Pesan</h3>
                    <div class="card-tools">
                        {{-- <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                            <i class="fas fa-minus"></i>
                        </button> --}}
                    </div>
                </div>
                <form action="{{ url('respon-pesan/simpan') }}" method="post">
                <div class="card-body">
                    @csrf
                    <input type="hidden" name="idkeyword" id="idkeyword">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label>Nama Tahapan:</label>
                                <input type="text" class="form-control" name="subject" id="subject">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label>Pesan:</label>
                                <div data-emojiarea data-type="unicode" data-global-picker="false" data-button-selector=".emoji-button">
                                    <div class="mailbox-controls ">
                                        <button type="button" class="btn btn-default btn-sm emoji-button">
                                            <i class="far fa-smile"></i>
                                        </button>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default btn-sm" id="btn-bold">
                                                <i class="fas fa-bold"></i>
                                            </button>
                                            <button type="button" class="btn btn-default btn-sm" id="btn-italic">
                                                <i class="fas fa-italic"></i>
                                            </button>
                                            <button type="button" class="btn btn-default btn-sm" id="btn-strike">
                                                <i class="fas fa-strikethrough"></i>
                                            </button>
                                        </div>
                                        <div class="btn-group" role="group" aria-label="">
                                            <button type="button" class="btn btn-default btn-sm" id="btn-copy">
                                                <i class="far fa-copy"></i>
                                            </button>
                                            <button type="button" class="btn btn-default btn-sm" id="btn-reset">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                        </div>
                                        <div class="btn-group" role="group" aria-label="">
                                            <button type="button" class="btn btn-outline-success btn-sm" id="btn-salam">{salam_waktu}</button>
                                            <button type="button" class="btn btn-outline-success btn-sm" id="btn-nomor_wa">{nomor_wa}</button>
                                            <button type="button" class="btn btn-outline-success btn-sm" id="btn-nama_wa">{nama_wa}</button>
                                        </div>
                                    </div>
                                    <div class="mailbox-controls ">
                                        <div class="btn-group" role="group" aria-label="">
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-no_permohonan">{no_permohonan}</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-nama_pemohon">{nama_pemohon}</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-alur_permohonan">{alur_permohonan}</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-kode_billing">{kode_billing}</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-kode_ntpn">{kode_ntpn}</button>
                                        </div>
                                    </div>
                                    <textarea class="form-control" name="pesan" id="edit-pesan" cols="30" rows="5" placeholder="Pesan..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label>Pesan (english):</label>
                                <div data-emojiarea data-type="unicode" data-global-picker="false" data-button-selector=".emoji-button">
                                    <div class="mailbox-controls ">
                                        <button type="button" class="btn btn-default btn-sm emoji-button">
                                            <i class="far fa-smile"></i>
                                        </button>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-default btn-sm" id="btn-bold-en">
                                                <i class="fas fa-bold"></i>
                                            </button>
                                            <button type="button" class="btn btn-default btn-sm" id="btn-italic-en">
                                                <i class="fas fa-italic"></i>
                                            </button>
                                            <button type="button" class="btn btn-default btn-sm" id="btn-strike-en">
                                                <i class="fas fa-strikethrough"></i>
                                            </button>
                                        </div>
                                        <div class="btn-group" role="group" aria-label="">
                                            <button type="button" class="btn btn-default btn-sm" id="btn-copy-en">
                                                <i class="far fa-copy"></i>
                                            </button>
                                            <button type="button" class="btn btn-default btn-sm" id="btn-reset-en">
                                                <i class="fas fa-undo"></i>
                                            </button>
                                        </div>
                                        <div class="btn-group" role="group" aria-label="">
                                            <button type="button" class="btn btn-outline-success btn-sm" id="btn-salam-en">{salam_waktu}</button>
                                            <button type="button" class="btn btn-outline-success btn-sm" id="btn-nomor_wa-en">{nomor_wa}</button>
                                            <button type="button" class="btn btn-outline-success btn-sm" id="btn-nama_wa-en">{nama_wa}</button>
                                        </div>
                                    </div>
                                    <div class="mailbox-controls ">
                                        <div class="btn-group" role="group" aria-label="">
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-no_permohonan-en">{no_permohonan}</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-nama_pemohon-en">{nama_pemohon}</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-alur_permohonan-en">{alur_permohonan}</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-kode_billing-en">{kode_billing}</button>
                                            <button type="button" class="btn btn-outline-primary btn-sm" id="btn-kode_ntpn-en">{kode_ntpn}</button>
                                        </div>
                                    </div>
                                    <textarea class="form-control" name="pesan_en" id="edit-pesan-en" cols="30" rows="5" placeholder="Message..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="{{ url('pesan') }}" class="btn btn-sm btn-default"> <i class="fas fa-window-close"></i> Batal </a>
                    <button type="submit" class="btn btn-sm btn-warning"><i class="fas fa-save"></i> Simpan </button>
                </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script-plugins')
<script src="{{ asset('assets/plugins/emoji/dist/jquery.emojiarea.js') }}"></script>
<script src="{{ asset('assets/plugins/autosize/autosize.js') }}"></script>
<script src="{{ asset('assets/js/helper.js') }}"></script>
@endsection

@section('script-custom')
    <script lang="text/javascript">
    $(function () {
        $("#subject").focus();
        autosize($('textarea'));

        $("#btn-refresh").on("click", function (evt) {
            $.ajax({
                type: "post",
                url: "{{ url('respon-pesan/ajax/list-keyword') }}",
                success: function (response) {
                    $("#card-keyword").html(response);
                    $(".overlay").hide();
                }
            });
        });

        var $textarea = $("#edit-pesan");
        var $textareaEn = $("#edit-pesan-en");
        $("button").click(function () {
            var sel = HELPER.getInputSelection($textarea);
            var selEn = HELPER.getInputSelection($textareaEn);
            var area = $textarea;
            switch (this.id) {
                case "btn-bold":
                    $textarea.val(sel.beforePart + " *" + jQuery.trim(sel.selectedPart) + "* " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-italic":
                    $textarea.val(sel.beforePart + " _" + jQuery.trim(sel.selectedPart) + "_ " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-strike":
                    $textarea.val(sel.beforePart + " ~" + jQuery.trim(sel.selectedPart) + "~ " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-copy":
                    HELPER.copyTextToClipboard($textarea.val())
                    area = $textarea;
                    break;
                case "btn-reset":
                    $textarea.val("");
                    area = $textarea;
                    break;
                case "btn-salam":
                    $textarea.val(sel.beforePart + " {salam_waktu} " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-nomor_wa":
                    $textarea.val(sel.beforePart + " {nomor_wa} " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-nama_wa":
                    $textarea.val(sel.beforePart + " {nama_wa} " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-no_permohonan":
                    $textarea.val(sel.beforePart + " {no_permohonan} " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-nama_pemohon":
                    $textarea.val(sel.beforePart + " {nama_pemohon} " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-alur_permohonan":
                    $textarea.val(sel.beforePart + " {alur_permohonan} " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-kode_billing":
                    $textarea.val(sel.beforePart + " {kode_billing} " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-kode_ntpn":
                    $textarea.val(sel.beforePart + " {kode_ntpn} " + sel.afterPart);
                    area = $textarea;
                    break;
                case "btn-bold-en":
                    $textareaEn.val(selEn.beforePart + " *" + jQuery.trim(selEn.selectedPart) + "* " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-italic-en":
                    $textareaEn.val(selEn.beforePart + " _" + jQuery.trim(selEn.selectedPart) + "_ " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-strike-en":
                    $textareaEn.val(selEn.beforePart + " ~" + jQuery.trim(selEn.selectedPart) + "~ " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-copy-en":
                    HELPER.copyTextToClipboard($textareaEn.val())
                    area = $textareaEn;
                    break;
                case "btn-reset-en":
                    $textareaEn.val("");
                    area = $textareaEn;
                    break;
                case "btn-salam-en":
                    $textareaEn.val(selEn.beforePart + " {salam_waktu} " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-nomor_wa-en":
                    $textareaEn.val(selEn.beforePart + " {nomor_wa} " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-nama_wa-en":
                    $textareaEn.val(selEn.beforePart + " {nama_wa} " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-no_permohonan-en":
                    $textareaEn.val(selEn.beforePart + " {no_permohonan} " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-nama_pemohon-en":
                    $textareaEn.val(selEn.beforePart + " {nama_pemohon} " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-alur_permohonan-en":
                    $textareaEn.val(selEn.beforePart + " {alur_permohonan} " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-kode_billing-en":
                    $textareaEn.val(selEn.beforePart + " {kode_billing} " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                case "btn-kode_ntpn-en":
                    $textareaEn.val(selEn.beforePart + " {kode_ntpn} " + selEn.afterPart);
                    area = $textareaEn;
                    break;
                default:
                    break;
            }
            area.focusTextToEnd();
        });
    });
    </script>
@endsection