@extends('layout.main')
@section('title', 'Detail Pindah Kas')

@section('prev-page')
    <a href="{{ route('dashboard') }}" class="text-default">
        <i class="icon-arrow-left52 position-left"></i><span class="text-semibold">Home</span>
    </a> - <a href="{{ route('admin.transaction.move') }}" class="text-default">
        <span class="text-semibold">Daftar Pindah Kas</span>
    </a>
@endsection

@section('content')
    <div class="panel panel-white">
        <div class="panel-heading">
            <h6 class="panel-title">Detail Pindah Kas</h6>
        </div>
        <div class="panel-body">
            <div class="col-lg-6">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Tanggal:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ date_format(date_create($detail->date), 'd F Y') }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Rekening Asal:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->source->account->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Nilai Transfer:</label>
                        <div class="col-lg-10">
                            <div id="source-amount" data-value="{{ $detail->source->amount }}" class="form-control-static">
                                Rp{{ number_format($detail->source->amount, 0, ',', '.') }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Teks Mutasi:</label>
                        <div class="col-lg-10">
                            <a class="editable-source-mutation" data-type="textarea" data-value="{{ $detail->source->mutation }}" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-title="Teks Mutasi"></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">&nbsp;</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">&nbsp;</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Rekening Tujuan:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->destination->account->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Nilai Transfer:</label>
                        <div class="col-lg-10">
                            <a id="destination-amount" class="editable-destination-amount" data-prev="{{ $detail->destination->amount }}" data-type="number" data-inputclass="form-control" data-pk="{{ $detail->id }}"
                                data-value="{{ $detail->destination->amount }}" data-title="Nilai Transfer"></a>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Teks Mutasi:</label>
                        <div class="col-lg-10">
                            <a class="editable-destination-mutation" data-type="textarea" data-value="{{ $detail->destination->mutation }}" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-title="Teks Mutasi"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body">
            <div class="col-lg-6">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Nilai Selisih:</label>
                        <div class="col-lg-10">
                            <div id="diff-amount" class="form-control-static">Rp{{ number_format(abs($detail->source->amount - $detail->destination->amount), 0, ',', '.') }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Status:</label>
                        <div class="col-lg-10">
                            <a class="editable-status" data-type="select" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-value="{{ $detail->status->id }}" data-source="/status" data-title="Rubah Status"></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/editable/editable.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/extensions/mockjax.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>

    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <script type="text/javascript">
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.mockjax({
            url: '/status',
            status: 200,
            responseTime: 400,
            response: function(settings) {
                this.responseText = {!! $status !!};
            }
        });
    </script>

    <script>
        Number.prototype.format = function(n, x, c, s) {
            var re = '\\d(?=(\\d{' + (x || 3) + '})+' + (n > 0 ? '\\D' : '$') + ')',
                num = this.toFixed(Math.max(0, ~~n));
            return (c ? num.replace('.', c) : num).replace(new RegExp(re, 'g'), '$&' + (s || ','));
        };

        $.fn.editableform.template = '<form class="editableform">' +
            '<div class="control-group">' +
            '<div class="editable-input"></div> <div class="editable-buttons"></div>' +
            '<div class="editable-error-block"></div>' +
            '</div> ' +
            '</form>';
        $.fn.editableform.buttons =
            '<button type="submit" class="btn btn-primary btn-icon editable-submit"><i class="icon-check"></i></button>' +
            '<button type="button" class="btn btn-default btn-icon editable-cancel"><i class="icon-x"></i></button>';

        function equate(newValue) {
            let source = $("#source-amount").data('value');
            $("#diff-amount").html("Rp" + (parseInt(source) - parseInt(newValue)).format(0, 3, ",", "."));
        }

        $(".editable-destination-amount").editable({
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.transaction.move.update.destination.amount') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Nilai transfer tidak boleh kosong";
            },
            display: function(value) {
                $(this).html("Rp" + parseInt(value).format(0, 3, ",", "."));
            },
            error: function(response, newValue) {
                return "Terjadi kesalahan. Harap coba lagi nanti.";
            },
            success: function(response, newValue) {
                if (response.status === "success") {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-success"
                    });
                    equate(newValue);
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }

            },
        });

        $(".editable-source-mutation").editable({
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.transaction.move.update.source.mutation') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Teks Mutasi tidak boleh kosong";
            },
            error: function(response, newValue) {
                return "Terjadi kesalahan. Harap coba lagi nanti.";
            },
            success: function(response, newValue) {
                if (response.status === "success") {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-success"
                    });
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }

            },
        });

        $(".editable-destination-mutation").editable({
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.transaction.move.update.destination.mutation') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Teks Mutasi tidak boleh kosong";
            },
            error: function(response, newValue) {
                return "Terjadi kesalahan. Harap coba lagi nanti.";
            },
            success: function(response, newValue) {
                if (response.status === "success") {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-success"
                    });
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }

            },
        });

        let displayStatus = {!! $status_display !!};
        $(".editable-status").editable({
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.transaction.move.update.status') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Status tidak boleh kosong";
            },
            display: function(value) {
                $(this).html('<span class="label" style="background-color: ' + displayStatus[value].color + ';">' + displayStatus[value].name + "</span>");
            },
            error: function(response, newValue) {
                return "Terjadi kesalahan. Harap coba lagi nanti.";
            },
            success: function(response, newValue) {
                if (response.status === "success") {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-success"
                    });
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }

            },
        });
    </script>
@endsection