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

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

@section('content')
    <div class="col-lg-8">
        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title">Detail Aset</h6>
                <div class="heading-elements">
                    <a href="{{ route('admin.asset.update', $detail->id) }}">
                        <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-calculator"></i></b> Rubah Aset</button>
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <div class="form-horizontal">
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">Kode Aset:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->code }}</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">Tanggal Pembelian:</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">Nilai:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">Rp{{ number_format($detail->amount, 0, ',', '.') }}</div>
                        </div>
                    </div>
                    <div class="form-group no-margin">
                        <label class="col-lg-2 control-label">PIC:</label>
                        <div class="col-lg-10">
                            <div class="form-control-static">{{ $detail->pic }}</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">Status:</label>
                        <div class="col-lg-10">
                            <span class="label" style="background-color: {{ $detail->status->color }};">{{ $detail->status->name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="panel panel-white">
            <div class="panel-body">
                <div class="col-lg-12">
                    <div class="col-sm-12">
                        @if (!empty($detail->images->_1))
                            <div class="lazy" data-loader="customLoaderName"></div>
                            <div class="img-v" id="contain-{{ $detail->id }}-1">
                                <a href="{{ $detail->images_display->_1 }}" data-popup="lightbox" rel="gallery">
                                    <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $detail->images_display->_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>
                <div class="col-lg-12" style="margin-top: 5px;">
                    <div class="col-sm-4">
                        @if (!empty($detail->images->_2))
                            <div class="lazy" data-loader="customLoaderName"></div>
                            <div class="img-v" id="contain-{{ $detail->id }}-2">
                                <a href="{{ $detail->images_display->_2 }}" data-popup="lightbox" rel="gallery">
                                    <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $detail->images_display->_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 class="col-sm-4">
                        @if (!empty($detail->images->_3))
                            <div class="lazy" data-loader="customLoaderName"></div>
                            <div class="img-v" id="contain-{{ $detail->id }}-3">
                                <a href="{{ $detail->images_display->_3 }}" data-popup="lightbox" rel="gallery">
                                    <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $detail->images_display->_3 }}" id="box-{{ $detail->id }}-3" 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-sm-4">
                        @if (!empty($detail->images->_4))
                            <div class="lazy" data-loader="customLoaderName"></div>
                            <div class="img-v" id="contain-{{ $detail->id }}-4">
                                <a href="{{ $detail->images_display->_4 }}" data-popup="lightbox" rel="gallery">
                                    <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $detail->images_display->_4 }}" id="box-{{ $detail->id }}-4" 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>
@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