@extends('layouts.master')
@section('title', config('app.name') . ' : Tiket Laporan')
@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.css">
@endsection
@section('content')
<div class="main-content memo">
    <div class="container">
      <div class="memo__container">
        <ul class="component-tabs nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-item nav-link mr-0 active" id="nav-broadcast-tab" data-toggle="tab" href="#nav-broadcast" role="tab" aria-controls="nav-broadcast" aria-selected="true">
              <i class="fas fa-file-alt"></i>
              <span>Pengumuman</span>
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-item nav-link mr-0" id="nav-all-tab" data-toggle="tab" href="#nav-all" role="tab" aria-controls="nav-all" aria-selected="false">
              <i class="fas fa-file-alt"></i>
              <span>Memo Anda</span>
            </a>
          </li>
          <li hidden="" class="nav-item">
            <a class="nav-item nav-link" id="nav-add-memo-tab" data-toggle="tab" href="#nav-add-memo" role="tab" aria-controls="nav-add-memo" aria-selected="false"></a>
          </li>
          <li hidden="" class="nav-item">
            <a class="nav-item nav-link" id="nav-detail-tab" data-toggle="tab" href="#nav-all" role="tab" aria-controls="nav-detail" aria-selected="false"></a>
          </li>
        </ul>
        <div class="component-tab-content tab-content">
          <div class="tab-pane fade active show" id="nav-broadcast" role="tabpanel" aria-labelledby="nav-broadcast-tab">
            <div class="memo-broadcast">
              <div class="table-dataTable">
                <div id="memo-broadcast-table_wrapper" class="dataTables_wrapper no-footer">
                  <table id="memo-broadcast-table" class="table table-hover table-bordered dataTable no-footer" role="grid" aria-describedby="memo-broadcast-table_info" style="width: 1073px;">
                    <thead>
                      <tr role="row">
                        <th scope="col" class="text-left sorting_asc" rowspan="1" colspan="1" aria-label="Tanggal" style="width: 275px;">Tanggal</th>
                        <th scope="col" class="text-left sorting" tabindex="0" aria-controls="memo-broadcast-table" rowspan="1" colspan="1" aria-label="Tipe: activate to sort column ascending" style="width: 191px;">Tipe</th>
                        <th scope="col" class="text-left sorting" tabindex="0" aria-controls="memo-broadcast-table" rowspan="1" colspan="1" aria-label="Judul: activate to sort column ascending" style="width: 222px;">Judul</th>
                        <th scope="col" class="text-center sorting" tabindex="0" aria-controls="memo-broadcast-table" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 241px;">Status</th>
                      </tr>
                    </thead>
                    <tbody>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="nav-all" role="tabpanel" aria-labelledby="nav-all-tab">
            <div class="memo-all">
              <div class="d-flex">
                <a class="btn-custom ml-auto" href="#" id="addMemoButton">
                  <i class="fas fa-file-signature"></i>
                  <span>Tambahkan Memo</span>
                </a>
              </div>
              <div class="container-fluid table-dataTable">
                <div id="memo-table_wrapper" class="dataTables_wrapper no-footer">
                  <table id="memo-table" class="table table-hover table-bordered dataTable no-footer" role="grid" aria-describedby="memo-table_info">
                    <thead>
                      <tr role="row">
                        <th scope="col" class="text-left sorting_asc" rowspan="1" colspan="1" aria-label="Tanggal">Tanggal</th>
                        <th scope="col" class="text-left sorting" tabindex="0" aria-controls="memo-table" rowspan="1" colspan="1" aria-label="Tipe: activate to sort column ascending">Tipe</th>
                        <th scope="col" class="text-left sorting" tabindex="0" aria-controls="memo-table" rowspan="1" colspan="1" aria-label="Judul: activate to sort column ascending">Judul</th>
                        <th scope="col" class="text-center sorting" tabindex="0" aria-controls="memo-table" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending">Status</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="odd">
                        <td valign="top" colspan="4" class="dataTables_empty">No data available in table</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="nav-detail" role="tabpanel" aria-labelledby="nav-detail-tab">
            <div class="memo-view pt-0">
              <div class="memo-view__container">
                <a href="#" onclick="$('#nav-all-tab').click(); return false;" class="view-back btn-custom">
                  <i class="fas fa-angle-left"></i> Kembali </a>
                <div class="memo-view-form">
                  <div class="memo-view-content">
                    <div class="content-subject"></div>
                    <div class="content-desc"></div>
                  </div>
                  <div id="memoViewReply"></div>
                  <form id="memoReplyForm" novalidate="novalidate">
                    <div class="memo-reply-form">
                      <textarea class="form-control" placeholder="Masukan balasan disini" name="message"></textarea>
                      <input type="hidden" name="memoId">
                      <input type="hidden" name="status">
                      <div class="reply-form-code captcha">
                        <label>Kode Verifikasi</label>
                        <span>
                          <img src="{{ route('captcha') }}?{{ time() }}">
                        </span>
                        <a class="btn btn-sm btn-info mr-4" name="reload">
                          <i class="fas fa-sync-alt"></i>
                        </a>
                        <input class="input-code form-control" type="text" name="captcha" placeholder="Kode Verifikasi">&nbsp;&nbsp; <button type="submit" class="btn-custom-sm">Balas memo</button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane fade" id="nav-add-memo" role="tabpanel" aria-labelledby="nav-add-memo-tab">
            <form id="formAddMemo">
              <div class="memo-add">
                <div class="form-group">
                  <label>Judul*</label>
                  <input class="custom-textfield form-control" type="text" name="subject" id="subject" placeholder="Judul Memo">
                </div>
                <div class="form-group">
                  <label>Tipe*</label>
                  <input class="custom-textfield form-control" type="text" name="type" id="type" placeholder="Tipe Masalah Memo">
                </div>
                <div class="form-group mt-4">
                  <textarea class="custom-textfield form-control" name="message" id="messageAdd" placeholder="Pesan"></textarea>
                </div>
                <div class="form-group captcha">
                  <div class="row">
                    <div class="col-lg-2 d-flex align-items-center justify-content-start">
                      <label>Kode Verifikasi:</label>
                    </div>
                    <div class="col-lg-9">
                      <div class="cap-img">
                        <div class="img-holder">
                          <span>
                            <img src="{{ route('captcha') }}?{{ time() }}">
                          </span>
                          <a type="button" class="btn btn-sm btn-info mr-3" name="reload">
                            <i class="fas fa-sync-alt"></i>
                          </a>
                        </div>
                        <div class="sent-holder">
                          <input class="custom-textfield" type="text" name="captcha" id="captchaAdd" placeholder="Kode Verifikasi" required="">
                          <button class="btn-custom-sm" type="submit">Kirim</button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="memo-desc">** Harap untuk selalu bersabar menunggu jawaban tiket dari operator, untuk masalah yang urgent sekali bisa langsung menghubungi via livechat</div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('js')
    <script src="{{ asset('js/vendor/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('js/vendor/select2.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="{{ asset('js/vendor/daterangepicker.min.js') }}"></script>
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/vendor/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/vendor/html5-qrcode.min.js') }}"></script>
    <script src="{{ asset('js/vendor/daterange.js') }}"></script>
@endpush
@push('scripts')
<script type="text/javascript">
    const url = '{{ route('reload.captha') }}';
    $('[name=reload]').click(function() {
        $.ajax({
            type: 'GET',
            url: url,
            success: function(data) {
                $(".captcha span").html(data.captcha);
            }
        });
    });

    $("form[id=formAddMemo]").on("submit", function(e){
        e.preventDefault()
        let data = {
            _token: "{{ csrf_token() }}",
            subject: $("input[name=subject]").val(),
            type: $("input[name=type]").val(),
            message: $("textarea[id=messageAdd]").val(),
            captcha: $("input[id=captchaAdd]").val()
        }
        $.ajax({
            type: "POST",
            url: "{{ route('store.memo') }}",
            data: data,
            success: function (res) {
                if (res.success == true) {
                    $("#nav-all-tab").click()
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'success',
                        title: res.message
                    });
                    $('.form-control').removeClass('is-valid').removeClass('is-invalid')
                    $("form[id=memoReplyForm]")[0].reset()
                    memoTable.ajax.reload();
                } else {
                    Swal.fire({
                        toast: true,
                        position: 'top-end',
                        icon: 'error',
                        title: res.message
                    });
                }
            },
            error: function (e) {
                let msg = '';
                $.each(e.responseJSON.errors, function (i, v) {
                    msg += v + '<br />'
                });
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    title: (msg == '') ? "Mohon maaf atas ketidaknyamanannya, halaman ini akan dimuat ulang dalam #1 detik" : msg
                });
                if (msg == '') {
                    location.reload();
                }
            }
        })
    })

$("#addMemoButton").on("click", function (e) {
    e.preventDefault();
    $("#nav-add-memo-tab").click()
    $('[name=reload]').click()
})

let memoTable = $('#memo-table').DataTable({
    bAutoWidth: false,
    ajax: "{{ route('get.memo') }}",
    columns: [
        { data: 'created_at', sortable: false,
            render: function(data, type, row, meta){
                return new Date(data).toLocaleString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second:'numeric' })
            }
        },
        { data: 'type' },
        { data: 'subject' },
        { data: 'created_at',
            render: function (data) {
                let res = new Date(data)
                let last7day = new Date(new Date().setDate(new Date().getDate() - 7))
                return `${ (res > last7day)
                    ? '<div class="table-status approved">New</div>'
                    : '<div class="table-status pending">Old</div>'
                }`;
            }
        },
    ],
});

$("#nav-all-tab").on('click', function (e) {
    memoTable.draw()
})

$('#memo-table tbody').on('click', 'tr', function () {
    $("#memoViewReply").html("")
    getDetailMemo(memoTable.row(this).data().id)
});

$("form[id=memoReplyForm]").validate({
    onkeyup: false,
    rules: {
        message: { required: true },
        captcha: { required: true }
    },
    messages:{
        message: {
            required: "The Message field is required.",
        },
        captcha: {
            required: "The Captcha field is required.",
        },
    },
    errorPlacement: function (error, element) {
        let error_id = element.attr("id")
        error.insertAfter($(`span[id=${error_id}-error]`))
    },
    highlight: function(element, errorClass) {
        $(element).closest(".form-control").addClass("is-invalid");
    },
    unhighlight: function(element, errorClass) {
        $(element).closest(".form-control").removeClass("is-invalid").addClass("is-valid");
    },
});

$("form[id=memoReplyForm]").on("submit", function (e) {
    e.preventDefault()
    let data = {
        _token: "{{ csrf_token() }}",
        memoId: $("input[name=memoId]").val(),
        status: $("input[name=status]").val(),
        message: $("textarea[name=message]").val(),
        captcha: $("input[name=captcha]").val()
    }
    $.ajax({
        type: "POST",
        url: "{{ route('memo.Reply') }}",
        data: data,
        success: function (res) {
            if (res.success == true) {
                getDetailMemo($("input[name=memoId]").val())
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'success',
                    title: res.message
                });
                $('.form-control').removeClass('is-valid').removeClass('is-invalid')
                $("form[id=memoReplyForm]")[0].reset()
            }else{
                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    title: res.message
                });
            }
        }
    });
})


function getDetailMemo(id) {
    let url = "/memo/detail-:id-memo"
    url = url.replace(':id', id)
    $.ajax({
        type: "GET",
        url: url,
        success: function (response) {
            $('[name=reload]').click()
            if (response.success == true) {
                $("#nav-detail-tab").tab("show")
                const data = response.data
                $("input[name=memoId]").val(data.id)
                $("input[name=status]").val(data.status)
                $("[class=content-subject]").text(data.subject)
                $("[class=content-desc]").text(data.content)
                if(data.hasOwnProperty("reply_list")){
                    let html = '';
                    $.each(data.reply_list, function (row, value) {
                        html += memoReplyTemplate(data.member_id, value)
                    });
                    $("#memoViewReply").html(html)
                } else {
                    $("#memoViewReply").html("")
                }
            } else {
                alert("error")
            }
        }
    });
}

function memoReplyTemplate(memberId, value) {
    return `
        <div class="memo-view-reply">
            <div class="reply-top">
                <div class="reply-avatar"><i class="fas fa-user-circle"></i></div>
                <div class="reply-user-info">
                    <div class="reply-user">
                        ${(value.replier_id == memberId) ? "You" : "Support"}
                    </div>
                    <div class="reply-days">
                        <i class="far fa-clock"></i>
                        ${value.diffHuman}
                    </div>
                </div>
            </div>
            <div class="reply-desc">
                ${value.content}
            </div>
        </div>
    `;
}


let memoBroadcastTable = $('#memo-broadcast-table').DataTable({
    ajax: "{{ route('get.BroadcastMemo') }}",
    columns: [
        {data: 'created_at', sortable: false,
            render: function(data, type, row, meta){
                return new Date(data).toLocaleString('en-GB', { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', second:'numeric' })
            }
        },
        {data: 'type'},
        {data: 'subject'},
        {data: 'created_at',
            render: function (data) {
                let res = new Date(data)
                let last7day = new Date(new Date().setDate(new Date().getDate() - 7))
                return `${ (res > last7day)
                    ? '<div class="table-status approved">New</div>'
                    : '<div class="table-status pending">Old</div>'
                }`;
            }
        },
    ],
});
$('#memo-broadcast-table tbody').on('click', 'tr', function () {
    Swal.fire({
        title: memoBroadcastTable.row(this).data().subject,
        html: memoBroadcastTable.row(this).data().content,
        width: "90%"
    });
});
</script>
@endpush