@extends('layout.main')
@section('title', 'Daftar 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>
@endsection

@section('content')
    @php
        $panel_colapse = !empty($input->key) || !empty($input->category) ? '' : 'panel-collapsed';
    @endphp
    <div class="panel panel-flat {{ $panel_colapse }}">
        <div class="panel-heading">
            <h6 class="panel-title">Cari Berdasarkan</h6>
            <div class="heading-elements">
                <ul class="icons-list">
                    <li><a data-action="collapse"></a></li>
                </ul>
            </div>
        </div>
        <div class="panel-body">
            <form action="{{ route('admin.asset') }}" method="GET" class="form-horizontal">
                @csrf
                <div class="col-lg-6 form-group">
                    <label class="col-lg-3 control-label" for="key">Kata Kunci</label>
                    <div class="col-lg-9">
                        <input type="text" name="key" id="key" value="@if (!empty($input->key)) {{ $input->key }} @endif" placeholder="Kata Kunci" class="form-control" />
                    </div>
                </div>
                <div class="col-lg-6 form-group">
                    <label class="col-lg-3 control-label">Kategori</label>
                    <div class="col-lg-9">
                        <select name="category" id="category" class="form-control select-search">
                            <option value="">-- Pilih Kategori Aset --</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" @if (!empty($input->category) && $input->category == $category->id) {{ 'selected' }} @endif>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-lg-12 text-right"><input type="submit" name="submit" class="btn btn-default" value="Cari" /></div>
            </form>
        </div>
    </div>

    <div class="panel panel-flat">
        <div class="panel-heading">
            <h6 class="panel-title">Daftar Aset</h6>
            <div class="heading-elements">
                <a href="{{ route('admin.asset.new') }}">
                    <button class="btn bg-blue btn-labeled heading-btn"><b><i class="icon-calculator"></i></b> Tambah Aset</button>
                </a>
            </div>
        </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-hide="phone" class="col-md-1">&nbsp;</th>
                            <th data-toggle="true">Kode Aset</th>
                            <th data-toggle="true">Kategori</th>
                            <th data-toggle="true">Tanggal Pembelian</th>
                            <th data-hide="phone">Keterangan</th>
                            <th data-hide="phone">PIC</th>
                            <th data-toggle="true">Status</th>
                            <th data-hide="phone">Update Terakhir</th>
                            <th data-toggle="true">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($assets as $asset)
                            <tr>
                                <td>
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="img-v square-img" id="contain-{{ $asset->id }}">
                                        <img src="{{ asset('assets/images/spinner-1.gif') }}" data-src="{{ $asset->images_display->_1 }}" id="box-{{ $asset->id }}" data-loader="examplePlugin" alt="" class="img-responsive lazy"
                                            style="max-height: 100%; max-width: 100%; object-fit: cover;" />
                                    </div>
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="lazy" data-loader="asyncLoader"></div>
                                </td>
                                <td>
                                    <a href="{{ route('admin.asset.detail', $asset->id) }}">{{ $asset->code }}</a>
                                </td>
                                <td>{{ $asset->category->name }}</td>
                                <td>{{ date_format(date_create($asset->date), 'd M Y') }}</td>
                                <td>
                                    @if (empty($asset->description))
                                        {{ '-' }}
                                    @else
                                        <span class="myPopover" data-popup="popover" data-content="{!! nl2br($asset->description) !!}" data-trigger="hover" data-placement="left" data-html="true">
                                            {{ mb_strimwidth(strip_tags($asset->description), 0, 30, '...') }}
                                        </span>
                                    @endif
                                </td>
                                <td>{{ $asset->pic }}</td>
                                <td>
                                    <span class="label" style="background-color: {{ $asset->status->color }};">{{ $asset->status->name }}</span>
                                </td>
                                <td>{{ date_format(date_create($asset->updated), 'd M Y H:i:s') }}</td>
                                <td class="text-right">
                                    <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.asset.remove', $asset->id) }}" onclick="return showMe(this, '{{ $asset->code }}');">Hapus</a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="9" class="text-center">Belum ada data.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
        @if (!empty($metadata->links))
            <div class="panel-footer text-center">
                {!! $metadata->links !!}
            </div>
        @endif
    </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/pages/form_select2.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>
        (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();

        function showMe(element, message) {
            var ele = $(element);
            swal({
                title: "Apakah anda yakin akan menghapus aset " + message + "?",
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya!',
                cancelButtonText: 'Tidak',
                closeOnConfirm: true,
                closeOnCancel: true
            }, function(isConfirm) {
                if (isConfirm) location.href = ele.attr('href');
            });
            return false;
        };
    </script>
@endsection