@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;
    }
    .template-link {
        cursor: pointer;
        color: #adb5bd;
    }
    .template-active {
        color: white;
    }
    .template-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">Tahapan</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('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-template">
                    @foreach (App\Models\Intal\Tahapan::where('status','ACTIVE')->orderBy('tahapan_id','asc')->get() as $tahapan)
                    <div class="template-link {{ ($tahapan->templatePesan?'text-success':'') }}" data-id="{{ $tahapan->tahapan_id }}">
                        <strong>
                            <span>
                                {{ trim($tahapan->nama_tahapan) }}
                            </span>
                        </strong>
                        <p>
                            @if ($tahapan->templatePesan)
                                <span class="badge badge-info">Notifikasi</span>
                            @endif
                        </p>
                    </div>
                    <hr/>
                    @endforeach
                    @php
                        $selesai = App\Models\TemplatePesan::where('layanan','wna')->where('tahapan_id','-1')->first();
                    @endphp
                    <div class="template-link {{ ($selesai?'text-success':'') }}" data-id="-1">
                        <strong>
                            <span>
                                SELESAI
                            </span>
                        </strong>
                        <p>
                            @if ($selesai)
                                <span class="badge badge-info">Notifikasi</span>
                            @endif
                        </p>
                    </div>
                    <hr/>
                </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">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('pesan/simpan') }}" method="post">
                    <div class="card-body">
                        @method('patch')
                        @csrf
                        <input type="hidden" name="idtahapan" id="idtahapan">
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label>Nama Tahapan:</label>
                                    <input type="text" class="form-control" name="nama_tahapan" id="edit-nama-tahapan" readonly>
                                </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 " 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-info btn-sm" id="btn-no_permohonan">{no_permohonan}</button>
                                                <button type="button" class="btn btn-outline-info btn-sm" id="btn-nama_pemohon">{nama_pemohon}</button>
                                                <button type="button" class="btn btn-outline-info btn-sm" id="btn-nama_layanan">{nama_layanan}</button>
                                                <button type="button" class="btn btn-outline-info btn-sm" id="btn-kode_billing">{kode_billing}</button>
                                                <button type="button" class="btn btn-outline-info 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..." readonly></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 " 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-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 " 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-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-nama_layanan-en">{nama_layanan}</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..." 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="{{ 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 () {
        resetForm();
        autosize($('textarea'));
        $(".overlay").hide();
        var respon = "";
        $("body").on("click", ".template-link", function () {
            $(".overlay").show();
            var template = $(this);
            $.ajax({
                type: "POST",
                url: "{{ url('pesan/ajax/data-template') }}",
                data: {
                    tahapan_id: template.data('id'),
                    _token: "{{ csrf_token() }}",
                },
                success: function (response) {
                    $("#idtahapan").val(response.tahapan.tahapan_id);
                    $("#edit-nama-tahapan").val(response.tahapan.nama_tahapan);
                    $("#edit-pesan").val("");
                        $("#edit-pesan-en").val("");
                    if (response.template) {
                        $("#edit-pesan").val(response.template.pesan);
                        $("#edit-pesan-en").val(response.template.pesan_en);
                    }
                    $(".template-link").removeClass("template-active");
                    template.addClass("template-active");
                    $(".overlay").hide();
                    autosize.update($('textarea'));
                }
            });
        });

        $("#bt-edit-enable").on("click", function (evt) {
            evt.preventDefault();
            if ($("#edit-nama-tahapan").val()) {
                $(this).hide();
                $("#edit-enable").show();
                $("#edit-pesan").attr("readonly", false);
                $("#edit-pesan-en").attr("readonly", false);
                $(".mailbox-controls").show();
            }
        });

        $("#batal-simpan").on("click", function (evt) {
            evt.preventDefault();
            resetForm();
        });

        $("#btn-refresh").on("click", function (evt) {
            $(".overlay").show();
            evt.preventDefault();
            resetForm();
            $.ajax({
                type: "post",
                url: "{{ url('pesan/ajax/list-tahapan') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                },
                success: function (response) {
                    $("#card-template").html(response);
                    $(".overlay").hide();
                }
            });
            $(".template-link").removeClass("template-active");
        });

        function resetForm() {
            $("#edit-enable").hide();
            $("#bt-edit-enable").show();
            $("#idtahapan").val("");
            $("#edit-nama-tahapan").val("");
            $("#edit-pesan").val("");
            $("#edit-pesan-en").val("");
            $("#edit-nama-tahapan").attr("readonly", true);
            $("#edit-pesan").attr("readonly", true);
            $("#edit-pesan-en").attr("readonly", true);
            $(".mailbox-controls").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-nama_layanan":
                    $textarea.val(sel.beforePart + " {nama_layanan} " + 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-nama_layanan-en":
                    $textareaEn.val(selEn.beforePart + " {nama_layanan} " + 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