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

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

@section('content')
    <div class="col-lg-6">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Detail Pengajuan</h6>
                @if ($detail->status->id == 0)
                    <div class="heading-elements">
                        <a href="{{ route('admin.approval.update', $detail->id) }}" data-toggle="modal" data-target="#modal-remote-lg">
                            <button class="btn bg-blue heading-btn">Rubah</button>
                        </a>
                    </div>
                @endif
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">ID Pengajuan:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">
                                {{ $detail->number }}
                                <a onclick="copyText('text-to-copy');">
                                    <i class="icon-copy"></i>
                                </a>
                            </div>
                            <textarea id="text-to-copy" name="text-to-copy" style="position: absolute; z-index: -1; opacity: 0;" readonly="readonly">ID: {{ $detail->number }}
Unit: {{ $detail->unit->name }}
Kategori: {{ $detail->category->name }}

{!! $detail->description !!}

Diajukan oleh: {{ $detail->creator->name }}
Waktu: {{ date_format(date_create($detail->created), 'd M Y H:i:s') }}
</textarea>

                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Waktu Dibuat:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">{{ date_format(date_create($detail->created), 'd M Y H:i:s') }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Dibuat Oleh:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">{{ $detail->creator->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Unit:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static">{{ $detail->unit->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Kategori:</label>
                        <div class="col-lg-8">
                            @if (in_array($detail->status->id, [0, 1, 2], true))
                                <a class="editable-category" data-type="select" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-value="{{ $detail->category->id }}" data-source="/categories" data-title="Rubah Kategori"></a>
                            @else
                                <div class="form-control-static">{{ $detail->category->name }} {{ $detail->category->type->id == 1 ? '(K)' : '(D)' }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Deskripsi:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static" style="word-wrap: break-word;">{!! nl2br($detail->description) !!}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Nilai:</label>
                        <div class="col-lg-8">
                            <div class="form-control-static nilai-highlight">Rp{{ number_format($detail->amount, 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Tipe:</label>
                        <div class="col-lg-8">
                            <label class="label" style="background-color:{{ $detail->type->color }};">{{ $detail->type->name }}</label>
                        </div>
                    </div>
                    @if (!empty($detail->bank->id))
                        <div class="form-group no-margin">
                            <label class="col-lg-4 control-label">Rekening Tujuan:</label>
                            <div class="col-lg-8">
                                @if (in_array($detail->status->id, [0, 1, 2], true))
                                    <a href="#" id="multi-select-text" data-type="multiSelectText">Bank {{ $detail->bank->name }} - {{ $detail->bank->account }} a/n {{ $detail->bank->owner }}</a>
                                @else
                                    <div class="form-control-static">Bank {{ $detail->bank->name }} - {{ $detail->bank->account }} a/n {{ $detail->bank->owner }}</div>
                                @endif
                            </div>
                        </div>
                    @endif
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Sumber Dana:</label>
                        <div class="col-lg-8">
                            @if (in_array($detail->status->id, [0, 1, 2], true))
                                <a class="editable-account-source" data-type="select" data-inputclass="form-control" data-pk="{{ $detail->id }}" data-value="{{ $detail->account->id }}" data-source="/accounts"
                                    data-title="Rubah Sumber Dana"></a>
                            @else
                                <div class="form-control-static">{{ $detail->account->name }}</div>
                            @endif
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-4 control-label">Status:</label>
                        <div class="col-lg-8">
                            <label class="label" style="background-color:{{ $detail->status->color }};">{{ $detail->status->name }}</label>
                        </div>
                    </div>
                    <div class="form-group no-margin-top no-margin-left no-margin-right">
                        <label class="col-lg-4 control-label">Lampiran:</label>
                        <div class="col-lg-2">
                            @if (!empty($detail->file->_1))
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="img-v" id="contain-{{ $detail->id }}-1">
                                    <a href="{{ $detail->file->_1 }}" data-popup="lightbox" rel="gallery">
                                        <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $detail->file->_1 }}" id="box-{{ $detail->id }}-1" data-loader="examplePlugin" alt="" class="img-responsive lazy"
                                            style="max-height: 100%; max-width: 100%; object-fit: cover;" />
                                    </a>
                                </div>
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="lazy" data-loader="asyncLoader"></div>
                            @endif
                        </div>
                        <div class="col-lg-2">
                            @if (!empty($detail->file->_2))
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="img-v" id="contain-{{ $detail->id }}-2">
                                    <a href="{{ $detail->file->_2 }}" data-popup="lightbox" rel="gallery">
                                        <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $detail->file->_2 }}" id="box-{{ $detail->id }}-2" data-loader="examplePlugin" alt="" class="img-responsive lazy"
                                            style="max-height: 100%; max-width: 100%; object-fit: cover;" />
                                    </a>
                                </div>
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="lazy" data-loader="asyncLoader"></div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        @include('admin.approval.review.detail_list')
        <div id="signature-container">
            @if ($detail->signature == 1)
                <div class="alert" style="background-color: #c5e1a5; border: 1px solid #8bc34a; color: #33691e; padding: 10px; margin-bottom: 20px; border-radius: 2px;">
                    @if ($detail->status->id == 2 && session('user')->level->id == 4)
                        <input type="checkbox" class="styled signature" checked> &nbsp;
                    @endif
                    Disetujui oleh {{ $detail->signatory->name ?? 'Owner' }} pada {{ date_format(date_create($detail->signature_date), 'd M Y H.i') }}
                </div>
            @else
                <div class="alert alert-default" style="background-color: #d3d3d3; border: 1px solid #999; color: #333; padding: 10px; margin-bottom: 20px;">
                    <label class="no-margin">
                        @if ($detail->status->id == 2 && session('user')->level->id == 4)
                            <input type="checkbox" class="styled signature"> &nbsp;
                        @endif
                        Belum disetujui oleh owner
                    </label>
                </div>
            @endif
        </div>
    </div>
    @if (!empty($recent_approvals))
        <div class="col-lg-12">
            <div class="panel panel-white">
                <div class="panel-heading">
                    <h6 class="panel-title">Pengajuan Terakhir</h6>
                </div>
                <div class="panel-body">
                    <div class="col-lg-12 table-responsive">
                        <table class="table table-togglable table-hover table-xxs text-size-small">
                            <thead>
                                <tr>
                                    <th data-toggle="true">ID Pengajuan</th>
                                    <th data-hide="phone">Tanggal</th>
                                    <th data-hide="phone">Kategori</th>
                                    <th data-hide="phone">Deskripsi</th>
                                    <th data-toggle="true">Nilai</th>
                                    <th data-toggle="true">Tipe</th>
                                    <th data-hide="phone">Diajukan Oleh</th>
                                    <th data-toggle="true">Status</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recent_approvals as $recent)
                                    <tr>
                                        <td>
                                            <a href="{{ route('admin.approval.detail', $recent->id) }}">{{ $recent->number }}</a>
                                        </td>
                                        <td>{{ date_format(date_create($recent->created), 'd M Y H:i:s') }}</td>
                                        <td>{{ $recent->category_name }}</td>
                                        <td>
                                            @if (empty($recent->description))
                                                {{ '-' }}
                                            @else
                                                @php
                                                    $desc = str_replace("\"", "\'\'", $recent->description);
                                                    $desc = nl2br($desc);
                                                @endphp
                                                <span class="myPopover" data-popup="popover" data-trigger="hover" data-placement="left" data-html="true" data-content="{!! $desc !!}">
                                                    {{ mb_strimwidth(strip_tags($recent->description), 0, 30, '...') }}
                                                </span>
                                            @endif
                                        </td>
                                        <td class="text-right">Rp{{ number_format($recent->amount, 0, ',', '.') }}</td>
                                        <td>
                                            <label class="label" style="background-color:{{ $recent->type_color }};">{{ $recent->type_name }}</label>
                                        </td>
                                        <td>{{ $recent->creator_name }}</td>
                                        <td>
                                            <label class="label" style="background-color:{{ $recent->status_color }};">{{ $recent->status_name }}</label>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center text-muted">Tidak ada pengajuan sebelumnya.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endif
    <div class="col-lg-12">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Transaksi Keuangan Terkait</h6>
            </div>
            <div class="panel-body">
                <div class="col-lg-12 table-responsive">
                    <table id="userTable" class="table table-togglable table-hover table-xxs text-size-small">
                        <thead>
                            <tr>
                                <th data-toggle="true">ID Transaksi</th>
                                <th data-hide="phone">Tanggal</th>
                                <th data-toggle="true">Akun</th>
                                <th data-toggle="true">Kategori</th>
                                <th data-toggle="true">Kredit</th>
                                <th data-toggle="true">Debet</th>
                                <th data-hide="phone">Catatan</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($detail->transactions as $transaction)
                                <tr>
                                    <td><a href="{{ route('admin.transaction.detail', $transaction->id) }}">{{ $transaction->number }}</a></td>
                                    <td>{{ date_format(date_create($transaction->date), 'd M Y') }}</td>
                                    <td>{{ $transaction->account->name }}</td>
                                    <td>{{ $transaction->category->name }}</td>
                                    <td>
                                        @if ($transaction->type->id == 1)
                                            Rp{{ number_format($transaction->amount, 0, ',', '.') }}@else{{ '0' }}
                                        @endif
                                    </td>
                                    <td>
                                        @if ($transaction->type->id == 2)
                                            Rp{{ number_format($transaction->amount, 0, ',', '.') }}@else{{ '0' }}
                                        @endif
                                    </td>
                                    <td>
                                        @if (empty($transaction->description))
                                            {{ '-' }}
                                        @else
                                            <span class="myPopover" data-popup="popover" data-content="{!! nl2br($transaction->description) !!}" data-trigger="hover" data-placement="left" data-html="true">
                                                {{ mb_strimwidth(strip_tags($transaction->description), 0, 30, '...') }}
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">Belum ada data.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('other-scripts')
    <style>
        .nilai-highlight {
            font-size: 16px !important;
            font-weight: 700 !important;
            color: #2196F3 !important;
        }
    </style>

    <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/plugins/media/fancybox.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/gallery.js') }}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.6/jquery.lazy.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.6/jquery.lazy.plugins.min.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: '/categories',
            status: 200,
            responseTime: 400,
            response: function(settings) {
                this.responseText = {!! $categories !!};
            }
        });

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

        $.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($) {
            "use strict";

            var MultiSelectText = function(options) {
                this.init('multiSelectText', options, MultiSelectText.defaults);
            };

            $.fn.editableutils.inherit(MultiSelectText, $.fn.editabletypes.abstractinput);

            $.extend(MultiSelectText.prototype, {

                /** Build inputs from template */
                render: function() {
                    this.$input = this.$tpl.find('input, select');

                    // Populate bank dropdown
                    var $select = this.$tpl.find('[name="bank"]');
                    $select.empty();

                    $.each({!! $banks !!}, function(i, item) {
                        $select.append(
                            $('<option>', {
                                value: item.value,
                                text: item.text
                            })
                        );
                    });
                },

                /** Convert value → HTML for display (outside editable popup) */
                value2html: function(value, element) {
                    if (!value) {
                        $(element).empty();
                        return;
                    }

                    var text = 'Bank ' + value.bank_text + ' - ' + value.account + ' a/n ' + value.owner;

                    $(element).text(text);
                },

                /** HTML → value (if needed) */
                html2value: function(html) {
                    return null;
                },

                /** Value → string (for X-editable comparisons) */
                value2str: function(value) {
                    var str = '';
                    if (value) {
                        for (var k in value) {
                            str = str + k + ':' + value[k] + ';';
                        }
                    }
                    return str;
                },

                str2value: function(str) {
                    return str;
                },

                /** Set actual input values inside popup */
                value2input: function(value) {
                    if (!value) return;

                    this.$input.filter('[name="bank"]').val(value.bank);
                    this.$input.filter('[name="account"]').val(value.account);
                    this.$input.filter('[name="owner"]').val(value.owner);
                },

                /** Read values from popup inputs */
                input2value: function() {
                    var bankSelect = this.$input.filter('[name="bank"]');

                    return {
                        bank: bankSelect.val(),
                        bank_text: bankSelect.find('option:selected').text(),
                        account: this.$input.filter('[name="account"]').val(),
                        owner: this.$input.filter('[name="owner"]').val(),
                    };
                },

                activate: function() {
                    this.$input.filter('[name="bank"]').focus();
                },

                autosubmit: function() {
                    this.$input.keydown(function(e) {
                        if (e.which === 13) {
                            $(this).closest('form').submit();
                        }
                    });
                }

            });

            MultiSelectText.defaults = $.extend({}, $.fn.editabletypes.abstractinput.defaults, {
                tpl: '<div class="editable-bank">' +
                    '    <label><span>Bank:</span>' +
                    '        <select name="bank" class="form-control"></select>' +
                    '    </label>' +
                    '</div>' +
                    '<div class="editable-bank">' +
                    '    <label><span>Account:</span>' +
                    '        <input type="text" name="account" class="form-control">' +
                    '    </label>' +
                    '</div>' +
                    '<div class="editable-bank">' +
                    '    <label><span>Owner:</span>' +
                    '        <input type="text" name="owner" class="form-control">' +
                    '    </label>' +
                    '</div>',

                inputclass: ''
            });

            $.fn.editabletypes.multiSelectText = MultiSelectText;

        }(window.jQuery));
    </script>

    <script>
        $(".styled").uniform({
            radioClass: 'choice'
        });
        $('[data-popup="lightbox"]').fancybox({
            padding: 3
        });

        (function($) {
            $.Lazy('examplePlugin', function(element, response) {
                var img = $('#' + element.context.id).data('src');
                $('#' + element.context.id).attr('src', img);
                response(true);
            });
        })(window.jQuery || window.Zepto);
        $('.lazy').Lazy();

        function copyText(input) {
            var copyText = document.getElementById(input);
            copyText.select();
            document.execCommand("copy");
            new PNotify({
                text: "Text sudah di copy",
                delay: 2000,
                addclass: 'bg-success'
            });
        }

        $(".editable-category").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.approval.update.category') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Kategori 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-account-source").editable({
            container: 'body',
            clear: false,
            mode: "popup",
            placement: "right",
            send: "always",
            highlight: false,
            url: "{{ route('admin.approval.update.account.source') }}",
            validate: function(value) {
                if ($.trim(value) == '' || $.trim(value) == "undefined") return "Sumber dana 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"
                    });
                }

            },
        });

        $('#multi-select-text').editable({
            type: 'multiSelectText',
            url: "{{ route('admin.approval.update.bank') }}",
            pk: '{{ $detail->id }}',
            title: 'Rubah Rekening Tujuan',
            value: {
                bank: '{{ $detail->bank?->id ?? '' }}',
                account: '{{ $detail->bank?->account ?? '' }}',
                owner: '{{ $detail->bank?->owner ?? '' }}',
            }
        });

        $("#signature-container").on("change", ".signature", function() {
            let element = $(this);
            let isChecked = element.is(":checked");
            let oldValue = !isChecked;
            let signatureValue = isChecked ? 1 : 0;

            $.post("{{ route('admin.approval.update.signature') }}", {
                approval: {{ $detail->id }},
                signature: signatureValue,
            }, function(data, status) {
                if (data.status === "success") {
                    new PNotify({
                        text: data.message,
                        delay: 3000,
                        addclass: 'bg-success'
                    });

                    if (data.signature == 1) {
                        // Reload the page — status is now 3 so the checkbox won't re-appear
                        location.reload();
                    } else {
                        let html = `<div class="alert alert-default" style="background-color: #d3d3d3; border: 1px solid #999; color: #333; padding: 10px; margin-bottom: 20px;">
                    <label class="no-margin">
                        <input type="checkbox" class="styled signature"> &nbsp;
                        Belum disetujui oleh owner
                    </label>
                </div>`;

                        $("#signature-container").html(html);

                        if ($.isFunction($.fn.uniform)) {
                            $(".signature").uniform();
                        }
                    }
                } else {
                    new PNotify({
                        text: data.message,
                        delay: 3000,
                        addclass: 'bg-danger'
                    });
                    element.prop('checked', oldValue);
                }
            }).fail(function() {
                new PNotify({
                    text: "Terjadi kesalahan sistem",
                    delay: 3000,
                    addclass: 'bg-danger'
                });
                element.prop('checked', oldValue);
            });
        });
    </script>
@endsection