@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>

    {{-- 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>
                                </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>
                                    </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>
        $('[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>
@endsection