@extends('layout.main')
@section('title', 'Rubah 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> - <a href="{{ route('admin.asset.detail', $detail->id) }}" class="text-default">
        <span class="text-semibold">Detail Aset</span>
    </a>
@endsection

@section('content')
    <div class="col-lg-8 col-lg-offset-2">
        <form method="POST" action="{{ route('admin.asset.update.submit') }}" enctype="multipart/form-data" class="form-horizontal">
            @csrf
            <input type="hidden" name="asset" id="asset" value="{{ $detail->id }}" />
            <div class="panel panel-white">
                <div class="panel-heading">
                    <h6 class="panel-title">Rubah Aset</h6>
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label class="col-lg-3 control-label" for="code">Kode Aset</label>
                        <div class="col-lg-9">
                            <input type="text" name="code" id="code" value="{{ old('code', $detail->code) }}" placeholder="Kode Aset" class="form-control" required />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label" for="category">Kategori</label>
                        <div class="col-lg-9">
                            <select name="category" id="category" class="form-control select-search" required>
                                <option value="">-- Pilih Kategori Aset --</option>
                                @foreach ($categories as $category)
                                    <option value="{{ $category->id }}" @if (old('category', $detail->category->id) == $category->id) {{ 'selected' }} @endif>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label">Tanggal Pembelian</label>
                        <div class="col-lg-9">
                            <input type="text" name="date" id="date" value="{{ old('date', date_format(date_create($detail->date), 'Y-m-d')) }}" class="form-control datepicker" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label" for="amount">Nilai</label>
                        <div class="col-lg-9">
                            <div class="input-group">
                                <span class="input-group-addon">Rp</span>
                                <input type="number" name="amount" id="amount" value="{{ old('amount', $detail->amount) }}" placeholder="Nilai Transaksi" class="form-control" required />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label" for="pic">PIC</label>
                        <div class="col-lg-9">
                            <input type="text" name="pic" id="pic" value="{{ old('pic', $detail->pic) }}" placeholder="PIC" class="form-control" required />
                        </div>
                    </div>
                    <div class="form-group has-feedback">
                        <label class="col-lg-3 control-label" for="description">Keterangan</label>
                        <div class="col-lg-9">
                            <textarea name="description" id="description" class="form-control" style="resize: vertical; min-height: 100px" required>{{ old('description', $detail->description) }}</textarea>
                            <div class="form-control-feedback"><i class="icon-pencil text-muted"></i></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 display-block">Foto Aset</label>
                        <div class="col-lg-9">
                            @if (!empty($detail->images->_1))
                                <div class="col-lg-3 no-padding no-margin">
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="img-v" id="contain-{{ $detail->id }}-1">
                                        <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;" />
                                    </div>
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="lazy" data-loader="asyncLoader"></div>
                                </div>
                            @endif
                            <div class="col-lg-12 no-padding no-margin">
                                <input id="image_1" type="file" name="image_1" class="form-control file-styled" accept="image/*">
                                <span class="help-block">Accepted formats: gif, png, jpg. Max file size 2Mb</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 display-block">Foto Aset</label>
                        <div class="col-lg-9">
                            @if (!empty($detail->images->_2))
                                <div class="col-lg-3 no-padding no-margin">
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="img-v" id="contain-{{ $detail->id }}-2">
                                        <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;" />
                                    </div>
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="lazy" data-loader="asyncLoader"></div>
                                </div>
                            @endif
                            <div class="col-lg-12 no-padding no-margin">
                                <input id="image_2" type="file" name="image_2" class="form-control file-styled" accept="image/*">
                                <span class="help-block">Accepted formats: gif, png, jpg. Max file size 2Mb</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 display-block">Foto Aset</label>
                        <div class="col-lg-9">
                            @if (!empty($detail->images->_3))
                                <div class="col-lg-3 no-padding no-margin">
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="img-v" id="contain-{{ $detail->id }}-3">
                                        <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;" />
                                    </div>
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="lazy" data-loader="asyncLoader"></div>
                                </div>
                            @endif
                            <div class="col-lg-12 no-padding no-margin">
                                <input id="image_3" type="file" name="image_3" class="form-control file-styled" accept="image/*">
                                <span class="help-block">Accepted formats: gif, png, jpg. Max file size 2Mb</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 display-block">Foto Aset</label>
                        <div class="col-lg-9">
                            @if (!empty($detail->images->_4))
                                <div class="col-lg-3 no-padding no-margin">
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="img-v" id="contain-{{ $detail->id }}-4">
                                        <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;" />
                                    </div>
                                    <div class="lazy" data-loader="customLoaderName"></div>
                                    <div class="lazy" data-loader="asyncLoader"></div>
                                </div>
                            @endif
                            <div class="col-lg-12 no-padding no-margin">
                                <input id="image_4" type="file" name="image_4" class="form-control file-styled" accept="image/*">
                                <span class="help-block">Accepted formats: gif, png, jpg. Max file size 2Mb</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-lg-3 control-label" for="status">Status</label>
                        <div class="col-lg-9">
                            <select name="status" id="status" class="form-control select-search" required>
                                <option value="">-- Pilih Status Aset --</option>
                                @foreach ($status as $stat)
                                    <option value="{{ $stat->id }}" @if (old('status', $detail->status->id) == $stat->id) {{ 'selected' }} @endif>{{ $stat->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">
                    <div class="col-xs-6">
                        <button type="button" class="btn btn-link" data-dismiss="modal"><i class="icon-arrow-left13"></i> Close</button>
                    </div>
                    <div class="col-xs-6 text-right">
                        <button type="submit" class="btn bg-teal-400 btn-labeled btn-labeled-right ml-10"><b><i class="icon-plus3"></i></b> Simpan</button>
                    </div>
                </div>
            </div>
        </form>
    </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/pickers/datepicker.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>
        $('.datepicker').datepicker({
            format: 'yyyy-mm-dd'
        });
        $('#code').focus();

        (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