@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 }}</div>
                        </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">
                            <div class="form-control-static">{{ $detail->category->name }}</div>
                        </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">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:</label>
                            <div class="col-lg-8">
                                <div class="form-control-static">Bank {{ $detail->bank->name }} - {{ $detail->bank->account }} a/n {{ $detail->bank->owner }}</div>
                            </div>
                        </div>
                    @endif
                    <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-1">
                            @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-1">
                            @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>
    <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')
    <script type="text/javascript" src="{{ asset('assets/js/core/app.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