@extends('layouts.master')

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

@section('style-plugins')
<link rel="stylesheet" href="{{ url('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>
                        <a href="{{ url('respon-pesan/tambah') }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-plus"></i> Tambah
                        </a>
                    </div>
                </div>
                <div class="card-body card-scrollable" id="card-keyword">
                    @foreach (App\Models\Keyword::where('isaktif','1')->orderBy('keyword','asc')->get() as $keyword)
                    <div class="keyword-link" data-id="{{ $keyword->id }}">
                        <strong>
                            <span>
                                <i class="fas fa-key mr-1"></i> {{ trim($keyword->keyword) }}
                            </span>
                        </strong>
                        <i>{{ $keyword->param }}</i>
                        <p class="text-muted">
                            {{ $keyword->subject }}
                        </p>
                    </div>
                    <hr/>
                    @endforeach
                </div>
                <div class="overlay dark" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card card-outline card-success">
                <div class="card-header">
                    <h3 class="card-title">Respon 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">
                        @method('patch')
                        @csrf
                        <input type="hidden" name="idkeyword" id="idkeyword">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Subject:</label>
                                    <input type="text" class="form-control" name="subject" id="edit-subject" readonly>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-4 col-md-6 col-12">
                                <div class="form-group">
                                    <label>Keyword:</label>
                                    <div class="input-group mb-3">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                                        </div>
                                        <input type="text" class="form-control" name="keyword" id="edit-keyword"
                                            readonly>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-8 col-md-6 col-12">
                                <div class="form-group">
                                    <label>Parameter:</label>
                                    <input type="text" class="form-control" name="param" id="edit-param" readonly data-param="param">
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Respon:</label>
                                    <div data-emojiarea data-type="unicode" data-global-picker="false" data-button-selector=".emoji-button">
                                        <div class="mailbox-controls " style="display: none;">
                                            <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 " style="display: none;" id="btn-paspor">
                                            <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="response" id="edit-respon" cols="30" rows="10" placeholder="Respon pesan..." readonly></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div id="edit-enable" style="display: none;">
                            <button type="button" id="batal-simpan" class="btn btn-sm btn-default">
                                <i class="fas fa-window-close"></i> Batal
                            </button>
                            <button type="submit" class="btn btn-sm btn-warning">
                                <i class="fas fa-save"></i> Simpan
                            </button>
                        </div>
                        <button id="bt-edit-enable" type="button" class="btn btn-sm btn-danger">
                            <i class="fas fa-edit"></i> Edit
                        </button>
                    </div>
                </form>
                <div class="overlay dark" style="display: none;">
                    <i class="fas fa-2x fa-sync-alt fa-spin"></i>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

@section('script-custom')
<script lang="text/javascript">
    $(function () {
        autosize($('#edit-respon'));
        $(".overlay").hide();
        var respon = "";
        $("body").on("click", ".keyword-link", function () {
            // $(".overlay").show();
            var keyword = $(this);
            $.ajax({
                type: "POST",
                url: "{{ url('respon-pesan/ajax/data-keyword') }}",
                data: {
                    id: keyword.data('id')
                },
                success: function (response) {
                    $("#idkeyword").val(response.id);
                    $("#edit-keyword").val(response.keyword.substring(1));
                    $("#edit-subject").val(response.subject);
                    $("#edit-respon").val(response.response);
                    respon = response.response;
                    if (response.class) {
                        $("#edit-param").val(response.class);
                        $("#edit-param").data("param", "class");
                    } else {
                        $("#edit-param").val(response.param);
                        $("#edit-param").data("param", "param");
                    }
                    $(".keyword-link").removeClass("keyword-active text-green");
                    keyword.addClass("keyword-active text-green");
                    $(".overlay").hide();
                    autosize.update($('#edit-respon'));
                }
            });
        });

        $("#bt-edit-enable").on("click", function (evt) {
            evt.preventDefault();
            if ($("#edit-keyword").val()) {
                $(this).hide();
                $("#edit-enable").show();
                $("#edit-keyword").attr("readonly", false);
                $("#edit-respon").attr("readonly", false);
                $("#edit-subject").attr("readonly", false);
                if ($("#edit-param").data("param") == "param") {
                    $("#edit-param").attr("readonly", false);
                } else {
                    $("#edit-param").attr("readonly", true);
                }
                $(".mailbox-controls").show();
                $("#edit-subject").focus();
                autosize.update($('#edit-respon'));
            }
        });

        $("#batal-simpan").on("click", function (evt) {
            evt.preventDefault();
            $("#edit-enable").hide();
            $("#bt-edit-enable").show();
            // $("#idkeyword").val("");
            // $("#edit-keyword").val("");
            $("#edit-respon").val("");
            $("#edit-respon").val(respon);
            // $("#edit-param").val("");
            // $("#edit-subject").val("");
            $("#edit-keyword").attr("readonly", true);
            $("#edit-respon").attr("readonly", true);
            $("#edit-param").attr("readonly", true);
            $("#edit-subject").attr("readonly", true);
            $(".mailbox-controls").hide();
        });

        $("#btn-refresh").on("click", function (evt) {
            $(".overlay").show();
            evt.preventDefault();
            $("#edit-enable").hide();
            $("#bt-edit-enable").show();
            $("#idkeyword").val("");
            $("#edit-keyword").val("");
            $("#edit-respon").val("");
            $("#edit-param").val("");
            $("#edit-subject").val("");
            $("#edit-keyword").attr("readonly", true);
            $("#edit-respon").attr("readonly", true);
            $("#edit-param").attr("readonly", true);
            $("#edit-subject").attr("readonly", true);
            $(".mailbox-controls").hide();
            $.ajax({
                type: "post",
                url: "{{ url('respon-pesan/ajax/list-keyword') }}",
                success: function (response) {
                    $("#card-keyword").html(response);
                    $(".overlay").hide();
                }
            });
            $(".keyword-link").removeClass("keyword-active");
        });

        var $textarea = $("textarea");
        $("button").click(function () {
            var sel = HELPER.getInputSelection($textarea);
            switch (this.id) {
                case "btn-bold":
                    $textarea.val(sel.beforePart + " *" + jQuery.trim(sel.selectedPart) + "* " + sel.afterPart);
                    break;
                case "btn-italic":
                    $textarea.val(sel.beforePart + " _" + jQuery.trim(sel.selectedPart) + "_ " + sel.afterPart);
                    break;
                case "btn-strike":
                    $textarea.val(sel.beforePart + " ~" + jQuery.trim(sel.selectedPart) + "~ " + sel.afterPart);
                    break;
                case "btn-copy":
                    HELPER.copyTextToClipboard($textarea.val())
                    break;
                case "btn-reset":
                    $textarea.val("");
                    $textarea.val(respon);
                    break;
                case "btn-salam":
                    $textarea.val(sel.beforePart + " {salam_waktu} " + sel.afterPart);
                    break;
                case "btn-nomor_wa":
                    $textarea.val(sel.beforePart + " {nomor_wa} " + sel.afterPart);
                    break;
                case "btn-nama_wa":
                    $textarea.val(sel.beforePart + " {nama_wa} " + sel.afterPart);
                    break;
                case "btn-no_permohonan":
                    $textarea.val(sel.beforePart + " {no_permohonan} " + sel.afterPart);
                    break;
                case "btn-nama_pemohon":
                    $textarea.val(sel.beforePart + " {nama_pemohon} " + sel.afterPart);
                    break;
                case "btn-alur_permohonan":
                    $textarea.val(sel.beforePart + " {alur_permohonan} " + sel.afterPart);
                    break;
                case "btn-kode_billing":
                    $textarea.val(sel.beforePart + " {kode_billing} " + sel.afterPart);
                    break;
                case "btn-kode_ntpn":
                    $textarea.val(sel.beforePart + " {kode_ntpn} " + sel.afterPart);
                    break;
                default:
                    break;
            }
            $textarea.focusTextToEnd();
        });
    });

</script>
@endsection