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

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

@section('content')
    <div class="col-lg-8">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Detail Transaksi</h6>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">ID Transaksi:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->number }}</div>
                        </div>
                    </div>
                    <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">Akun:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->account->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Kategori:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->category->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Nilai:</label>
                        <div class="col-lg-10">
                            <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-2 control-label">Tipe:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->type->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Saldo:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">Rp{{ number_format($detail->deposit, 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Keterangan:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{!! nl2br($detail->description) !!}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Penerima:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->recipient }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Dibuat Oleh:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->creator->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Waktu 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>
    </div>

    <div class="col-lg-4">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Bukti Faktur</h6>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Jenis:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->receipt->type->name }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <div class="col-lg-12">
                            @if (!empty($detail->receipt->file))
                                <div class="lazy" data-loader="customLoaderName"></div>
                                <div class="img-v" id="contain-{{ $detail->id }}-1">
                                    <a href="{{ $detail->receipt->file }}" data-popup="lightbox" rel="gallery">
                                        <img src="{{ asset('assets/images/spinner-1.gif') }}"
                                            data-src="{{ $detail->receipt->file }}" 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>
                </div>
            </div>
        </div>
    </div>

    {{-- Pembagian Alokasi Panel --}}
    <div class="col-lg-12">
        <div class="panel panel-flat">
            <div class="panel-heading">
                <h6 class="panel-title">Pembagian Alokasi Dana</h6>
                <div class="heading-elements">
                    <a href="{{ route('admin.transaction.allocation.add', $detail->id) }}" data-toggle="modal"
                        data-target="#modal-remote-lg">
                        <button class="btn bg-blue btn-labeled btn-xs heading-btn">
                            <b><i class="icon-plus2"></i></b> Tambah Alokasi
                        </button>
                    </a>
                </div>
            </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 Alokasi</th>
                                <th data-toggle="true">Nama</th>
                                <th data-toggle="true">Nilai</th>
                                <th data-toggle="true">Keterangan</th>
                                <th data-toggle="true">Status</th>
                                <th data-hide="phone">Dibuat Oleh</th>
                                <th data-hide="phone">Waktu</th>
                                <th data-toggle="true">&nbsp;</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($detail->allocations as $allocation)
                                <tr>
                                    <td>{{ $allocation->allocation_number }}</td>
                                    <td>{{ $allocation->name }}</td>
                                    <td>Rp{{ number_format($allocation->amount, 0, ',', '.') }}</td>
                                    <td>{{ $allocation->description ?? '-' }}</td>
                                    <td>
                                        @if ($allocation->status == 0)
                                            <a class="editable-status-alloc" data-type="select"
                                                data-inputclass="form-control" data-pk="{{ $allocation->id }}"
                                                data-value="{{ $allocation->status }}" data-title="Rubah Status"
                                                style="text-decoration: none;">
                                                <label class="label status-label-display"
                                                    style="background-color: #777777; cursor: pointer;">
                                                    Draft
                                                </label>
                                            </a>
                                        @else
                                            <span class="label" style="background-color: #4CAF50;">Aktif</span>
                                        @endif
                                    </td>
                                    <td>{{ $allocation->creator->name ?? '-' }}</td>
                                    <td>{{ date_format(date_create($allocation->created), 'd M Y H:i') }}</td>
                                    <td>
                                        @if ($allocation->status == 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="{{ route('admin.transaction.allocation.edit', $allocation->id) }}"
                                                                data-toggle="modal" data-target="#modal-remote-lg">
                                                                Edit
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a href="{{ route('admin.transaction.allocation.remove', $allocation->id) }}"
                                                                onclick="return confirm('Yakin ingin menghapus alokasi ini?')">
                                                                Hapus
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="8" class="text-center text-muted">Belum ada alokasi</td>
                                </tr>
                            @endforelse
                            @if ($detail->allocations->count() > 0)
                                <tr>
                                    <td colspan="2"><strong>Total</strong></td>
                                    <td><strong>Rp{{ number_format($detail->allocations->sum('amount'), 0, ',', '.') }}</strong>
                                    </td>
                                    <td colspan="5"></td>
                                </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- Link External Panel --}}
    @if (!empty($detail->links) && $detail->links->count() > 0)
        <div class="col-lg-12">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title">Link External</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">Link ID</th>
                                    <th data-toggle="true">Link Number</th>
                                    <th data-toggle="true">Link Date</th>
                                    <th data-toggle="true">Link Name</th>
                                    <th data-toggle="true">Link Type</th>
                                    <th data-toggle="true">Link Identity</th>
                                    <th data-toggle="true">ID Alokasi</th>
                                    <th data-toggle="true">Nilai Alokasi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($detail->links as $link)
                                    <tr>
                                        <td>#{{ $link->link_id }}</td>
                                        <td>{{ $link->link_number }}</td>
                                        <td>{{ date_format(date_create($link->created), 'd M Y H:i:s') }}</td>
                                        <td>{{ $link->link_name }}</td>
                                        <td>{{ $link->link_type }}</td>
                                        <td>{{ $link->link_identity }}</td>
                                        <td>{{ $link->allocation->allocation_number ?? '-' }}</td>
                                        <td>
                                            @if (!empty($link->allocation))
                                                Rp{{ number_format($link->allocation->amount, 0, ',', '.') }}
                                            @else
                                                -
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- Approval Panel --}}
    @if (!empty($detail->approval->id))
        <div class="col-lg-12">
            <div class="panel panel-flat">
                <div class="panel-heading">
                    <h6 class="panel-title">Pengajuan</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-toggle="true">Tanggal</th>
                                    <th data-toggle="true">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>
                                    <th data-hide="phone">&nbsp;</th>
                                </tr>
                            </thead>
                            <tbody>
                                @php $approval = $detail->approval @endphp
                                <tr>
                                    <td>
                                        <a
                                            href="{{ route('admin.approval.detail', $approval->id) }}">{{ $approval->number }}</a>
                                    </td>
                                    <td>{{ date_format(date_create($approval->created), 'd M Y H:i:s') }}</td>
                                    <td>{{ $approval->category->name }}</td>
                                    <td>
                                        @if (empty($approval->description))
                                            {{ '-' }}
                                        @else
                                            @php
                                                $description = str_replace("\"", "\'\'", $approval->description);
                                                $description = nl2br($description);
                                            @endphp
                                            <span class="myPopover" data-popup="popover" data-trigger="hover"
                                                data-placement="left" data-html="true"
                                                data-content="{!! $description !!}">
                                                {{ mb_strimwidth(strip_tags($approval->description), 0, 30, '...') }}
                                            </span>
                                        @endif
                                    </td>
                                    <td class="text-right">Rp{{ number_format($approval->amount, 0, ',', '.') }}</td>
                                    <td>
                                        <label class="label"
                                            style="background-color:{{ $approval->type->color }};">{{ $approval->type->name }}</label>
                                    </td>
                                    <td>{{ $approval->creator->name }}</td>
                                    <td>
                                        <label class="label"
                                            style="background-color:{{ $approval->status->color }};">{{ $approval->status->name }}</label>
                                    </td>
                                    <td>
                                        @if (!empty($approval->file->_1))
                                            <a href="{{ $approval->file->_1 }}" data-popup="lightbox" rel="gallery">
                                                <i class="icon-file-eye" style="color:#3097d1;"></i>
                                            </a>
                                        @endif
                                        @if (!empty($approval->file->_2))
                                            <a href="{{ $approval->file->_2 }}" data-popup="lightbox" rel="gallery">
                                                <i class="icon-file-eye" style="color:#3097d1;"></i>
                                            </a>
                                        @endif
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    @endif
@endsection

@section('other-scripts')
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/styling/uniform.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/selects/select2.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/core/app.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/login.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/pages/form_select2.js') }}"></script>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/media/fancybox.min.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>
    <script type="text/javascript" src="{{ asset('assets/js/plugins/forms/editable/editable.min.js') }}"></script>

    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <script>
        $('[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();
    </script>
    <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-alloc').editable({
            container: 'body',
            clear: false,
            mode: 'popup',
            placement: 'right',
            send: 'always',
            highlight: false,
            source: [{
                    value: 0,
                    text: 'Draft'
                },
                {
                    value: 1,
                    text: 'Aktif'
                }
            ],
            url: "{{ route('admin.transaction.allocation.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'
                    });
                }
            }
        });
    </script>
@endsection