@extends('layout.main')
@section('title', 'Detail Payroll ' . $detail->number)

@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.payroll') }}" class="text-default">
        <span class="text-semibold">Daftar Payroll</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-12">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Detail Payroll {{ $detail->number }}</h6>
                <div class="heading-elements">
                    <a href="{{ route('admin.payroll.print', $detail->id) }}" target="_blank">
                        <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-printer2"></i></b> Print</button>
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Nama Pegawai:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->employee->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Tanggal Dibuat:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ date_format(date_create($detail->created), 'd M Y H:i:s') }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="col-md-12 no-padding" style="margin-bottom: 25px;">
                    <div class="col-lg-8">
                        <h6>Nilai Payroll</h6>
                    </div>
                    <div class="col-lg-4 text-right">
                        @if ($detail->status->id <= 1)
                            <a href="{{ route('admin.payroll.item.component', $detail->id) }}" class="btn bg-blue" data-toggle="modal" data-target="#modal-remote">
                                Tambah Komponen
                            </a>
                        @endif
                    </div>
                </div>
                <div class="payroll-value">
                    @include('admin.payroll.detail_value')
                </div>
            </div>
            <div class="panel-body payroll-cashbon">
                <div class="col-md-12 no-padding" style="margin-bottom: 25px;">
                    <div class="col-lg-8">
                        <h6>Cashbon Digunakan</h6>
                    </div>
                    <div class="col-lg-4 text-right">
                        @if ($detail->status->id <= 1)
                            <a href="{{ route('admin.payroll.cashbon.list', ['id' => $detail->id, 'employee' => $detail->employee->id]) }}" class="btn bg-blue" data-toggle="modal" data-target="#modal-remote-lg">
                                Potong Cashbon
                            </a>
                        @endif
                    </div>
                </div>
                <div class="payroll-cashbon">
                    @include('admin.payroll.detail_cashbon')
                </div>
            </div>
            <div class="panel-body">
                <div class="col-lg-6 no-padding">
                    <div class="form-horizontal">
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">Metode Pembayaran:</label>
                            <div class="col-lg-8">
                                @if ($detail->status->id <= 3)
                                    <a class="editable-payment-type" data-type="select" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-value="{{ $detail->payment_type->id }}" data-source="/payments"
                                        data-title="Rubah Metode Pembayaran"></a>
                                @else
                                    <div class="form-control-static">{{ $detail->payment_type->name }}</div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="form-horizontal">
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">Catatan:</label>
                            <div class="col-lg-8">
                                @if ($detail->status->id <= 3)
                                    <a class="editable-note" data-type="textarea" data-value="{{ $detail->note }}" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-title="Catatan"></a>
                                @else
                                    <div class="form-control-static">{!! nl2br($detail->note) !!}</div>
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="form-horizontal">
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">Status:</label>
                            <div class="col-lg-8">
                                @if ($detail->status->id <= 4)
                                    <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>
                                @else
                                    <div class="form-control-static">
                                        <span class="label" style="background-color: {{ $detail->status->color }};">{{ $detail->status->name }}</span>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 no-padding">
                    <div class="form-horizontal">
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">Total Bayar:</label>
                            <div class="col-lg-8">
                                <div class="form-control-static">
                                    Nilai Payroll - Cashbon <br />
                                    <span id="payroll-value-total">Rp{{ number_format($detail->total_effective, 0, ',', '.') }}</span> - <span id="payroll-cashbon-total">
                                        Rp{{ number_format($detail->total_cashbon, 0, ',', '.') }}
                                    </span>
                                    <br />
                                    <span id="payroll-total">Rp{{ number_format($detail->total_effective - $detail->total_cashbon, 0, ',', '.') }}</span>
                                </div>
                            </div>
                        </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: '/payments',
            status: 200,
            responseTime: 400,
            response: function(settings) {
                this.responseText = {!! $payments !!};
            }
        });

        $.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 calculateValue() {
            let totalComponent = 0;
            $(".amount-effective").each(function() {
                totalComponent += parseInt($(this).data('value'));
            });
            $("#payroll-value-total").html("Rp" + (totalComponent).format(0, 3, ",", "."));
            let totalCashbon = 0;
            $(".used-here").each(function() {
                totalCashbon += parseInt($(this).data('value'));
            });
            $("#payroll-cashbon-total").html("Rp" + (totalCashbon).format(0, 3, ",", "."));
            $("#payroll-total").html("Rp" + (totalComponent - totalCashbon).format(0, 3, ",", "."));
        }

        function calculatePayrollItem(id) {
            let amount = parseInt($("#amount-component-" + id).data('value'));
            let factor = parseInt($("#factor-component-" + id).data('value'));
            let factorEffective = parseInt($("#factor-effective-component-" + id).data('value'));
            let amountEffective = 0;
            if (factor != 0) amountEffective = (amount / factor) * factorEffective;
            $("#amount-effective-" + id).data('value', amountEffective);
            $("#amount-effective-" + id).html("Rp" + (amountEffective).format(0, 3, ",", "."));
            calculateValue();
        }

        function calculateCashbonUsed(id, oldValue, newValue) {
            let amount = parseInt($("#amount-cashbon-" + id).data('value'));
            let used = parseInt($("#used-cashbon-" + id).data('value'));
            used = used - parseInt(oldValue) + parseInt(newValue);
            $("#used-cashbon-" + id).data('value', used);
            $("#used-cashbon-" + id).html("Rp" + used.format(0, 3, ",", "."));
            $("#leftover-cashbon-" + id).html("Rp" + (amount - used).format(0, 3, ",", "."));
            calculateValue();
        }

        $(".editable-payment-type").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.payroll.update.payment.type') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Metode pembayaran 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-status").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.payroll.update.status') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Status 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"
                    });
                    location.reload();
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }

            },
        });
        $(".editable-note").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "left",
            send: "always",
            highlight: false,
            url: "{{ route('admin.payroll.update.note') }}",
            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-factor").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.payroll.item.update.factor') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Pengali 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"
                    });
                    let id = $(this).data('id');
                    $("#factor-component-" + id).data('value', newValue);
                    calculatePayrollItem(id);
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }

            },
        });
        $(".editable-factor-effective").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.payroll.item.update.factor.effective') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Pengali Efektif 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"
                    });
                    let id = $(this).data('id');
                    $("#factor-effective-component-" + id).data('value', newValue);
                    calculatePayrollItem(id);
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }

            },
        });
        $(".editable-note-item").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "left",
            send: "always",
            highlight: false,
            url: "{{ route('admin.payroll.item.update.note') }}",
            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-cashbon").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.payroll.cashbon.update.amount') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Pengali 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"
                    });
                    let id = $(this).data('id');
                    let oldValue = $("#used-here-" + id).data('value');
                    $("#used-here-" + id).data('value', newValue);
                    calculateCashbonUsed(id, oldValue, newValue);
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: "bg-danger"
                    });
                }

            },
        });
        $(".editable-note-cashbon").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "left",
            send: "always",
            highlight: false,
            url: "{{ route('admin.payroll.cashbon.update.note') }}",
            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>

    <script>
        function confirmRemoveComponent(element, name) {
            var ele = $(element);
            swal({
                title: "Apakah anda yakin akan menghapus komponen " + name + "?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya!',
                cancelButtonText: 'Tidak',
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) location.href = ele.attr('href');
            });
            return false;
        };

        function confirmRemoveCashbon(element, name) {
            var ele = $(element);
            swal({
                title: "Apakah anda yakin akan menghapus cashbon " + name + "?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya!',
                cancelButtonText: 'Tidak',
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) location.href = ele.attr('href');
            });
            return false;
        };
    </script>
@endsection