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

@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.invoice') }}" class="text-default">
        <span class="text-semibold">Audit Tagihan</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-12">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Detail Tagihan</h6>
            </div>
            <div class="panel-body">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-horizontal">
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">No Faktur:</label>
                                <div class="col-lg-8">
                                    <div class="form-control-static">{{ $detail->invoice_number }}</div>
                                </div>
                            </div>
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">Tanggal:</label>
                                <div class="col-lg-8">
                                    <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-4 control-label">Tipe:</label>
                                <div class="col-lg-8">
                                    <div class="form-control-static">{{ $detail->type->name }}</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" style="font-weight: bold; font-size: 16px;">
                                        Rp{{ number_format($detail->amount, 0, ',', '.') }}</div>
                                </div>
                            </div>
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">Keterangan:</label>
                                <div class="col-lg-8">
                                    <div class="form-control-static">{{ $detail->description ?: '-' }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-horizontal">
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">Status:</label>
                                <div class="col-lg-8">
                                    <a class="editable-status" data-type="select" data-inputclass="form-control"
                                        data-pk="{{ $detail->id }}" data-value="{{ $detail->status->id }}"
                                        data-title="Rubah Status" style="text-decoration: none;">
                                        <span class="label status-label-display"
                                            style="background-color: {{ $detail->status->color }}; cursor: pointer;">
                                            {{ $detail->status->name }}
                                        </span>
                                    </a>
                                </div>
                            </div>
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">Di-update Oleh:</label>
                                <div class="col-lg-8">
                                    <div class="form-control-static">{{ $detail->updater->name ?? '-' }}</div>
                                </div>
                            </div>
                            <div class="form-group no-margin">
                                <label class="col-lg-4 control-label">Waktu Update:</label>
                                <div class="col-lg-8">
                                    <div class="form-control-static">
                                        {{ !empty($detail->updated) ? date_format(date_create($detail->updated), 'd M Y H:i:s') : '-' }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-12">
        <div class="panel panel-flat">
            <div class="panel-heading">
                <h6 class="panel-title">Keuangan Terhubung</h6>
                @if ($detail->status->id == 0)
                    <div class="heading-elements">
                        <a href="{{ route('admin.transaction.invoice.verify.create', $detail->id) }}"
                            data-toggle="modal" data-target="#modal-remote-lg">
                            <button class="btn bg-blue btn-labeled heading-btn">
                                <b><i class="icon-link"></i></b> Tambah Link Keuangan
                            </button>
                        </a>
                        <a href="{{ route('admin.transaction.invoice.allocation.link.create', $detail->id) }}"
                            data-toggle="modal" data-target="#modal-remote-lg">
                            <button class="btn bg-teal-400 btn-labeled heading-btn">
                                <b><i class="icon-link"></i></b> Tambah Link Alokasi
                            </button>
                        </a>
                    </div>
                @endif
            </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 Transaksi</th>
                                <th data-toggle="true">Tanggal</th>
                                <th data-hide="phone">Keterangan</th>
                                <th class="text-right" data-toggle="true">Nilai</th>
                                <th data-toggle="true">ID Alokasi</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($linked->rows as $row)
                                <tr>
                                    <td>
                                        <a href="{{ route('admin.transaction.detail', $row->transaction_id) }}"
                                            target="_blank">{{ $row->number }}</a>
                                    </td>
                                    <td>{{ $row->date }}</td>
                                    <td>{{ $row->description ?: '-' }}</td>
                                    <td class="text-right">Rp{{ number_format($row->amount, 0, ',', '.') }}</td>
                                    <td>{{ $row->allocation_number ?: '-' }}</td>
                                    <td>
                                        @if ($detail->status->id == 0)
                                            <ul class="icons-list text-nowrap">
                                                <li class="dropdown">
                                                    <a class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu9"></i></a>
                                                    <ul class="dropdown-menu dropdown-menu-right">
                                                        <li>
                                                            <a href="#" class="btn-unlink" data-audit-id="{{ $row->audit_id }}">Lepas Link</a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center text-muted">Belum ada transaksi terhubung</td>
                                </tr>
                            @endforelse
                            @if ($linked->rows->count() > 0)
                                <tr>
                                    <td colspan="3"><strong>Total</strong></td>
                                    <td class="text-right"><strong>Rp{{ number_format($linked->total, 0, ',', '.') }}</strong>
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

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

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

        $.fn.editableform.template =
            '<form class="editableform"><div class="control-group"><div class="editable-input"></div> <div class="editable-buttons"></div></div></form>';

        $('.editable-status').editable({
            container: 'body',
            clear: false,
            mode: 'popup',
            placement: 'right',
            send: 'always',
            highlight: false,
            source: @json($status_options),
            url: "{{ route('admin.transaction.invoice.update.status') }}",
            display: function(value, sourceData) {},
            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') {
                    $(this).find('.status-label-display').text(response.data.name);
                    $(this).find('.status-label-display').css('background-color', response.data.color);
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: 'bg-success'
                    });
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                } else {
                    new PNotify({
                        text: response.message,
                        delay: 3000,
                        addclass: 'bg-danger'
                    });
                }
            }
        });

        $(document).on('click', '.btn-unlink', function(e) {
            e.preventDefault();
            var auditId = $(this).data('audit-id');
            swal({
                title: 'Apakah anda ingin melepaskan link record ini?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya',
                cancelButtonText: 'Tidak',
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (!isConfirm) return;
                $.post("{{ route('admin.transaction.invoice.verify.unlink') }}", {
                    invoice_id: {{ $detail->id }},
                    audit_id: auditId
                }, function(resp) {
                    new PNotify({
                        text: resp.message,
                        delay: 3000,
                        addclass: 'bg-success'
                    });
                    setTimeout(function() {
                        location.reload();
                    }, 1500);
                }).fail(function(xhr) {
                    new PNotify({
                        text: (xhr.responseJSON && xhr.responseJSON.message) || 'Gagal melepaskan link',
                        delay: 3000,
                        addclass: 'bg-danger'
                    });
                });
            });
        });
    </script>
@endsection